chore: preview

Author: hngngn

.helix/languages.toml

@@ -11,6 +11,8 @@ languages = { typescriptreact = [
   { formatCommand = "pnpm biome check --write -unsafe --stdin-file-path=${INPUT}", formatStdin = true },
 ], typescript = [
   { formatCommand = "pnpm biome check --write -unsafe --stdin-file-path=${INPUT}", formatStdin = true },
+], javascript = [
+  { formatCommand = "pnpm biome check --write -unsafe --stdin-file-path=${INPUT}", formatStdin = true },
 ] }
 
 [[language]]
@@ -87,4 +89,4 @@ language-servers = [
   ] },
   "emmet-ls",
 ]
-auto-format = true
+auto-format = true

biome.json

@@ -12,13 +12,11 @@
 			"recommended": true,
 			"style": {
 				"noNonNullAssertion": "warn"
+			},
+			"suspicious": {
+				"noExplicitAny": "warn"
 			}
-		}
-	},
-	"files": {
-		"ignore": [
-			"*.js",
-			"*.cjs"
-		]
+		},
+		"ignore": ["*.js"]
 	}
-}
+}

docs/.gitignore

@@ -27,3 +27,5 @@ gitignore
 # System Files
 .DS_Store
 Thumbs.db
+
+.content

docs/app.config.ts

