To give our local parkour community a space to talk and organize, I host a discourse instance with many customizations and automizations to ensure smooth weekly meetings and a good experience for first timers.

Over the past years, I came to dread discourse updates as something always breaks. This time, it was the topic banner.

We make heavy use of topic banners to offer one-click access to the next planned training. Sadly discourse does not allow users to click on banners by default. Previous versions supported a workaround by overriding the banner template. Version 3.4.0 migrates the banner component to a new way of defining components which removes support for overriding templates.

To fix this, I added the following initializer to our existing plugin for various customizations:

import { withPluginApi } from "discourse/lib/plugin-api";
import { htmlSafe } from "@ember/template";

export default {
  name: "clickable-banner",
  initialize() {
    withPluginApi("2.11.1", (api) => {
      api.modifyClass(
        "component:discourse-banner",
        (DiscourseBanner) =>
          class extends DiscourseBanner {
            get content() {
              const content = super.content;
              return htmlSafe(
                `<a style="color: inherit" href="/t/${super.banner.key}">${content}</a>`
              );
            }
          }
      );
    });
  },
};

This overrides the content getter of the banner component to include a link to the topic. It's not ideal, as the clickable area is constrained to the content. If I figure out how to override the complete glimmer template, I'll update this here.