Skip to content
Open
33 changes: 33 additions & 0 deletions packages/docusaurus-theme/css/layout.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,39 @@ html {
scrollbar-gutter: stable;
}

/* Resources picker: sit after the color mode toggle, before search */
.navbar__items--right > div:has(.nf-picker-trigger) { order: 2; display: flex; align-items: center; }
.navbar__items--right > div:has(.DocSearch-Button) { order: 3; }

/* Separator between color mode toggle and resources picker */
.navbar__items--right > div:has(.nf-picker-trigger)::before {
content: '';
display: block;
width: 1px;
height: 1.2em;
background: currentColor;
opacity: 0.2;
margin-right: 0.75rem;
}

/* Discourse navbar icon — multicolor brand logo */
.nf-icon-link--discourse:hover {
opacity: 0.8;
color: inherit;
}

/* 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;
}

.main-wrapper > div {
/* work around issue from docusaurus doc grow/shrinking based on content */
width: 100%;
Expand Down
44 changes: 36 additions & 8 deletions packages/docusaurus-theme/css/product-picker.css
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,14 @@
position: relative;
padding-right: 1.2rem;
transition: color 0.3s ease;
font-weight: var(--ifm-font-weight-bold);
}

.nf-picker-trigger:hover,
.nf-resources-dropdown:hover,
.navbar__item.dropdown--show .nf-picker-trigger,
.navbar__item.dropdown--show .nf-resources-dropdown {
.navbar__item.dropdown--show .nf-resources-dropdown,
.navbar__item.nf-picker--open .nf-picker-trigger {
color: var(--ifm-color-primary);
text-decoration: none;
}
Expand Down Expand Up @@ -59,17 +61,17 @@
opacity: 1;
}

/* Open: chevron rotates 180° */
/* Open: chevron holds the hover drop position */
.nf-picker--open .nf-picker-trigger::after,
.navbar__item.dropdown--show .nf-resources-dropdown::after {
transform: translateY(-50%) rotate(180deg);
transform: translateY(-20%);
opacity: 1;
}

/* Dark mode: cyan accent on hover */
[data-theme='dark'] .nf-picker-trigger:hover,
[data-theme='dark'] .nf-resources-dropdown:hover,
[data-theme='dark'] .nf-picker--open .nf-picker-trigger,
[data-theme='dark'] .navbar__item.nf-picker--open .nf-picker-trigger,
[data-theme='dark'] .navbar__item.dropdown--show .nf-resources-dropdown {
color: #22d3ee;
}
Expand Down Expand Up @@ -139,7 +141,9 @@
}

/* Narrower panel for the 2-column Resources menu */
.dropdown__menu:has(.picker-resources) { max-width: 700px; }
.dropdown__menu:has(.picker-resources) { max-width: 400px; }
.nf-picker-panel--narrow { max-width: 430px; padding: 0.85rem 1.25rem; }


