FEATURE: integration with category banners (#9)

.github/workflows/discourse-theme.yml

@@ -0,0 +1,11 @@
+name: Discourse Theme
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  ci:
+    uses: discourse/.github/.github/workflows/discourse-theme.yml@v1

common/common.scss

@@ -47,3 +47,35 @@
     }
   }
 }
+
+// category banner integration
+
+.tag-banner__text-only {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-down-4);
+  font-weight: normal;
+
+  .d-icon {
+    font-size: var(--font-down-3);
+    margin-right: 0.33em;
+  }
+
+  .discourse-tag,
+  .discourse-tag.bullet,
+  .discourse-tag.box,
+  .discourse-tag.simple {
+    margin: 0;
+    color: currentColor;
+    &:before {
+      background: currentColor;
+    }
+  }
+
+  .discourse-tag.box {
+    background: transparent;
+    font-size: var(--font-down-1);
+    box-shadow: 0 0 0 1px currentColor;
+  }
+}

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

@@ -0,0 +1,23 @@
+<div
+  class={{concat-class
+    "tag-title-header"
+    (concat "tag-banner-" @formattedTagName)
+    @additionalClass
+  }}
+>
+  <div class="tag-title-contents">
+    <h1>
+      <span>{{@formattedTagName}}</span>
+      {{#if @formattedAdditionalTagNames}}
+        &amp;
+        {{@formattedAdditionalTagNames}}
+      {{/if}}
+    </h1>
+    {{#unless @isIntersection}}
+      {{! hide descriptions on tag intersections}}
+      {{#if (theme-setting "show_tag_description")}}
+        <p>{{@tag.description}}</p>
+      {{/if}}
+    {{/unless}}
+  </div>
+</div>

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

@@ -0,0 +1,5 @@
+import Component from "@ember/component";
+
+export default class DiscourseTagBannersPresentation extends Component {
+  tagName = ""; // removing an extra tag that is added by default
+}

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

@@ -0,0 +1,10 @@
+<div class="tag-banner__text-only">
+  {{#if (eq this.site.siteSettings.tag_style "simple")}}
+    {{d-icon "tag"}}
+  {{/if}}
+  {{discourse-tag @formattedTagName}}
+  {{#if @formattedAdditionalTagNames}}
+    &amp;
+    {{@formattedAdditionalTagNames}}
+  {{/if}}
+</div>

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

@@ -0,0 +1,5 @@
+import Component from "@ember/component";
+
+export default class DiscourseTagBannersTextOnly extends Component {
+  tagName = ""; // removing an extra tag that is added by default
+}

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

@@ -1,30 +1,25 @@
-{{#if (not (and this.site.mobileView (not (theme-setting "show_on_mobile"))))}}
+{{#if (not (and this.site.mobileView (theme-setting "show_on_mobile")))}}
   {{#if this.shouldRender}}
     <div
+      class="tag-banner-container"
       {{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>
+      {{#if this.categoryBannerPresence.isPresent}}
+        <DiscourseTagBannersTextOnly
+          @formattedTagName={{this.formattedTagName}}
+          @formattedAdditionalTagNames={{this.formattedAdditionalTagNames}}
+        />
+      {{else}}
+        <DiscourseTagBannersPresentation
+          @formattedTagName={{this.formattedTagName}}
+          @formattedAdditionalTagNames={{this.formattedAdditionalTagNames}}
+          @isIntersection={{this.isIntersection}}
+          @tag={{this.tag}}
+          @additionalClass={{this.additionalClass}}
+        />
+      {{/if}}
     </div>
   {{/if}}
 {{/if}}

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

@@ -2,15 +2,26 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
+import { getOwner } from "discourse-common/lib/get-owner";
 
 export default class DiscourseTagBanners extends Component {
   @service store;
   @service router;
   @service site;
+  @tracked categoryBannerPresence = null;
   @tracked tag = null;
   @tracked keepDuringLoadingRoute = false;
   @tracked isIntersection = false;
 
+  constructor() {
+    super(...arguments);
+
+    // this prevents a failure if the category banner component is not installed
+    this.categoryBannerPresence = getOwner(this).lookup(
+      "service:categoryBannerPresence"
+    );
+  }
+
   #formatTagName(tagName = "") {
     // for intersections: tag1/tag2 => tag1 & tag2
     tagName = tagName.replace(/\//g, " & ");

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

@@ -1,3 +1,5 @@
 {{#if (theme-setting "show_above_site_header")}}
-  <DiscourseTagBanners />
+  {{#unless this.categoryBannerPresence.isPresent}}
+    <DiscourseTagBanners />
+  {{/unless}}
 {{/if}}

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

@@ -0,0 +1,16 @@
+import Component from "@ember/component";
+import { tracked } from "@glimmer/tracking";
+import { getOwner } from "discourse-common/lib/get-owner";
+
+export default class extends Component {
+  @tracked categoryBannerPresence = null;
+
+  constructor() {
+    super(...arguments);
+
+    // this prevents a failure if the category banner component is not installed
+    this.categoryBannerPresence = getOwner(this).lookup(
+      "service:categoryBannerPresence"
+    );
+  }
+}

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

@@ -1,3 +1,5 @@
 {{#if (theme-setting "show_below_site_header")}}
-  <DiscourseTagBanners />
+  {{#unless this.categoryBannerPresence.isPresent}}
+    <DiscourseTagBanners />
+  {{/unless}}
 {{/if}}