fix: TOC

kobaltedev · Jan 31, 2024 · b191dfa · b191dfa
1 parent 7925f3d
commit b191dfa
Show file tree

Hide file tree

Showing 9 changed files with 320 additions and 594 deletions.
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -39,8 +39,8 @@
     "@tanstack/solid-virtual": "3.0.0-beta.6",
     "clsx": "2.0.0",
     "solid-js": "1.8.8",
-    "@solidjs/start": "0.4.4",
-    "vinxi": "0.1.1",
+    "@solidjs/start": "0.4.11",
+    "vinxi": "0.1.10",
     "undici": "5.23.0"
   },
   "devDependencies": {
@@ -62,8 +62,8 @@
     "tailwindcss": "3.3.3",
     "typescript": "4.9.5",
     "unist-util-visit": "5.0.0",
-    "vite": "5.0.11",
-    "@vinxi/plugin-mdx": "3.7.0"
+    "vite": "5.0.12",
+    "@vinxi/plugin-mdx": "3.7.1"
   },
   "engines": {
     "node": ">=18"

diff --git a/apps/docs/src/app.tsx b/apps/docs/src/app.tsx
@@ -4,14 +4,17 @@ import "./root.css";
 
 import { ColorModeProvider, ColorModeScript, cookieStorageManagerSSR, Toast } from "@kobalte/core";
 import { MetaProvider, Title } from "@solidjs/meta";
-import { Router } from "@solidjs/router";
+import { cache, createAsync, Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start";
 import { Suspense } from "solid-js";
 import { isServer, Portal } from "solid-js/web";
 import { MDXProvider } from "solid-mdx";
 
 import toastStyles from "./examples/toast.module.css";
 import { mdxComponents } from "./mdx-components";
+import {
+  getCookie,
+} from "vinxi/server";
 
 export const mods = /*#__PURE__*/ import.meta.glob<
   true,
@@ -30,19 +33,17 @@ export const mods = /*#__PURE__*/ import.meta.glob<
   },
 });
 
-// Works on server but breaks client.
-//
-//async function getServerCookies() {
-//  if (!isServer) throw "getServerCookies should only be called on the server";
-//
-//  const getRequestHeaders = (await import("@solidjs/start/server")).getRequestHeaders;
-//
-//  return getRequestHeaders(getRequestEvent()).cookie ?? "";
-//}
+function getServerCookies() {
+  "use server";
+
+  const colorMode = getCookie("kb-color-mode");
+
+  return colorMode ? `kb-color-mode=${colorMode}` : "";
+}
 
 export default function App() {
   const storageManager = cookieStorageManagerSSR(
-    isServer ? /*await getServerCookies()*/ "" : document.cookie,
+    isServer ? getServerCookies() : document.cookie,
   );
 
   return (

diff --git a/apps/docs/src/components/table-of-contents.tsx b/apps/docs/src/components/table-of-contents.tsx
@@ -1,8 +1,6 @@
 import { cache, createAsync, useLocation } from "@solidjs/router";
 import { clsx } from "clsx";
-import { Accessor, createEffect, createSignal, For, onCleanup, Suspense, onMount } from "solid-js";
-import { isServer } from "solid-js/web";
-
+import { Accessor, createEffect, createSignal, For, onCleanup, Suspense } from "solid-js";
 import { mods } from "../app";
 
 interface TocItem {
@@ -74,8 +72,6 @@ function useCurrentSection(tableOfContents: Accessor<TocItem[] | undefined>) {
 
 const getTOC = cache(async (pathname: string) => {
   "use server";
-  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);
@@ -84,27 +80,7 @@ const getTOC = cache(async (pathname: string) => {
 export function TableOfContents() {
   const path = useLocation();
 
-  const toc = createAsync(() => getTOC(path.pathname))// 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 => {
-  //      const mod = mods[`./routes${pathname}.mdx`] ?? mods[`./routes${pathname}.md`];
-  //      return !mod ? [] : mod.getHeadings().filter(h => h.depth > 1 && h.depth <= 3);
-  //    },
-  //    {
-  //      key: () => path.pathname,
-  //    },
-  //  );
+  const toc = createAsync(() => getTOC(path.pathname))
 
   const currentSection = useCurrentSection(toc);
 

diff --git a/apps/docs/src/entry-server.tsx b/apps/docs/src/entry-server.tsx
@@ -1,4 +1,5 @@
-import { createHandler, StartServer } from "@solidjs/start/server";
+import { createHandler } from "@solidjs/start/entry";
+import { StartServer } from "@solidjs/start/server";
 
 export default createHandler(() => (
   <StartServer

diff --git a/apps/docs/src/root.css b/apps/docs/src/root.css
@@ -228,7 +228,7 @@
 }
 
 @media (min-width: 768px) {
-  .DocSearch-Button {
+  .DocSearch-Button.DocSearch-Button {
     justify-content: flex-start;
     border: 1px solid transparent;
     border-radius: 8px;

diff --git a/apps/docs/src/routes/docs/core/components/toast.mdx b/apps/docs/src/routes/docs/core/components/toast.mdx
@@ -540,7 +540,7 @@ Inside your application, use add your custom region:
 
 ```tsx {2, 5}
 <Portal>
-  // Default region
+  {/* Default region */}
   <Toast.Region>
     <Toast.List />
   </Toast.Region>

diff --git a/apps/docs/src/routes/docs/core/overview/ssr.mdx b/apps/docs/src/routes/docs/core/overview/ssr.mdx
@@ -4,19 +4,9 @@ import { Callout } from "../../../../components/callout";
 
 ## Usage with SolidStart
 
-If you are using [SolidStart](https://start.solidjs.com/) you will need to add the ssr setting to your `vite.config.ts`:
-
-```ts {5-7}
-import { defineConfig } from "@solidjs/start/config";
-
-export default defineConfig({
-  ssr: {
-    noExternal: ["@kobalte/core"],
-  },
-});
-```
+Kobalte works out of the box with [SolidStart](https://start.solidjs.com/).
 
 <Callout type="warning">
-  Kobalte has been tested with `[email protected]` and `@solidjs/[email protected].4`, compatibility with other
+  Kobalte has been tested with `[email protected]` and `@solidjs/[email protected].11`, compatibility with other
   versions is not guaranteed.
 </Callout>