- { e.preventDefault(); setOpen(o => !o); }}
- onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); setOpen(o => !o); } }}>
- {label}
-
- {open && (
-
- );
-}
+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-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);
+ const wrapRef = useRef e.stopPropagation()}
- onMouseEnter={handlePanelEnter}
- onMouseLeave={handlePanelLeave}>
-
- )}
-
- {resolvedColumns.map((col, i) => (
-
-
- {col.header}
- {col.links.map((link, j) => (
-
- {link.logo && 
}
- {link.logoDark && 
}
-
- ))}
-
- {link.label}
- {link.description && {link.description}}
-
-
- ))}
-
+ { e.preventDefault(); setOpen(o => !o); }}
+ onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); setOpen(o => !o); } }}>
+ {label}
+
+ {open && (
+
+ );
+}
diff --git a/packages/docusaurus-theme/theme/NavbarItem/types/ResourcesPicker/index.tsx b/packages/docusaurus-theme/theme/NavbarItem/types/ResourcesPicker/index.tsx
new file mode 100644
index 00000000..264baae6
--- /dev/null
+++ b/packages/docusaurus-theme/theme/NavbarItem/types/ResourcesPicker/index.tsx
@@ -0,0 +1,132 @@
+import React, {useState, useRef, useEffect, useCallback} from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import clsx from 'clsx';
+
+const NF_LOGO_DEFAULT = 'https://raw.githubusercontent.com/netfoundry/branding/refs/heads/main/images/svg/icon/netfoundry-icon-color.svg';
+
+const YOUTUBE_ICON = ``;
+const DISCOURSE_ICON = ``;
+
+type Props = {
+ label?: string;
+ position?: 'left' | 'right';
+ className?: string;
+};
+
+export default function ResourcesPicker({label = 'Resources', className}: Props) {
+ const themeConfig = useThemeConfig() as any;
+ const consoleLogo = themeConfig?.netfoundry?.consoleLogo ?? NF_LOGO_DEFAULT;
+ const openzitiLogo = useBaseUrl('/img/openziti-sm-logo.svg');
+
+ const wrapRef = useRef e.stopPropagation()}
+ onMouseEnter={handlePanelEnter}
+ onMouseLeave={handlePanelLeave}>
+
+ )}
+
+ {resolvedColumns.map((col, i) => (
+
+
+ {col.header}
+ {col.links.map((link, j) => (
+
+ {link.logo && }
+ {link.logoDark && }
+
+ ))}
+
+ {link.label}
+ {link.description && {link.description}}
+
+
+ ))}
+
+ {}}
+ onClick={e => { e.preventDefault(); setOpen(o => !o); }}
+ onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); setOpen(o => !o); } }}>
+ {label}
+
+ {open && (
+
+ );
+}
diff --git a/packages/test-site/docusaurus.config.ts b/packages/test-site/docusaurus.config.ts
index 46610321..e042c020 100644
--- a/packages/test-site/docusaurus.config.ts
+++ b/packages/test-site/docusaurus.config.ts
@@ -176,38 +176,51 @@ export default {
{
label: 'zLAN',
to: '/docs/zlan',
- logo: 'https://netfoundry.io/docs/img/zlan-logo.svg',
+ logo: '/img/zlan-logo.svg',
description: 'Zero-trust access for OT networks.',
},
],
},
],
footer: {
- description: 'This is just a test site for the NetFoundry Docusaurus theme.',
+ description: 'Secure, high-performance networking for the modern era.',
+ copyright: `Copyright © 2026 NetFoundry Inc.`,
socialProps: {
githubUrl: 'https://github.com/netfoundry/',
youtubeUrl: 'https://youtube.com/netfoundry/',
linkedInUrl: 'https://www.linkedin.com/company/netfoundry/',
- twitterUrl: 'https://twitter.com/netfoundry/',
+ twitterUrl: 'https://x.com/netfoundry/',
},
+ documentationLinks: [
+ {href: '/docs/learn/quickstarts/services/ztha', label: 'Get started'},
+ {href: '/docs/reference/developer/api/', label: 'API reference'},
+ {href: '/docs/reference/developer/sdk/', label: 'SDK integration'},
+ ],
+ communityLinks: [
+ {href: 'https://github.com/openziti/ziti', label: 'GitHub'},
+ {href: 'https://openziti.discourse.group/', label: 'OpenZiti Discourse'},
+ {href: '/docs/openziti/policies/CONTRIBUTING', label: 'Contribute'},
+ ],
+ resourceLinks: [
+ {href: 'https://netfoundry.io/', label: 'NetFoundry'},
+ {href: 'https://netfoundry.io/blog/', label: 'NetFoundry Tech Blog'},
+ {href: 'https://blog.openziti.io', label: 'OpenZiti Tech Blog'},
+ ],
},
},
// Replace with your project's social card
image: 'https://netfoundry.io/wp-content/uploads/2024/07/netfoundry-logo-tag-color-stacked-1.svg',
navbar: {
hideOnScroll: false,
- title: 'NetFoundry Documentation',
+ title: 'NetFoundry Docs',
logo: {
alt: 'NetFoundry Logo',
src: 'https://raw.githubusercontent.com/netfoundry/branding/refs/heads/main/images/svg/icon/netfoundry-icon-color.svg',
},
items: [
- { type: 'custom-productPicker', position: 'left' },
- {
- to: '/docs',
- label: 'Main Docs',
- position: 'left',
- },
+ { type: 'custom-productPicker', position: 'left' },
+ { type: 'custom-resourcesPicker', position: 'left' },
+ { type: 'custom-iconLinks', position: 'right' },
],
},
prism: {
diff --git a/packages/test-site/package.json b/packages/test-site/package.json
index 815e9be9..79b28b49 100644
--- a/packages/test-site/package.json
+++ b/packages/test-site/package.json
@@ -18,6 +18,7 @@
"@docusaurus/preset-classic": "3.9.2",
"@docusaurus/theme-common": "3.9.2",
"@docusaurus/theme-mermaid": "^3.9.2",
+ "@docusaurus/theme-search-algolia": "3.9.2",
"@docusaurus/utils": "3.9.2",
"@mdx-js/react": "^3.0.0",
"@netfoundry/docusaurus-theme": "^0.1.2",
diff --git a/packages/test-site/remotes/openziti/docusaurus/static/img/openziti-sm-logo.svg b/packages/test-site/remotes/openziti/docusaurus/static/img/openziti-sm-logo.svg
new file mode 100644
index 00000000..d038e674
--- /dev/null
+++ b/packages/test-site/remotes/openziti/docusaurus/static/img/openziti-sm-logo.svg
@@ -0,0 +1,64 @@
+
+
\ No newline at end of file
diff --git a/packages/test-site/remotes/zlan/docusaurus/static/img/zlan-logo.svg b/packages/test-site/remotes/zlan/docusaurus/static/img/zlan-logo.svg
new file mode 100644
index 00000000..462d42d0
--- /dev/null
+++ b/packages/test-site/remotes/zlan/docusaurus/static/img/zlan-logo.svg
@@ -0,0 +1,54 @@
+
+
+
diff --git a/packages/test-site/src/custom/custom.css b/packages/test-site/src/custom/custom.css
index ca8a8153..85fea511 100644
--- a/packages/test-site/src/custom/custom.css
+++ b/packages/test-site/src/custom/custom.css
@@ -1,6 +1,5 @@
@import '@netfoundry/docusaurus-theme/css/tabs-v8-float.css';
-@import '@netfoundry/docusaurus-theme/css/layout.css';
:root {
--ifm-navbar-height: 60px;
@@ -18,6 +17,18 @@ body,
flex-direction: column;
}
+/* Separator between navbar logo and nav items */
+.navbar__brand::after {
+ content: '';
+ display: inline-block;
+ width: 1px;
+ height: 1.2em;
+ background: currentColor;
+ opacity: 0.2;
+ margin-left: 1rem;
+ vertical-align: middle;
+}
+
/* Docusaurus-specific utility class */
:global(.docusaurus-mt-lg) {
margin-top: 3rem;
@@ -59,6 +70,9 @@ body,
display: flex;
flex-direction: column;
+ article {
+ padding-bottom: 2em;
+ }
> div {
max-width: var(--ziti-landing-max-width);
width: 100%;
diff --git a/packages/test-site/src/pages/index.tsx b/packages/test-site/src/pages/index.tsx
index 8c4367f0..1cfa17cd 100644
--- a/packages/test-site/src/pages/index.tsx
+++ b/packages/test-site/src/pages/index.tsx
@@ -3,6 +3,7 @@ import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import clsx from 'clsx';
import styles from './landing.module.css';
+import {HeroBackground} from '@netfoundry/docusaurus-theme/ui';
const CYAN = '#22d3ee';
const GREEN = '#22c55e';
@@ -15,7 +16,7 @@ const products = [
{ id: 'frontdoor', title: 'Frontdoor', logo: `${IMG}/frontdoor-sm-logo.svg`, tag: 'Managed', accent: CYAN, link: '/docs/frontdoor', features: ['No agent or VPN required', 'Zero firewall rules', 'Identity-based access', 'Any app, any browser'], description: 'Secure, clientless access to any application — without a VPN or firewall rule. Expose nothing to the internet while giving authorized users instant access.' },
{ id: 'zrok', title: 'zrok', logo: `${IMG}/zrok-1.0.0-rocket-purple.svg`, tag: 'Open Source', accent: GREEN, link: '/docs/zrok', description: 'Geo-scale secure sharing built on the OpenZiti mesh. Share services, files, or HTTP endpoints peer-to-peer — no open ports, no NAT traversal tricks.' },
{ id: 'selfhosted', title: 'NetFoundry Self-Hosted', logo: `${IMG}/onprem-sm-logo.svg`, tag: 'Self-Hosted', accent: CYAN, link: '/docs/onprem', features: ['Full infrastructure control', 'Air-gap compatible', 'On-prem or any cloud', 'Enterprise SLA'], description: 'Deploy the full NetFoundry control plane and fabric in your own environment. Full sovereignty over your zero-trust infrastructure — on-prem, air-gapped, or any cloud.' },
- { id: 'zlan', title: 'zLAN', logo: `${IMG}/zlan-logo.svg`, tag: 'OT Security', accent: CYAN, link: '/docs/zlan', features: ['Deep OT/IT traffic visibility', 'Identity-aware micro-segmentation', 'Centralized zero-trust policy', 'Built on NetFoundry Self-Hosted'], description: 'Identity-aware micro-segmentation firewall for operational technology networks. Deep traffic visibility, centralized policy, and zero-trust access control for OT environments.' },
+ { id: 'zlan', title: 'zLAN', logo: '/img/zlan-logo.svg', tag: 'OT Security', accent: CYAN, link: '/docs/zlan', features: ['Deep OT/IT traffic visibility', 'Identity-aware micro-segmentation', 'Centralized zero-trust policy', 'Built on NetFoundry Self-Hosted'], description: 'Identity-aware micro-segmentation firewall for operational technology networks. Deep traffic visibility, centralized policy, and zero-trust access control for OT environments.' },
];
type Product = (typeof products)[number];
@@ -47,12 +48,13 @@ export default function Home(): JSX.Element {
return (
e.stopPropagation()}
+ onMouseEnter={handlePanelEnter}
+ onMouseLeave={handlePanelLeave}>
+
+ )}
+
+ {columns.map((col, i) => (
+
+
+ {col.header}
+ {col.links.map((link, j) => (
+
+ {'logoSrc' in link
+ ? 
+ :
+ }
+
+ ))}
+
+ {link.label}
+ {link.description}
+
+
+ ))}
+ NetFoundry Docs
-Secure, high-performance networking for the modern era.
+Secure your workloads with Identity-First Connectivity™
Get Started
- Request Demo
+ Request Demo