@netfoundry/docusaurus-theme 0.1.0 → 0.1.3

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';

package/src/components/OsTabs/OsTabs.tsx

@@ -0,0 +1,30 @@
+import React, {useState, useEffect, ReactNode, JSX} from 'react';
+import OriginalTabs from '@theme/Tabs';
+import { osName } from 'react-device-detect';
+import type { ComponentProps } from 'react';
+
+
+export type OsTabsProps = ComponentProps<typeof OriginalTabs>;
+
+export function OsTabs(props: OsTabsProps): JSX.Element {
+    const [defaultValue, setDefaultValue] = useState<string | null>(null);
+
+    useEffect(() => {
+        const tabs = ['iOS', 'Android', 'Mac OS', 'Windows', 'Linux'];
+        if (tabs.includes(osName)) {
+            setDefaultValue(osName);
+        } else {
+            setDefaultValue('Windows');
+        }
+    }, []);
+
+    return (
+        <>
+            <OriginalTabs {...props} defaultValue={defaultValue}>
+                {props.children}
+            </OriginalTabs>
+            {/* Uncomment the following line to debug the detected and selected values */}
+            {/* <h2>detected={osName}, selected={defaultValue}</h2> */}
+        </>
+    );
+}

package/src/components/OsTabs/index.ts

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

package/src/components/StarUs/StarUs.tsx

@@ -0,0 +1,19 @@
+import React, {ReactNode} from 'react';
+import styles from './styles.module.css';
+import GitHubButton from 'react-github-btn';
+
+export type StarUsProps = {
+    repoUrl?: string;
+    label?: string;
+};
+
+export default function StarUs({repoUrl = '', label = ''}: StarUsProps): ReactNode {
+    return (
+        <div className={styles.starUsRoot}>
+            <span style={{color: "whitesmoke"}}>{label}&nbsp;</span>
+            <span style={{height: "20px"}}>
+                 <GitHubButton href={repoUrl} data-icon="octicon-star" data-show-count="true" aria-label="Star buttons/github-buttons on GitHub">Star</GitHubButton>
+            </span>
+        </div>
+    );
+}

package/src/components/StarUs/index.ts

@@ -0,0 +1,2 @@
+export { default as StarUs } from './StarUs';
+export type { StarUsProps } from './StarUs';

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

@@ -0,0 +1,6 @@
+.starUsRoot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(90deg, #0068F9FF 0%, #F4044DFF 100%);
+}

package/src/components/index.ts

@@ -0,0 +1,11 @@
+export * from './Alert'
+export * from './CodeBlock';
+export * from './Common';
+export * from './NetFoundry'
+export * from './NetFoundryFooter';
+export * from './NetFoundryHighlight';
+export * from './NetFoundryHorizontalSection';
+export * from './NetFoundryLayout';
+export * from './NetFoundryNavbarItems';
+export * from './OsTabs';
+export * from './StarUs';

package/src/docusaurus-envhelper.ts

