DEV: improved implementation and bug fixes (#3)

common/common.scss

@@ -1,5 +1,17 @@
 @import "common/foundation/variables";
 
+.d-header {
+  &.hide-menus {
+    .headerLink:not(.keep) {
+      display: none;
+    }
+  }
+}
+
+.custom-header-links {
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
   .headerLink {
     list-style: none;
     a {
@@ -8,18 +20,8 @@
       font-size: $font-up-1;
     }
   }
+}
 
-.d-header {
-  &.hide-menus {
-    .headerLink:not(.keep) {
-      display: none;
-    }
-  }
-  .header-buttons {
-    display: flex;
-    align-items: center;
-  }
-}
 .desktop-view .vmo,
 .mobile-view .vdo {
   display: none !important;

common/header.html

@@ -1,30 +1,57 @@
 <script type="text/discourse-plugin" version="0.8.20">
-let customHeaderLinks = settings.Custom_header_links;
+  const customHeaderLinks = settings.Custom_header_links;
+
+  if (!customHeaderLinks.length) return;
+
+  const h = require("virtual-dom").h;
+  const headerLinks = [];
 
   customHeaderLinks.split("|").map(i => {
-  let seg = $.map(i.split(","), $.trim),
+    const seg = $.map(i.split(","), $.trim);
-    linkText = seg[0],
+    const linkText = seg[0];
-    linkTitle = seg[1],
+    const linkTitle = seg[1];
-    linkHref = seg[2],
+    const linkHref = seg[2];
-    deviceClass = "." + seg[3],
+    const deviceClass = `.${seg[3]}`;
-    linkTarget = seg[4] === "self" ? "" : "_blank",
+    const linkTarget = seg[4] === "self" ? "" : "_blank";
-    keepOnScrollClass = seg[5] === "keep" ? ".keep" : "";
+    const keepOnScrollClass = seg[5] === "keep" ? ".keep" : "";
+    const linkClass = `.${linkText.trim().toLowerCase().replace(/\s/gi, '-')}`;
 
-  api.decorateWidget("header-buttons:before", helper => {
+    if (!linkTarget) {
-    return helper.h(
+      headerLinks.push(
-      "li.headerLink" + deviceClass + keepOnScrollClass,
+        h(
-      helper.h(
+          `li.headerLink${deviceClass}${keepOnScrollClass}${linkClass}`,
+          h(
             "a",
             {
-          href: linkHref,
               title: linkTitle,
-          target: linkTarget,
+              href: linkHref
-          attributes: { "data-auto-route": "true" }
             },
             linkText
           )
+        )
       );
+    } else {
+      headerLinks.push(
+        h(
+          `li.headerLink${deviceClass}${keepOnScrollClass}${linkClass}`,
+          h(
+            "a",
+            {
+              title: linkTitle,
+              href: linkHref,
+              target: linkTarget
+            },
+            linkText
+          )
+        )
+      );
+    }
   });
+
+  api.decorateWidget("header-buttons:before", helper => {
+    return helper.h(
+      "ul.custom-header-links", headerLinks
+    );
   });
 
   api.decorateWidget("home-logo:after", helper => {