repurpose for tags

discourse · Jul 27, 2019 · 6ac26fe · 6ac26fe
1 parent ab78b92
commit 6ac26fe
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 72 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,3 @@
-# discourse-category-banners
+# discourse-tag-banners
 
-A theme component to add category banners to your Discourse community. 
-
-More details here: https://meta.discourse.org/t/discourse-category-banners/86241
-
-
-![Category banner](https://discourse-meta.s3-us-west-1.amazonaws.com/original/3X/1/d/1d75ec58312e4a0b4d8b20b3272fca47f2b7247d.png)
+A theme component to add tag banners to your Discourse community.
diff --git a/about.json b/about.json
@@ -1,6 +1,6 @@
 {
-  "name": "discourse-category-banners",
-  "about_url": "https://meta.discourse.org/t/discourse-category-banners/86241",
+  "name": "discourse-tag-banners",
+  "about_url": "",
   "component": true,
-  "license_url": "https://meta.discourse.org/t/discourse-category-banners/86241"
-}
+  "license_url": ""
+}
diff --git a/common/common.scss b/common/common.scss
@@ -1,12 +1,20 @@
-div[class^="category-title-header"] {
+.tag-title-header {
   padding-top: 60px;
   display: flex;
   text-align: center;
   width: 100%;
   justify-content: center;
-  .category-title-contents {
-    max-width: 500px;
-    padding: 40px;
+  background: $primary-very-low;
+  min-height: 123px;
+  @media screen and (max-width: 450px) {
+    min-height: 70px;
+  }
+  .tag-title-contents {
+    max-width: 700px;
+    padding: 45px 40px 40px 40px;
+    @media screen and (max-width: 450px) {
+      padding: 20px;
+    }
     svg {
       height: 1.5em;
       width: 1.1em;
@@ -16,15 +24,15 @@ div[class^="category-title-header"] {
       display: inline;
     }
   }
-  .category-title-description {
+  .tag-title-description {
     a,
     a:visited {
       color: inherit;
       text-decoration: underline;
     }
   }
 }
-.category-header {
+.tag-banner {
   #main-outlet {
     padding-top: 20px;
   }

diff --git a/common/header.html b/common/header.html
@@ -4,58 +4,55 @@
   const { iconNode } = require("discourse-common/lib/icon-library");
   let lockIcon = iconNode('lock');
 
-  api.createWidget('category-header-widget', {
+  api.createWidget('tag-header-widget', {
       tagName: 'span',
       html(attrs, state) {
 
           const path = window.location.pathname;
-          let category;
 
-          const controller = container.lookup('controller:navigation/category');
-          category = controller.get("category");
+          if(/^\/tags\//.test(path)) {
+            const controller = container.lookup('controller:tags');
+            const hideMobile = (!settings.show_on_mobile && this.site.mobileView) ? "true" : hideMobile;
 
-          const isException = category &&
-          settings.exceptions.split("|").includes(category.name);
+            let tag;
+            let additionalTags;
 
-          if(/^\/c\//.test(path)) {
-              const hideMobile = (!settings.show_mobile && this.site.mobileView) ? "true" : hideMobile;
-              const subCat = (!settings.show_subcategory && category.parentCategory) ? "true" : subCat;
-              const noDesc = (settings.hide_if_no_description && !category.description_text) ? "true" : noDesc;
+            tag = controller.get("target.currentRoute.params.tag_id");
+            additionalTags = controller.get("target.currentRoute.params.additional_tags");
 
-              if(!isException && !noDesc && !subCat && !hideMobile) {
-                  $("body").addClass("category-header");
+            if(!hideMobile && tag != "none") {
 
-                  function catDesc() {
-                      if(settings.show_description) {
-                          return h('div.cooked', {innerHTML: category.description});
-                      }
-                  }
+            document.querySelector("body").classList.add("tag-banner")
 
-                  function ifProtected() {
-                      if(category.read_restricted) {
-                          return lockIcon;
-                      }
-                  }
+              if (additionalTags) {
+                var tagList = additionalTags.split("/");
+                var additionalTagNames = h('span', " & " + tagList.join(' & '));
+                var additionalNaming = tagList.map(function(e) {return 'tag-banner-' + e});
+                var additionalClasses = additionalNaming.join('.');
+              } else {
+                var additionalClasses = "single-tag";
+              }
 
-                  return h('div.category-title-header' + " ." + category.slug, {
-                      "attributes" : {
-                          "style" : "background-color: #" + category.color + "; color: #" + category.text_color + ";"
-                      }
-                  }, h('div.category-title-contents', [
-                  ifProtected(),
-                  h('h1', category.name),
-                  h('div.category-title-description',catDesc())
+              return h('div.tag-title-header'
+                + " .tag-banner-"
+                + tag
+                + " ."
+                + additionalClasses, h('div.tag-title-contents', [
+                  h('h1',  [
+                    h('span', tag),
+                    additionalTagNames
                   ]),
+                ]),
+             );
 
-                  );
-              }
           } else {
-              $("body").removeClass("category-header");
+            document.querySelector("body").classList.remove("tag-banner")
           }
+        }
       }
   }),
 
-  api.decorateWidget('category-header-widget:after', helper => {
+  api.decorateWidget('tag-header-widget:after', helper => {
       helper.widget.appEvents.on('page:changed', () => {
           helper.widget.scheduleRerender();
       });
@@ -64,7 +61,7 @@
 
 <script
   type="text/x-handlebars"
-  data-template-name="/connectors/below-site-header/category-header-widget"
+  data-template-name="/connectors/below-site-header/tag-header-widget"
 >
-  {{mount-widget widget="category-header-widget"}}
+  {{mount-widget widget="tag-header-widget"}}
 </script>
diff --git a/settings.yml b/settings.yml
@@ -1,20 +1,3 @@
-show_description: 
+show_on_mobile:
   default: true
-  description: 'Show description from "About This Category" post'
-
-show_mobile: 
-  default: true
-  description: 'Show banners on mobile'
-
-show_subcategory: 
-  default: true
-  description: 'Show banners for subcategories'
-
-hide_if_no_description: 
-  default: true
-  description: 'Hide banners if category description is not set'
-
-exceptions:
-  default: ""
-  type: list
-  description: "Banner will not show for these categories"
+  description: "Show tag banners on mobile devices"