Convert Custom_header_links setting to JSON Schema

.discourse-compatibility

@@ -1,3 +1,4 @@
+< 3.2.0.beta3: 06cf2c92bad0d2b67fbb2aaeb03bb5f296ff6316
 < 3.2.0.beta2: 061adfe5ae20abbb82be711d373894c30987ec75
 < 3.2.0.beta1-dev: c344d0f519bbb3660e306c50c0d1aa1a776c5e13
 3.1.999: bd0594108a1cfd6c11cb8af218dba9b211b44015

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

@@ -4,14 +4,7 @@
       {{if @outletArgs.attrs.topic 'custom-header-links--hide-links'}}"
   >
     {{#each this.links as |link|}}
-      <li
+      <li class="headerLink {{link.class}}">
-        class="headerLink
-          {{link.device}}
-          {{link.keepOnScrollClass}}
-          {{link.locale}}
-          {{link.linkClass}}
-          {{link.keepOnScroll}}"
-      >
         <a
           title={{link.anchorAttributes.title}}
           href={{link.anchorAttributes.href}}

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

@@ -1,40 +1,54 @@
 import Component from "@glimmer/component";
 import { dasherize } from "@ember/string";
+import { inject as service } from "@ember/service";
 
 export default class CustomHeaderLinks extends Component {
+  @service site;
+
   get shouldShow() {
-    return settings.Custom_header_links?.length > 0;
+    return JSON.parse(settings.links).length > 0;
   }
 
   get links() {
-    return settings.Custom_header_links.split("|").reduce((result, item) => {
+    return JSON.parse(settings.links).reduce((result, item) => {
-      let [
+      const {
-        linkText,
+        text: linkText,
-        linkTitle,
+        title: linkTitle,
-        linkHref,
+        url: linkHref,
-        device,
+        view,
-        target = "",
+        open_in_new_tab: openInNewTab,
-        keepOnScroll,
+        keep_on_scroll: keepOnScroll,
         locale,
-      ] = item.split(",").map((s) => s.trim());
+      } = item;
 
       if (!linkText || (locale && document.documentElement.lang !== locale)) {
         return result;
       }
 
-      const linkClass = `${dasherize(linkText)}-custom-header-links`; // legacy name
+      if (view === "desktop" && this.site.mobileView) {
+        return result;
+      }
+      if (view === "mobile" && !this.site.mobileView) {
+        return result;
+      }
+
+      const classes = [
+        `${dasherize(linkText)}-custom-header-links`, // legacy name
+        `headerLink--${keepOnScroll ? "keep" : "remove"}`,
+      ];
+
+      if (locale) {
+        classes.push(`headerLink--${locale}`);
+      }
 
       const anchorAttributes = {
         title: linkTitle,
         href: linkHref,
-        target: target === "self" ? "" : "_blank",
+        target: openInNewTab ? "_blank" : "self",
       };
 
       result.push({
-        device: `headerLink--${device}`,
+        class: classes.join(" "),
-        keepOnScroll: `headerLink--${keepOnScroll}`,
-        locale: `headerLink--${locale}`,
-        linkClass,
         anchorAttributes,
         linkText,
       });

migrations/settings/0001-convert-setting-to-json-schema.js

@@ -0,0 +1,35 @@
+export default function migrate(settings) {
+  if (settings.has("Custom_header_links")) {
+    const oldList = settings.get("Custom_header_links").split("|");
+
+    const newList = oldList.map((item) => {
+      let [text, title, url, view, target, hideOnScroll, locale] = item
+        .split(",")
+        .map((s) => s.trim());
+
+      switch (view) {
+        case "vmo":
+          view = "mobile";
+          break;
+        case "vdo":
+          view = "desktop";
+          break;
+        default:
+          view = "all";
+      }
+
+      return {
+        text,
+        title,
+        url,
+        view,
+        open_in_new_tab: target !== "self",
+        keep_on_scroll: hideOnScroll === "keep",
+        locale: locale || "",
+      };
+    });
+    settings.delete("Custom_header_links");
+    settings.set("links", JSON.stringify(newList));
+  }
+  return settings;
+}

settings.yml

@@ -1,9 +1,81 @@
-Custom_header_links:
+links:
-  type: list
-  list_type: simple
-  default: "External link, this link will open in a new tab, https://meta.discourse.org, vdo, blank, remove|Most Liked, Posts with the most amount of likes, /latest/?order=op_likes, vdo, self, keep|Privacy, Our Privacy Policy, /privacy, vdm, self, keep"
   description:
-    en: "Comma delimited in this order: link text, link title, URL, view, target, hide on scroll<br><b>Link text:</b> The text for the link<br><b>Link title:</b> the text that shows when the link is hovered<br><b>URL:</b> The path for the link (can be relative)<br><b>View:</b> vdm = desktop and mobile, vdo = desktop only, vmo = mobile only<br><b>Target:</b> blank = opens in a new tab, self = opens in the same tab<br><b>Hide on scroll:</b> remove = hides the link when the title is expanded on topic pages keep = keeps the link visible even when the title is visible on topic pages<br><b>Language:</b> blank = no locale assoaciated to the link, else insert a locale code (en, fr, de, ...)"
+    en: "Add or edit header links using the editor"
+  default: >-
+    [
+      {
+        "text": "External link",
+        "title": "this link will open in a new tab",
+        "url": "https://meta.discourse.org",
+        "view": "desktop",
+        "open_in_new_tab": true,
+        "keep_on_scroll": false,
+        "locale": ""
+      },
+      {
+        "text": "Most Liked",
+        "title": "Posts with the most amount of likes",
+        "url": "/latest/?order=op_likes",
+        "view": "desktop",
+        "open_in_new_tab": false,
+        "keep_on_scroll": true,
+        "locale": ""
+      },
+      {
+        "text": "Privacy",
+        "title": "Our Privacy Policy",
+        "url": "/privacy",
+        "view": "all",
+        "open_in_new_tab": false,
+        "keep_on_scroll": true,
+        "locale": ""
+      }
+    ]
+  json_schema: '
+    {
+      "type": "array",
+      "format": "tabs-top",
+      "title": "Links",
+      "items": {
+        "type": "object",
+        "title": "Link",
+        "properties": {
+          "text": {
+            "type": "string",
+            "title": "Text"
+          },
+          "title": {
+            "type": "string",
+            "title": "Title"
+          },
+          "url": {
+            "type": "string",
+            "title": "URL"
+          },
+          "view": {
+            "type": "string",
+            "title": "View",
+            "enum": ["desktop", "mobile", "all"]
+          },
+          "open_in_new_tab": {
+            "type": "boolean",
+            "title": "Opens in new tab",
+            "format": "checkbox"
+          },
+          "keep_on_scroll": {
+            "type": "boolean",
+            "title": "Keep on scroll",
+            "format": "checkbox"
+          },
+          "locale": {
+            "type": "string",
+            "title": "Language",
+            "description": "Associate this link to a locale"
+          }
+        }
+      }
+    }
+  '
 
 links_position:
   default: right