@@ -0,0 +1,105 @@
+import type { LoadContext, Plugin } from '@docusaurus/types';
+
+// Safe in browser & Node: check globalThis.process only by property access on a known object.
+// 1) Use Node's env if present; 2) else use browser-injected __DOCUSAURUS_ENV__; 3) else {}
+type Env = Record<string, string | undefined>;
+const g: any = typeof globalThis !== "undefined" ? globalThis : {};
+
+const RUNTIME_ENV: Env = (() => {
+    if (g.process && typeof g.process.env === "object") return g.process.env as Env;
+    if (g.__DOCUSAURUS_ENV__) return g.__DOCUSAURUS_ENV__ as Env;
+    return {};
+})();
+
+const getEnv = (k: string, d?: string) =>
+    (RUNTIME_ENV[k] ?? d) as string | undefined;
+
+const ORIGIN =
+    getEnv("DOCUSAURUS_URL") ||
+    (typeof window !== "undefined" ? window.location.origin : "http://localhost");
+
+export const DOCUSAURUS_DEBUG = getEnv("DOCUSAURUS_DEBUG") === "true";
+export const DOCUSAURUS_URL = ORIGIN;
+export const DOCUSAURUS_BASE_PATH = getEnv("DOCUSAURUS_BASE_PATH", "/base-url");
+export const DOCUSAURUS_DOCS_PATH = getEnv("DOCUSAURUS_DOCS_PATH", "/docs-path");
+export const DOCUSAURUS_CANONICAL_DOMAIN = getEnv("DOCUSAURUS_CANONICAL_DOMAIN", "canonical.domain.missing.local");
+export const hotjarId = getEnv("ZITI_HOTJAR_APPID", "6443327")!;
+
+export function cleanUrl(path: string) {
+    return path.replace(/([^:]\/)\/+/g, "$1");
+}
+
+export function docUrl(base: string, path: string): string {
+    return cleanUrl(`${base}/${path}`);
+}
+
+export function absoluteUrl(base: string, path: string): string {
+    return cleanUrl(`${base}/${DOCUSAURUS_DOCS_PATH}/${path}`);
+}
+
+export function addDocsRedir(base: string, redirectsArr: { to: string; from: string[] }[]) {
+    if (getEnv("DEPLOY_ENV") === "kinsta") {
+        redirectsArr.push({
+            to: docUrl(base, "/learn/introduction/"),
+            from: [docUrl(base, "/docs")],
+        });
+    }
+}
+
+
+
+
+
+interface HotjarThemeConfig {
+    applicationId: string;
+}
+
+export function pluginHotjar(context: LoadContext): Plugin {
+    const { siteConfig } = context;
+    const { themeConfig } = siteConfig;
+    const { hotjar } = themeConfig as { hotjar?: HotjarThemeConfig };
+
+    if (!hotjar) {
+        throw new Error(
+            `You need to specify 'hotjar' object in 'themeConfig' with 'applicationId' field in it to use docusaurus-plugin-hotjar`,
+        );
+    }
+
+    const { applicationId } = hotjar;
+
+    if (!applicationId) {
+        throw new Error(
+            'You specified the `hotjar` object in `themeConfig` but the `applicationId` field was missing. ' +
+            'Please ensure this is not a mistake.',
+        );
+    }
+
+    const isProd = process.env.NODE_ENV === 'production';
+
+    return {
+        name: 'docusaurus-plugin-hotjar',
+
+        injectHtmlTags() {
+            console.log(`[hotjar] applicationId = ${applicationId} isProd = ${isProd}`);
+            if (!isProd) {
+                return {};
+            }
+
+            return {
+                headTags: [
+                    {
+                        tagName: 'script',
+                        innerHTML: `(function(h,o,t,j,a,r){
+  h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+  h._hjSettings={hjid:${applicationId},hjsv:6};
+  a=o.getElementsByTagName('head')[0];
+  r=o.createElement('script');r.async=1;
+  r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+  a.appendChild(r);
+})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`,
+                    },
+                ],
+            };
+        },
+    };
+}

package/src/docusaurus-plugins/index.ts

@@ -0,0 +1,7 @@
+export * from './logger'
+export * from './remarkYouTube';
+export * from './remarkScopedPath';
+export * from './remarkReplaceMetaUrl'
+export * from './remarkCodeSections'
+export * from './remarkYamlTable'
+export * from './timedPlugin'

package/src/docusaurus-plugins/logger.ts

@@ -0,0 +1,38 @@
+import { writeFileSync, appendFileSync, existsSync } from 'fs'
+import { join } from 'path'
+
+export enum LogLevel {
+    Silent = 0,
+    Info = 1,
+    Debug = 2,
+}
+
+const LOG = join(process.cwd(), 'remark-plugins.log')
+
+export class Logger {
+    constructor(private level: LogLevel, private name: string) {}
+    log(msg: unknown, level: LogLevel = LogLevel.Info) {
+        if (this.level === LogLevel.Silent) return
+        if (level > this.level) return
+
+        const text = String(msg)
+        if (!text.trim()) return
+
+        const line = `[${this.name}] ${LogLevel[level]} ${text}`
+        if (!existsSync(LOG)) writeFileSync(LOG, '')
+        appendFileSync(LOG, `[${new Date().toISOString()}] ${line}\n`)
+    }
+}
+
+export function resolveLogLevel(val: unknown): LogLevel {
+    if (typeof val === "number" && LogLevel[val] !== undefined) {
+        return val as LogLevel
+    }
+    if (typeof val === "string") {
+        const key = val[0].toUpperCase() + val.slice(1).toLowerCase()
+        if (key in LogLevel) {
+            return LogLevel[key as keyof typeof LogLevel]
+        }
+    }
+    return LogLevel.Silent
+}

package/src/docusaurus-plugins/remarkCodeSections.ts

