Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ type Props = {
className?: string;
};

const HEADER_CLASSES = ['picker-header--nf-tertiary', 'picker-header--nf-secondary', 'picker-header--nf-primary'];
const HEADER_CLASSES = ['picker-header--nf-tertiary', 'picker-header--nf-primary', 'picker-header--nf-secondary'];
Comment thread
nicoalba marked this conversation as resolved.
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[] => [
Expand Down
42 changes: 23 additions & 19 deletions packages/test-site/docusaurus.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ export default {

staticDirectories: [
'static',
'../../unified-doc/static',
`${frontdoor}/docusaurus/static`,
`${onprem}/docusaurus/static`,
`${openziti}/docusaurus/static`,
Expand Down Expand Up @@ -107,6 +108,9 @@ export default {
'@zlan': path.resolve(__dirname, `${zlan}/docusaurus`),
'@zrok': path.resolve(__dirname, `${zrokRoot}`),
'@zrokroot': path.resolve(__dirname, `${zrokRoot}`),
'@netfoundry/docusaurus-theme/ui': path.resolve(__dirname, '../docusaurus-theme/dist/src/ui.js'),
'@netfoundry/docusaurus-theme/plugins': path.resolve(__dirname, '../docusaurus-theme/dist/src/plugins.js'),
'@netfoundry/docusaurus-theme/node': path.resolve(__dirname, '../docusaurus-theme/dist/src/node.js'),
},
},
};
Expand All @@ -133,7 +137,7 @@ export default {
],
productPickerColumns: [
{
header: 'Managed Cloud',
header: 'Cloud SaaS',
links: [
{
label: 'NetFoundry Console',
Expand All @@ -150,7 +154,24 @@ export default {
],
},
{
header: 'Open Source',
header: 'Self-Hosted Licensed',
links: [
{
label: 'Self-Hosted',
to: '/docs/selfhosted',
logo: 'https://netfoundry.io/docs/img/onprem-sm-logo.svg',
description: 'Deploy the full stack in your own environment.',
},
{
label: 'zLAN',
to: '/docs/zlan',
logo: 'https://netfoundry.io/docs/img/zlan/zlan-logo.svg',
description: 'Zero-trust access for OT networks.',
},
],
},
{
header: 'Self-Hosted Open Source',
links: [
{
label: 'OpenZiti',
Expand All @@ -167,23 +188,6 @@ export default {
},
],
},
{
header: 'Your own infrastructure',
links: [
{
label: 'Self-Hosted',
to: '/docs/selfhosted',
logo: 'https://netfoundry.io/docs/img/onprem-sm-logo.svg',
description: 'Deploy the full stack in your own environment.',
},
{
label: 'zLAN',
to: '/docs/zlan',
logo: 'https://netfoundry.io/docs/img/zlan/zlan-logo.svg',
description: 'Zero-trust access for OT networks.',
},
],
},
],
resourcesPickerSections: [
{
Expand Down
18 changes: 16 additions & 2 deletions packages/test-site/src/custom/custom.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@

@import '@netfoundry/docusaurus-theme/css/tabs-v8-float.css';
@import '@netfoundry/docusaurus-theme/css/layout.css';
@import '@netfoundry/docusaurus-theme/css/legacy.css';
@import '@docsearch/css';

:root {
--ifm-navbar-height: 60px;
Expand Down Expand Up @@ -34,7 +36,6 @@ body,
display:flex;
align-items:center;
justify-content: end;
min-width: 185px;
}
.navbar__logo { /* squeeze whitespace */
margin-right: 0;
Expand All @@ -49,9 +50,22 @@ body,
}

.DocSearch-Button {
background: #ebedf0;
background: rgba(0, 0, 0, 0.06);
color: var(--ifm-color-primary);
}
.DocSearch-Button-Key {
background: rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.5);
border-color: rgba(0, 0, 0, 0.15);
}
[data-theme='dark'] .DocSearch-Button {
background: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .DocSearch-Button-Key {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.6);
border-color: rgba(255, 255, 255, 0.2);
}


.main-wrapper {
Expand Down
24 changes: 1 addition & 23 deletions packages/test-site/src/pages/index.module.css
Original file line number Diff line number Diff line change
@@ -1,23 +1 @@
/**
* CSS files with the .module.css suffix will be treated as CSS modules
* and scoped locally.
*/

.heroBanner {
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}

@media screen and (max-width: 996px) {
.heroBanner {
padding: 2rem;
}
}

.buttons {
display: flex;
align-items: center;
justify-content: center;
}
/* placeholder — landing page styling lives in unified-doc */
81 changes: 9 additions & 72 deletions packages/test-site/src/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,81 +1,18 @@
import React, {JSX} from 'react';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import clsx from 'clsx';
import styles from './landing.module.css';

const CYAN = '#22d3ee';
const GREEN = '#22c55e';
const IMG = 'https://netfoundry.io/docs/img';
const NF_LOGO = 'https://raw.githubusercontent.com/netfoundry/branding/refs/heads/main/images/svg/icon/netfoundry-icon-color.svg';

const products = [
{ id: 'console', title: 'NetFoundry Console', logo: NF_LOGO, tag: 'Managed', accent: CYAN, link: '#', features: ['Fully managed SaaS', 'Global edge fabric', 'No infra to operate', 'Policy-based access'], description: "The cloud-managed control plane for NetFoundry's global zero-trust fabric. Orchestrate identities, policies, and edge routers — no infrastructure to run." },
{ id: 'openziti', title: 'OpenZiti', logo: `${IMG}/openziti-sm-logo.svg`, tag: 'Open Source', accent: GREEN, link: '/docs/openziti', description: 'The open-source zero-trust networking framework at the heart of the NetFoundry platform. Embed dark, app-native security directly in your code — no VPN, no perimeter.' },
{ 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.' },
];

type Product = (typeof products)[number];
const byId = Object.fromEntries(products.map(p => [p.id, p])) as Record<string, Product>;

function BentoCard({product, featured = false}: {product: Product; featured?: boolean}): JSX.Element {
const accentMod = product.accent === CYAN ? styles['nf-bento-card--accent-cyan'] : styles['nf-bento-card--accent-green'];
return (
<div className={styles['nf-bento-wrap']}>
<Link to={product.link} className={clsx(styles['nf-bento-card'], featured && styles['nf-bento-card--featured'], accentMod)} style={{borderTopColor: product.accent}}>
<span className={styles['nf-card-badge']}>{product.tag}</span>
<div className={styles['nf-card-header']}>
{product.logo && <img src={product.logo} alt={product.title} className={styles['nf-card-logo']} />}
<h3>{product.title}</h3>
</div>
<p>{product.description}</p>
{product.features && (
<ul className={styles['nf-bento-features']}>
{product.features.map(f => <li key={f}>{f}</li>)}
</ul>
)}
<div className={styles['nf-card-link']}>Explore →</div>
</Link>
</div>
);
}

export default function Home(): JSX.Element {
return (
<Layout title="NetFoundry Docs">
<header className={styles['nf-hero-stage']}>
<div className={clsx('container', styles['nf-hero-content'])}>
<h1 className={styles['nf-hero-title']}>NetFoundry <span className={styles['nf-green-text']}>Docs</span></h1>
<p className={styles['nf-hero-subtext']}>Secure, high-performance networking for the modern era.</p>
<div className={styles['nf-hero-ctas']}>
<Link className={styles['nf-btn-primary']} to="/docs/frontdoor">Get Started</Link>
<a className={styles['nf-btn-ghost']} href="https://netfoundry.io/lets-talk/">Request Demo</a>
</div>
</div>
</header>
<section className={styles['nf-features-section']} style={{marginTop: '-80px', position: 'relative', zIndex: 3}}>
<div className="container">
<div className={styles['nf-bento-grid']}>
<div className={clsx(styles['nf-bento-divider'], styles['nf-divider--managed'], styles['nf-divider--top'])}>Managed Cloud</div>
<div className={styles['nf-pair']}>
<BentoCard product={byId['console']} featured />
<div className={styles['nf-pair-connector']}>open-source counterpart</div>
<BentoCard product={byId['openziti']} />
</div>
<div className={styles['nf-pair']}>
<BentoCard product={byId['frontdoor']} featured />
<div className={styles['nf-pair-connector']}>open-source counterpart</div>
<BentoCard product={byId['zrok']} />
</div>
<div className={styles['nf-bento-divider']}>Run on your own infrastructure</div>
<BentoCard product={byId['selfhosted']} />
<BentoCard product={byId['zlan']} />
</div>
</div>
</section>
<Layout title="Theme Test Site">
<main style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '4rem 2rem', textAlign: 'center'}}>
<h1>Theme Test Site</h1>
<p style={{color: 'var(--ifm-color-secondary)', maxWidth: '480px'}}>
This is the dev sandbox for <code>@netfoundry/docusaurus-theme</code>.
Navigate using the navbar above to test theme components.
</p>
<Link to="/docs" style={{marginTop: '1rem'}}>Browse test docs →</Link>
</main>
</Layout>
);
}
28 changes: 11 additions & 17 deletions unified-doc/src/pages/index.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,8 @@

.nf-bento-divider {
grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem;
padding: 1.5rem 0 0.65rem; color: #94a3b8; font-size: 0.82rem; font-weight: 800;
letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
padding: 1.5rem 0 0.65rem; color: #94a3b8; font-size: 0.7rem; font-weight: 900;
text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap;
}
.nf-bento-divider::before, .nf-bento-divider::after {
content: ''; flex: 1; height: 1px; background: rgba(148, 163, 184, 0.2);
Expand All @@ -85,19 +85,11 @@
[data-theme='light'] .nf-divider--managed { color: #0891b2; text-shadow: none; }
[data-theme='light'] .nf-divider--managed::before,
[data-theme='light'] .nf-divider--managed::after { background: rgba(8, 145, 178, 0.35); height: 2px; }

.nf-pair { display: flex; flex-direction: column; }
.nf-pair-connector {
display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0;
font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em;
text-transform: uppercase; color: #94a3b8;
}
.nf-pair-connector::before, .nf-pair-connector::after {
content: ''; flex: 1; height: 1px; background: rgba(148, 163, 184, 0.2);
}
[data-theme='light'] .nf-pair-connector { color: #64748b; }
[data-theme='light'] .nf-pair-connector::before,
[data-theme='light'] .nf-pair-connector::after { background: rgba(148, 163, 184, 0.35); }
.nf-divider--open-source { color: var(--nf-secondary); }
.nf-divider--open-source::before, .nf-divider--open-source::after { background: rgba(78, 219, 63, 0.4); height: 2px; }
[data-theme='light'] .nf-divider--open-source { color: #16a34a; }
[data-theme='light'] .nf-divider--open-source::before,
[data-theme='light'] .nf-divider--open-source::after { background: rgba(22, 163, 74, 0.35); height: 2px; }

.nf-bento-wrap { display: flex; flex-direction: column; }

Expand All @@ -121,7 +113,9 @@
[data-theme='light'] .nf-bento-card:hover {
box-shadow: 0 2px 6px rgba(0,0,0,0.09), 0 8px 24px rgba(0,0,0,0.07), 0 0 0 1px rgba(34,197,94,0.18);
}
[data-theme='light'] .nf-bento-card--accent-cyan { border-top-color: #0891b2; }
.nf-bento-card--accent-cyan { border-top-color: #22d3ee; }
.nf-bento-card--accent-green { border-top-color: #22c55e; }
[data-theme='light'] .nf-bento-card--accent-cyan { border-top-color: #0068f9; }
[data-theme='light'] .nf-bento-card--accent-green { border-top-color: #16a34a; }
.nf-bento-card--featured { padding: 1.25rem; border-top-width: 3px; }
.nf-bento-card--featured .nf-card-logo { width: 48px; height: 48px; }
Expand All @@ -141,7 +135,7 @@
.nf-card-header h3 { margin: 0; }
.nf-bento-card h3 { color: #f1f5f9; font-weight: 900; font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.02em; }
[data-theme='light'] .nf-bento-card h3 { color: #0f172a; }
.nf-bento-card p { color: #94a3b8; font-size: 0.875rem; line-height: 1.65; flex-grow: 1; margin: 0 0 0.5rem; }
.nf-bento-card p { color: #94a3b8; font-size: 0.875rem; line-height: 1.65; flex-grow: 1; margin: 0 0 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-theme='light'] .nf-bento-card p { color: #475569; }

.nf-bento-features { list-style: none; padding: 0; margin: 0 0 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
Expand Down
Loading
Loading