almost working

svg still doesn't render

.gitignore

@@ -151,3 +151,4 @@ tmp-*
 
 *storybook.log
 storybook-static
+lib

docsite/docs/configuration/sources/icecast.mdx

@@ -2,6 +2,7 @@
 title: Icecast
 toc_min_heading_level: 2
 toc_max_heading_level: 5
+description: Setup Icecast and Configuration
 ---
 
 import Tabs from '@theme/Tabs';

docsite/docusaurus.config.ts

@@ -1,6 +1,7 @@
 import type * as Preset from '@docusaurus/preset-classic';
 import type { Config } from '@docusaurus/types';
 import * as themes from 'prism-react-renderer';
+import * as Renderers from './lib/ImageRenderers.js';
 //import sidebars from './sidebars';
 
 let baseSite = 'https://foxxmd.github.io';
@@ -132,7 +133,17 @@ const config: Config = {
           },
         ]
       }
-    ]
+    ],
+          [
+        '@bony_chops/docusaurus-og',
+        {
+          path: './preview-images', // relative to the build directory
+          imageRenderers: {
+              'docusaurus-plugin-content-docs': Renderers.docs,
+              'docusaurus-plugin-content-pages': Renderers.docs,
+          },
+        },
+        ],
   ],
   themeConfig:
     {

docsite/package.json

@@ -12,9 +12,12 @@
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
     "typecheck": "tsc",
-    "postinstall": "patch-package"
+    "postinstall": "patch-package",
+    "previews:build-renderer": "tsc --project tsconfig.client.json || exit 0",
+    "prebuild": "npm run -s previews:build-renderer"
   },
   "dependencies": {
+    "@bony_chops/docusaurus-og": "^1.0.3-beta.3",
     "@docusaurus/core": "3.9.2",
     "@docusaurus/faster": "3.9.2",
     "@docusaurus/plugin-client-redirects": "^3.9.2",

docsite/patches/@bony_chops+docusaurus-og+1.0.3-beta.3.patch

@@ -0,0 +1,42 @@
+diff --git a/node_modules/@bony_chops/docusaurus-og/lib/server/docs.plugin.js b/node_modules/@bony_chops/docusaurus-og/lib/server/docs.plugin.js
+index b308c02..e0d291a 100644
+--- a/node_modules/@bony_chops/docusaurus-og/lib/server/docs.plugin.js
++++ b/node_modules/@bony_chops/docusaurus-og/lib/server/docs.plugin.js
+@@ -93,7 +93,16 @@ class DocsPlugin {
+             await document.write();
+         }
+     };
+-    getHtmlPath = (doc) => doc.metadata?.permalink &&
+-        path.join(this.context.outDir, doc.metadata.permalink, 'index.html');
++    getHtmlPath = (doc) => {
++        if(doc.metadata?.permalink !== undefined) {
++            let relativePerma = doc.metadata.permalink;
++            if(this.context.baseUrl !== undefined && this.context.baseUrl !== '/') {
++               relativePerma = path.join('/', relativePerma.replace(this.context.baseUrl, ''));
++            }
++            const p = path.join(this.context.outDir, relativePerma, 'index.html');
++            return p;
++        }
++        return undefined;
++    }
+ }
+ exports.DocsPlugin = DocsPlugin;
+diff --git a/node_modules/@bony_chops/docusaurus-og/lib/server/pages.plugin.js b/node_modules/@bony_chops/docusaurus-og/lib/server/pages.plugin.js
+index 4676f56..03f03a5 100644
+--- a/node_modules/@bony_chops/docusaurus-og/lib/server/pages.plugin.js
++++ b/node_modules/@bony_chops/docusaurus-og/lib/server/pages.plugin.js
+@@ -101,6 +101,13 @@ class PagesPlugin {
+             await document.write();
+         }
+     };
+-    getHtmlPath = (permalink) => path.join(this.context.outDir, permalink, 'index.html');
++    getHtmlPath = (permalink) => {
++        let relativePerma = permalink;
++        if(this.context.baseUrl !== undefined && this.context.baseUrl !== '/') {
++            relativePerma = path.join('/', relativePerma.replace(this.context.baseUrl, ''));
++        }
++        const p = path.join(this.context.outDir, relativePerma, 'index.html');
++        return p;
++    }
+ }
+ exports.PagesPlugin = PagesPlugin;

docsite/src/ImageRenderers.tsx