@@ -0,0 +1,115 @@
+import {visit} from "unist-util-visit"
+import type {Plugin} from "unified"
+import type {Node} from "unist"
+import {Logger, LogLevel, resolveLogLevel} from "./logger"
+
+interface Options {
+    logLevel?: LogLevel
+}
+
+export const remarkCodeSections: Plugin<[Options?]> = (options?: Options) => {
+    const logger = new Logger(resolveLogLevel(options?.logLevel), "remarkCodeSections")
+
+    const desc_text = "@desc:"
+    const command_text = "@command:"
+    const code_text = "@code:"
+    const results_text = "@results:"
+
+    return (tree: Node) => {
+        visit(tree, "code", (node: any, index: number, parent: any) => {
+            if (!node?.value) return
+
+            const hasActivator = /@desc:|@command:|@code:|@results:/.test(node.value)
+            if (!hasActivator) return
+
+            logger.log(node, LogLevel.Debug)
+            if (node.lang && node.lang.startsWith("example")) {
+                const lang = node.lang.replace("example-", "").trim()
+                const lines = node.value.split("\n")
+                let description = "", command = "", code = "", results = "", codeTitle = ""
+                let currentSection = ""
+
+                lines.forEach((line: string) => {
+                    if (line.startsWith(desc_text)) {
+                        currentSection = "description"
+                        description = line.replace(desc_text, "").trim()
+                    } else if (line.startsWith(command_text)) {
+                        currentSection = "command"
+                        command = line.replace(command_text, "").trim()
+                    } else if (line.startsWith(code_text)) {
+                        currentSection = "code"
+                        codeTitle = line.replace(code_text, "").trim()
+                    } else if (line.startsWith(results_text)) {
+                        currentSection = "results"
+                        results = line.replace(results_text, "").trim()
+                    } else {
+                        if (currentSection === "description") description += `\n${line}`
+                        else if (currentSection === "command") command += `\n${line}`
+                        else if (currentSection === "code") code += `\n${line}`
+                        else if (currentSection === "results") results += `\n${line}`
+                    }
+                })
+
+                const divWrapper = {
+                    type: "div",
+                    data: { hName: "div", hProperties: { className: "code-section" } },
+                    children: [] as any[],
+                }
+
+                if (description) {
+                    const descDiv = {
+                        type: "div",
+                        data: { hName: "div", hProperties: { className: "code-section-desc" } },
+                        children: [] as any[],
+                    }
+                    descDiv.children.push(
+                        { type: "paragraph", children: [{ type: "strong", children: [{ type: "text", value: "Description:" }] }] },
+                        { type: "paragraph", children: [{ type: "text", value: description.trim() }], data: { hProperties: { style: "padding-bottom: 10px;" } } },
+                    )
+                    divWrapper.children.push(descDiv)
+                }
+
+                if (command) {
+                    const cmdDiv = {
+                        type: "div",
+                        data: { hName: "div", hProperties: { className: "code-section-command" } },
+                        children: [] as any[],
+                    }
+                    cmdDiv.children.push(
+                        { type: "paragraph", children: [{ type: "strong", children: [{ type: "text", value: "Command:" }] }] },
+                        { type: "code", lang: "sh", value: command.trim() },
+                    )
+                    divWrapper.children.push(cmdDiv)
+                }
+
+                if (code) {
+                    const codeDiv = {
+                        type: "div",
+                        data: { hName: "div", hProperties: { className: "code-section-code" } },
+                        children: [] as any[],
+                    }
+                    codeDiv.children.push(
+                        { type: "paragraph", children: [{ type: "strong", children: [{ type: "text", value: codeTitle }] }] },
+                        { type: "code", lang, value: code.trim() },
+                    )
+                    divWrapper.children.push(codeDiv)
+                }
+
+                if (results) {
+                    const resultsDiv = {
+                        type: "div",
+                        data: { hName: "div", hProperties: { className: "code-section-results" } },
+                        children: [] as any[],
+                    }
+                    resultsDiv.children.push(
+                        { type: "paragraph", children: [{ type: "strong", children: [{ type: "text", value: "Results:" }] }] },
+                        { type: "code", lang: "buttonless", value: results.trim() },
+                    )
+                    divWrapper.children.push(resultsDiv)
+                }
+
+                parent.children.splice(index, 1, divWrapper)
+            }
+        })
+    }
+}

