FEATURE: Show tag descriptions (#3)

discourse · Feb 15, 2022 · a260ee5 · a260ee5
1 parent 947087e
commit a260ee5
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 10 deletions.
diff --git a/common/common.scss b/common/common.scss
@@ -11,7 +11,7 @@
     padding: 3.5em 3em 3em;
 
     @media screen and (max-width: 450px) {
-      padding: 1.5px;
+      padding: 1.5em;
     }
     svg {
       height: 1.5em;
@@ -22,6 +22,9 @@
       display: inline;
       margin: 0;
     }
+    p:empty {
+      display: none;
+    }
   }
   .tag-title-description {
     a,
@@ -36,3 +39,12 @@
     padding-top: 1.5em;
   }
 }
+
+.mobile-view {
+  .tag-title-header {
+    min-height: 3em; // prevents hop when tag name loads
+    p {
+      margin-top: 0;
+    }
+  }
+}
diff --git a/javascripts/discourse/widgets/tag-header-widget.js b/javascripts/discourse/widgets/tag-header-widget.js
@@ -4,14 +4,28 @@ import { h } from "virtual-dom";
 
 export default createWidget("tag-header-widget", {
   tagName: "span",
+
+  buildKey: () => `tag-header-widget`,
+
+  defaultState() {
+    return { loaded: false, tag: null };
+  },
+
+  getTagInfo(tag) {
+    this.store.find("tag-info", tag).then((result) => {
+      this.state.tag = result;
+      this.state.loaded = true;
+      this.scheduleRerender();
+    });
+  },
+
   html() {
     const router = getOwner(this).lookup("router:main");
     const route = router.currentRoute;
+    const hideMobile =
+      !settings.show_on_mobile && this.site.mobileView ? "true" : hideMobile;
 
     if (route && route.params && route.params.hasOwnProperty("tag_id")) {
-      const hideMobile =
-        !settings.show_on_mobile && this.site.mobileView ? "true" : hideMobile;
-
       let tag = route.params.tag_id;
       let additionalTags = route.params.additional_tags;
 
@@ -27,6 +41,7 @@ export default createWidget("tag-header-widget", {
 
         let additionalTagNames;
         let additionalClass;
+        let tagDescription;
 
         if (additionalTags) {
           let tagList = additionalTags.split("/");
@@ -39,13 +54,28 @@ export default createWidget("tag-header-widget", {
           additionalClass = "single-tag";
         }
 
-        return h(
-          `div.tag-title-header .tag-banner-${tag} .${additionalClass}`,
+        if (!this.state.loaded) {
+          this.getTagInfo(tag);
+        } else {
+          if (this.state.tag.name != tag) {
+            // update the tag description when the route's tag changes
+            this.getTagInfo(tag);
+          }
 
-          h("div.tag-title-contents", [
-            h("h1", [h("span", tag), additionalTagNames]),
-          ])
-        );
+          if (additionalTags || !settings.show_tag_description) {
+            tagDescription = "";
+          } else {
+            tagDescription = this.state.tag.description;
+          }
+
+          return h(
+            `div.tag-title-header .tag-banner-${tag} .${additionalClass}`,
+            h("div.tag-title-contents", [
+              h("h1", [h("span", tag), additionalTagNames]),
+              h("p", tagDescription),
+            ])
+          );
+        }
       } else {
         document.querySelector("body").classList.remove("tag-banner");
       }

diff --git a/settings.yml b/settings.yml
@@ -2,6 +2,10 @@ show_on_mobile:
   default: true
   description: "Show tag banners on mobile devices"
 
+show_tag_description:
+  default: true
+  description: "Show tag description when available"
+
 show_above_site_header:
   default: false
   type: bool