fix: compile mdx

kobaltedev · Jan 10, 2024 · ed85b03 · ed85b03
1 parent 11fe556
commit ed85b03
Show file tree

Hide file tree

Showing 9 changed files with 719 additions and 121 deletions.
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -53,6 +53,7 @@
     "github-slugger": "2.0.0",
     "postcss": "8.4.28",
     "rehype-pretty-code": "0.12.3",
+    "remark-shiki-twoslash": "3.1.3",
     "rehype-raw": "7.0.0",
     "rehype-slug": "6.0.0",
     "remark-gfm": "4.0.0",
@@ -61,7 +62,8 @@
     "tailwindcss": "3.3.3",
     "typescript": "4.9.5",
     "unist-util-visit": "5.0.0",
-    "vite": "5.0.11"
+    "vite": "5.0.11",
+    "@vinxi/plugin-mdx": "3.7.0"
   },
   "engines": {
     "node": ">=18"

diff --git a/apps/docs/src/app.tsx b/apps/docs/src/app.tsx
@@ -4,7 +4,7 @@ import "./root.css";
 
 import { ColorModeProvider, ColorModeScript, cookieStorageManagerSSR, Toast } from "@kobalte/core";
 import { MetaProvider, Title } from "@solidjs/meta";
-import { Navigate, Route, Router } from "@solidjs/router";
+import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start";
 import { Suspense } from "solid-js";
 import { isServer, Portal } from "solid-js/web";

diff --git a/apps/docs/src/components/table-of-contents.tsx b/apps/docs/src/components/table-of-contents.tsx
@@ -1,6 +1,7 @@
 import { cache, createAsync, useLocation } from "@solidjs/router";
 import { clsx } from "clsx";
-import { Accessor, createEffect, createSignal, For, onCleanup, Suspense } from "solid-js";
+import { Accessor, createEffect, createSignal, For, onCleanup, Suspense, onMount } from "solid-js";
+import { isServer } from "solid-js/web";
 
 import { mods } from "../app";
 
@@ -72,9 +73,8 @@ function useCurrentSection(tableOfContents: Accessor<TocItem[] | undefined>) {
 }
 
 const getTOC = cache(async (pathname: string) => {
-  "use server";
-
-  return [];
+  console.log("TOC " + pathname);
+  console.log("TOC " + JSON.stringify(mods));
 
   const mod = mods[`./routes${pathname}.mdx`] ?? mods[`./routes${pathname}.md`];
   return !mod ? [] : mod.getHeadings().filter(h => h.depth > 1 && h.depth <= 3);
@@ -83,7 +83,17 @@ const getTOC = cache(async (pathname: string) => {
 export function TableOfContents() {
   const path = useLocation();
 
-  const toc = createAsync(() => getTOC(path.pathname));
+  const [toc, setTOC] = createSignal<Array<{depth: number, text: string, slug: string}>>([]);
+
+  console.log("LOADING TOC");
+
+  onMount(() => {
+    if (!isServer) {
+      const asyncTOC = createAsync(() => getTOC(path.pathname));
+
+      setTOC(asyncTOC() ?? []);
+    }
+  });
 
   //  const toc = createServerData$(
   //    async pathname => {
@@ -104,7 +114,7 @@ export function TableOfContents() {
           <h2
             id="on-this-page-title"
             class="font-display text-sm font-medium text-zinc-900 dark:text-white/90"
-          >
+            >
             On this page
           </h2>
           <ol class="mt-3 text-sm">
@@ -117,16 +127,16 @@ export function TableOfContents() {
                       class={clsx(
                         "block w-full font-sans transition font-normal rounded px-3 py-2 hover:bg-sky-50 dark:hover:bg-sky-900/20",
                         section.slug === currentSection()
-                          ? "text-sky-700 dark:text-sky-600"
-                          : "text-zinc-600 dark:text-zinc-400",
+                        ? "text-sky-700 dark:text-sky-600"
+                        : "text-zinc-600 dark:text-zinc-400",
                         section.depth === 3 && "pl-6",
-                      )}
-                    >
+                        )}
+                      >
                       {section.text}
                     </a>
                   </h3>
                 </li>
-              )}
+                )}
             </For>
           </ol>
         </Suspense>

diff --git a/apps/docs/src/mdx-components.tsx b/apps/docs/src/mdx-components.tsx
@@ -11,7 +11,7 @@ export const mdxComponents = {
 
     return (
       <h1 {...others}>
-        <MetaTitle>{local.children + " – Kobalte"}</MetaTitle>
+        <MetaTitle>{local.children} – Kobalte</MetaTitle>
         {local.children}
       </h1>
     );

diff --git a/apps/docs/src/routes/docs/changelog.tsx b/apps/docs/src/routes/docs/changelog.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from "@solidjs/router";
+import { RouteProps } from "@solidjs/router";
 
 import { Layout } from "../../components";
 import { NavSection } from "../../model/navigation";
@@ -14,10 +14,10 @@ const CHANGELOG_NAV_SECTIONS: NavSection[] = [
   },
 ];
 
-export default function ChangelogLayout() {
+export default function ChangelogLayout(props: RouteProps<string>) {
   return (
     <Layout navSections={CHANGELOG_NAV_SECTIONS}>
-      <Outlet />
+      {props.children}
     </Layout>
   );
 }
diff --git a/apps/docs/src/routes/docs/core.tsx b/apps/docs/src/routes/docs/core.tsx
@@ -1,4 +1,4 @@
-import { Outlet } from "@solidjs/router";
+import { RouteProps } from "@solidjs/router";
 
 import { Layout } from "../../components";
 import { NavSection } from "../../model/navigation";
@@ -158,10 +158,10 @@ const CORE_NAV_SECTIONS: NavSection[] = [
   },
 ];
 
-export default function CoreLayout() {
+export default function CoreLayout(props: RouteProps<string>) {
   return (
     <Layout navSections={CORE_NAV_SECTIONS}>
-      <Outlet />
+      {props.children}
     </Layout>
   );
 }
diff --git a/apps/docs/src/routes/docs/core/components/alert.mdx b/apps/docs/src/routes/docs/core/components/alert.mdx
@@ -66,7 +66,7 @@ The alert consists of :
 
 ### Alert.Root
 
-Renders a `div` by default and support all it's props.
+Renders a `div` by default and support all its props.
 
 ## Rendered elements