Render the category descriptions as HTML

discourse · Apr 10, 2019 · ab78b92 · ab78b92
1 parent 82812ff
commit ab78b92
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 74 deletions.
diff --git a/common/common.scss b/common/common.scss
@@ -6,20 +6,26 @@ div[class^="category-title-header"] {
   justify-content: center;
   .category-title-contents {
     max-width: 500px;
-    padding: 40px 40px 30px;
+    padding: 40px;
     svg {
       height: 1.5em;
       width: 1.1em;
-      margin-right: .25em;
+      margin-right: 0.25em;
     }
     h1 {
-      text-transform: capitalize;
-      display: inline;      
+      display: inline;
+    }
+  }
+  .category-title-description {
+    a,
+    a:visited {
+      color: inherit;
+      text-decoration: underline;
     }
   }
 }
 .category-header {
- #main-outlet {
-     padding-top: 20px;
- }
-}
+  #main-outlet {
+    padding-top: 20px;
+  }
+}
diff --git a/common/header.html b/common/header.html
@@ -1,68 +1,70 @@
 <script type="text/discourse-plugin" version="0.8">
-    const container = Discourse.__container__;    
-    const { h } = require('virtual-dom');
-    const { iconNode } = require("discourse-common/lib/icon-library");
-    let lockIcon = iconNode('lock');
-
-    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)) {
-                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;
-
-                if(!isException && !noDesc && !subCat && !hideMobile) {
-                    $("body").addClass("category-header");  
-
-                    function catDesc() {
-                        if(settings.show_description) {
-                            return h('p', category.description_text);
-                        }
-                    }
-
-                    function ifProtected() {
-                        if(category.read_restricted) {
-                            return lockIcon;                    
-                        }
-                    }
-
-                    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())
-                    ]),
-
-                    );
-                }
-            } else {
-                $("body").removeClass("category-header");
-            }   
-        }      
-    }),
-
-    api.decorateWidget('category-header-widget:after', helper => {
-        helper.widget.appEvents.on('page:changed', () => {
-            helper.widget.scheduleRerender();
-        });
-    });
-
-</script> 
+  const container = Discourse.__container__;
+  const { h } = require('virtual-dom');
+  const { iconNode } = require("discourse-common/lib/icon-library");
+  let lockIcon = iconNode('lock');
 
-<script type='text/x-handlebars' data-template-name='/connectors/below-site-header/category-header-widget'>
-    {{mount-widget widget="category-header-widget"}}
-</script>
+  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)) {
+              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;
+
+              if(!isException && !noDesc && !subCat && !hideMobile) {
+                  $("body").addClass("category-header");
+
+                  function catDesc() {
+                      if(settings.show_description) {
+                          return h('div.cooked', {innerHTML: category.description});
+                      }
+                  }
+
+                  function ifProtected() {
+                      if(category.read_restricted) {
+                          return lockIcon;
+                      }
+                  }
+
+                  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())
+                  ]),
+
+                  );
+              }
+          } 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>