example: add solid-docs submodule

kobaltedev · Nov 3, 2024 · bcb1e1e · bcb1e1e
1 parent 28368ec
commit bcb1e1e
Show file tree

Hide file tree

Showing 11 changed files with 2,286 additions and 448 deletions.
diff --git a/examples/solid-docs b/examples/solid-docs
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "@biomejs/biome": "^1.9.4",
     "@solidjs/start": "^1.0.9",
     "@types/cross-spawn": "^6.0.6",
+    "mdast": "^3.0.0",
     "prettier": "4.0.0-alpha.8",
     "solid-js": "^1.9.3",
     "typescript": "^5.6.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -2,3 +2,4 @@ packages:
   - "."
   - "docs"
   - "dev"
+  - "examples/*"
diff --git a/src/client/Root.tsx b/src/client/Root.tsx
@@ -1,7 +1,7 @@
 import { Layout, mdxComponents } from "virtual:solidbase";
 import { MetaProvider, Title, useHead } from "@solidjs/meta";
 import type { RouteSectionProps } from "@solidjs/router";
-import { Show, Suspense, createEffect, createUniqueId } from "solid-js";
+import { Suspense, createEffect, createUniqueId } from "solid-js";
 import { MDXProvider } from "solid-mdx";
 
 import { useRouteConfig } from "./config";
@@ -10,65 +10,51 @@ import { useLocale } from "./locale";
 import { CurrentPageDataContext, useCurrentPageData } from "./page-data";
 import { getRawTheme, getTheme } from "./theme";
 
-function renameCustomMdxComponents(components: Record<string, any>) {
-	for (const name of Object.keys(components)) {
-		if (name[0].toUpperCase() === name[0]) {
-			components[`$$solidbase_${name.toLowerCase()}`] = components[name];
-			components[name] = undefined;
-		}
-	}
-	return components;
-}
-
 export function SolidBaseRoot(props: RouteSectionProps) {
-	const locale = useLocale();
-	const config = useRouteConfig();
-	const pageData = useCurrentPageData();
-
-	const title = () => {
-		const t = pageData().frontmatter?.title;
-		if (!t) return config().title;
-
-		return (config().titleTemplate ?? ":title").replace(":title", t);
-	};
-
-	return (
-		<CurrentPageDataContext.Provider value={pageData}>
-			<MetaProvider>
-				<Title>{title()}</Title>
-
-				<MDXProvider
-					components={renameCustomMdxComponents({
-						...mdxComponents,
-					})}
-				>
-					<SolidBaseContext.Provider value={{ locale, config, title }}>
-						<Inner {...props} />
-					</SolidBaseContext.Provider>
-				</MDXProvider>
-			</MetaProvider>
-		</CurrentPageDataContext.Provider>
-	);
+  const locale = useLocale();
+  const config = useRouteConfig();
+  const pageData = useCurrentPageData();
+
+  const title = () => {
+    const t = pageData().frontmatter?.title;
+    if (!t) return config().title;
+
+    return (config().titleTemplate ?? ":title").replace(":title", t);
+  };
+
+  return (
+    <CurrentPageDataContext.Provider value={pageData}>
+      <MetaProvider>
+        <Title>{title()}</Title>
+
+        <MDXProvider components={mdxComponents}>
+          <SolidBaseContext.Provider value={{ locale, config, title }}>
+            <Inner {...props} />
+          </SolidBaseContext.Provider>
+        </MDXProvider>
+      </MetaProvider>
+    </CurrentPageDataContext.Provider>
+  );
 }
 
 import readThemeCookieScript from "./read-theme-cookie.js?raw";
 
 export function Inner(props: RouteSectionProps) {
-	createEffect(() => {
-		document.documentElement.setAttribute("data-theme", getTheme());
-		document.cookie = `theme=${getRawTheme()}; max-age=31536000; path=/`;
-	});
-
-	useHead({
-		tag: "script",
-		id: createUniqueId(),
-		props: { children: readThemeCookieScript },
-		setting: { close: true },
-	});
-
-	return (
-		<Suspense>
-			<Layout {...props} />
-		</Suspense>
-	);
+  createEffect(() => {
+    document.documentElement.setAttribute("data-theme", getTheme());
+    document.cookie = `theme=${getRawTheme()}; max-age=31536000; path=/`;
+  });
+
+  useHead({
+    tag: "script",
+    id: createUniqueId(),
+    props: { children: readThemeCookieScript },
+    setting: { close: true },
+  });
+
+  return (
+    <Suspense>
+      <Layout {...props} />
+    </Suspense>
+  );
 }
