@netfoundry/docusaurus-shared 0.0.168

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;
+  }
+}

package/src/components/NetFoundryHorizontalSection/NetFoundryHorizontalSection.tsx

@@ -0,0 +1,23 @@
+import React, { ReactNode, CSSProperties } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export type NetFoundryHorizontalSectionProps = {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    id?: string;
+};
+
+export function NetFoundryHorizontalSection(props: NetFoundryHorizontalSectionProps) {
+    const { children, className, style, id } = props;
+    return (
+        <section
+            className={clsx(className, styles.ozHorizontalSectionRoot, styles.ozhsContent)}
+            style={style}
+            id={id}
+        >
+            {children}
+        </section>
+    );
+}

package/src/components/NetFoundryHorizontalSection/index.ts

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

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

@@ -0,0 +1,23 @@
+.ozHorizontalSectionRoot {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--ifm-background-color);
+  max-width: var(--ziti-max-width);
+  width: 100%;
+}
+
+.ozhsContent {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  padding: 20px;
+}
+
+@media (min-width: 1420px) {
+  .ozhsContent {
+    min-width: var(--ziti-max-width);
+    width: 100%;
+  }
+}

package/src/components/NetFoundryLayout/NetFoundryLayout.module.css

@@ -0,0 +1,6 @@
+.ozLayoutMainWrapper {
+   display: flex;
+   flex-direction: column;
+  justify-content: space-between;
+  flex-grow: 1;
+}

package/src/components/NetFoundryLayout/NetFoundryLayout.tsx

@@ -0,0 +1,110 @@
+import React, {JSX} from "react";
+import clsx from "clsx";
+import ErrorBoundary from "@docusaurus/ErrorBoundary";
+import { ThemeClassNames } from "@docusaurus/theme-common";
+// @ts-ignore
+import { useKeyboardNavigation } from "@docusaurus/theme-common/internal";
+import Head from "@docusaurus/Head";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+import SkipToContent from "@theme/SkipToContent";
+import AnnouncementBar from "@theme/AnnouncementBar";
+import Navbar from "@theme/Navbar";
+import LayoutProvider from "@theme/Layout/Provider";
+import ErrorPageContent from "@theme/ErrorPageContent";
+import styles from "./NetFoundryLayout.module.css";
+
+import { NetFoundryFooter, NetFoundryFooterProps } from "../NetFoundryFooter";
+import { StarUs, StarUsProps } from "../StarUs";
+import { version } from '../../version';
+
+export interface MetaProps {
+    title?: string;
+    description?: string;
+    url?: string;
+    image?: string;
+    siteName?: string;
+    locale?: string;
+    twitterX?: {
+        card?: "summary" | "summary_large_image" | "player" | "app";
+        site?: string;
+        creator?: string;
+        imageAlt?: string;
+    };
+}
+
+export interface NetFoundryLayoutProps {
+    children: React.ReactNode;
+    noFooter?: boolean;
+    className?: string;
+    footerClassName?: string;
+    title?: string;
+    description?: string;
+    starProps?: StarUsProps;
+    footerProps?: NetFoundryFooterProps;
+    meta?: MetaProps;
+}
+
+function useAbs() {
+    return (p?: string) => {
+        if (!p) return undefined;
+        if (p.startsWith("http")) return p;
+        return new URL(useBaseUrl(p), window.location.origin).toString();
+    };
+}
+
+export function NetFoundryLayout({
+                                     children,
+                                     noFooter,
+                                     className,
+                                     title,
+                                     description,
+                                     starProps = { repoUrl: "", label: "Star us on GitHub" },
+                                     footerProps,
+                                     meta: metaInput = {},
+                                 }: NetFoundryLayoutProps): JSX.Element {
+    useKeyboardNavigation();
+
+    const abs = useAbs();
+    const meta = metaInput;
+    const pageTitle =
+        (meta.title ?? title ?? "") +
+        (meta.siteName ? ` | ${meta.siteName}` : "");
+
+    return (
+        <LayoutProvider>
+            <Head>
+                <title>{pageTitle}</title>
+                <meta data-rh="true" name="nf-layout-version" content={version} />
+                {(meta.description ?? description) && (<meta name="description" content={meta.description ?? description} />)}
+                {meta.url && <meta property="og:url" content={meta.url} />}
+                {meta.siteName && <meta property="og:site_name" content={meta.siteName} />}
+                {meta.title && <meta property="og:title" content={meta.title} />}
+                {meta.description && (<meta property="og:description" content={meta.description} />)}
+                {meta.image && <meta property="og:image" content={abs(meta.image)} />}
+                {meta.locale && <meta property="og:locale" content={meta.locale} />}
+                <meta name="twitter:card" content={meta.twitterX?.card ?? "summary_large_image"} />
+                {meta.twitterX?.site && (<meta name="twitter:site" content={meta.twitterX.site} />)}
+                {meta.twitterX?.creator && (<meta name="twitter:creator" content={meta.twitterX.creator} />)}
+                {meta.image && (<meta name="twitter:image" content={abs(meta.image)} />)}
+                {meta.twitterX?.imageAlt && (<meta name="twitter:image:alt" content={meta.twitterX.imageAlt} />)}
+            </Head>
+            <SkipToContent />
+            <AnnouncementBar />
+            <Navbar />
+            {starProps.repoUrl && starProps.label && <StarUs {...starProps} />}
+            <div
+                className={clsx(
+                    ThemeClassNames.wrapper.main,
+                    styles.ozLayoutMainWrapper,
+                    className,
+                )}
+            >
+                <ErrorBoundary fallback={<ErrorPageContent />}>
+                    {children}
+                </ErrorBoundary>
+                {!noFooter && footerProps && <NetFoundryFooter {...footerProps} />}
+            </div>
+        </LayoutProvider>
+    );
+}

package/src/components/NetFoundryLayout/index.ts

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

package/src/components/NetFoundryNavbarItems/NetFoundryNavbarItems.tsx

@@ -0,0 +1,22 @@
+export type NavbarItem = {
+    label: string;
+    href?: string;
+    to?: string;
+    type?: string;
+    position?: 'left' | 'right';
+    sidebarId?: string;
+};
+
+export const NavbarItems: NavbarItem[] = [
+    {
+        type: 'docSidebar',
+        sidebarId: 'tutorialSidebar',
+        position: 'left',
+        label: 'Docs',
+    },
+    {
+        href: 'https://github.com/facebook/docusaurus',
+        label: 'GitHub',
+        position: 'right',
+    },
+];

package/src/components/NetFoundryNavbarItems/index.ts

@@ -0,0 +1,2 @@
+export type {NavbarItem} from './NetFoundryNavbarItems';
+export { NavbarItems } from './NetFoundryNavbarItems';