REFACTOR: Update from widget to glimmer component (#8)

about.json

@@ -1,6 +1,6 @@
 {
-  "name": "discourse-tag-banners",
+  "name": "Tag Banners",
   "component": true,
-  "about_url": "",
-  "license_url": ""
+  "about_url": "https://meta.discourse.org/t/tag-banners/124240",
+  "license_url": "https://github.com/discourse/discourse-tag-banners/blob/main/LICENSE"
 }

common/common.scss

@@ -4,10 +4,9 @@
   width: 100%;
   justify-content: center;
   background: var(--primary-very-low);
-  min-height: 10em; // prevents hop when tag name loads
 
   .tag-title-contents {
-    max-width: 700px;
+    max-width: 46em;
     padding: 3.5em 3em 3em;
 
     @media screen and (max-width: 450px) {

javascripts/discourse/components/discourse-tag-banners.hbs

@@ -0,0 +1,30 @@
+{{#if (not (and this.site.mobileView (not (theme-setting "show_on_mobile"))))}}
+  {{#if this.shouldRender}}
+    <div
+      {{did-insert this.getTagInfo}}
+      {{did-update this.getTagInfo this.shouldRender}}
+      {{will-destroy this.resetTag}}
+      class={{concat-class
+        "tag-title-header"
+        (concat "tag-banner-" this.formattedTagName)
+        this.additionalClass
+      }}
+    >
+      <div class="tag-title-contents">
+        <h1>
+          <span>{{this.formattedTagName}}</span>
+          {{#if this.formattedAdditionalTagNames}}
+            &amp;
+            {{this.formattedAdditionalTagNames}}
+          {{/if}}
+        </h1>
+        {{#unless this.isIntersection}}
+          {{! hide descriptions on tag intersections}}
+          {{#if (theme-setting "show_tag_description")}}
+            <p>{{this.tag.description}}</p>
+          {{/if}}
+        {{/unless}}
+      </div>
+    </div>
+  {{/if}}
+{{/if}}

javascripts/discourse/components/discourse-tag-banners.js

@@ -0,0 +1,78 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+
+export default class DiscourseTagBanners extends Component {
+  @service store;
+  @service router;
+  @service site;
+  @tracked tag = null;
+  @tracked keepDuringLoadingRoute = false;
+  @tracked isIntersection = false;
+
+  #formatTagName(tagName = "") {
+    // for intersections: tag1/tag2 => tag1 & tag2
+    tagName = tagName.replace(/\//g, " & ");
+
+    if (settings.remove_tag_hyphen) {
+      tagName = tagName.replace(/-/g, " ");
+    }
+    if (settings.remove_tag_underscore) {
+      tagName = tagName.replace(/_/g, " ");
+    }
+    return tagName;
+  }
+
+  get currentRouteParams() {
+    return this.router?.currentRoute?.params;
+  }
+
+  get shouldRender() {
+    return (
+      (this.currentRouteParams.tag_id !== "none" &&
+        this.currentRouteParams?.tag_id) ||
+      (this.keepDuringLoadingRoute &&
+        this.router.currentRoute.name.includes("loading"))
+    );
+  }
+
+  get formattedTagName() {
+    return this.#formatTagName(this.tag?.name);
+  }
+
+  get formattedAdditionalTagNames() {
+    const additionalTags = this.currentRouteParams.additional_tags;
+    return additionalTags ? this.#formatTagName(additionalTags) : "";
+  }
+
+  get additionalClass() {
+    if (this.formattedAdditionalTagNames === "") {
+      return "single-tag";
+    }
+
+    let tagList = this.formattedAdditionalTagNames.split(" & ");
+    return tagList.map((e) => `tag-banner-${e}`).join(" ");
+  }
+
+  @action
+  async getTagInfo() {
+    const tag = this.currentRouteParams?.tag_id;
+    if (tag) {
+      const result = await this.store.find("tag-info", tag);
+      this.tag = result;
+      this.isIntersection = this.currentRouteParams.additional_tags;
+      this.keepDuringLoadingRoute = true;
+    } else {
+      if (!this.router.currentRoute.name.includes("loading")) {
+        this.keepDuringLoadingRoute = false;
+      }
+    }
+  }
+
+  @action
+  resetTag() {
+    this.keepDuringLoadingRoute = false;
+    this.tag = null;
+  }
+}

javascripts/discourse/connectors/above-site-header/tag-header-widget.hbs

@@ -1,3 +1,3 @@
 {{#if (theme-setting "show_above_site_header")}}
-  {{mount-widget widget="tag-header-widget"}}
+  <DiscourseTagBanners />
 {{/if}}

javascripts/discourse/connectors/below-site-header/tag-header-widget.hbs

@@ -1,3 +1,3 @@
 {{#if (theme-setting "show_below_site_header")}}
-  {{mount-widget widget="tag-header-widget"}}
+  <DiscourseTagBanners />
 {{/if}}