npm - @netfoundry/docusaurus-theme - Versions diffs - 0.8.2 → 0.10.0 - Mend

@netfoundry/docusaurus-theme 0.8.2 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

package/dist/theme/NavbarItem/types/IconLinks/index.js ADDED Viewed

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { DiscourseIcon, GitHubIcon } from '../../../../src/components/icons';
+const GITHUB_ROUTES = {
+    '/docs/openziti': 'https://github.com/openziti/ziti',
+    '/docs/zrok': 'https://github.com/openziti/zrok',
+};
+export default function IconLinks(_props) {
+    const [githubUrl, setGithubUrl] = useState(null);
+    useEffect(() => {
+        const check = () => {
+            const { pathname } = window.location;
+            const entry = Object.entries(GITHUB_ROUTES).find(([p]) => pathname.startsWith(p));
+            setGithubUrl(entry ? entry[1] : null);
+        };
+        check();
+        window.addEventListener('popstate', check);
+        return () => window.removeEventListener('popstate', check);
+    }, []);
+    return (_jsxs("div", { className: "nf-icon-links", children: [githubUrl && (_jsx("a", { href: githubUrl, target: "_blank", rel: "noopener noreferrer", className: "nf-icon-link", title: "GitHub", children: _jsx(GitHubIcon, {}) })), _jsx("a", { href: "https://openziti.discourse.group/", target: "_blank", rel: "noopener noreferrer", className: "nf-icon-link nf-icon-link--discourse", title: "Discourse", children: _jsx(DiscourseIcon, {}) })] }));
+}
+//# sourceMappingURL=index.js.map

package/dist/theme/NavbarItem/types/IconLinks/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../theme/NavbarItem/types/IconLinks/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAC,QAAQ,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AACjD,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAE3E,MAAM,aAAa,GAA2B;IAC5C,gBAAgB,EAAE,kCAAkC;IACpD,YAAY,EAAM,kCAAkC;CACrD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,MAAqC;IACrE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAEhE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,GAAG,EAAE;YACjB,MAAM,EAAC,QAAQ,EAAC,GAAG,MAAM,CAAC,QAAQ,CAAC;YACnC,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;YAClF,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACxC,CAAC,CAAC;QACF,KAAK,EAAE,CAAC;QACR,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;QAC3C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,eAAK,SAAS,EAAC,eAAe,aAC3B,SAAS,IAAI,CACZ,YAAG,IAAI,EAAE,SAAS,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,EAAC,SAAS,EAAC,cAAc,EAAC,KAAK,EAAC,QAAQ,YACnG,KAAC,UAAU,KAAG,GACZ,CACL,EACD,YAAG,IAAI,EAAC,mCAAmC,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,EAAC,SAAS,EAAC,sCAAsC,EAAC,KAAK,EAAC,WAAW,YACtJ,KAAC,aAAa,KAAG,GACf,IACA,CACP,CAAC;AACJ,CAAC"}

package/dist/theme/NavbarItem/types/ProductPicker/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../theme/NavbarItem/types/ProductPicker/index.tsx"],"names":[],"mappings":"~~AAMA~~,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgCF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAC,KAAkB,EAAE,SAAS,EAAC,EAAE,KAAK,~~2CAiG3E~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../theme/NavbarItem/types/ProductPicker/index.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgCF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAC,KAAkB,EAAE,SAAS,EAAC,EAAE,KAAK,2CA8B3E"}

package/dist/theme/NavbarItem/types/ProductPicker/index.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback } from 'react';
 import Link from '@docusaurus/Link';
 import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import { useThemeConfig } from '@docusaurus/theme-common';
