@netfoundry/docusaurus-theme 0.1.0 → 0.1.2

package/css/theme.css

@@ -2,14 +2,19 @@
  * NetFoundry Docusaurus Theme - Combined Styles
  *
  * This file is automatically loaded by the theme via getClientModules().
- * It imports all necessary CSS from @netfoundry/docusaurus-shared.
  *
  * Consuming projects no longer need to manually add these imports
  * to their custom.css files.
  */
 
-/* Core theme CSS with variables and layout */
-@import "@netfoundry/docusaurus-shared/index.css";
+/* 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 "@netfoundry/docusaurus-shared/css/legacy.css";
+@import "./legacy.css";

package/css/vars-dark.css

@@ -0,0 +1,7 @@
+html[data-theme="dark"] {
+    /*--nf-docs-max-width: 100px;*/
+    /*--nf-docs-main-color: pink;*/
+    .container {
+        /*background: orange;*/
+    }
+}

package/css/vars.css

@@ -0,0 +1,8 @@
+:root {
+    --ifm-navbar-height: 50px;
+    --nf-docs-max-width: 1400px;
+    /*--nf-docs-main-color: purple;*/
+    .container {
+        /*background: sandybrown;*/
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netfoundry/docusaurus-theme",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "NetFoundry Docusaurus theme with shared layout, footer, and styling",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -10,11 +10,32 @@
     "css"
   ],
   "scripts": {
-    "build": "echo 'No build needed - theme uses source files directly'"
+    "build": "echo 'No build needed - theme uses source files directly'",
+    "test": "jest",
+    "prepublishOnly": "yarn test"
   },
   "publishConfig": {
     "access": "public"
   },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./ui": {
+      "types": "./src/ui.ts",
+      "default": "./src/ui.ts"
+    },
+    "./plugins": {
+      "types": "./src/plugins.ts",
+      "default": "./src/plugins.ts"
+    },
+    "./node": {
+      "types": "./src/node.ts",
+      "default": "./src/node.ts"
+    },
+    "./css/*": "./css/*"
+  },
   "peerDependencies": {
     "@docusaurus/core": "^3",
     "@docusaurus/theme-classic": "^3",
@@ -23,11 +44,13 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@netfoundry/docusaurus-shared": "^0.1.1",
-    "clsx": "^2.0.0"
+    "clsx": "^2.0.0",
+    "react-device-detect": "^2.2.3",
+    "react-github-btn": "^1.4.0"
   },
   "devDependencies": {
     "@docusaurus/types": "^3",
+    "jest": "^30.0.4",
     "typescript": "^5"
   },
   "repository": {

package/src/components/Alert/Alert.module.css

@@ -0,0 +1,39 @@
+.alert {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  border-left: 4px solid;
+  margin: 1rem 0;
+}
+
+.title {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.content {
+  line-height: 1.5;
+}
+
+.info {
+  background-color: #e3f2fd;
+  border-color: #2196f3;
+  color: #0d47a1;
+}
+
+.warning {
+  background-color: #fff3e0;
+  border-color: #ff9800;
+  color: #e65100;
+}
+
+.error {
+  background-color: #ffebee;
+  border-color: #f44336;
+  color: #b71c1c;
+}
+
+.success {
+  background-color: #e8f5e8;
+  border-color: #4caf50;
+  color: #1b5e20;
+}

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './Alert.module.css';
+
+export interface AlertProps {
+  type?: 'info' | 'warning' | 'error' | 'success';
+  title?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const Alert: React.FC<AlertProps> = ({
+  type = 'info',
+  title,
+  children,
+  className
+}) => {
+  return (
+    <div className={clsx(styles.alert, styles[type], className)}>
+      {title && <div className={styles.title}>{title}</div>}
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+};

package/src/components/Alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertProps } from './Alert';

package/src/components/CodeBlock/CodeBlock.module.css

@@ -0,0 +1,27 @@
+.codeBlock {
+  margin: 1rem 0;
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.title {
+  background-color: var(--ifm-code-background);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: bold;
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+}
+
+.codeBlock pre {
+  margin: 0;
+  padding: 1rem;
+  background-color: var(--ifm-code-background);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.codeBlock code {
+  background-color: transparent;
+  padding: 0;
+  font-family: var(--ifm-font-family-monospace);
+}

package/src/components/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useThemeConfig } from '@docusaurus/theme-common';
+import styles from './CodeBlock.module.css';
+
+export interface CodeBlockProps {
+  children: string;
+  language?: string;
+  title?: string;
+  showLineNumbers?: boolean;
+  className?: string;
+}
+
+export const CodeBlock: React.FC<CodeBlockProps> = ({
+  children,
+  language = 'text',
+  title,
+  showLineNumbers = false,
+  className
+}) => {
+  const { prism } = useThemeConfig();
+  
+  return (
+    <div className={`${styles.codeBlock} ${className || ''}`}>
+      {title && <div className={styles.title}>{title}</div>}
+      <pre className={`language-${language}`}>
+        <code className={`language-${language}`}>
+          {children}
+        </code>
+      </pre>
+    </div>
+  );
+};

package/src/components/CodeBlock/index.ts

@@ -0,0 +1,2 @@
+export { CodeBlock } from './CodeBlock';
+export type { CodeBlockProps } from './CodeBlock';

package/src/components/Common/Common.tsx

@@ -0,0 +1,53 @@
+import React, { JSX } from 'react';
+import clsx from 'clsx';
+import styles from './Common.module.css';
+
+export interface H1Props {
+    children: React.ReactNode;
+    id?: string;
+    className?: string;
+}
+
+export interface H2Props {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export interface H3Props {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}
+
+export interface HighlightProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function H1(props: H1Props): JSX.Element {
+    const {children, id, className} = props;
+    return (
+        <p id={id} className={clsx(styles.h1, className)}>{children}</p>
+    );
+}
+
+export function H2(props: H2Props): JSX.Element {
+    const {children, className} = props;
+    return (
+        <p className={clsx(styles.h2, className)}>{children}</p>
+    );
+}
+
+export function H3(props: H3Props): JSX.Element {
+    const {children, style, className} = props;
+    return (
+        <h3 className={clsx(styles.h3, className)} style={style}>{children}</h3>
+    );
+}
+
+export function Highlight(props: HighlightProps): JSX.Element {
+    const { children, className } = props;
+    return (
+        <span className={clsx(styles.highlight, className)}>{children}</span>
+    );
+}

package/src/components/Common/index.ts

@@ -0,0 +1 @@
+export * from './Common';

package/src/components/NetFoundry/Divider/Divider.module.css

@@ -0,0 +1,23 @@
+.onpremConnector {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.onpremDot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.onpremDot svg {
+    width: 24px;
+    height: 24px;
+    color: #9aa4b2;
+}
+
+.onpremLine {
+    flex: 1;
+    height: 1px;
+    background: linear-gradient(90deg, #c8d0d9, #9aa4b2, #c8d0d9);
+}

package/src/components/NetFoundry/Divider/Divider.tsx

@@ -0,0 +1,20 @@
+import React, {JSX} from 'react';
+import styles from './Divider.module.css';
+
+export function Divider(): JSX.Element {
+    return (
+        <div className={styles.onpremConnector}>
+            <div className={styles.onpremDot} aria-hidden="true">
+                <svg viewBox="0 0 24 24" role="img" aria-label="endpoint">
+                    <circle cx="12" cy="12" r="8" fill="currentColor" />
+                </svg>
+            </div>
+            <div className={styles.onpremLine} role="presentation" aria-hidden="true"></div>
+            <div className={styles.onpremDot} aria-hidden="true">
+                <svg viewBox="0 0 24 24" role="img" aria-label="endpoint">
+                    <circle cx="12" cy="12" r="8" fill="currentColor" />
+                </svg>
+            </div>
+        </div>
+    );
+}

package/src/components/NetFoundry/Divider/index.ts

@@ -0,0 +1 @@
+export * from './Divider'

package/src/components/NetFoundry/index.ts

@@ -0,0 +1 @@
+export * from './Divider'

package/src/components/NetFoundryFooter/NetFoundryFooter.tsx

@@ -0,0 +1,164 @@
+import React, {CSSProperties, ReactNode} from 'react';
+import clsx from 'clsx';
+import {NetFoundryHorizontalSection} from "../NetFoundryHorizontalSection";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import styles from './styles.module.css';
+
+export interface SocialProps {
+    twitterUrl?: string;
+    linkedInUrl?: string;
+    githubUrl?: string;
+    facebookUrl?: string;
+    instagramUrl?: string;
+    youtubeUrl?: string;
+}
+export const defaultSocialProps: SocialProps = {
+    twitterUrl: '',
+    linkedInUrl: '',
+    githubUrl: '',
+    facebookUrl: '',
+    instagramUrl: '',
+    youtubeUrl: '',
+};
+
+export type NetFoundryFooterProps = {
+    className?: string;
+    style?: CSSProperties;
+    description?: string;
+    socialProps?: SocialProps;
+    documentationLinks?: React.ReactNode[];
+    communityLinks?: React.ReactNode[];
+    resourceLinks?: React.ReactNode[];
+    children?: ReactNode;
+};
+
+export function defaultNetFoundryFooterProps(overrides?: Partial<NetFoundryFooterProps>): NetFoundryFooterProps {
+    return {
+        description: 'Self-hosted OpenZiti for enterprises needing compliance, control, and support.',
+        socialProps: {
+            githubUrl: 'https://github.com/openziti/ziti',
+            linkedInUrl: 'https://www.linkedin.com/company/netfoundry',
+            youtubeUrl: 'https://www.youtube.com/OpenZiti',
+            twitterUrl: 'https://x.com/OpenZiti'
+        },
+        documentationLinks: [
+            <a href="/docs/openziti/learn/quickstarts/services/ztha">Getting Started</a>,
+            <a href="/docs/openziti/reference/developer/api/">API Reference</a>,
+            <a href="/docs/openziti/reference/developer/sdk/">SDK Integration</a>,
+        ],
+        communityLinks: [
+            <a href="https://github.com/openziti/ziti">GitHub</a>,
+            <a href="https://openziti.discourse.group/">Discourse Forum</a>,
+            <a href="/docs/openziti/policies/CONTRIBUTING">Contributing</a>,
+        ],
+        resourceLinks: [
+            <a href="https://blog.openziti.io">OpenZiti Tech Blog</a>,
+            <a href="https://netfoundry.io/">NetFoundry</a>,
+        ],
+        ...overrides
+    };
+}
+
+function ListBlock({title, items}:{title:string; items?: React.ReactNode[]}) {
+    if (!items?.length) return null;
+    return (
+        <div className={styles.footerColumn}>
+            <h3>{title}</h3>
+            <ul className={styles.footerLinks}>
+                {items.map((item, i) => <li key={i}>{item}</li>)}
+            </ul>
+        </div>
+    );
+}
+
+export function NetFoundryFooter(props: NetFoundryFooterProps) {
+    const { className, style, children, description } = props;
+    const sp = {...defaultSocialProps, ...(props.socialProps ?? {})};
+
+    if (children) return <>{children}</>;
+
+    return (
+        <footer className={clsx(className, styles.ozFooter)} style={style}>
+            <NetFoundryHorizontalSection className={styles.footer}>
+                <div className={styles.footerContainer}>
+                    <div className={styles.footerGrid}>
+                        <div className={styles.footerColumn}>
+                            <h3>NetFoundry</h3>
+                            <p>{description ?? 'An open source project enabling developers to embed zero trust networking directly into applications.'}</p>
+                            <div className={styles.footerSocialLinks}>
+                                {sp.githubUrl && (
+                                    <a href={sp.githubUrl} target="_blank" className={styles.footerSocialLink} rel="noreferrer">
+                                        <svg width="20" height="20" 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 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"/>
+                                        </svg>
+                                    </a>
+                                )}
+                                {sp.linkedInUrl && (
+                                    <a href={sp.linkedInUrl} 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 16V10.1C15.996 7.5 15.375 5.49999 12.025 5.49999C10.4 5.49999 9.325 6.39999 8.875 7.29999H8.825V5.79999H5.65V16H8.95V10.7C8.95 9.30001 9.2 7.9 10.925 7.9C12.65 7.9 12.675 9.59999 12.675 10.8V16H15.996Z"/>
+                                            <path d="M0.25 5.79999H3.575V16H0.25V5.79999Z"/>
+                                            <path d="M1.9 0C0.85 0 0 0.85 0 1.9C0 2.95 0.85 3.8 1.9 3.8C2.95 3.8 3.8 2.95 3.8 1.9C3.8 0.85 2.95 0 1.9 0Z"/>
+                                        </svg>
+                                    </a>
+                                )}
+                                {sp.youtubeUrl && (
+                                    <a href={sp.youtubeUrl} 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.969 4.69c-.183-1.358-1.062-2.275-2.361-2.46C12.371 2 8 2 8 2S3.629 2 2.362 2.229c-1.3.186-2.179 1.103-2.361 2.461C0 6.03 0 10 0 10s0 3.97.2 5.31c.183 1.358 1.062 2.275 2.361 2.46C3.63 18 8 18 8 18s4.371 0 5.638-.23c1.3-.185 2.178-1.102 2.361-2.46.2-1.34.2-5.31.2-5.31s0-3.97-.23-5.31zm-8.36, 8.57V6.73l3.76 2.27-3.76 2.26z"/>
+                                        </svg>
+                                    </a>
+                                )}
+                                {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>
+                                    </a>
+                                )}
+                                {sp.facebookUrl && (
+                                    <a href={sp.facebookUrl} target="_blank" className={styles.footerSocialLink} rel="noreferrer">
+                                        <span>f</span>
+                                    </a>
+                                )}
+                                {sp.instagramUrl && (
+                                    <a href={sp.instagramUrl} target="_blank" className={styles.footerSocialLink} rel="noreferrer">
+                                        <span>ig</span>
+                                    </a>
+                                )}
+                            </div>
+                        </div>
+
+                        <ListBlock
+                            title="Documentation"
+                            items={props.documentationLinks ?? [
+                                <a href={useBaseUrl("/docs/learn/quickstarts/services/ztha")}>Getting Started</a>,
+                                <a href={useBaseUrl("/docs/reference/developer/api/")}>API Reference</a>,
+                                <a href={useBaseUrl("/docs/reference/developer/sdk/")}>SDK Integration</a>,
+                            ]}
+                        />
+                        <ListBlock
+                            title="Community"
+                            items={props.communityLinks ?? [
+                                <a href="https://github.com/openziti/ziti">GitHub</a>,
+                                <a href="https://openziti.discourse.group/">Discourse Forum</a>,
+                                <a href="/docs/openziti/policies/CONTRIBUTING">Contributing</a>,
+                            ]}
+                        />
+                        <ListBlock
+                            title="Resources"
+                            items={props.resourceLinks ?? [
+                                <a href="https://blog.openziti.io">OpenZiti Tech Blog</a>,
+                                <a href="https://netfoundry.io/">NetFoundry</a>,
+                            ]}
+                        />
+                    </div>
+                </div>
+
+                <div className={styles.footerCopyright}>
+                    <p>© 2025 NetFoundry Inc. OpenZiti is an open source project sponsored by NetFoundry. All rights reserved.</p>
+                </div>
+            </NetFoundryHorizontalSection>
+        </footer>
+    );
+}

package/src/components/NetFoundryFooter/index.ts

@@ -0,0 +1 @@
+export * from './NetFoundryFooter';

package/src/components/NetFoundryFooter/styles.module.css

@@ -0,0 +1,99 @@
+.ozFooter {
+  width: 100%;
+  --ziti-footer-background-color: #121a36;
+  --ziti-footer-color: #aaa;
+  --accent: #ccc;
+
+  .ozFooterSection {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    align-items: center;
+    background-color: var(--ifm-background-color);
+    width: 100%;
+  }
+
+  /* Footer Styles */
+
+  .footer {
+    background-color: var(--ziti-footer-background-color);
+    color: var(--ziti-footer-color);
+    padding: var(--space-md) var(--space-md);
+    width: 100%;
+  }
+
+  .footerContainer {
+    gap: 2rem;
+    margin-bottom: 1rem;
+    max-width: var(--ziti-landing-max-width);
+    width: 100%;
+    align-content: center;
+  }
+
+  .footerGrid {
+    display: grid;
+    gap: var(--space-md);
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  }
+
+  .footerColumn h3 {
+    color: var(--light);
+    font-size: 1.2rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .footerLinks {
+    list-style: none;
+  }
+
+  .footerLinks li {
+    margin-bottom: 0.75rem;
+  }
+
+  .footerLinks a {
+    color: #aaa;
+    transition: var(--transition);
+  }
+
+  .footerLinks a:hover {
+    color: var(--accent);
+    text-decoration: underline;
+  }
+
+  .footerCopyright {
+    border-top: 1px solid #2a3552;
+    padding-top: 2rem;
+    text-align: center;
+    font-size: 0.9rem;
+  }
+
+  .footerSocialLinks {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1rem;
+  }
+
+  .footerSocialLink {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: #2a3552;
+    color: var(--light);
+    transition: var(--transition);
+  }
+
+  .footerSocialLink:hover {
+    background-color: var(--primary);
+    transform: translateY(-3px);
+  }
+  
+  @media (max-width: 850px) {
+    .footerGrid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    }
+  }
+}

package/src/components/NetFoundryHighlight/NetFoundryHighlight.tsx

@@ -0,0 +1,15 @@
+import React, { ReactNode, CSSProperties } from 'react';
+
+export type NetFoundryHighlightProps = {
+    children?: ReactNode;
+    style?: CSSProperties;
+};
+
+export function NetFoundryHighlight(props: NetFoundryHighlightProps) {
+    const { children, style } = props;
+    return (
+        <span style={style}>
+      <span style={{ color: 'var(--ifm-color-primary)' }}>{children}</span>
+    </span>
+    );
+}

package/src/components/NetFoundryHighlight/index.ts

@@ -0,0 +1,2 @@
+export { NetFoundryHighlight } from './NetFoundryHighlight';
+export type { NetFoundryHighlightProps } from './NetFoundryHighlight';

package/src/components/NetFoundryHighlight/styles.module.css

@@ -0,0 +1,26 @@
+.ozHighLightRoot {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  align-items: center;
+  min-height: 100%;
+  background-color: var(--ifm-background-color);
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.ozHighLightContent {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 100%;
+  padding: 20px 20px;
+}
+
+@media (min-width: 1400px) {
+  .ozHighLightContent {
+    min-width: var(--ziti-max-width);
+    max-width: var(--ziti-max-width);
+    padding: 20px 20px;
+  }
+}