diff --git a/src/client/page-data.ts b/src/client/page-data.ts
@@ -2,77 +2,77 @@ import { type RouteMatch, useCurrentMatches } from "@solidjs/router";
 import { createContext, createResource, useContext } from "solid-js";
 
 export interface TableOfContentData {
-	title: string;
-	url: string;
-	children: Array<TableOfContentData>;
+  title: string;
+  url: string;
+  children: Array<TableOfContentData>;
 }
 
 interface CurrentPageData {
-	frontmatter: Record<string, any>;
-	toc?: TableOfContentData;
-	editLink?: string;
-	lastUpdated?: number;
+  frontmatter: Record<string, any>;
+  toc?: TableOfContentData;
+  editLink?: string;
+  lastUpdated?: number;
 }
 
 const defaultPageData: CurrentPageData = {
-	frontmatter: {},
+  frontmatter: {},
 };
 
 export const CurrentPageDataContext = createContext<() => CurrentPageData>();
 
 export function useCurrentPageData() {
-	const context = useContext(CurrentPageDataContext);
+  const context = useContext(CurrentPageDataContext);
 
-	if (context === undefined) {
-		return createPageData();
-	}
+  if (context === undefined) {
+    return createPageData();
+  }
 
-	return context;
+  return context;
 }
 
 function createPageData() {
-	const matches = useCurrentMatches();
-
-	const [pageData] = createResource(
-		matches,
-		async (m: RouteMatch[]): Promise<CurrentPageData> => {
-			const key = m[m.length - 1]?.route.key as { $component: any } | undefined;
-			if (!key) return { frontmatter: {} };
-
-			const component = key.$component;
-
-			let mod: any;
-
-			// modelled after Start's lazyRoute
-			// https://github.com/solidjs/solid-start/blob/main/packages/start/src/router/lazyRoute.ts
-			if (import.meta.env.DEV) {
-				if (
-					typeof window !== "undefined" &&
-					// @ts-ignore
-					typeof window.$$SolidBase_page_data !== "undefined" &&
-					// @ts-ignore
-					typeof window.$$SolidBase_page_data[component.src.split("?")[0]] !==
-						"undefined"
-				) {
-					// @ts-ignore
-					return window.$$SolidBase_page_data[
-						component.src.split("?")[0]
-					] as CurrentPageData;
-				}
-
-				const manifest = import.meta.env.SSR
-					? import.meta.env.MANIFEST.ssr
-					: import.meta.env.MANIFEST.client;
-
-				mod = await manifest.inputs[component.src]?.import();
-			} else {
-				mod = await component.import();
-			}
-
-			return (mod?.$$SolidBase_page_data ?? defaultPageData) as CurrentPageData;
-		},
-		{ initialValue: defaultPageData },
-	);
-
-	return pageData;
+  const matches = useCurrentMatches();
+
+  const [pageData] = createResource(
+    matches,
+    async (m: RouteMatch[]): Promise<CurrentPageData> => {
+      const key = m[m.length - 1]?.route.key as { $component: any } | undefined;
+      if (!key) return { frontmatter: {} };
+
+      const component = key.$component;
+
+      let mod: any;
+
+      // modelled after Start's lazyRoute
+      // https://github.com/solidjs/solid-start/blob/main/packages/start/src/router/lazyRoute.ts
+      if (import.meta.env.DEV) {
+        if (
+          typeof window !== "undefined" &&
+          // @ts-ignore
+          typeof window.$$SolidBase_page_data !== "undefined" &&
+          // @ts-ignore
+          typeof window.$$SolidBase_page_data[component.src.split("?")[0]] !==
+            "undefined"
+        ) {
+          // @ts-ignore
+          return window.$$SolidBase_page_data[
+            component.src.split("?")[0]
+          ] as CurrentPageData;
+        }
+
+        const manifest = import.meta.env.SSR
+          ? import.meta.env.MANIFEST.ssr
+          : import.meta.env.MANIFEST.client;
+
+        mod = await manifest.inputs[component.src]?.import();
+      } else {
+        mod = await component.import();
+      }
+
+      return (mod?.$$SolidBase_page_data ?? defaultPageData) as CurrentPageData;
+    },
+    { initialValue: defaultPageData },
+  );
+
+  return pageData;
 }