Add a locale filter to links (#30)

* Add a locale attribute to custom header links

This attribute is to be set to a language code like 'fr', 'en' or 'de'.

* Filter out links which locale is different from the html document's

* prettier

* more syntax

---------

Co-authored-by: Lena Montenot <lena.montenot@commown.coop>
Co-authored-by: Jordan Vidrine <jordan@jordanvidrine.com>

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

@@ -24,8 +24,15 @@ export default {
         .split("|")
         .filter(Boolean)
         .map((customHeaderLinksArray) => {
-          const [linkText, linkTitle, linkHref, device, target, keepOnScroll] =
+          const [
-            customHeaderLinksArray
+            linkText,
+            linkTitle,
+            linkHref,
+            device,
+            target,
+            keepOnScroll,
+            locale,
+          ] = customHeaderLinksArray
             .split(",")
             .filter(Boolean)
             .map((x) => x.trim());
@@ -37,6 +44,8 @@ export default {
             .toLowerCase()
             .replace(/\s/gi, "-")}-custom-header-links`;
 
+          const localeClass = locale === "" ? "" : `.${locale}`;
+
           const anchorAttributes = {
             title: linkTitle,
             href: linkHref,
@@ -45,9 +54,17 @@ export default {
             anchorAttributes.target = linkTarget;
           }
 
+          if (
+            locale !== "" &&
+            document.documentElement.lang &&
+            document.documentElement.lang !== locale
+          ) {
+            return;
+          }
+
           headerLinks.push(
             h(
-              `li.headerLink${deviceClass}${keepOnScrollClass}${linkClass}`,
+              `li.headerLink${deviceClass}${keepOnScrollClass}${localeClass}${linkClass}`,
               h("a", anchorAttributes, linkText)
             )
           );

settings.yml

@@ -1,9 +1,9 @@
 Custom_header_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"
+  default: "External link, this link will open in a new tab, https://meta.discourse.org, vdo, blank, remove, en|Most Liked, Posts with the most amount of likes, /latest/?order=op_likes, vdo, self, keep, en|Privacy, Our Privacy Policy, /privacy, vdm, self, keep, en"
   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"
+    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, ...)"
 
 links_position:
   default: right