/* Ensure visibility when open */
.dropdown--show > .dropdown__menu,
Expand Down Expand Up @@ -181,9 +185,33 @@
transition: all 0.2s ease;
border-radius: 8px;
}
.picker-link:hover { background: rgba(0, 118, 255, 0.06); transform: translateX(3px); }
.picker-link strong { color: var(--ifm-font-color-base); font-size: 0.95rem; font-weight: 900; letter-spacing: -0.02em; display: block; }
.picker-link span { color: #64748b; font-size: 0.82rem; display: block; margin-top: 2px; line-height: 1.35; }
.picker-link:hover { background: rgba(0, 118, 255, 0.06); transform: translateX(3px); text-decoration: none; }
.picker-link strong { color: var(--ifm-font-color-base); font-size: 0.95rem; font-weight: 900; letter-spacing: -0.02em; display: block; text-decoration: none; }
.picker-link span { color: #64748b; font-size: 0.82rem; display: block; margin-top: 2px; line-height: 1.35; text-decoration: none; }
.nf-picker-panel--narrow .picker-link span { white-space: nowrap; }

/* ── Navbar icon links (GitHub, Discourse) ──────────────────────────────── */
.nf-icon-links {
display: flex;
align-items: center;
gap: 0.1rem;
}

.nf-icon-link,
.nf-icon-link:visited {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
color: var(--ifm-navbar-link-color);
text-decoration: none;
}

.nf-icon-link:hover {
color: var(--ifm-color-primary);
text-decoration: none;
}

/* ── Mobile (<= 996 px) ─────────────────────────────────────────────────── */
@media (max-width: 996px) {
Expand Down
71 changes: 51 additions & 20 deletions packages/docusaurus-theme/css/theme.css
Original file line number Diff line number Diff line change
@@ -1,20 +1,51 @@
/**
* NetFoundry Docusaurus Theme - Combined Styles
*
* This file is automatically loaded by the theme via getClientModules().
*
* Consuming projects no longer need to manually add these imports
* to their custom.css files.
*/

/* CSS variables for light mode */
@import "./vars.css";

/* CSS variables for dark mode */
@import "./vars-dark.css";

/* Layout styles */
@import "./layout.css";

/* Legacy design system variables and comprehensive styling */
@import "./legacy.css";
/**
* NetFoundry Docusaurus Theme - Combined Styles
*
* This file is automatically loaded by the theme via getClientModules().
*
* Consuming projects no longer need to manually add these imports
* to their custom.css files.
*/

/* CSS variables for light mode */
@import "./vars.css";

/* CSS variables for dark mode */
@import "./vars-dark.css";

/* Layout styles */
@import "./layout.css";

/* Legacy design system variables and comprehensive styling */
@import "./legacy.css";

/* ── Footer social link hover ───────────────────────────────────────────── */
footer a[class*="footerSocialLink"] {
transition: all 0.2s ease;
}

[data-theme='dark'] footer a[class*="footerSocialLink"] {
background-color: #1a2640;
color: #64748b;
border: 1px solid rgba(148, 163, 184, 0.1);
}
[data-theme='dark'] footer a[class*="footerSocialLink"]:hover {
background-color: #22d3ee;
color: #020617;
border-color: transparent;
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(34, 211, 238, 0.35);
}

[data-theme='light'] footer a[class*="footerSocialLink"] {
background-color: #e2e8f0;
color: #475569;
border: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme='light'] footer a[class*="footerSocialLink"]:hover {
background-color: #0891b2;
color: #ffffff;
border-color: transparent;
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(8, 145, 178, 0.3);
}
1 change: 1 addition & 0 deletions packages/docusaurus-theme/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
"react-dom": "^18 || ^19"
},
"dependencies": {
"@docsearch/css": "^3",
"@docsearch/react": "^3",
"algoliasearch": "^5",
"clsx": "^2.0.0",
Expand Down
39 changes: 39 additions & 0 deletions packages/docusaurus-theme/src/components/HeroBackground.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
.bg {
position: absolute;
inset: 0;
background-color: #020617;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(34, 211, 238, 0.04) 59px, rgba(34, 211, 238, 0.04) 60px),
repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(34, 211, 238, 0.04) 59px, rgba(34, 211, 238, 0.04) 60px);
overflow: hidden;
}

.orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
}

.orb1 {
width: 55%;
height: 75%;
background: radial-gradient(circle, rgba(34, 211, 238, 0.35) 0%, transparent 70%);
top: -15%;
left: -10%;
}

.orb2 {
width: 45%;
height: 65%;
background: radial-gradient(circle, rgba(0, 104, 249, 0.28) 0%, transparent 70%);
top: 20%;
right: -10%;
}

.orb3 {
width: 40%;
height: 55%;
background: radial-gradient(circle, rgba(34, 197, 94, 0.18) 0%, transparent 70%);
bottom: -15%;
left: 25%;
}
12 changes: 12 additions & 0 deletions packages/docusaurus-theme/src/components/HeroBackground.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react';
import styles from './HeroBackground.module.css';

export default function HeroBackground(): React.ReactElement {
return (
<div className={styles.bg} aria-hidden="true">
<div className={`${styles.orb} ${styles.orb1}`} />
<div className={`${styles.orb} ${styles.orb2}`} />
<div className={`${styles.orb} ${styles.orb3}`} />
</div>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,8 @@ export function NetFoundryFooter(props: NetFoundryFooterProps) {
)}
{sp.twitterUrl && (
<a href={sp.twitterUrl} target="_blank" className={styles.footerSocialLink} rel="noreferrer">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M15.996 3.038c-.59.262-1.219.44-1.885.52.677-.406 1.194-1.05 1.438-1.815-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.038-2.396-1.038-1.813 0-3.283 1.469-3.283 3.282 0 .257.03.507.085.748-2.728-.137-5.147-1.445-6.766-3.43-.282.485-.444 1.05-.444 1.651 0 1.14.58 2.143 1.46 2.732-.538-.017-1.044-.164-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.219-.276.075-.567.116-.866.116-.211 0-.416-.021-.617-.06.418 1.304 1.63 2.254 3.066 2.28-1.124.883-2.539 1.406-4.077 1.406-.265 0-.526-.015-.785-.046 1.453.933 3.178 1.475 5.032 1.475 6.038 0 9.34-5.002 9.34-9.34 0-.142-.004-.284-.01-.425.641-.463 1.198-1.039 1.638-1.696"/>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
</a>
)}
Expand Down Expand Up @@ -167,7 +167,7 @@ export function NetFoundryFooter(props: NetFoundryFooterProps) {
</div>

<div className={styles.footerCopyright}>
<p>© 2025 NetFoundry Inc. OpenZiti is an open source project sponsored by NetFoundry. All rights reserved.</p>
<p>© 2026 NetFoundry Inc. OpenZiti is an open source project sponsored by NetFoundry. All rights reserved.</p>
</div>
</NetFoundryHorizontalSection>
</footer>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
}

.footerSocialLink:hover {
background-color: var(--primary);
background-color: var(--ifm-color-primary);
transform: translateY(-3px);
}

Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme/src/components/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export * from './Alert'
export {default as HeroBackground} from './HeroBackground'
export * from './CodeBlock';
export * from './Common';
export * from './DownloadCard';
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export default function themeNetFoundry(
// Automatically inject CSS
getClientModules() {
const modules: string[] = [
require.resolve('@docsearch/css'),
require.resolve('../css/theme.css'),
];

Expand Down
4 changes: 4 additions & 0 deletions packages/docusaurus-theme/theme/NavbarItem/ComponentTypes.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -11,4 +13,6 @@ const ComponentTypesOrig = require('@theme-init/NavbarItem/ComponentTypes').defa
export default {
...ComponentTypesOrig,
'custom-productPicker': ProductPicker,
'custom-resourcesPicker': ResourcesPicker,
'custom-iconLinks': IconLinks,
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import React, {useState, useEffect} from 'react';

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"
>
<svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
)}
<a
href="https://openziti.discourse.group/"
target="_blank"
rel="noopener noreferrer"
className="nf-icon-link nf-icon-link--discourse"
title="Discourse"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -1 104 106" width="24" height="24">
<path fill="#231f20" d="M51.87 0C23.71 0 0 22.83 0 51v52.81l51.86-.05c28.16 0 51-23.71 51-51.87S80 0 51.87 0Z"/>
<path fill="#fff9ae" d="M52.37 19.74a31.62 31.62 0 0 0-27.79 46.67l-5.72 18.4 20.54-4.64a31.61 31.61 0 1 0 13-60.43Z"/>
<path fill="#00aeef" d="M77.45 32.12a31.6 31.6 0 0 1-38.05 48l-20.54 4.7 20.91-2.47a31.6 31.6 0 0 0 37.68-50.23Z"/>
<path fill="#00a94f" d="M71.63 26.29A31.6 31.6 0 0 1 38.8 78l-19.94 6.82 20.54-4.65a31.6 31.6 0 0 0 32.23-53.88Z"/>
<path fill="#f15d22" d="M26.47 67.11a31.61 31.61 0 0 1 51-35 31.61 31.61 0 0 0-52.89 34.3l-5.72 18.4Z"/>
<path fill="#e31b23" d="M24.58 66.41a31.61 31.61 0 0 1 47.05-40.12 31.61 31.61 0 0 0-49 39.63l-3.76 18.9Z"/>
</svg>
</a>
</div>
);
}
Loading
Loading