Use SolidBase (#1092)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: jer3m01 <jer3m01@jer3m01.com>

Author: 3 people

.gitignore

@@ -47,4 +47,4 @@ netlify
 .vinxi
 
 public/sitemap.xml
-public/i18n-status
+public/i18n-status

WRITING.md

@@ -66,9 +66,9 @@ We ask that you use them sparingly.
 3. Once you have the Aside component imported, simply follow the below example for how to add one to your document.
 
 ```
-<Callout>
+:::info
     content here
-</Callout>
+:::
 ```
 
 ### Code examples

app.config.ts

@@ -1,18 +1,7 @@
 import { defineConfig } from "@solidjs/start/config";
-import remarkFrontmatter from "remark-frontmatter";
-import rehypeRaw from "rehype-raw";
-import { nodeTypes } from "@mdx-js/mdx";
-import remarkGfm from "remark-gfm";
-import remarkExpressiveCode, {
-	ExpressiveCodeTheme,
-} from "remark-expressive-code";
-import rehypeSlug from "rehype-slug";
-import rehypeAutoLinkHeadings from "rehype-autolink-headings";
 
-// @ts-expect-error missing types
-import pkg from "@vinxi/plugin-mdx";
+import { createWithSolidBase, defineTheme } from "@kobalte/solidbase/config";
 
-const { default: vinxiMdx } = pkg;
 import tree from "./.solid/tree";
 import entries from "./.solid/flat-entries";
 import solidstartEntries from "./.solid/solid-start-flat-entries";
@@ -27,7 +16,7 @@ function docsData() {
 	const resolveVirtualModuleId = "\0" + virtualModuleId;
 
 	return {
-		name: "solid:collection",
+		name: virtualModuleId,
 		resolveId(id: string) {
 			if (id === virtualModuleId) {
 				return resolveVirtualModuleId;
@@ -50,61 +39,73 @@ function docsData() {
 	};
 }
 
-export default defineConfig({
-	middleware: "src/middleware/index.ts",
-	server: {
-		preset: "netlify",
-		prerender: {
-			crawlLinks: true,
-			autoSubfolderIndex: false,
-			failOnError: true,
-			// eslint-disable-next-line no-useless-escape
-			ignore: [/\{\getPath}/, /.*?emojiSvg\(.*/],
+const theme = defineTheme({
+	componentsPath: import.meta.resolve("./src/solidbase-theme"),
+});
+export default defineConfig(
+	createWithSolidBase(theme)(
+		{
+			ssr: true,
+			middleware: "src/middleware/index.ts",
+			server: {
+				preset: "netlify",
+				prerender: {
+					crawlLinks: true,
+					autoSubfolderIndex: false,
+					failOnError: true,
+					// eslint-disable-next-line no-useless-escape
+					ignore: [/\{\getPath}/, /.*?emojiSvg\(.*/],
+				},
+			},
+			vite: {
+				plugins: [docsData(), heroCodeSnippet()],
+			},
 		},
-	},
-	extensions: ["mdx", "md", "tsx"],
-	vite: () => ({
-		plugins: [
-			docsData(),
-			vinxiMdx.withImports({})({
-				define: {
-					"import.meta.env": "'import.meta.env'",
+		{
+			title: "Solid Docs",
+			editPath: "https://github.com/solidjs/solid-docs/edit/main/:path",
+			markdown: {
+				expressiveCode: {
+					themes: ["min-light", "material-theme-ocean"],
+					themeCssSelector: (theme) => `[data-theme="${theme.type}"]`,
+					frames: false,
 				},
-				jsx: true,
-				jsxImportSource: "solid-js",
-				providerImportSource: "solid-mdx",
-				rehypePlugins: [
-					[
-						rehypeRaw,
-						{
-							passThrough: nodeTypes,
-						},
-					],
-					[rehypeSlug],
-					[
-						rehypeAutoLinkHeadings,
-						{
-							behavior: "wrap",
-							properties: {
-								className: "heading",
-							},
-						},
-					],
-				],
-				remarkPlugins: [
-					remarkFrontmatter,
-					remarkGfm,
-					[
-						remarkExpressiveCode,
-						{
-							themes: ["min-light", "material-theme-ocean"],
-							themeCSSSelector: (theme: ExpressiveCodeTheme) =>
-								`[data-theme="${theme.name}"]`,
-						},
-					],
-				],
-			}),
-			{ enforce: "pre" },
-		],
-	}),
-});
+				toc: {
+					minDepth: 2,
+				},
+			},
+		}
+	)
+);
+
+import { readFile } from "node:fs/promises";
+import { codeToHtml } from "shiki";
+
+function heroCodeSnippet() {
+	const virtualModuleId = "solid:hero-code-snippet";
+	const resolveVirtualModuleId = "\0" + virtualModuleId;
+
+	return {
+		name: virtualModuleId,
+		resolveId(id: string) {
+			if (id === virtualModuleId) {
+				return resolveVirtualModuleId;
+			}
+		},
+		async load(id: string) {
+			if (id === resolveVirtualModuleId) {
+				const snippet = await readFile(
+					"./src/ui/layout/hero-code-snippet.code",
+					"utf-8"
+				);
+
+				const highlightedCode = await codeToHtml(snippet.trim(), {
+					lang: "tsx",
+					theme: "material-theme-ocean",
+				});
+
+				return `export const highlightedCode = \`${highlightedCode}\``;
+			}
+		},
+	};
+}

env.d.ts

@@ -20,3 +20,7 @@ declare module "solid:collection" {
 	const component: any;
 	export default component;
 }
+
+declare module "solid:hero-code-snippet" {
+	export const highlightedCode: string;
+}

package.json

@@ -18,49 +18,44 @@
 		"check:types": "tsc --noEmit"
 	},
 	"dependencies": {
-		"@kobalte/core": "^0.13.6",
+		"@kobalte/core": "^0.13.9",
+		"@kobalte/solidbase": "^0.0.16",
 		"@lunariajs/core": "^0.0.31",
 		"@oramacloud/client": "^1.3.15",
+		"@solid-primitives/event-listener": "^2.3.3",
 		"@solid-primitives/marker": "^0.1.0",
+		"@solid-primitives/media": "^2.2.9",
 		"@solidjs/meta": "^0.29.4",
-		"@solidjs/router": "^0.15.1",
-		"@solidjs/start": "^1.0.10",
+		"@solidjs/router": "^0.15.3",
+		"@solidjs/start": "^1.1.1",
 		"@vinxi/plugin-mdx": "^3.7.2",
 		"dotenv": "^16.4.5",
 		"glob": "^10.4.5",
 		"gray-matter": "^4.0.3",
 		"postcss": "^8.4.47",
-		"rehype-autolink-headings": "^7.1.0",
-		"rehype-parse": "^9.0.0",
-		"rehype-slug": "^6.0.0",
-		"remark-parse": "^11.0.0",
 		"shiki": "^1.17.6",
 		"sitemap": "^7.1.2",
 		"solid-heroicons": "^3.2.4",
-		"solid-js": "^1.9",
+		"solid-js": "^1.9.5",
 		"solid-list": "^0.3.0",
 		"solid-mdx": "^0.0.7",
-		"vinxi": "^0.5.1",
+		"vinxi": "^0.5.3",
 		"zod": "^3.23.8"
 	},
 	"devDependencies": {
 		"@kobalte/tailwindcss": "^0.9.0",
-		"@mdx-js/mdx": "^2.3.0",
 		"@orama/crawly": "^0.0.4",
 		"@tailwindcss/typography": "^0.5.15",
-		"@types/node": "^20.16.5",
+		"@types/node": "^22.9.0",
 		"@typescript-eslint/eslint-plugin": "^8.7.0",
 		"@typescript-eslint/parser": "^8.7.0",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^8.57.1",
 		"eslint-plugin-solid": "^0.13.2",
 		"prettier": "3.2.5",
-		"rehype-raw": "^7.0.0",
-		"remark-expressive-code": "^0.33.5",
-		"remark-frontmatter": "^5.0.0",
-		"remark-gfm": "^3.0.0",
 		"tailwindcss": "^3.4.11",
-		"typescript": "^5.6.2"
+		"typescript": "^5.6.2",
+		"vite": "^6.1.1"
 	},
 	"engines": {
 		"node": ">=18",