fix relative imports

closes #21

docs/package.json

@@ -11,10 +11,10 @@
     "@kobalte/solidbase": "workspace:*",
     "@solidjs/router": "^0.14.7",
     "@solidjs/start": "^1.0.8",
-    "solid-js": "^1.9.1",
-    "vinxi": "^0.4.3",
     "@vinxi/plugin-mdx": "^3.7.2",
-    "solid-mdx": "^0.0.7"
+    "solid-js": "^1.9.1",
+    "solid-mdx": "^0.0.7",
+    "vinxi": "^0.4.3"
   },
   "engines": {
     "node": ">=18"

docs/src/routes/about.mdx

@@ -2,7 +2,7 @@
 title: About
 ---
 
-![Beta](https://raw.githubusercontent.com/kobaltedev/solidbase/refs/heads/main/docs/assets/beta.png)
+![Beta](../../assets/beta.png)
 
 # Introduction
 

docs/src/routes/customization.mdx

@@ -2,7 +2,7 @@
 title: Customization and Theming
 ---
 
-![Beta](https://raw.githubusercontent.com/kobaltedev/solidbase/refs/heads/main/docs/assets/beta.png)
+![Beta](../../assets/beta.png)
 
 # Customization and Theming
 

docs/src/routes/dev.mdx

@@ -2,7 +2,7 @@
 title: Dev
 ---
 
-![Beta](https://raw.githubusercontent.com/kobaltedev/solidbase/refs/heads/main/docs/assets/beta.png)
+![Beta](../../assets/beta.png)
 
 For dev use /dev/ project folder. This is a public dev page copy.
 

docs/src/routes/getting-started.mdx

@@ -2,7 +2,7 @@
 title: Getting Started
 ---
 
-![Beta](https://raw.githubusercontent.com/kobaltedev/solidbase/refs/heads/main/docs/assets/beta.png)
+![Beta](../../assets/beta.png)
 
 # Getting Started
 

docs/src/routes/index.mdx

@@ -1,7 +1,7 @@
 ---
 ---
 
-![Beta](https://raw.githubusercontent.com/kobaltedev/solidbase/refs/heads/main/docs/assets/beta.png)
+![Beta](../../assets/beta.png)
 
 # SolidBase
 

docs/src/routes/md-extensions.mdx

@@ -2,7 +2,7 @@
 title: Markdown Extension
 ---
 
-![Beta](https://raw.githubusercontent.com/kobaltedev/solidbase/refs/heads/main/docs/assets/beta.png)
+![Beta](../../assets/beta.png)
 
 # Markdown Extensions
 

package.json

@@ -65,6 +65,7 @@
     "@solidjs/router": "^0.14.7",
     "@vinxi/plugin-mdx": "^3.7.2",
     "cross-spawn": "^7.0.3",
+    "esast-util-from-js": "^2.0.1",
     "estree-util-value-to-estree": "^3.1.2",
     "gray-matter": "^4.0.3",
     "hastscript": "^9.0.0",

src/client/page-data.ts

@@ -1,4 +1,8 @@
-import { type RouteMatch, useCurrentMatches } from "@solidjs/router";
+import {
+	type RouteMatch,
+	useCurrentMatches,
+	useLocation,
+} from "@solidjs/router";
 import { createContext, createResource, useContext } from "solid-js";
 
 export interface TableOfContentData {
@@ -35,8 +39,10 @@ function getPageData() {
 
 	const [pageData] = createResource(
 		matches,
-		async (m: RouteMatch[]) => {
-			const key = m[m.length - 1].route.key as any;
+		async (m: RouteMatch[]): Promise<CurrentPageData> => {
+			const key = m[m.length - 1]?.route.key as { $component: any } | undefined;
+			if (!key) return { frontmatter: {} };
+
 			const component = key.$component;
 
 			let mod: any;

src/config.ts

@@ -21,6 +21,7 @@ import remarkMdxFrontmatter from "remark-mdx-frontmatter";
 import {
 	remarkCustomContainers,
 	remarkGithubAlertsToDirectives,
+	remarkRelativeImports,
 	remarkTOC,
 } from "./remark-plugins";
 import solidBaseVitePlugin from "./vite-plugin";
@@ -88,6 +89,7 @@ export function withSolidBase(
 					remarkMdxFrontmatter,
 					remarkGithubAlertsToDirectives,
 					remarkDirective,
+					remarkRelativeImports,
 					remarkGfm,
 					remarkTOC,
 					remarkCustomContainers,

src/remark-plugins.ts

@@ -1,3 +1,4 @@
+import { fromJs } from "esast-util-from-js";
 import { h } from "hastscript";
 import { findAndReplace } from "mdast-util-find-and-replace";
 import { toc } from "mdast-util-toc";
@@ -68,31 +69,10 @@ export function remarkTOC() {
 			type: "mdxjsEsm",
 			value: "",
 			data: {
-				estree: {
-					type: "Program",
-					sourceType: "module",
-					body: [
-						{
-							type: "ExportNamedDeclaration",
-							source: null,
-							specifiers: [],
-							declaration: {
-								type: "VariableDeclaration",
-								kind: "const",
-								declarations: [
-									{
-										type: "VariableDeclarator",
-										id: { type: "Identifier", name: "$$SolidBase_TOC" },
-										init: {
-											type: "Literal",
-											value: JSON.stringify(mapNode(map.children[0])),
-										},
-									},
-								],
-							},
-						},
-					],
-				},
+				estree: fromJs(
+					`export const $$SolidBase_TOC = ${JSON.stringify(mapNode(map.children[0]))};`,
+					{ module: true },
+				),
 			},
 		});
 	};
@@ -170,3 +150,26 @@ export function remarkCustomContainers() {
 		});
 	};
 }
+
+export function remarkRelativeImports() {
+	return (tree: any) => {
+		visit(tree, (node) => {
+			if (node.type !== "image") return;
+
+			const { url } = node;
+			if (!(url.startsWith("./") || url.startsWith("../"))) return;
+
+			const ident = `$$SolidBase_RelativeImport${tree.children.length}`;
+
+			node.url = ident;
+
+			tree.children.push({
+				type: "mdxjsEsm",
+				value: "",
+				data: {
+					estree: fromJs(`import ${ident} from "${url}"`, { module: true }),
+				},
+			});
+		});
+	};
+}

src/vite-plugin/index.ts

@@ -27,17 +27,29 @@ export default function solidBaseVitePlugin(
 					return loadVirtual(startConfig, solidBaseConfig);
 				}
 			},
+			transform(code, id) {
+				if (isMarkdown(id)) {
+					return code.replaceAll(
+						/="(\$\$SolidBase_RelativeImport\d+)"/gm,
+						(_, ident) => `={${ident}}`,
+					);
+				}
+			},
 		},
 		{
 			name: "solidbase:post",
 			enforce: "post",
 			transform(code, id) {
 				if (
 					id.startsWith(dirname(fileURLToPath(import.meta.url))) &&
-					id.includes(".mdx")
+					isMarkdown(id)
 				)
 					return transformMdxModule(code, id, startConfig, solidBaseConfig);
 			},
 		},
 	];
 }
+
+export function isMarkdown(path: string) {
+	return path.match(/.(mdx|md)/);
+}

src/vite-plugin/virtual.ts

@@ -95,7 +95,7 @@ export async function transformMdxModule(
 		${code}
 		const data = {
 			frontmatter: typeof frontmatter !== "undefined" ? frontmatter : {},
-			toc: JSON.parse($$SolidBase_TOC),
+			toc: $$SolidBase_TOC,
 			editLink: "${modulePathLink}",
 			lastUpdated: ${lastUpdated},
 		};