initial commit

about.json

@@ -0,0 +1,5 @@
+{
+  "name": "Discourse-Category-Headers",
+  "about_url": "",
+  "license_url": ""
+}

common/common.scss

@@ -0,0 +1,16 @@
+.category-title-header {
+  padding-top: 60px;
+  display: flex;
+  text-align: center;
+  width: 100%;
+  justify-content: center;
+  .category-title-contents {
+    max-width: 500px;
+    padding: 40px 0;
+  }
+}
+.category-header {
+ #main-outlet {
+     padding-top: 20px;
+ }
+}

common/header.html

@@ -0,0 +1,53 @@
+<script type="text/discourse-plugin" version="0.8">
+  const container = Discourse.__container__;    
+  const { h } = require('virtual-dom');
+ 
+  api.createWidget('category-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");
+     
+      const isException = category && 
+      settings.exceptions.split("|").includes(category.name);
+
+      if(/^\/c\//.test(path) && !isException) {
+          $("body").addClass("category-header");  
+          
+            function catDesc() {
+              if(settings.show_description) {
+                return h('p', category.description_text);
+              }
+            }
+          
+          return h('div.category-title-header', {
+              "attributes" : {
+                  "style" : "background-color: #" + category.color + "; color: #" + category.text_color + ";"
+              }
+
+          }, h('div.category-title-contents', [
+                  h('h1', category.name),   
+                  catDesc()
+              ])
+          );
+          } else {
+              $("body").removeClass("category-header");
+          }   
+      }      
+  }),
+
+  api.decorateWidget('category-header-widget:after', helper => {
+      helper.widget.appEvents.on('page:changed', () => {
+          helper.widget.scheduleRerender();
+      });
+  });
+
+</script> 
+
+<script type='text/x-handlebars' data-template-name='/connectors/below-site-header/category-header-widget'>
+  {{mount-widget widget="category-header-widget"}}
+</script>

settings.yml

@@ -0,0 +1,8 @@
+show_description: 
+  default: true
+  description: 'Show description from "About This Category" post'
+
+exceptions:
+  default: support
+  type: list
+  description: "Banner will not show for these categories"