+
+ );
+}
\ No newline at end of file
diff --git a/docs-site/src/containers/DocsPageContainer.tsx b/docs-site/src/containers/DocsPageContainer.tsx
new file mode 100644
index 0000000..0dc7518
--- /dev/null
+++ b/docs-site/src/containers/DocsPageContainer.tsx
@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import { useLocation, Link } from 'react-router';
+import { Column, Row } from '@carbon/react';
+
+import { docSlugToToc } from '~/router';
+import type { TocLine } from '~/types/toc';
+
+type ColSingleSizeType = { span: number, offset?: number };
+type ColSizeType = {
+ sm: ColSingleSizeType,
+ md: ColSingleSizeType,
+ lg: ColSingleSizeType,
+}
+
+interface TOCProps {
+ toc: TocLine[]
+}
+const TOC = ({ toc }: TOCProps) => {
+ const tocNavigate = (id: string | undefined) => {
+ document.getElementById(id ?? '')?.scrollIntoView();
+ window.location.hash = id ?? '';
+ }
+
+ return (
+
+ )
+}
+
+export default function DocsPageContainer({ children }: { children: ReactNode }) {
+ const loc = useLocation();
+ // match location path to docs page.
+ const pathName = loc.pathname.slice(1);
+
+ // static var of column responsive sizes.
+ const colSizes = {
+ sm: 4,
+ md: 8,
+ lg: 12,
+ // xlg: 12,
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+
+ which for blocks is wrapped in .
+const PreBlock = ({ children, ...props }: any) => {
+ const codeChild = React.Children.only(children);
+ return (
+
+ {codeChild.props.children}
+
+ );
+}
+
+// translations from general markdown -> html to markdown -> carbon.
+export const components: MDXComponents = {
+ ul: (props: any) =>
,
+ thead: (props: any) => ![]()
+}
diff --git a/docs-site/src/types/config.ts b/docs-site/src/types/config.ts
new file mode 100644
index 0000000..57abd96
--- /dev/null
+++ b/docs-site/src/types/config.ts
@@ -0,0 +1,34 @@
+// export type PathType = {
+// breadcrumbLabel: string,
+// file?: string,
+// paths?: {
+// [path: string]: PathType
+// },
+// page?: string
+// }
+
+// export type RoutesType = {
+// [path: string]: PathType
+// };
+
+export type FooterType = {
+ copyright: {
+ image: string,
+ notice: string,
+ },
+ content: {
+ [title: string]: { text: string, external: boolean, url: string }[]
+ }
+}
+
+export type SiteNameType = { prefix: string, postfixBold: string };
+
+export type Config = {
+ siteName: SiteNameType,
+ tabTitle: string,
+ appUrl: string,
+ githubUrl: string,
+ // routes: RoutesType,
+ footer: FooterType
+};
+
diff --git a/docs-site/src/types/file-tree.ts b/docs-site/src/types/file-tree.ts
new file mode 100644
index 0000000..84ae71f
--- /dev/null
+++ b/docs-site/src/types/file-tree.ts
@@ -0,0 +1,9 @@
+export type FileTreeNode = {
+ title: string,
+ path: string,
+ children?: FileTree,
+}
+
+export type FileTree = {
+ [path: string]: FileTreeNode
+};
diff --git a/docs-site/src/types/mdx.d.ts b/docs-site/src/types/mdx.d.ts
new file mode 100644
index 0000000..2084247
--- /dev/null
+++ b/docs-site/src/types/mdx.d.ts
@@ -0,0 +1,11 @@
+// declare module "*.mdx" {
+// export interface TOCItem {
+// depth: number;
+// value: string;
+// id?: string;
+// }
+
+// const MDXComponent: React.ComponentType;
+// export default MDXComponent;
+// export const toc: TOCItem[];
+// };
\ No newline at end of file
diff --git a/docs-site/src/types/meta.ts b/docs-site/src/types/meta.ts
new file mode 100644
index 0000000..be1c3d7
--- /dev/null
+++ b/docs-site/src/types/meta.ts
@@ -0,0 +1,8 @@
+import { A } from "node_modules/react-router/dist/development/context-DohQKLID.mjs"
+
+export interface DocMeta {
+ title: string
+ draft?: boolean
+}
+
+export type DirMeta = DocMeta;
\ No newline at end of file
diff --git a/docs-site/src/types/theme.ts b/docs-site/src/types/theme.ts
new file mode 100644
index 0000000..1e2efbd
--- /dev/null
+++ b/docs-site/src/types/theme.ts
@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+export interface ThemeMeta {
+ label: string,
+ value: string,
+ icon: ReactNode,
+};
+
+export type ThemeMap = Record;
\ No newline at end of file
diff --git a/docs-site/src/types/toc.ts b/docs-site/src/types/toc.ts
new file mode 100644
index 0000000..ae3a0cf
--- /dev/null
+++ b/docs-site/src/types/toc.ts
@@ -0,0 +1,2 @@
+export type TocLine = { title: string, depth: number, navId: string };
+export type SlugToTocMap = Record;
diff --git a/docs-site/src/util/routes.ts b/docs-site/src/util/routes.ts
new file mode 100644
index 0000000..0874f0c
--- /dev/null
+++ b/docs-site/src/util/routes.ts
@@ -0,0 +1,79 @@
+// NOTE:
+// This was used when the react router framework strategy was used.
+
+// import type { RoutesType } from "~/types/config";
+// import { index, route } from "@react-router/dev/routes";
+
+// import config from "../docs.config";
+
+// type FlatRouteType = {
+// path: string,
+// file: string,
+// };
+// export function flattenRoutes(routes: RoutesType) {
+// const flatRoutes: FlatRouteType[] = [];
+
+// function traverseRoutes(routeGroup: RoutesType, path: FlatRouteType) {
+// for (const [k, v] of Object.entries(routeGroup)) {
+// const newPath = { path: path.path.endsWith('/') ? `${path.path}${k}` : `${path.path}/${k}`, file: path.file };
+
+// if (v?.paths) {
+// traverseRoutes(v.paths, newPath);
+// } else {
+// flatRoutes.push({ path: newPath.path, file: v?.file ?? '' });
+// }
+// }
+// }
+
+// for (const [k, v] of Object.entries(routes)) {
+// if (v?.paths) {
+// traverseRoutes(v.paths, { path: k, file: '' });
+// } else {
+// flatRoutes.push({ path: k, file: v?.file ?? '', });
+// }
+// }
+
+// return flatRoutes;
+// }
+
+// type PageKeyPathType = {
+// [path: string]: string
+// };
+// type FlatPathType = {
+// path: string,
+// page: string
+// };
+// export function getPathKeyToPage(routes: RoutesType) {
+// const flatRoutes: PageKeyPathType = {};
+
+// function traverseRoutes(routeGroup: RoutesType, path: FlatPathType) {
+// for (const [k, v] of Object.entries(routeGroup)) {
+// const newPath = { path: path.path.endsWith('/') ? `${path.path}${k}` : `${path.path}/${k}`, page: path.page };
+
+// if (v?.paths) {
+// traverseRoutes(v.paths, newPath);
+// } else {
+// if (!v?.page) throw new Error(`No page specified for ${newPath.path} route.`);
+// flatRoutes[k !== '/' ? `/${newPath.path}` : newPath.path] = v?.page ?? '';
+// }
+// }
+// }
+
+// for (const [k, v] of Object.entries(routes)) {
+// if (v?.paths) {
+// traverseRoutes(v.paths, { path: k, page: '' });
+// } else {
+// if (!v?.page) throw new Error(`No page specified for ${k} route.`);
+// flatRoutes[k !== '/' ? `/${k}` : k] = v?.page ?? '';
+// }
+// }
+
+// return flatRoutes;
+// }
+
+// export const pathKeysToPage = getPathKeyToPage(config.routes);
+
+// export const flatRoutes = flattenRoutes(config.routes).map(({ path, file }) => {
+// if (path === '/') return index(file);
+// return route(path, file);
+// });
diff --git a/docs-site/src/util/toc.ts b/docs-site/src/util/toc.ts
new file mode 100644
index 0000000..0cd9c97
--- /dev/null
+++ b/docs-site/src/util/toc.ts
@@ -0,0 +1,7 @@
+import type { TocEntry } from "@stefanprobst/rehype-extract-toc";
+
+export const docPages = import.meta.glob("../../docs/**/*.(mdx|md)", {
+ eager: true,
+ import: "tableOfContents",
+});
+export const transformDocsPageKey = (shortKey: string) => `../docs/${shortKey}`;
diff --git a/docs-site/tsconfig.json b/docs-site/tsconfig.json
new file mode 100644
index 0000000..ef2b54e
--- /dev/null
+++ b/docs-site/tsconfig.json
@@ -0,0 +1,30 @@
+{
+ "include": [
+ "**/*",
+ "**/.server/**/*",
+ "**/.client/**/*",
+ // ".react-router/types/**/*"
+ ],
+ "compilerOptions": {
+ "lib": ["DOM", "DOM.Iterable", "ES2022"],
+ "types": ["node", "vite/client"],
+ "target": "ES2022",
+ "module": "ES2022",
+ "moduleResolution": "bundler",
+ "jsx": "react-jsx",
+ "rootDirs": [
+ ".",
+ // "./.react-router/types"
+ ],
+ "baseUrl": ".",
+ "paths": {
+ "~/*": ["./src/*"]
+ },
+ "esModuleInterop": true,
+ "verbatimModuleSyntax": true,
+ "noEmit": true,
+ "resolveJsonModule": true,
+ "skipLibCheck": true,
+ "strict": true
+ }
+}
diff --git a/docs-site/vite.config.ts b/docs-site/vite.config.ts
new file mode 100644
index 0000000..2ff97f9
--- /dev/null
+++ b/docs-site/vite.config.ts
@@ -0,0 +1,39 @@
+import path from 'path';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import mdx from "@mdx-js/rollup";
+import remarkGfm from "remark-gfm";
+import rehypeSlug from "rehype-slug";
+import rehypeExtractToc from "@stefanprobst/rehype-extract-toc";
+import rehypeExtractTocExport from "@stefanprobst/rehype-extract-toc/mdx";
+import mdxMermaid from 'mdx-mermaid'
+import remarkFrontmatter from 'remark-frontmatter';
+
+export default defineConfig({
+ plugins: [
+ mdx({
+ providerImportSource: "@mdx-js/react",
+ remarkPlugins: [
+ remarkGfm,
+ [mdxMermaid, {output: 'svg'}],
+ remarkFrontmatter
+ // customRemarkExtractHeadings,
+ ],
+ rehypePlugins: [
+ rehypeSlug,
+ rehypeExtractToc,
+ rehypeExtractTocExport
+ ]
+ }),
+ react(),
+ tsconfigPaths()
+ ],
+ resolve: {
+ alias: {
+ '~': path.resolve(__dirname, 'src')
+ }
+ },
+ // needed for github pages just put the repo name here
+ // base: '/your-repo-name-here/',
+});