DEV: removes jQuery and improves implementation

DEV: removes jQuery and improves implementation

diff --git a/about.json b/about.json
index d7cb871..0a35bb4 100644
--- a/about.json
+++ b/about.json
@@ -1,5 +1,5 @@
 {
-  "name": "Header Links Theme Component",
+  "name": "Icon Header Links",
   "about_url": "https://meta.discourse.org/t/iconified-header-links/86307",
   "license_url": "https://github.com/hnb-ku/discourse-header-links/blob/master/LICENSE.txt",
   "component": true
diff --git a/common/common.scss b/common/common.scss
new file mode 100644
index 0000000..0b8553e
--- /dev/null
+++ b/common/common.scss
@@ -0,0 +1,11 @@
+.desktop-view {
+  .vmo {
+    display: none;
+  }
+}
+
+.mobile-view {
+  .vdo {
+    display: none;
+  }
+}
diff --git a/common/head_tag.html b/common/head_tag.html
deleted file mode 100644
index 246421b..0000000
--- a/common/head_tag.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<script type="text/discourse-plugin" version="0.4">
-const { iconNode } = require("discourse-common/lib/icon-library");
-
-api.decorateWidget("header-icons:before", helper => {
-  var hlt = settings.Header_links;
-  return hlt.split("|").map(i => {
-    const seg = $.map(i.split(","), $.trim);
-
-    return helper.h("li." + seg[3], [
-      helper.h(
-        "a.icon.btn-flat",
-        {
-          href: seg[2],
-          title: seg[0],
-          target: "_" + seg[4]
-        },
-        iconNode(seg[1].toLowerCase())
-      )
-    ]);
-  });
-});
-</script>
diff --git a/desktop/desktop.scss b/desktop/desktop.scss
deleted file mode 100644
index 2dbbcad..0000000
--- a/desktop/desktop.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.vmo {
-  display: none;
-}
diff --git a/javascripts/discourse/initializers/initialize-for-header-icon-links.js b/javascripts/discourse/initializers/initialize-for-header-icon-links.js
new file mode 100644
index 0000000..64a859d
--- /dev/null
+++ b/javascripts/discourse/initializers/initialize-for-header-icon-links.js
@@ -0,0 +1,43 @@
+import { withPluginApi } from "discourse/lib/plugin-api";
+import { iconNode } from "discourse-common/lib/icon-library";
+import { dasherize } from "@ember/string";
+
+export default {
+  name: "header-icon-links",
+  initialize() {
+    withPluginApi("0.8.41", api => {
+      try {
+        const splitLinks = settings.Header_links.split("|").filter(Boolean);
+
+        splitLinks.forEach(link => {
+          const fragments = link.split(",").map(fragment => fragment.trim());
+          const title = fragments[0];
+          const icon = iconNode(fragments[1].toLowerCase());
+          const href = fragments[2];
+          const className = `header-icon-${dasherize(fragments[0])}`;
+          const viewClass = fragments[3].toLowerCase();
+          const target = fragments[4].toLowerCase() === "blank" ? "_blank" : "";
+          const selector = `li.${className}.${viewClass}`;
+
+          api.decorateWidget("header-icons:before", helper => {
+            return helper.h(selector, [
+              helper.h(
+                "a.icon.btn-flat",
+                {
+                  href,
+                  title
+                },
+                icon
+              )
+            ]);
+          });
+        });
+      } catch (error) {
+        console.error(error);
+        console.error(
+          "There's an issue in the header icon links component. Check if your settings are entered correctly"
+        );
+      }
+    });
+  }
+};
diff --git a/mobile/mobile.scss b/mobile/mobile.scss
deleted file mode 100644
index ba396ab..0000000
--- a/mobile/mobile.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.vdo {
-  display: none;
-}
diff --git a/settings.yml b/settings.yml
index bf09ab4..4103be3 100644
--- a/settings.yml
+++ b/settings.yml
@@ -1,11 +1,24 @@
 Header_links:
   type: list
-  default: "Dektop-mobile link,fab-facebook,https://facebook.com,vdm,blank|Mobile-only link,fab-twitter,https://twitter.com,vmo,blank|Weather,temperature-low,https://www.weather.com"
+  default: "Dektop mobile link, fab-facebook, https://facebook.com, vdm, blank|Mobile-only link, fab-twitter, https://twitter.com, vmo, blank"
   description:
-    en: "Comma delimited in this order: Title,Icon,URL,View,Target. View can be:  visible on both desktop and mobile devices (vdm), Desktop only (vdo) or mobile only (vmo). Target can be: same tab (self) or new tab (blank)."
+    en: "Comma delimited in this order: <br>
+      <b>title, icon, URL, view, target</b>
+      <br>
+      <br>
+      <b>title</b>: the desired title you want the link to have (when hovered). <br>
+      <b>icon</b>: the icon you want the link to have. <br>
+      <b>View</b>:
+      <ul>
+      <li>visible on both desktop and mobile devices (vdm)</li>
+      <li>Desktop only (vdo).</li>
+      <li>mobile only (vmo).</li>
+      </ul>
+      <b>URL</b>: the desired URL you want the link to point to. <br>
+      <b>Target</b>: same tab (self) or new tab (blank)."
 Svg_icons:
   type: "list"
   list_type: "compact"
-  default: "fab-facebook|fab-twitter|temperature-low"
+  default: "fab-facebook|fab-twitter"
   description:
     en: "Include FontAwesome 5 icon classes for each icon used in the list."

GitHub sha: f6fbef18af2e1a06fcd68c9199df6c337fca2ce9