@@ -0,0 +1,64 @@
+import type { DocsPageData, ImageRenderer } from '@bony_chops/docusaurus-og'
+import { readFileSync } from 'fs'
+import { join } from 'path'
+
+const logo = (<svg
+  id="Layer_1"
+  data-name="Layer 1"
+  xmlns="http://www.w3.org/2000/svg"
+  width="128"
+  height="128"
+  viewBox="0 0 128 128"
+  fill="#c34a36"
+>
+  <path className="cls-1" d="M76.94,65.49c.87-7.85-5.27-14.51-12.94-14.51-4.56,0-8.57,2.36-10.9,5.91h-4.55c2.36-5.11,7.17-8.87,12.95-9.71V20c0-11.05-8.95-20-20-20H5C2.24,0,0,2.24,0,5V123c0,2.76,2.24,5,5,5H41.5c11.05,0,20-8.95,20-20v-27.17c-5.78-.84-10.59-4.6-12.95-9.72h4.55c2.59,3.96,7.27,6.43,12.46,5.82,6.08-.71,10.71-5.37,11.39-11.45ZM15.3,94.39c0,1.1-.9,2-2,2s-2-.9-2-2V33.61c0-1.1,.9-2,2-2s2,.9,2,2v60.78Zm11.12,14.55c0,1.1-.9,2-2,2s-2-.9-2-2V19.06c0-1.1,.9-2,2-2s2,.9,2,2V108.94Zm37.58-39.53c-2.28,0-4.23-1.41-5.02-3.41h-21.43v28.39c0,1.1-.9,2-2,2s-2-.9-2-2V33.61c0-1.1,.9-2,2-2s2,.9,2,2v28.39h21.43c.93-2.33,3.42-3.86,6.18-3.29,2.05,.42,3.7,2.08,4.13,4.12,.73,3.5-1.92,6.58-5.29,6.58Z" />
+  <path className="cls-1" d="M123,0h-36.5c-11.05,0-20,8.95-20,20v27.18c7.55,1.12,13.5,7.2,14.4,14.82h9.55v-28.28c0-1,.68-1.92,1.66-2.08,1.25-.2,2.34,.76,2.34,1.97v60.67c0,1-.68,1.92-1.66,2.08-1.25,.2-2.34-.76-2.34-1.97v-28.39h-9.55c-.9,7.62-6.84,13.7-14.4,14.82v27.18c0,11.05,8.95,20,20,20h36.5c2.76,0,5-2.24,5-5V5c0-2.76-2.24-5-5-5Zm-17.42,108.94c0,1.1-.9,2-2,2s-2-.9-2-2V19.06c0-1.1,.9-2,2-2s2,.9,2,2V108.94Zm11.12-14.55c0,1.1-.9,2-2,2s-2-.9-2-2V33.61c0-1.1,.9-2,2-2s2,.9,2,2v60.78Z" />
+</svg>);
+
+const DocContent = (props: { data: DocsPageData }) => {
+  const { data } = props;
+  return (
+    <div style={{
+      height: '100%',
+      width: '100%',
+      display: 'flex',
+      textAlign: 'center',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'column',
+      flexWrap: 'nowrap',
+    }}>
+
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}>
+        {logo}
+      </div>
+      <div style={{ display: 'flex' }}>title: {data.metadata.title}</div>
+      <div style={{ display: 'flex' }}>description: {data.metadata.description}</div>
+      <div style={{ display: 'flex' }}>frontmatter description: {data.metadata.frontMatter?.description}</div>
+      <div style={{ display: 'flex' }}>sidebar: {data.metadata.sidebar}</div>
+    </div>
+  );
+}
+
+export const docs: ImageRenderer<DocsPageData> = (data, context) => [
+  <DocContent data={data} />,
+  {
+    width: 1200,
+    height: 630,
+    fonts: [
+      {
+        name: 'Inter',
+        data: readFileSync(
+          join(__dirname, '../static/MartianMonoSemiCondensed-Light.ttf'),
+        ),
+        weight: 400,
+        style: 'normal',
+      },
+    ],
+  },
+]
+

docsite/src/components/PlaygroundInner.tsx

@@ -6,10 +6,10 @@ import CodeBlock from '@theme/CodeBlock';
 import Schema from "@site/static/schemas/aio.json";
 import ConfigExample from "@site/static/configExample.json";
 import './Playground.scss';
-import { JsonSchemaViewer } from 'cf-json-schema-viz';
+import { JSONSchema, JsonSchemaViewer } from 'cf-json-schema-viz';
 import "./json-schema-viewer-styles.css";
 import "./modern-json-react-styles.css";
-import { ReactJsonEditor, createAjvValidator, type Content  } from 'modern-react-json-editor';
+import { Mode, ReactJsonEditor, createAjvValidator, type Content  } from 'modern-react-json-editor';
 import f from "ajv-formats"
 import DetailsAdmo from "./AdmonitionDetails";
 
