REFACTOR: move widget to an ember component (#34)

javascripts/discourse/components/custom-header-links.hbs

@@ -0,0 +1,25 @@
+{{#if this.shouldShow}}
+  <ul
+    class="custom-header-links
+      {{if @scrolledTopic 'custom-header-links--hide-links'}}"
+  >
+    {{#each this.links as |link|}}
+      <li
+        class="headerLink
+          {{link.device}}
+          {{link.keepOnScrollClass}}
+          {{link.locale}}
+          {{link.linkClass}}
+          {{link.keepOnScroll}}"
+      >
+        <a
+          title={{link.anchorAttributes.title}}
+          href={{link.anchorAttributes.href}}
+          target={{link.anchorAttributes.target}}
+        >
+          {{link.linkText}}
+        </a>
+      </li>
+    {{/each}}
+  </ul>
+{{/if}}

javascripts/discourse/components/custom-header-links.js

@@ -0,0 +1,45 @@
+import Component from "@glimmer/component";
+import { dasherize } from "@ember/string";
+
+export default class CustomHeaderLinks extends Component {
+  get shouldShow() {
+    return settings.Custom_header_links?.length > 0;
+  }
+
+  get links() {
+    return settings.Custom_header_links.split("|").reduce((result, item) => {
+      let [
+        linkText,
+        linkTitle,
+        linkHref,
+        device,
+        target = "",
+        keepOnScroll,
+        locale,
+      ] = item.split(",").map((s) => s.trim());
+
+      if (!linkText || (locale && document.documentElement.lang !== locale)) {
+        return result;
+      }
+
+      const linkClass = `${dasherize(linkText)}-custom-header-links`; // legacy name
+
+      const anchorAttributes = {
+        title: linkTitle,
+        href: linkHref,
+        target: target === "self" ? "" : "_blank",
+      };
+
+      result.push({
+        device: `headerLink--${device}`,
+        keepOnScroll: `headerLink--${keepOnScroll}`,
+        locale: `headerLink--${locale}`,
+        linkClass,
+        anchorAttributes,
+        linkText,
+      });
+
+      return result;
+    }, []);
+  }
+}