REFACTOR: full component refactoring

- drops jquery
- uses new codelayout structure
- more explicit site setting
- apply code standards
- various cleanups
- do not show an empty category-title-desription if we don't show the category description

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "eslint-config-discourse",
+  "globals": {
+    "settings": true
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+yarn-error.log

.template-lintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  plugins: ["ember-template-lint-plugin-discourse"],
+  extends: "discourse:recommended"
+};

common/common.scss

@@ -4,18 +4,22 @@ div[class^="category-title-header"] {
   text-align: center;
   width: 100%;
   justify-content: center;
+
   .category-title-contents {
     max-width: 500px;
     padding: 40px;
-    svg {
+
+    .d-icon-lock {
       height: 1.5em;
       width: 1.1em;
       margin-right: 0.25em;
     }
-    h1 {
+
+    .category-title {
       display: inline;
     }
   }
+
   .category-title-description {
     a,
     a:visited {
@@ -24,6 +28,7 @@ div[class^="category-title-header"] {
     }
   }
 }
+
 .category-header {
   #main-outlet {
     padding-top: 20px;

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

@@ -0,0 +1 @@
+{{mount-widget widget="category-header-widget"}}

javascripts/discourse/initializers/discourse-category-banners.js.es6

@@ -0,0 +1,15 @@
+import { withPluginApi } from "discourse/lib/plugin-api";
+
+export default {
+  name: "discourse-category-banners",
+
+  initialize() {
+    withPluginApi("0.8", (api) => {
+      api.decorateWidget("category-header-widget:after", (helper) => {
+        helper.widget.appEvents.on("page:changed", () => {
+          helper.widget.scheduleRerender();
+        });
+      });
+    });
+  },
+};

javascripts/discourse/widgets/category-header-widget.js.es6

@@ -0,0 +1,73 @@
+import { h } from "virtual-dom";
+import { iconNode } from "discourse-common/lib/icon-library";
+import { createWidget } from "discourse/widgets/widget";
+
+function buildCategory(category) {
+  const content = [];
+
+  if (category.read_restricted) {
+    content.push(iconNode("lock"));
+  }
+
+  content.push(h("h1.category-title", category.name));
+
+  if (settings.show_description) {
+    content.push(
+      h(
+        "div.category-title-description",
+        h("div.cooked", { innerHTML: category.description })
+      )
+    );
+  }
+
+  return content;
+}
+
+export default createWidget("category-header-widget", {
+  tagName: "span.discourse-category-banners",
+
+  html() {
+    const path = window.location.pathname;
+    const category = this.register
+      .lookup("controller:navigation/category")
+      .get("category");
+
+    if (!category) {
+      return;
+    }
+
+    const isException = settings.exceptions
+      .split("|")
+      .filter(Boolean)
+      .includes(category.name);
+
+    if (/^\/c\//.test(path)) {
+      const hideMobile = !settings.show_mobile && this.site.mobileView;
+      const isSubCategory =
+        !settings.show_subcategory && category.parentCategory;
+      const hasNoCategoryDescription =
+        settings.hide_if_no_description && !category.description_text;
+
+      if (
+        !isException &&
+        !hasNoCategoryDescription &&
+        !isSubCategory &&
+        !hideMobile
+      ) {
+        document.body.classList.add("category-header");
+
+        return h(
+          `div.category-title-header.category-banner-${category.slug}`,
+          {
+            attributes: {
+              style: `background-color: #${category.color}; color: #${category.text_color};`,
+            },
+          },
+          h("div.category-title-contents", buildCategory(category))
+        );
+      }
+    } else {
+      document.body.classList.remove("category-header");
+    }
+  },
+});

package.json

@@ -0,0 +1,7 @@
+{
+  "author": "Discourse",
+  "license": "MIT",
+  "devDependencies": {
+    "eslint-config-discourse": "latest"
+  }
+}

settings.yml

@@ -18,4 +18,4 @@ exceptions:
   default: ""
   type: list
   list_type: simple
-  description: "Banner will not show for these categories"
+  description: "Banner will not show for these categories NAMES. This is case sensitive."