fix: various bugs (#337)

.gitignore

@@ -1,4 +1,3 @@
-
 node_modules
 build
 dist
@@ -24,6 +23,13 @@ lerna-debug.log
 # solid
 .solid
 .vinxi
+.netlify
+.output
+
+# kobalte dev
+packages/core/dev/App.tsx
+packages/core/dev/index.css
+packages/core/NOTICE.txt
 
 # VSC Settings
 .vscode/settings.json

.prettierignore

@@ -4,4 +4,4 @@
 *.tsx
 *.json
 *.cjs
-pnpm-lock.json
+pnpm-lock.yaml

NOTICE.txt

@@ -229,3 +229,11 @@ This codebase contains a modified portion of code from the TC39 Temporal proposa
     LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
     OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
     SUCH DAMAGE.
+
+-------------------------------------------------------------------------------
+This codebase contains a modified portion of code from Corvu which can be obtained at:
+  * SOURCE:
+    * https://github.com/corvudev/corvu/blob/main/packages/corvu/
+
+  * LICENSE:
+    * https://github.com/corvudev/corvu/blob/main/LICENSE

apps/docs/package.json

@@ -1,71 +1,72 @@
 {
-  "name": "@kobalte/docs",
-  "private": true,
-  "description": "Documentation website of Kobalte.",
-  "keywords": [
-    "solid",
-    "solidjs",
-    "ui",
-    "library",
-    "design-system",
-    "components",
-    "headless",
-    "unstyled",
-    "aria"
-  ],
-  "homepage": "https://github.com/kobaltedev/kobalte/tree/main/apps/docs#readme",
-  "bugs": {
-    "url": "https://github.com/kobaltedev/kobalte/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/kobaltedev/kobalte.git"
-  },
-  "license": "MIT",
-  "author": "Fabien Marie-Louise <[email protected]>",
-  "type": "module",
-  "scripts": {
-    "build": "vinxi build",
-    "clean": "rm -rf .solid && rm -rf netlify && rm -rf .turbo && rm -rf node_modules && rm -rf dist",
-    "dev": "vinxi dev --host",
-    "start": "vinxi start"
-  },
-  "dependencies": {
-    "@docsearch/css": "3.5.2",
-    "@docsearch/js": "3.5.2",
-    "@kobalte/core": "0.12.1",
-    "@solidjs/meta": "0.29.3",
-    "@solidjs/router": "0.10.6",
-    "@tanstack/solid-virtual": "3.0.0-beta.6",
-    "clsx": "2.0.0",
-    "solid-js": "1.8.8",
-    "@solidjs/start": "0.4.11",
-    "vinxi": "0.1.10",
-    "undici": "5.23.0"
-  },
-  "devDependencies": {
-    "@kobalte/tailwindcss": "0.9.0",
-    "@mdx-js/mdx": "3.0.0",
-    "@mdx-js/rollup": "3.0.0",
-    "@tailwindcss/typography": "0.5.9",
-    "acorn": "8.10.0",
-    "autoprefixer": "10.4.15",
-    "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",
-    "shiki": "0.14.7",
-    "solid-mdx": "0.0.7",
-    "tailwindcss": "3.3.3",
-    "typescript": "4.9.5",
-    "unist-util-visit": "5.0.0",
-    "vite": "5.0.12",
-    "@vinxi/plugin-mdx": "3.7.1"
-  },
-  "engines": {
-    "node": ">=18"
-  }
+	"name": "@kobalte/docs",
+	"private": true,
+	"description": "Documentation website of Kobalte.",
+	"keywords": [
+		"solid",
+		"solidjs",
+		"ui",
+		"library",
+		"design-system",
+		"components",
+		"headless",
+		"unstyled",
+		"aria"
+	],
+	"homepage": "https://github.com/kobaltedev/kobalte/tree/main/apps/docs#readme",
+	"bugs": {
+		"url": "https://github.com/kobaltedev/kobalte/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/kobaltedev/kobalte.git"
+	},
+	"license": "MIT",
+	"author": "Fabien Marie-Louise <[email protected]>",
+	"type": "module",
+	"scripts": {
+		"build": "NODE_OPTIONS=\"--max-old-space-size=8192\" vinxi build",
+		"build:dev": "NODE_OPTIONS=\"--max-old-space-size=8192\" DEVELOPMENT=1 vinxi build",
+		"clean": "rm -rf .solid && rm -rf netlify && rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+		"dev": "vinxi dev --host",
+		"start": "vinxi start"
+	},
+	"dependencies": {
+		"@docsearch/css": "3.5.2",
+		"@docsearch/js": "3.5.2",
+		"@kobalte/core": "0.12.1",
+		"@solidjs/meta": "0.29.3",
+		"@solidjs/router": "0.12.4",
+		"@tanstack/solid-virtual": "3.0.0-beta.6",
+		"clsx": "2.0.0",
+		"solid-js": "1.8.15",
+		"@solidjs/start": "0.5.10",
+		"vinxi": "0.3.3",
+		"undici": "5.23.0"
+	},
+	"devDependencies": {
+		"@kobalte/tailwindcss": "0.9.0",
+		"@mdx-js/mdx": "3.0.0",
+		"@mdx-js/rollup": "3.0.0",
+		"@tailwindcss/typography": "0.5.9",
+		"acorn": "8.10.0",
+		"autoprefixer": "10.4.15",
+		"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",
+		"shiki": "0.14.7",
+		"solid-mdx": "0.0.7",
+		"tailwindcss": "3.3.3",
+		"typescript": "4.9.5",
+		"unist-util-visit": "5.0.0",
+		"vite": "5.1.4",
+		"@vinxi/plugin-mdx": "3.7.1"
+	},
+	"engines": {
+		"node": ">=18"
+	}
 }

apps/docs/src/app.tsx

@@ -19,22 +19,22 @@ import { getCookie } from "vinxi/server";
 import toastStyles from "./examples/toast.module.css";
 import { mdxComponents } from "./mdx-components";
 
-export const mods = /*#__PURE__*/ import.meta.glob<
-	true,
-	string,
-	{
-		getHeadings: () => {
-			depth: number;
-			text: string;
-			slug: string;
-		}[];
-	}
->("./routes/docs/**/*.{md,mdx}", {
-	eager: true,
-	query: {
-		meta: "",
-	},
-});
+//export const mods = /*#__PURE__*/ import.meta.glob<
+//	true,
+//	string,
+//	{
+//		getHeadings: () => {
+//			depth: number;
+//			text: string;
+//			slug: string;
+//		}[];
+//	}
+//>("./routes/docs/**/*.{md,mdx}", {
+//	eager: true,
+//	query: {
+//		meta: "",
+//	},
+//});
 
 function getServerCookies() {
 	"use server";
@@ -52,28 +52,26 @@ export default function App() {
 	return (
 		<Router
 			root={(props) => (
-				<Suspense>
-					<MetaProvider>
-						<Title>Kobalte</Title>
-						<ColorModeScript storageType={storageManager.type} />
-						<ColorModeProvider storageManager={storageManager}>
-							<MDXProvider components={mdxComponents}>
-								{props.children}
+				<MetaProvider>
+					<Title>Kobalte</Title>
+					<ColorModeScript storageType={storageManager.type} />
+					<ColorModeProvider storageManager={storageManager}>
+						<MDXProvider components={mdxComponents}>
+							<Suspense>{props.children}</Suspense>
 
-								<Portal>
-									<Toast.Region>
-										<Toast.List class={toastStyles.toast__list} />
-									</Toast.Region>
-									<Toast.Region regionId="custom-region-id">
-										<Toast.List
-											class={toastStyles["toast__list-custom-region"]}
-										/>
-									</Toast.Region>
-								</Portal>
-							</MDXProvider>
-						</ColorModeProvider>
-					</MetaProvider>
-				</Suspense>
+							<Portal>
+								<Toast.Region>
+									<Toast.List class={toastStyles.toast__list} />
+								</Toast.Region>
+								<Toast.Region regionId="custom-region-id">
+									<Toast.List
+										class={toastStyles["toast__list-custom-region"]}
+									/>
+								</Toast.Region>
+							</Portal>
+						</MDXProvider>
+					</ColorModeProvider>
+				</MetaProvider>
 			)}
 		>
 			<FileRoutes />

apps/docs/src/components/table-of-contents.tsx

@@ -6,8 +6,10 @@ import {
 	Suspense,
 	createEffect,
 	createSignal,
+	on,
 	onCleanup,
 } from "solid-js";
+import { isServer } from "solid-js/web";
 import { mods } from "../app";
 
 interface TocItem {
@@ -79,22 +81,74 @@ function useCurrentSection(tableOfContents: Accessor<TocItem[] | undefined>) {
 	return currentSection;
 }
 
-const getTOC = cache(async (pathname: string) => {
-	"use server";
-
-	const mod = mods[`./routes${pathname}.mdx`] ?? mods[`./routes${pathname}.md`];
-	return !mod
-		? []
-		: mod.getHeadings().filter((h) => h.depth > 1 && h.depth <= 3);
-}, "toc");
+//const getTOC = cache(async (pathname: string) => {
+//	"use server";
+//
+//	const mod = mods[`./routes${pathname}.mdx`] ?? mods[`./routes${pathname}.md`];
+//	return !mod
+//		? []
+//		: mod.getHeadings().filter((h) => h.depth > 1 && h.depth <= 3);
+//}, "toc");
+
+function updateHeadings(setter: Setter<TocItem[]>) {
+	if (document.getElementsByTagName("article").length === 0) {
+		setTimeout(() => updateHeadings(setter), 1);
+		return;
+	}
+
+	console.log("update");
+
+	setter(
+		[
+			...document
+				.getElementsByTagName("article")[0]
+				.querySelectorAll("h1, h2, h3, h4, h5, h6"),
+		].map((element) => ({
+			depth: Number(element.tagName.substr(1)),
+			text: element.textContent!,
+			slug: element.id,
+		})),
+	);
+}
 
 export function TableOfContents() {
 	const path = useLocation();
 
-	const toc = createAsync(() => getTOC(path.pathname));
+	//	const toc = createAsync(() => getTOC(path.pathname));
+
+	const [toc, setToc] = createSignal<TocItem[]>([]);
+
+	createEffect(
+		on(
+			() => path.pathname,
+			(pathname) => {
+				if (isServer) return;
+
+				updateHeadings(setToc);
+			},
+		),
+	);
 
 	const currentSection = useCurrentSection(toc);
 
+	createEffect(
+		on(
+			() => currentSection(),
+			(currentSection) => {
+				if (isServer) return;
+
+				const element = document.querySelector(
+					`a[data-toc-slug="${currentSection}"]`,
+				);
+
+				element?.scrollIntoView({
+					behavior: "smooth",
+					block: "nearest",
+				});
+			},
+		),
+	);
+
 	return (
 		<div class="hidden xl:sticky xl:top-[4.5rem] xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-4 xl:pr-6">
 			<nav aria-labelledby="on-this-page-title" class="w-56">
@@ -111,6 +165,7 @@ export function TableOfContents() {
 								<li>
 									<h3>
 										<a
+											data-toc-slug={section.slug}
 											href={`${path.pathname}#${section.slug}`}
 											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",

apps/docs/src/entry-server.tsx

@@ -1,5 +1,4 @@
-import { createHandler } from "@solidjs/start/entry";
-import { StartServer } from "@solidjs/start/server";
+import { StartServer, createHandler } from "@solidjs/start/server";
 
 export default createHandler(() => (
 	<StartServer

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>
 		);