@@ -1,15 +1,134 @@
-import { dirname, resolve } from "node:path";
+import { existsSync, mkdirSync, readdirSync, writeFileSync } from "node:fs";
+import { dirname, join, relative, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import { mdx } from "@cyco130/vite-plugin-mdx";
 import { defineConfig } from "@solidjs/start/config";
+import rehypeSlug from "rehype-slug";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkGfm from "remark-gfm";
+import { readSync } from "to-vfile";
+import { matter } from "vfile-matter";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 export default defineConfig({
-	vite: {
-		resolve: {
-			alias: {
-				"@": resolve(__dirname, "./src"),
+	extensions: ["mdx"],
+	vite: () => {
+		// https://andi.dev/blog/how-solid-start-blog
+		const processFiles = () => {
+			const docs: {
+				headings?: { depth: number; slug: string; text: string }[];
+				frontmatter?: {
+					title: string;
+					description: string;
+					component: boolean;
+					link: {
+						doc: string;
+						api: string;
+					};
+					toc: boolean;
+				};
+				slug?: string;
+			}[] = [];
+
+			const outputFile = resolve(".content/index.js");
+			const docsDir = resolve("src/routes/docs");
+
+			if (!existsSync(".content")) {
+				mkdirSync(".content", { recursive: true });
+			}
+
+			(function processDirectory(currentDir: string) {
+				const items = readdirSync(currentDir, { withFileTypes: true });
+
+				for (const item of items) {
+					const fullPath = join(currentDir, item.name);
+
+					if (item.isDirectory()) {
+						processDirectory(fullPath);
+					} else if (item.isFile() && item.name.endsWith(".mdx")) {
+						const fileContent = readSync(fullPath, "utf-8");
+						matter(fileContent);
+
+						const relativePath = relative(docsDir, fullPath);
+						const slug = `/docs/${relativePath.replace(/\.mdx$/, "").replace(/\\/g, "/")}`;
+
+						const headings: { depth: number; slug: string; text: string }[] =
+							[];
+						const regex = /^(#{1,6})\s+(.+)$/gm;
+						let match: RegExpExecArray | null;
+
+						// biome-ignore lint/suspicious/noAssignInExpressions:
+						while ((match = regex.exec(String(fileContent))) !== null) {
+							const depth = match[1].length;
+							const text = match[2].trim();
+
+							headings.push({
+								depth,
+								text,
+								slug: text
+									.toLowerCase()
+									.replace(/[^a-z0-9]+/g, "-")
+									.replace(/(^-|-$)/g, ""),
+							});
+						}
+
+						docs.push({
+							frontmatter: fileContent.data
+								.matter as (typeof docs)[0]["frontmatter"],
+							headings,
+							slug,
+						});
+					}
+				}
+			})(docsDir);
+
+			writeFileSync(
+				outputFile,
+				`export const allDocs = ${JSON.stringify(docs, null, 2)}`,
+				"utf-8",
+			);
+		};
+
+		return {
+			plugins: [
+				{
+					name: "posts-gen",
+					buildStart() {
+						processFiles();
+					},
+					configureServer(server) {
+						server.watcher.on("change", (filePath) => {
+							if (filePath.includes("/src/routes/docs")) {
+								processFiles();
+							}
+						});
+					},
+				},
+				mdx({
+					jsx: true,
+					jsxImportSource: "solid-js",
+					providerImportSource: "@/components/mdx",
+					remarkPlugins: [remarkGfm, remarkFrontmatter],
+					rehypePlugins: [rehypeSlug],
+				}),
+			],
+			resolve: {
+				alias: {
+					"@": resolve(__dirname, "./src"),
+					"#content": resolve(__dirname, "./.content"),
+				},
+			},
+		};
+	},
+	server: {
+		prerender: {
+			crawlLinks: true,
+		},
+		esbuild: {
+			options: {
+				target: "esnext",
 			},
 		},
 	},

docs/eslint.config.js

@@ -1,31 +1,41 @@
 import js from "@eslint/js";
-import solid from "eslint-plugin-solid/configs/typescript";
 import * as tsParser from "@typescript-eslint/parser";
-import tseslint from 'typescript-eslint';
 import biome from "eslint-config-biome";
+import solid from "eslint-plugin-solid/configs/typescript";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  js.configs.recommended,
-  tseslint.configs.strictTypeChecked,
-  tseslint.configs.stylisticTypeChecked,
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-  biome,
-  {
-    languageOptions: {
-      parserOptions: {
-        projectService: true,
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
-  },
-  {
-    files: ["**/*.{ts,tsx}"],
-    ...solid,
-    languageOptions: {
-      parser: tsParser,
-      parserOptions: {
-        project: "tsconfig.json",
-      },
-    },
-  }, 
-)
+	js.configs.recommended,
+	tseslint.configs.strictTypeChecked,
+	tseslint.configs.stylisticTypeChecked,
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+	biome,
+	{
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				tsconfigRootDir: import.meta.dirname,
+			},
+		},
+	},
+	{
+		files: ["**/*.{ts,tsx}"],
+		...solid,
+		languageOptions: {
+			parser: tsParser,
+			parserOptions: {
+				project: "tsconfig.json",
+			},
+		},
+	},
+	{
+		rules: {
+			"@typescript-eslint/no-unsafe-assignment": "off",
+			"@typescript-eslint/no-unsafe-call": "off",
+			"@typescript-eslint/no-unsafe-member-access": "off",
+			"@typescript-eslint/consistent-type-definitions": ["error", "type"],
+			"@typescript-eslint/no-confusing-void-expression": "off",
+			"@typescript-eslint/ban-ts-comment": "off",
+		},
+	},
+);

docs/package.json

@@ -8,24 +8,45 @@
 		"version": "vinxi version"
 	},
 	"dependencies": {
+		"@kobalte/core": "^0.13.7",
+		"@solid-primitives/intersection-observer": "^2.1.6",
 		"@solidjs/meta": "^0.29.4",
 		"@solidjs/router": "^0.15.0",
 		"@solidjs/start": "^1.0.10",
+		"clsx": "^2.1.1",
 		"solid-js": "^1.9.2",
+		"solid-wrap-balancer": "^0.0.5",
+		"tailwind-merge": "^2.5.4",
 		"vinxi": "^0.4.3"
 	},
 	"engines": {
 		"node": ">=18"
 	},
 	"devDependencies": {
+		"@cyco130/vite-plugin-mdx": "^2.1.6",
 		"@eslint/js": "^9.15.0",
+		"@repo/tailwindcss": "workspace:*",
 		"@typescript-eslint/parser": "^8.15.0",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.15.0",
 		"eslint-config-biome": "^1.9.3",
 		"eslint-plugin-solid": "^0.14.4",
+		"mdast-util-from-markdown": "^2.0.2",
+		"mdast-util-frontmatter": "^2.0.1",
+		"micromark-extension-frontmatter": "^2.0.0",
 		"postcss": "^8.4.49",
+		"rehype-autolink-headings": "^7.1.0",
+		"rehype-slug": "^6.0.0",
+		"remark-frontmatter": "^5.0.0",
+		"remark-gfm": "^4.0.0",
+		"remark-rehype": "^11.1.1",
 		"tailwindcss": "^3.4.15",
-		"typescript-eslint": "^8.15.0"
+		"to-vfile": "^8.0.0",
+		"typescript-eslint": "^8.15.0",
+		"unist-util-visit": "^5.0.0",
+		"vfile": "^6.0.3",
+		"vfile-matter": "^5.0.0",
+		"vite-plugin-virtual": "^0.3.0",
+		"yaml": "^2.6.1"
 	}
 }

docs/src/app.css

@@ -26,7 +26,7 @@
 		--radius: 0.5rem;
 	}
 
-	.dark {
+	[data-kb-theme="dark"] {
 		--background: 240 10% 3.9%;
 		--foreground: 0 0% 98%;
 		--card: 240 10% 3.9%;

docs/src/app.tsx

@@ -1,17 +1,43 @@
+import { Footer } from "@/components/footer";
+import { Header } from "@/components/header";
 import { Metadata } from "@/components/metadata";
+import { ColorModeProvider, ColorModeScript } from "@kobalte/core";
+import { ToastList, ToastRegion } from "@repo/tailwindcss/ui/toast";
 import { MetaProvider } from "@solidjs/meta";
 import { Router } from "@solidjs/router";
+import { clientOnly } from "@solidjs/start";
 import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
+
 import "./app.css";
+import "./mdx.css";
+
+const Toaster = clientOnly(
+	async () => (await import("@repo/tailwindcss/ui/sonner")).Toaster,
+);
 
 export default function App() {
 	return (
 		<Router
 			root={(props) => (
 				<MetaProvider>
 					<Metadata />
-					<Suspense>{props.children}</Suspense>
+					<ColorModeScript />
+					<ColorModeProvider>
+						<Suspense>
+							<div class="relative flex min-h-screen flex-col">
+								<div class="mx-auto w-full border-border/40 dark:border-border min-[1800px]:max-w-[1536px] min-[1800px]:border-x">
+									<Header />
+									<div class="flex-1">{props.children}</div>
+									<Footer />
+									<ToastRegion>
+										<ToastList />
+									</ToastRegion>
+									<Toaster />
+								</div>
+							</div>
+						</Suspense>
+					</ColorModeProvider>
 				</MetaProvider>
 			)}
 		>