@@ -47,10 +47,9 @@ function PlaygroundInner(): JSX.Element {
                     <p>Use this to understand how to write a valid config.</p>
                 </DetailsAdmo>
                 <JsonSchemaViewer
-                name="Todos Model"
-                schema={Schema}
-                expanded={false}
-                hideTopBar={false}
+                schema={Schema as JSONSchema}
+                // expanded={false}
+                // hideTopBar={false}
                 renderRootTreeLines={true}
                 emptyText="No schema defined"
                 defaultExpandedDepth={0}
@@ -93,7 +92,7 @@ function PlaygroundInner(): JSX.Element {
     validator={validator} 
     theme={colorMode} 
     content={data}
-    mode="text"
+    mode={"text" as Mode.text}
     style={{height: 'initial'}}
      />
                 )}

docsite/src/components/Schema/ExplorerSSR.tsx

@@ -1,7 +0,0 @@
-import Schema from "@site/static/aio.json";
-import Explorer from './Explorer';
-
-export default function ExplorerSSR(): JSX.Element {
-
-    return <Explorer schema={Schema}/>
-}

docsite/src/components/Schema/SchemaEditor.tsx

@@ -4,7 +4,7 @@ import { useColorMode } from '@docusaurus/theme-common';
 
 const STRINGIFY_JSON = (json: unknown) => JSON.stringify(json, null, "\t");
 import "../modern-json-react-styles.css";
-import { JSONSchema, ReactJsonEditor, createAjvValidator, type Content, type Validator } from 'modern-react-json-editor';
+import { JSONSchema, Mode, ReactJsonEditor, createAjvValidator, type Content, type Validator } from 'modern-react-json-editor';
 import f from "ajv-formats"
 import json5 from 'json5';
 
@@ -58,7 +58,7 @@ function SchemaEditorInner(props: SchemaEditorProps): JSX.Element {
             <ReactJsonEditor
                 validator={validator}
                 theme={colorMode}
-                mode="text"
+                mode={"text" as Mode.text}
                 content={initialData}
                 style={{height: 'initial'}}
             />

docsite/src/contexts/PlaygroundContext.tsx

@@ -1,50 +0,0 @@
-import { useContext, createContext } from "react"
-
-// Type I need for useRef
-import type { MonacoEditorTypes } from "@theme/MonacoEditor"
-
-export type State = {
-    // The full schema
-    // We might need to scope it with a JSON Pointer
-    fullSchema: unknown
-    // The current schema displayed (after the json pointer)
-    userSchema: unknown
-    // The current json pointer
-    jsonPointer: string
-    // Schema editor ref
-    schemaRef: undefined | MonacoEditorTypes.IStandaloneCodeEditor
-    // Data editor ref
-    editorRef: undefined | MonacoEditorTypes.IStandaloneCodeEditor
-    // Data on the data editor
-    // When using "Infer schema from data", it would be annoying to lose our written
-    data: string
-    // Errors in schema
-    schemaErrors: MonacoEditorTypes.IMarkerData[]
-    // Errors in data
-    dataErrors: MonacoEditorTypes.IMarkerData[]
-}
-
-export type Playground = {
-    // state
-    state: State
-    // update function
-    updateState: (_: Partial<State>) => void
-}
-
-export const PlaygroundContext = createContext<Playground>({
-    state: {
-        fullSchema: {},
-        userSchema: {},
-        jsonPointer: "",
-        data: "{}",
-        schemaRef: undefined,
-        editorRef: undefined,
-        schemaErrors: [],
-        dataErrors: [],
-    },
-    updateState: () => {},
-})
-
-export const usePlaygroundContext = () => useContext(PlaygroundContext)
-
-export const PlaygroundContextProvider = PlaygroundContext.Provider

docsite/tsconfig.client.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "noEmit": false,
+    "composite": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "tsBuildInfoFile": "./lib/.tsbuildinfo-client",
+    "rootDir": "src",
+    "outDir": "lib",
+    "module": "CommonJS",
+    "target": "esnext",
+    "jsx": "react-jsx",
+    "types": ["node"],
+    "baseUrl": "./docs",
+    "lib": ["DOM"]
+  },
+  "include": ["src/ImageRenderers.tsx"]
+}

docsite/tsconfig.json

@@ -2,6 +2,7 @@
   // This file is not used in compilation. It is here just for a nice editor experience.
   "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
+    "jsx": "react-jsx",
     "baseUrl": ".",
     "resolveJsonModule": true,
     "types": ["node", "@docusaurus/module-type-aliases", "@docusaurus/theme-classic","docusaurus-plugin-sass"]