-const HEADER_CLASSES = ['picker-header--nf-primary', 'picker-header--nf-secondary', 'picker-header--nf-tertiary'];
+import NavbarPicker from '../../NavbarPicker';
+const HEADER_CLASSES = ['picker-header--nf-tertiary', 'picker-header--nf-secondary', 'picker-header--nf-primary'];
 const NF_LOGO_DEFAULT = 'https://raw.githubusercontent.com/netfoundry/branding/refs/heads/main/images/svg/icon/netfoundry-icon-color.svg';
 const buildDefaultColumns = (img, consoleLogo) => [
     {
@@ -40,52 +40,6 @@ export default function ProductPicker({ label = 'Products', className }) {
     const columns = (themeConfig?.netfoundry?.productPickerColumns ?? [])
         .map((col, i) => ({ ...col, headerClass: HEADER_CLASSES[i] ?? '' }));
     const resolvedColumns = columns.length ? columns : buildDefaultColumns(img, consoleLogo);
-    const wrapRef = useRef(null);
-    const hasEnteredPanel = useRef(false);
-    const [open, setOpen] = useState(false);
-    const close = useCallback(() => {
-        setOpen(false);
-        hasEnteredPanel.current = false;
-    }, []);
-    // Close on outside click/touch
-    useEffect(() => {
-        const onOutside = (e) => {
-            if (!wrapRef.current?.contains(e.target))
-                close();
-        };
-        document.addEventListener('mousedown', onOutside);
-        document.addEventListener('touchstart', onOutside);
-        return () => {
-            document.removeEventListener('mousedown', onOutside);
-            document.removeEventListener('touchstart', onOutside);
-        };
-    }, [close]);
-    // Sync: close when another product picker opens
-    useEffect(() => {
-        const onOtherOpen = (e) => {
-            if (e.detail.label !== label)
-                close();
-        };
-        window.addEventListener('nf-picker:open', onOtherOpen);
-        return () => window.removeEventListener('nf-picker:open', onOtherOpen);
-    }, [label, close]);
-    const handleTriggerEnter = useCallback(() => {
-        hasEnteredPanel.current = false;
-        window.dispatchEvent(new CustomEvent('nf-picker:open', { detail: { label } }));
-        setOpen(true);
-    }, [label]);
-    // Stay open until user enters the panel — no timer
-    const handleTriggerLeave = useCallback(() => { }, []);
-    const handlePanelEnter = useCallback(() => {
-        hasEnteredPanel.current = true;
-    }, []);
-    const handlePanelLeave = useCallback(() => {
-        if (hasEnteredPanel.current)
-            close();
-    }, [close]);
-    return (_jsxs("div", { ref: wrapRef, className: clsx('navbar__item', { 'nf-picker--open': open }), children: [_jsx("a", { role: "button", href: "#", "aria-haspopup": "true", "aria-expanded": open, className: clsx('navbar__link', 'nf-picker-trigger', className), onMouseEnter: handleTriggerEnter, onMouseLeave: handleTriggerLeave, onClick: e => { e.preventDefault(); setOpen(o => !o); }, onKeyDown: e => { if (e.key === 'Enter') {
-                    e.preventDefault();
-                    setOpen(o => !o);
-                } }, children: label }), _jsx("div", { className: clsx('nf-picker-panel', { 'nf-picker-panel--hidden': !open }), onMouseDown: e => e.stopPropagation(), onMouseEnter: handlePanelEnter, onMouseLeave: handlePanelLeave, children: _jsx("div", { className: "picker-content", children: resolvedColumns.map((col, i) => (_jsxs("div", { className: "picker-column", children: [_jsx("span", { className: clsx('picker-header', col.headerClass), children: col.header }), col.links.map((link, j) => (_jsxs(Link, { to: link.to, className: "picker-link", children: [link.logo && _jsx("img", { src: link.logo, className: clsx('picker-logo', link.logoDark && 'picker-logo--light'), alt: "" }), link.logoDark && _jsx("img", { src: link.logoDark, className: "picker-logo picker-logo--dark", alt: "" }), _jsxs("div", { className: "picker-text", children: [_jsx("strong", { children: link.label }), link.description && _jsx("span", { children: link.description })] })] }, j)))] }, i))) }) })] }));
+    return (_jsx(NavbarPicker, { label: label, className: className, children: _jsx("div", { className: "picker-content", children: resolvedColumns.map((col, i) => (_jsxs("div", { className: "picker-column", children: [_jsx("span", { className: clsx('picker-header', col.headerClass), children: col.header }), col.links.map((link, j) => (_jsxs(Link, { to: link.to, className: "picker-link", children: [link.logo && _jsx("img", { src: link.logo, className: clsx('picker-logo', link.logoDark && 'picker-logo--light'), alt: "" }), link.logoDark && _jsx("img", { src: link.logoDark, className: "picker-logo picker-logo--dark", alt: "" }), _jsxs("div", { className: "picker-text", children: [_jsx("strong", { children: link.label }), link.description && _jsx("span", { children: link.description })] })] }, j)))] }, i))) }) }));
 }
 //# sourceMappingURL=index.js.map

package/dist/theme/NavbarItem/types/ProductPicker/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../theme/NavbarItem/types/ProductPicker/index.tsx"],"names":[],"mappings":";~~AAAA~~,~~OAAc,EAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,~~OAAO,~~CAAC;AACtE,OAAO,~~IAAI,MAAM,kBAAkB,CAAC;AACpC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,oBAAoB,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;~~AAsBxD~~,MAAM,cAAc,GAAG,CAAC,~~2BAA2B~~,EAAE,6BAA6B,EAAE,~~4BAA4B~~,CAAC,CAAC;AAClH,MAAM,eAAe,GAAG,iHAAiH,CAAC;AAE1I,MAAM,mBAAmB,GAAG,CAAC,GAAW,EAAE,WAAmB,EAAkB,EAAE,CAAC;IAChF;QACE,MAAM,EAAE,eAAe;QACvB,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;QAC9B,KAAK,EAAE;YACL,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE,GAAG,EAAmB,IAAI,EAAE,WAAW,EAA2B,WAAW,EAAE,wDAAwD,EAAE;YAC5K,EAAE,KAAK,EAAE,WAAW,EAAW,EAAE,EAAE,iBAAiB,EAAK,IAAI,EAAE,GAAG,GAAG,wBAAwB,EAAQ,WAAW,EAAE,oCAAoC,EAAE;SACzJ;KACF;IACD;QACE,MAAM,EAAE,aAAa;QACrB,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;QAC9B,KAAK,EAAE;YACL,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,GAAG,GAAG,uBAAuB,EAA2D,WAAW,EAAE,8CAA8C,EAAE;YACtM,EAAE,KAAK,EAAE,MAAM,EAAM,EAAE,EAAE,YAAY,EAAM,IAAI,EAAE,GAAG,GAAG,+BAA+B,EAAE,QAAQ,EAAE,GAAG,GAAG,8BAA8B,EAAE,WAAW,EAAE,gDAAgD,EAAE;SACxM;KACF;IACD;QACE,MAAM,EAAE,yBAAyB;QACjC,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;QAC9B,KAAK,EAAE;YACL,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,GAAG,qBAAqB,~~EAAE~~,WAAW,EAAE,gDAAgD,EAAE;~~YAClJ~~,EAAE,KAAK,EAAE,MAAM,EAAS,EAAE,EAAE,YAAY,EAAS,IAAI,EAAE,GAAG,GAAG,qBAAqB,~~EAAM~~,WAAW,EAAE,oCAAoC,EAAE;~~SAC5I~~;KACF;CACF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAC,KAAK,GAAG,UAAU,EAAE,SAAS,EAAQ;IAC1E,MAAM,EAAC,UAAU,EAAC,GAAG,oBAAoB,EAAE,CAAC;IAC5C,MAAM,WAAW,GAAG,cAAc,EAAS,CAAC;IAC5C,MAAM,WAAW,GAAG,WAAW,EAAE,UAAU,EAAE,WAAW,IAAI,eAAe,CAAC;IAC5E,MAAM,GAAG,GAAG,GAAG,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC;IACxD,MAAM,OAAO,GAAmB,CAAC,WAAW,EAAE,UAAU,EAAE,oBAAoB,IAAI,EAAE,CAAC;SAClF,GAAG,CAAC,CAAC,GAAQ,EAAE,CAAS,EAAE,EAAE,CAAC,CAAC,EAAC,GAAG,GAAG,EAAE,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,IAAI,EAAE,EAAC,CAAC,CAAC,CAAC;IAClF,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;~~IACzF~~,~~MAAM,~~OAAO,~~GAAS~~,~~MAAM~~,CAAiB,IAAI,CAAC,CAAC;IACnD,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;IAClC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,+BAA+B;IAC/B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,CAAC,CAA0B,EAAE,EAAE;YAC/C,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC;gBAAE,KAAK,EAAE,CAAC;QAC5D,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QAClD,QAAQ,CAAC,gBAAgB,CAAC,YAAY,~~EAAE~~,~~SAAS,CAAC,CAAC;QACnD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;YACrD,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QACxD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,~~KAAK,~~CAAC,CAAC,CAAC;IAEZ,gDAAgD;IAChD,SAAS,CAAC,GAAG,~~EAAE~~;QACb~~,~~MAAM,WAAW,GAAG,CAAC,CAAM,EAAE,EAAE;YAC7B,IAAI,CAAC,CAAC,MAAM,CAAC,~~KAAK,~~KAAK,KAAK;gBAAE,KAAK,~~EAAE,CAAC;QACxC,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnB,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1C,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;QAChC,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,gBAAgB,EAAE,EAAC,MAAM,EAAE,EAAC,KAAK,EAAC,EAAC,CAAC,CAAC,CAAC;QAC3E,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,mDAAmD;IACnD,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE,GAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAErD,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,eAAe,CAAC,OAAO;YAAE,KAAK,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,eACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,~~IAAI,CAAC,cAAc,EAAE,EAAC,iBAAiB,EAAE,IAAI,EAAC,CAAC,aAC1D,YACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,GAAG,mBACM,MAAM,mBACL,IAAI,EACnB,~~SAAS,~~EAAE~~,IAAI,CAAC,cAAc,EAAE,mBAAmB,EAAE,SAAS,CAAC,EAC/D,YAAY,EAAE,kBAAkB,EAChC,YAAY,EAAE,kBAAkB,EAChC,OAAO,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACvD,SAAS,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oBAAC,CAAC,CAAC,cAAc,EAAE,CAAC;oBAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBAAC,CAAC,CAAC,CAAC,YACnF,KAAK,GACJ,EACJ,cACE,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAC,yBAAyB,EAAE,CAAC,IAAI,EAAC,CAAC,EACtE,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACrC,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,YAC9B,cAAK,SAAS,EAAC,gBAAgB,~~YAC1B~~,eAAe,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CAC/B,eAAa,SAAS,EAAC,eAAe,aACpC,eAAM,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,CAAC,WAAW,CAAC,YAAG,GAAG,CAAC,MAAM,GAAQ,EAC3E,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAC1B,MAAC,IAAI,IAAS,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,SAAS,EAAC,aAAa,aAC/C,IAAI,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,QAAQ,IAAI,oBAAoB,CAAC,EAAE,GAAG,EAAC,EAAE,GAAG,EAClH,IAAI,CAAC,QAAQ,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,EAAC,+BAA+B,EAAC,GAAG,EAAC,EAAE,GAAG,EAC9F,eAAK,SAAS,EAAC,aAAa,aAC1B,2BAAS,IAAI,CAAC,KAAK,GAAU,EAC5B,IAAI,CAAC,WAAW,IAAI,yBAAO,IAAI,CAAC,WAAW,GAAQ,IAChD,KANG,CAAC,CAOL,CACR,CAAC,KAXM,CAAC,CAYL,CACP,CAAC,GACE,~~GACJ~~,~~IACF~~,~~CACP,~~CAAC;AACJ,CAAC"}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../theme/NavbarItem/types/ProductPicker/index.tsx"],"names":[],"mappings":"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"}