package/src/docusaurus-plugins/remarkReplaceMetaUrl.ts

@@ -0,0 +1,35 @@
+import { Plugin } from 'unified'
+import { visit } from 'unist-util-visit'
+import { Root } from 'mdast'
+import {Logger, LogLevel, resolveLogLevel} from './logger'
+
+console.log("🦖 remarkReplaceMetaUrl plugin loaded")
+
+interface Options {
+    from: string
+    to: string
+    logLevel?: LogLevel
+}
+
+export const remarkReplaceMetaUrl: Plugin<[Options], Root> = (options?: Options) => {
+    const { from = '', to = '', logLevel = LogLevel.Silent } = options ?? {}
+    const logger = new Logger(resolveLogLevel(options?.logLevel), 'remarkReplaceMetaUrl')
+
+    logger.log(`initialized: replacing "${from}" → "${to}"`)
+
+    return (tree: Root) => {
+        visit(tree, 'mdxJsxFlowElement', (node: any) => {
+            if (node.name === 'meta' && Array.isArray(node.attributes)) {
+                for (const attr of node.attributes) {
+                    if (attr.name === 'content' && typeof attr.value === 'string' && attr.value.includes(from)) {
+                        const newVal = attr.value.replace(from, to)
+                        logger.log(`rewriting: "${attr.value}" → "${newVal}"`, LogLevel.Info)
+                        attr.value = newVal
+                    }
+                }
+            }
+        })
+    }
+}
+
+export default remarkReplaceMetaUrl

package/src/docusaurus-plugins/remarkScopedPath.ts

@@ -0,0 +1,70 @@
+import { Plugin } from 'unified'
+import { visit } from 'unist-util-visit'
+import { Image, Link } from 'mdast'
+import { MdxJsxFlowElement, MdxjsEsm } from 'mdast-util-mdx'
+import {Logger, LogLevel, resolveLogLevel} from './logger'
+
+console.log("🦖 remarkScopedPath plugin module loaded")
+
+interface ScopedPathOptions {
+    from: string
+    to: string
+}
+interface Options {
+    mappings: ScopedPathOptions[]
+    logLevel?: LogLevel
+}
+
+export const remarkScopedPath: Plugin<[Options]> = (options?: Options) => {
+    const { mappings = [], logLevel = LogLevel.Silent } = options ?? {}
+    const logger = new Logger(resolveLogLevel(options?.logLevel), 'remarkScopedPath')
+
+    logger.log(`initialized with ${mappings.length} mappings`)
+
+    return (tree, file) => {
+        const filePath = file?.path || file?.history?.slice(-1)[0] || 'unknown'
+        logger.log(`processing file: ${filePath}`, LogLevel.Debug)
+
+        const rewrite = (val: string, from: string, to: string, ctx: string) => {
+            if (val.startsWith(from)) {
+                const newVal = val.replace(from, to)
+                logger.log(`🔄 ${ctx} ${val} → ${newVal}`, LogLevel.Info)
+                return newVal
+            }
+            return val
+        }
+
+        visit(tree, 'image', (node: Image) => {
+            for (const { from, to } of mappings) node.url = rewrite(node.url, from, to, 'img')
+        })
+
+        visit(tree, 'link', (node: Link) => {
+            for (const { from, to } of mappings) node.url = rewrite(node.url, from, to, 'link')
+        })
+
+        visit(tree, 'mdxJsxFlowElement', (node: MdxJsxFlowElement) => {
+            node.attributes?.forEach(attr => {
+                if (attr.type === 'mdxJsxAttribute' && typeof attr.value === 'string') {
+                    for (const { from, to } of mappings)
+                        attr.value = rewrite(attr.value, from, to, `jsx <${node.name}> ${attr.name}:`)
+                }
+            })
+        })
+
+        visit(tree, 'mdxjsEsm', (node: MdxjsEsm) => {
+            for (const { from, to } of mappings) {
+                const re = new RegExp(`(['"])${from}/`, 'g')
+                const newVal = node.value.replace(re, `$1${to}/`)
+                if (newVal !== node.value) {
+                    logger.log(
+                        `esm rewrite (${from} → ${to}):\n--- before ---\n${node.value}\n--- after ---\n${newVal}`,
+                        LogLevel.Info
+                    )
+                    node.value = newVal
+                }
+            }
+        })
+
+        logger.log(` `, LogLevel.Debug)
+    }
+}