diff --git a/.discourse-compatibility b/.discourse-compatibility
new file mode 100644
index 0000000..8b93f2d
--- /dev/null
+++ b/.discourse-compatibility
@@ -0,0 +1 @@
+< 3.2.0.beta1-dev: c344d0f519bbb3660e306c50c0d1aa1a776c5e13
\ No newline at end of file
diff --git a/common/common.scss b/common/common.scss
index 3a73ba9..6ed5ad8 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -1,7 +1,8 @@
-.d-header {
- &.hide-menus {
- .headerLink:not(.keep) {
- display: none;
+@if $links_position == "right" {
+ .before-header-panel-outlet {
+ margin-left: auto;
+ + .panel {
+ margin-left: 0;
}
}
}
@@ -9,29 +10,31 @@
.custom-header-links {
display: inline-flex;
align-items: center;
- margin: 0;
+ margin-left: auto;
+ @if $links_position == "left" {
+ margin-left: 1em;
+ &--hide-links {
+ display: none;
+ }
+ }
+
.headerLink {
list-style: none;
a {
- padding: 6px 10px;
+ padding: 0.35em 0.6em;
color: var(--header_primary);
- font-size: $font-up-1;
+ font-size: var(--font-up-1);
}
}
-}
-.desktop-view .vmo,
-.mobile-view .vdo {
- display: none !important;
-}
-
-@if $links_position == left {
- .custom-header-links {
- margin-left: 1em;
- }
- .hide-menus {
- .custom-header-links {
+ &--hide-links {
+ .headerLink:not(.headerLink--keep) {
display: none;
}
}
}
+
+.desktop-view .headerLink--vmo,
+.mobile-view .headerLink--vdo {
+ display: none;
+}
diff --git a/javascripts/discourse/components/custom-header-links.hbs b/javascripts/discourse/components/custom-header-links.hbs
new file mode 100644
index 0000000..4038329
--- /dev/null
+++ b/javascripts/discourse/components/custom-header-links.hbs
@@ -0,0 +1,25 @@
+{{#if this.shouldShow}}
+
+{{/if}}
\ No newline at end of file
diff --git a/javascripts/discourse/components/custom-header-links.js b/javascripts/discourse/components/custom-header-links.js
new file mode 100644
index 0000000..934559f
--- /dev/null
+++ b/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;
+ }, []);
+ }
+}
diff --git a/javascripts/discourse/connectors/before-header-panel/custom-header-link-connector.hbs b/javascripts/discourse/connectors/before-header-panel/custom-header-link-connector.hbs
new file mode 100644
index 0000000..e006e1b
--- /dev/null
+++ b/javascripts/discourse/connectors/before-header-panel/custom-header-link-connector.hbs
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/javascripts/discourse/initializers/discourse-custom-header-links.js b/javascripts/discourse/initializers/discourse-custom-header-links.js
deleted file mode 100644
index 25cc9d9..0000000
--- a/javascripts/discourse/initializers/discourse-custom-header-links.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import { h } from "virtual-dom";
-import { withPluginApi } from "discourse/lib/plugin-api";
-import { wantsNewWindow } from "discourse/lib/intercept-click";
-import DiscourseURL from "discourse/lib/url";
-
-export default {
- name: "discourse-custom-header-links",
-
- initialize() {
- withPluginApi("0.8.20", (api) => {
- const customHeaderLinks = settings.Custom_header_links;
- if (!customHeaderLinks.length) {
- return;
- }
-
- const linksPosition =
- settings.links_position === "right"
- ? "header-buttons:before"
- : "home-logo:after";
-
- const headerLinks = [];
-
- customHeaderLinks
- .split("|")
- .filter(Boolean)
- .map((customHeaderLinksArray) => {
- const [
- linkText,
- linkTitle,
- linkHref,
- device,
- target,
- keepOnScroll,
- locale,
- ] = customHeaderLinksArray
- .split(",")
- .filter(Boolean)
- .map((x) => x.trim());
-
- const deviceClass = `.${device}`;
- const linkTarget = target === "self" ? "" : "_blank";
- const keepOnScrollClass = keepOnScroll === "keep" ? ".keep" : "";
- const linkClass = `.${linkText
- .toLowerCase()
- .replace(/\s/gi, "-")}-custom-header-links`;
-
- const localeClass = locale === undefined ? "" : `.${locale}`;
-
- const anchorAttributes = {
- title: linkTitle,
- href: linkHref,
- };
- if (linkTarget) {
- anchorAttributes.target = linkTarget;
- }
-
- if (
- locale !== undefined &&
- document.documentElement.lang &&
- document.documentElement.lang !== locale
- ) {
- return;
- }
-
- headerLinks.push(
- h(
- `li.headerLink${deviceClass}${keepOnScrollClass}${localeClass}${linkClass}`,
- h("a", anchorAttributes, linkText)
- )
- );
- });
-
- api.decorateWidget(linksPosition, (helper) => {
- return helper.h("ul.custom-header-links", headerLinks);
- });
-
- api.decorateWidget("home-logo:after", (helper) => {
- const dHeader = document.querySelector(".d-header");
-
- if (!dHeader) {
- return;
- }
-
- const isTitleVisible = helper.attrs.minimized;
- if (isTitleVisible) {
- dHeader.classList.add("hide-menus");
- } else {
- dHeader.classList.remove("hide-menus");
- }
- });
-
- if (settings.links_position === "left") {
- // if links are aligned left, we need to be able to open in a new tab
- api.reopenWidget("home-logo", {
- click(e) {
- if (e.target.id === "site-logo") {
- if (wantsNewWindow(e)) {
- return false;
- }
- e.preventDefault();
-
- DiscourseURL.routeToTag($(e.target).closest("a")[0]);
-
- return false;
- }
- },
- });
- }
- });
- },
-};