package/dist/theme/NavbarItem/types/ResourcesPicker/index.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+type Props = {
+    label?: string;
+    position?: 'left' | 'right';
+    className?: string;
+};
+export default function ResourcesPicker({ label, className }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/NavbarItem/types/ResourcesPicker/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../theme/NavbarItem/types/ResourcesPicker/index.tsx"],"names":[],"mappings":"AAqDA,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAC,KAAmB,EAAE,SAAS,EAAC,EAAE,KAAK,2CA4B9E"}

package/dist/theme/NavbarItem/types/ResourcesPicker/index.js ADDED Viewed

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from '@docusaurus/Link';
+import { useThemeConfig } from '@docusaurus/theme-common';
+import NavbarPicker from '../../NavbarPicker';
+import { DiscourseIcon, YouTubeIcon } from '../../../../src/components/icons';
+const NF_LOGO_DEFAULT = 'https://raw.githubusercontent.com/netfoundry/branding/refs/heads/main/images/svg/icon/netfoundry-icon-color.svg';
+const OPENZITI_LOGO_DEFAULT = 'https://netfoundry.io/docs/img/openziti-sm-logo.svg';
+function isLogoLink(link) {
+    return 'logoSrc' in link;
+}
+function ResourceLink({ link }) {
+    return (_jsxs(Link, { to: link.href, className: "picker-link", target: "_blank", rel: "noopener noreferrer", children: [isLogoLink(link) ? (_jsxs("span", { style: { position: 'relative', display: 'inline-flex', flexShrink: 0, marginRight: '0.8rem', width: 32, height: 32 }, children: [_jsx("img", { src: link.logoSrc, style: { width: 32, height: 32, objectFit: 'contain' }, alt: "" }), link.badge && (_jsx("span", { style: { position: 'absolute', bottom: -2, right: -4, width: 14, height: 14, display: 'block' }, children: link.badge }))] })) : (_jsx("span", { className: "picker-logo", children: link.icon })), _jsxs("div", { className: "picker-text", children: [_jsx("strong", { children: link.label }), _jsx("span", { children: link.description })] })] }));
+}
+export default function ResourcesPicker({ label = 'Resources', className }) {
+    const themeConfig = useThemeConfig();
+    const consoleLogo = themeConfig?.netfoundry?.consoleLogo ?? NF_LOGO_DEFAULT;
+    const openzitiLogo = themeConfig?.netfoundry?.openzitiLogo ?? OPENZITI_LOGO_DEFAULT;
+    const youtubeBadge = _jsx(YouTubeIcon, { width: 14, height: 14 });
+    const learnLinks = [
+        { label: 'NetFoundry Blog', description: 'Latest news, updates, and insights from NetFoundry.', href: 'https://netfoundry.io/blog/', logoSrc: consoleLogo },
+        { label: 'OpenZiti Tech Blog', description: 'Technical articles and community updates.', href: 'https://blog.openziti.io/', logoSrc: openzitiLogo },
+    ];
+    const communityLinks = [
+        { label: 'NetFoundry YouTube', description: 'Video tutorials, demos, and technical deep dives.', href: 'https://www.youtube.com/c/NetFoundry', logoSrc: consoleLogo, badge: youtubeBadge },
+        { label: 'OpenZiti YouTube', description: 'OpenZiti community videos and project updates.', href: 'https://www.youtube.com/openziti', logoSrc: openzitiLogo, badge: youtubeBadge },
+        { label: 'OpenZiti Discourse', description: 'Ask questions and connect with the community.', href: 'https://openziti.discourse.group/', icon: _jsx(DiscourseIcon, { width: 32, height: 32 }) },
+    ];
+    return (_jsx(NavbarPicker, { label: label, className: className, panelClassName: "nf-picker-panel--narrow", autoPosition: true, children: _jsxs("div", { className: "picker-column", children: [_jsx("span", { className: "picker-header picker-header--nf-primary", style: { color: 'var(--ifm-color-primary)' }, children: "Learn & Engage" }), learnLinks.map((link, i) => _jsx(ResourceLink, { link: link }, i)), _jsx("span", { className: "picker-header picker-header--nf-secondary", style: { marginTop: '0.75rem' }, children: "Community & Support" }), communityLinks.map((link, i) => _jsx(ResourceLink, { link: link }, i))] }) }));
+}
+//# sourceMappingURL=index.js.map

package/dist/theme/NavbarItem/types/ResourcesPicker/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../theme/NavbarItem/types/ResourcesPicker/index.tsx"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@netfoundry/docusaurus-theme",
-  "version": "0.8.2",
+  "version": "0.10.0",
   "description": "NetFoundry Docusaurus theme with shared layout, footer, and styling",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
@@ -12,7 +12,7 @@
   "scripts": {
     "clean": "node scripts/clean.mjs",
     "build": "yarn clean && tsc && yarn build:css",
-    "watch": "tsc --watch",
+    "watch": "node scripts/watch.mjs",
     "build:css": "node scripts/build-css.mjs",
     "test": "jest",
     "prepublishOnly": "yarn build && yarn test"

package/theme/NavbarItem/ComponentTypes.tsx CHANGED Viewed

@@ -1,4 +1,6 @@
 import ProductPicker from './types/ProductPicker';
+import ResourcesPicker from './types/ResourcesPicker';
+import IconLinks from './types/IconLinks';
 // @theme-original resolves to OUR OWN file in a plugin theme (Docusaurus sets
 // both @theme and @theme-original to the plugin file). @theme-init resolves to
@@ -11,4 +13,6 @@ const ComponentTypesOrig = require('@theme-init/NavbarItem/ComponentTypes').defa
 export default {
   ...ComponentTypesOrig,
   'custom-productPicker': ProductPicker,
+  'custom-resourcesPicker': ResourcesPicker,
+  'custom-iconLinks': IconLinks,
 };

package/theme/NavbarItem/NavbarPicker.tsx ADDED Viewed

@@ -0,0 +1,94 @@
+import React, {useState, useRef, useEffect, useCallback, ReactNode} from 'react';
+import clsx from 'clsx';
+type Props = {
+  label: string;
+  className?: string;
+  panelClassName?: string;
+  /** Compute left offset via getBoundingClientRect so the panel stays on-screen.
+   *  Use this for right-side navbar items where CSS positioning would clip. */
+  autoPosition?: boolean;
+  children: ReactNode;
+};
+export default function NavbarPicker({label, className, panelClassName, autoPosition = false, children}: Props) {
+  const wrapRef         = useRef<HTMLDivElement>(null);
+  const hasEnteredPanel = useRef(false);
+  const [open, setOpen] = useState(false);
+  const [panelLeft, setPanelLeft] = useState<number | undefined>(undefined);
+  const close = useCallback(() => {
+    setOpen(false);
+    hasEnteredPanel.current = false;
+  }, []);
+  // Close on outside click/touch
+  useEffect(() => {
+    const onOutside = (e: MouseEvent | TouchEvent) => {
+      if (!wrapRef.current?.contains(e.target as Node)) close();
+    };
+    document.addEventListener('mousedown', onOutside);
+    document.addEventListener('touchstart', onOutside);
+    return () => {
+      document.removeEventListener('mousedown', onOutside);
+      document.removeEventListener('touchstart', onOutside);
+    };
+  }, [close]);
+  // Close when another picker opens
+  useEffect(() => {
+    const onOtherOpen = (e: any) => {
+      if (e.detail.label !== label) close();
+    };
+    window.addEventListener('nf-picker:open', onOtherOpen);
+    return () => window.removeEventListener('nf-picker:open', onOtherOpen);
+  }, [label, close]);
+  const handleTriggerEnter = useCallback(() => {
+    hasEnteredPanel.current = false;
+    if (autoPosition && wrapRef.current) {
+      const rect = wrapRef.current.getBoundingClientRect();
+      const PANEL_MAX_WIDTH = 430;
+      const MARGIN = 16;
+      const rightEdge = rect.left + PANEL_MAX_WIDTH;
+      const overflow = rightEdge - (window.innerWidth - MARGIN);
+      setPanelLeft(overflow > 0 ? rect.left - overflow : rect.left);
+    }
+    window.dispatchEvent(new CustomEvent('nf-picker:open', {detail: {label}}));
+    setOpen(true);
+  }, [label, autoPosition]);
+  const handlePanelEnter = useCallback(() => { hasEnteredPanel.current = true; }, []);
+  const handlePanelLeave = useCallback(() => { if (hasEnteredPanel.current) close(); }, [close]);
+  const panelStyle = autoPosition && panelLeft !== undefined
+    ? {left: panelLeft, right: 'auto', transform: 'none'} as React.CSSProperties
+    : undefined;
+  return (
+    <div ref={wrapRef} className={clsx('navbar__item', {'nf-picker--open': open})}>
+      <a
+        role="button"
+        href="#"
+        aria-haspopup="true"
+        aria-expanded={open}
+        className={clsx('navbar__link', 'nf-picker-trigger', className)}
+        onMouseEnter={handleTriggerEnter}
+        onMouseLeave={() => {}}
+        onClick={e => { e.preventDefault(); setOpen(o => !o); }}
+        onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); setOpen(o => !o); } }}>
+        {label}
+      </a>
+      {open && (
+        <div
+          className={clsx('nf-picker-panel', panelClassName)}
+          style={panelStyle}
+          onMouseDown={e => e.stopPropagation()}
+          onMouseEnter={handlePanelEnter}
+          onMouseLeave={handlePanelLeave}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

package/theme/NavbarItem/types/IconLinks/index.tsx ADDED Viewed

@@ -0,0 +1,35 @@
+import React, {useState, useEffect} from 'react';
+import {DiscourseIcon, GitHubIcon} from '../../../../src/components/icons';
+const GITHUB_ROUTES: Record<string, string> = {
+  '/docs/openziti': 'https://github.com/openziti/ziti',
+  '/docs/zrok':     'https://github.com/openziti/zrok',
+};
+export default function IconLinks(_props: {position?: 'left' | 'right'}) {
+  const [githubUrl, setGithubUrl] = useState<string | null>(null);
+  useEffect(() => {
+    const check = () => {
+      const {pathname} = window.location;
+      const entry = Object.entries(GITHUB_ROUTES).find(([p]) => pathname.startsWith(p));
+      setGithubUrl(entry ? entry[1] : null);
+    };
+    check();
+    window.addEventListener('popstate', check);
+    return () => window.removeEventListener('popstate', check);
+  }, []);
+  return (
+    <div className="nf-icon-links">
+      {githubUrl && (
+        <a href={githubUrl} target="_blank" rel="noopener noreferrer" className="nf-icon-link" title="GitHub">
+          <GitHubIcon />
+        </a>
+      )}
+      <a href="https://openziti.discourse.group/" target="_blank" rel="noopener noreferrer" className="nf-icon-link nf-icon-link--discourse" title="Discourse">
+        <DiscourseIcon />
+      </a>
+    </div>
+  );
+}

package/theme/NavbarItem/types/ProductPicker/index.tsx CHANGED Viewed

@@ -1,154 +1,88 @@
-import React, {useState, useRef, useEffect, useCallback} from 'react';
-import Link from '@docusaurus/Link';
-import clsx from 'clsx';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import {useThemeConfig} from '@docusaurus/theme-common';
-export type PickerLink = {
-  label: string;
-  to: string;
-  logo?: string;
-  logoDark?: string;
-  description?: string;
-};
-export type PickerColumn = {
-  header: string;
-  headerClass?: string;
-  links: PickerLink[];
-};
-type Props = {
-  label?: string;
-  position?: 'left' | 'right';
-  className?: string;
-};
-const HEADER_CLASSES = ['picker-header--nf-primary', 'picker-header--nf-secondary', 'picker-header--nf-tertiary'];
-const NF_LOGO_DEFAULT = 'https://raw.githubusercontent.com/netfoundry/branding/refs/heads/main/images/svg/icon/netfoundry-icon-color.svg';
-const buildDefaultColumns = (img: string, consoleLogo: string): PickerColumn[] => [
-  {
-    header: 'Managed Cloud',
-    headerClass: HEADER_CLASSES[0],
-    links: [
-      { label: 'NetFoundry Console', to: '#',                  logo: consoleLogo,                          description: 'Cloud-managed orchestration and global fabric control.' },
-      { label: 'Frontdoor',          to: '/docs/frontdoor',    logo: `${img}/frontdoor-sm-logo.svg`,       description: 'Secure application access gateway.' },
-    ],
-  },
-  {
-    header: 'Open Source',
-    headerClass: HEADER_CLASSES[1],
-    links: [
-      { label: 'OpenZiti', to: '/docs/openziti', logo: `${img}/openziti-sm-logo.svg`,                                                          description: 'Programmable zero-trust mesh infrastructure.' },
-      { label: 'zrok',     to: '/docs/zrok',     logo: `${img}/zrok-1.0.0-rocket-purple.svg`, logoDark: `${img}/zrok-1.0.0-rocket-green.svg`, description: 'Secure peer-to-peer sharing built on OpenZiti.' },
-    ],
-  },
-  {
-    header: 'Your own infrastructure',
-    headerClass: HEADER_CLASSES[2],
-    links: [
-      { label: 'Self-Hosted', to: '/docs/selfhosted', logo: `${img}/onprem-sm-logo.svg`, description: 'Deploy the full stack in your own environment.' },
-      { label: 'zLAN',        to: '/docs/zlan',        logo: `${img}/zlan/zlan-logo.svg`,     description: 'Zero-trust access for OT networks.' },
-    ],
-  },
-];
-export default function ProductPicker({label = 'Products', className}: Props) {
-  const {siteConfig} = useDocusaurusContext();
-  const themeConfig = useThemeConfig() as any;
-  const consoleLogo = themeConfig?.netfoundry?.consoleLogo ?? NF_LOGO_DEFAULT;
-  const img = `${siteConfig.url}${siteConfig.baseUrl}img`;
-  const columns: PickerColumn[] = (themeConfig?.netfoundry?.productPickerColumns ?? [])
-    .map((col: any, i: number) => ({...col, headerClass: HEADER_CLASSES[i] ?? ''}));
-  const resolvedColumns = columns.length ? columns : buildDefaultColumns(img, consoleLogo);
-  const wrapRef       = useRef<HTMLDivElement>(null);
-  const hasEnteredPanel = useRef(false);
-  const [open, setOpen] = useState(false);
-  const close = useCallback(() => {
-    setOpen(false);
-    hasEnteredPanel.current = false;
-  }, []);
-  // Close on outside click/touch
-  useEffect(() => {
-    const onOutside = (e: MouseEvent | TouchEvent) => {
-      if (!wrapRef.current?.contains(e.target as Node)) close();
-    };
-    document.addEventListener('mousedown', onOutside);
-    document.addEventListener('touchstart', onOutside);
-    return () => {
-      document.removeEventListener('mousedown', onOutside);
-      document.removeEventListener('touchstart', onOutside);
-    };
-  }, [close]);
-  // Sync: close when another product picker opens
-  useEffect(() => {
-    const onOtherOpen = (e: any) => {
-      if (e.detail.label !== label) close();
-    };
-    window.addEventListener('nf-picker:open', onOtherOpen);
-    return () => window.removeEventListener('nf-picker:open', onOtherOpen);
-  }, [label, close]);
-  const handleTriggerEnter = useCallback(() => {
-    hasEnteredPanel.current = false;
-    window.dispatchEvent(new CustomEvent('nf-picker:open', {detail: {label}}));
-    setOpen(true);
-  }, [label]);
-  // Stay open until user enters the panel — no timer
-  const handleTriggerLeave = useCallback(() => {}, []);
-  const handlePanelEnter = useCallback(() => {
-    hasEnteredPanel.current = true;
-  }, []);
-  const handlePanelLeave = useCallback(() => {
-    if (hasEnteredPanel.current) close();
-  }, [close]);
-  return (
-    <div
-      ref={wrapRef}
-      className={clsx('navbar__item', {'nf-picker--open': open})}>
-      <a
-        role="button"
-        href="#"
-        aria-haspopup="true"
-        aria-expanded={open}
-        className={clsx('navbar__link', 'nf-picker-trigger', className)}
-        onMouseEnter={handleTriggerEnter}
-        onMouseLeave={handleTriggerLeave}
-        onClick={e => { e.preventDefault(); setOpen(o => !o); }}
-        onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); setOpen(o => !o); } }}>
-        {label}
-      </a>
-      <div
-        className={clsx('nf-picker-panel', {'nf-picker-panel--hidden': !open})}
-        onMouseDown={e => e.stopPropagation()}
-        onMouseEnter={handlePanelEnter}
-        onMouseLeave={handlePanelLeave}>
-        <div className="picker-content">
-            {resolvedColumns.map((col, i) => (
-              <div key={i} className="picker-column">
-                <span className={clsx('picker-header', col.headerClass)}>{col.header}</span>
-                {col.links.map((link, j) => (
-                  <Link key={j} to={link.to} className="picker-link">
-                    {link.logo && <img src={link.logo} className={clsx('picker-logo', link.logoDark && 'picker-logo--light')} alt="" />}
-                    {link.logoDark && <img src={link.logoDark} className="picker-logo picker-logo--dark" alt="" />}
-                    <div className="picker-text">
-                      <strong>{link.label}</strong>
-                      {link.description && <span>{link.description}</span>}
-                    </div>
-                  </Link>
-                ))}
-              </div>
-            ))}
-          </div>
-      </div>
-    </div>
-  );
-}
+import React from 'react';
+import Link from '@docusaurus/Link';
+import clsx from 'clsx';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import NavbarPicker from '../../NavbarPicker';
+export type PickerLink = {
+  label: string;
+  to: string;
+  logo?: string;
+  logoDark?: string;
+  description?: string;
+};
+export type PickerColumn = {
+  header: string;
+  headerClass?: string;
+  links: PickerLink[];
+};
+type Props = {
+  label?: string;
+  position?: 'left' | 'right';
+  className?: string;
+};
+const HEADER_CLASSES = ['picker-header--nf-tertiary', 'picker-header--nf-secondary', 'picker-header--nf-primary'];
+const NF_LOGO_DEFAULT = 'https://raw.githubusercontent.com/netfoundry/branding/refs/heads/main/images/svg/icon/netfoundry-icon-color.svg';
+const buildDefaultColumns = (img: string, consoleLogo: string): PickerColumn[] => [
+  {
+    header: 'Managed Cloud',
+    headerClass: HEADER_CLASSES[0],
+    links: [
+      { label: 'NetFoundry Console', to: '#',                  logo: consoleLogo,                          description: 'Cloud-managed orchestration and global fabric control.' },
+      { label: 'Frontdoor',          to: '/docs/frontdoor',    logo: `${img}/frontdoor-sm-logo.svg`,       description: 'Secure application access gateway.' },
+    ],
+  },
+  {
+    header: 'Open Source',
+    headerClass: HEADER_CLASSES[1],
+    links: [
+      { label: 'OpenZiti', to: '/docs/openziti', logo: `${img}/openziti-sm-logo.svg`,                                                          description: 'Programmable zero-trust mesh infrastructure.' },
+      { label: 'zrok',     to: '/docs/zrok',     logo: `${img}/zrok-1.0.0-rocket-purple.svg`, logoDark: `${img}/zrok-1.0.0-rocket-green.svg`, description: 'Secure peer-to-peer sharing built on OpenZiti.' },
+    ],
+  },
+  {
+    header: 'Your own infrastructure',
+    headerClass: HEADER_CLASSES[2],
+    links: [
+      { label: 'Self-Hosted', to: '/docs/selfhosted', logo: `${img}/onprem-sm-logo.svg`,    description: 'Deploy the full stack in your own environment.' },
+      { label: 'zLAN',        to: '/docs/zlan',        logo: `${img}/zlan/zlan-logo.svg`,   description: 'Zero-trust access for OT networks.' },
+    ],
+  },
+];
+export default function ProductPicker({label = 'Products', className}: Props) {
+  const {siteConfig} = useDocusaurusContext();
+  const themeConfig = useThemeConfig() as any;
+  const consoleLogo = themeConfig?.netfoundry?.consoleLogo ?? NF_LOGO_DEFAULT;
+  const img = `${siteConfig.url}${siteConfig.baseUrl}img`;
+  const columns: PickerColumn[] = (themeConfig?.netfoundry?.productPickerColumns ?? [])
+    .map((col: any, i: number) => ({...col, headerClass: HEADER_CLASSES[i] ?? ''}));
+  const resolvedColumns = columns.length ? columns : buildDefaultColumns(img, consoleLogo);
+  return (
+    <NavbarPicker label={label} className={className}>
+      <div className="picker-content">
+        {resolvedColumns.map((col, i) => (
+          <div key={i} className="picker-column">
+            <span className={clsx('picker-header', col.headerClass)}>{col.header}</span>
+            {col.links.map((link, j) => (
+              <Link key={j} to={link.to} className="picker-link">
+                {link.logo && <img src={link.logo} className={clsx('picker-logo', link.logoDark && 'picker-logo--light')} alt="" />}
+                {link.logoDark && <img src={link.logoDark} className="picker-logo picker-logo--dark" alt="" />}
+                <div className="picker-text">
+                  <strong>{link.label}</strong>
+                  {link.description && <span>{link.description}</span>}
+                </div>
+              </Link>
+            ))}
+          </div>
+        ))}
+      </div>
+    </NavbarPicker>
+  );
+}