diff --git a/javascripts/discourse/components/custom-header-links.hbs b/javascripts/discourse/components/custom-header-links.hbs index 3b7cd72..989a1cc 100644 --- a/javascripts/discourse/components/custom-header-links.hbs +++ b/javascripts/discourse/components/custom-header-links.hbs @@ -12,12 +12,14 @@ > {{#each this.links as |link|}}
  • { - let [ - linkText, - linkTitle, - linkHref, - device, - target = "", - keepOnScroll, - locale, - ] = item.split(",").map((s) => s.trim()); + return settings.custom_header_links.reduce((result, link) => { + const linkText = link.text; + const linkTitle = link.title; + const linkHref = link.url; + const target = link.target; + const keepOnScroll = link.hide_on_scroll; + const locale = link.locale; + const device = link.view; if (!linkText || (locale && document.documentElement.lang !== locale)) { return result; @@ -33,7 +31,7 @@ export default class CustomHeaderLinks extends Component { result.push({ device: `headerLink--${device}`, keepOnScroll: `headerLink--${keepOnScroll}`, - locale: `headerLink--${locale}`, + locale: locale ? `headerLink--${locale}` : null, linkClass, anchorAttributes, linkText, diff --git a/locales/en.yml b/locales/en.yml index 44c20e2..503e7c2 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -1,5 +1,36 @@ en: theme_metadata: settings: - custom_header_links: "Comma delimited in this order: link text, link title, URL, view, target, hide on scroll
    Link text: The text for the link
    Link title: the text that shows when the link is hovered
    URL: The path for the link (can be relative)
    View: vdm = desktop and mobile, vdo = desktop only, vmo = mobile only
    Target: blank = opens in a new tab, self = opens in the same tab
    Hide on scroll: 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
    Language: blank = no locale assoaciated to the link, else insert a locale code (en, fr, de, ...)" links_position: "Note that when links are displayed on the left, they're automatically hidden while scrolling within topics to make room for the title" + custom_header_links: + description: Custom links to be displayed in the header + schema: + properties: + text: + label: Text + description: The text for the link + title: + label: Title + description: The title attribute for the link + url: + label: URL + description: The URL for the link + view: + label: View + description: | + vdm = desktop and mobile + vdo = desktop only + vmo = mobile only + target: + label: Target + description: | + blank = opens in a new tab + self = opens in the same tab + hide_on_scroll: + label: Hide on scroll + description: | + 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 + locale: + label: Locale + description: The locale in which the link should be displayed on. The link will be displayed on all locales if left blank. diff --git a/migrations/settings/0002-migrate-custom-header-links.js b/migrations/settings/0002-migrate-custom-header-links.js new file mode 100644 index 0000000..ba7ecad --- /dev/null +++ b/migrations/settings/0002-migrate-custom-header-links.js @@ -0,0 +1,33 @@ +export default function migrate(settings) { + const oldSetting = settings.get("custom_header_links"); + + if (oldSetting) { + const newSetting = oldSetting.split("|").map((link) => { + const [text, title, url, view, target, hide_on_scroll, locale] = link + .split(",") + .map((s) => s.trim()); + + const newLink = { + text, + title, + url, + view, + target, + hide_on_scroll, + locale, + }; + + Object.keys(newLink).forEach((key) => { + if (newLink[key] === undefined) { + delete newLink[key]; + } + }); + + return newLink; + }); + + settings.set("custom_header_links", newSetting); + } + + return settings; +} diff --git a/settings.yml b/settings.yml index 08f0128..71b6ddc 100644 --- a/settings.yml +++ b/settings.yml @@ -1,7 +1,65 @@ 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" + type: objects + default: + - text: "External link" + title: "This link will open in a new tab" + url: "https://meta.discourse.org" + view: "vdo" + target: "blank" + hide_on_scroll: "remove" + - text: "Most Liked" + title: "Posts with the most amount of likes" + url: "/latest/?order=op_likes" + view: "vdo" + target: "self" + hide_on_scroll: "keep" + - text: "Privacy" + title: "Our Privacy Policy" + url: "/privacy" + view: "vdm" + target: "self" + hide_on_scroll: "keep" + schema: + name: "link" + properties: + text: + type: string + required: true + validations: + min_length: 1 + max_length: 100 + title: + type: string + required: true + validations: + min_length: 1 + max_length: 1000 + url: + type: string + required: true + validations: + min_length: 1 + max_length: 2048 + url: true + view: + type: enum + choices: + - vdm + - vdo + - vmo + target: + type: enum + choices: + - blank + - self + hide_on_scroll: + type: enum + choices: + - remove + - keep + default: keep + locale: + type: string links_position: default: right diff --git a/spec/system/viewing_custom_header_links_spec.rb b/spec/system/viewing_custom_header_links_spec.rb index 6e00317..205f2ba 100644 --- a/spec/system/viewing_custom_header_links_spec.rb +++ b/spec/system/viewing_custom_header_links_spec.rb @@ -7,10 +7,7 @@ let!(:custom_header_link) { PageObjects::Components::CustomHeaderLink.new } context "when glimmer headers are enabled" do - before do - SiteSetting.experimental_glimmer_header_groups = - Group::AUTO_GROUPS[:everyone] - end + before { SiteSetting.experimental_glimmer_header_groups = Group::AUTO_GROUPS[:everyone] } it "should display the custom header links" do visit("/") @@ -20,19 +17,19 @@ expect(custom_header_link).to have_custom_header_link( "External link", href: "https://meta.discourse.org", - title: "this link will open in a new tab" + title: "This link will open in a new tab", ) expect(custom_header_link).to have_custom_header_link( "Most Liked", href: "/latest/?order=op_likes", - title: "Posts with the most amount of likes" + title: "Posts with the most amount of likes", ) expect(custom_header_link).to have_custom_header_link( "Privacy", href: "/privacy", - title: "Our Privacy Policy" + title: "Our Privacy Policy", ) end end @@ -48,19 +45,19 @@ expect(custom_header_link).to have_custom_header_link( "External link", href: "https://meta.discourse.org", - title: "this link will open in a new tab" + title: "This link will open in a new tab", ) expect(custom_header_link).to have_custom_header_link( "Most Liked", href: "/latest/?order=op_likes", - title: "Posts with the most amount of likes" + title: "Posts with the most amount of likes", ) expect(custom_header_link).to have_custom_header_link( "Privacy", href: "/privacy", - title: "Our Privacy Policy" + title: "Our Privacy Policy", ) end end diff --git a/test/unit/migrations/settings/0002-migrate-custom-header-links-test.js b/test/unit/migrations/settings/0002-migrate-custom-header-links-test.js new file mode 100644 index 0000000..0a02b99 --- /dev/null +++ b/test/unit/migrations/settings/0002-migrate-custom-header-links-test.js @@ -0,0 +1,52 @@ +import { module, test } from "qunit"; +import migrate from "../../../../migrations/settings/0002-migrate-custom-header-links"; + +module( + "Unit | Migrations | Settings | 0002-migrate-custom-header-links", + function () { + test("migrate", function (assert) { + const settings = new Map( + Object.entries({ + custom_header_links: + "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, en", + }) + ); + + const result = migrate(settings); + + const expectedResult = new Map( + Object.entries({ + custom_header_links: [ + { + text: "External link", + title: "this link will open in a new tab", + url: "https://meta.discourse.org", + view: "vdo", + target: "blank", + hide_on_scroll: "remove", + }, + { + text: "Most Liked", + title: "Posts with the most amount of likes", + url: "/latest/?order=op_likes", + view: "vdo", + target: "self", + hide_on_scroll: "keep", + }, + { + text: "Privacy", + title: "Our Privacy Policy", + url: "/privacy", + view: "vdm", + target: "self", + hide_on_scroll: "keep", + locale: "en", + }, + ], + }) + ); + + assert.deepEqual(Array.from(result), Array.from(expectedResult)); + }); + } +);