How do I use images from assets in HTML of a Glimmer-based theme component?

Dev
5

With the hints here and some help from the ask.discourse.com bot I’ve managed to get it working:

  • Here’s the relevant commit on top of what the discourse_theme CLI generated.
  • Here’s the difference to my previous unsuccessful attempt mentioned in the top post.

Thank you, @NateDhaliwal!

Key things I struggled with on the way here:

  • In the templates, neither arbitrary JavaScript expressions (such as function calls) nor filter expressions (of form some-transormation-function someVariableOrLiteral) work in the double curly braces. Only single variables can be interpolated there.
  • For one of the two assets, I had forgotten to include the directory name assets/ in the corresponding file path value in about.json. This failed silently, resulting in the corresponding setting to be undefined, which I guess caused the whole template to be silently omitted or something.
  • At one point during development, the theme component synched by discourse_theme watch ... had no effect, whether in preview or explicitly activated. Letting discourse_theme watch ... create a new copy of the component on the instance (and deleting the previous copy) rectified that. Not sure what exactly had happened there.