WIP

sergiodxa · Jul 14, 2024 · ee7cc60 · ee7cc60
1 parent ac8b301
commit ee7cc60
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 72 deletions.
diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx
@@ -10,5 +10,9 @@ type Props = {
 };
 
 export function MarkdownView({ content }: Props) {
-	return <>{renderers.react(content, React, { components: { Fence } })}</>;
+	try {
+		return <>{renderers.react(content, React, { components: { Fence } })}</>;
+	} catch {
+		return <div>error</div>;
+	}
 }
diff --git a/app/components/md/fence.server.ts b/app/components/md/fence.server.ts
@@ -0,0 +1,53 @@
+import { type Schema, Tag } from "@markdoc/markdoc";
+import { createHighlighterCore } from "shiki/core";
+import ghLight from "shiki/themes/github-light.mjs";
+import { z } from "zod";
+
+const ValidationSchema = z.object({
+	content: z.string(),
+	language: z.string().optional().default("plain"),
+	path: z.string().optional(),
+});
+
+export const fence: Schema = {
+	render: "Fence",
+	attributes: { language: { type: String }, path: { type: String } },
+	transform(node, config) {
+		console.log("attributes", node.attributes);
+		let result = ValidationSchema.safeParse(node.attributes);
+		if (result.success) {
+			console.log("success");
+
+			codeToHTML(result.data.content, result.data.language)
+				.then((res) => console.log(res))
+				.catch((err) => console.error(err));
+		}
+
+		// if (language === "tsx") language = "ts";
+		// if (language === "dotenv") language = "plain";
+		// if (language === "erb") language = "html";
+		// if (language === "mdx") language = "md";
+		// if (!language) language = "plain";
+
+		return new Tag(
+			"Fence",
+			node.transformAttributes(config),
+			node.transformChildren(config),
+		);
+	},
+};
+
+async function codeToHTML(content: string, lang: string) {
+	await initWasm();
+	let highlighter = await createHighlighterCore({
+		themes: [ghLight],
+		langs: [
+			import("shiki/langs/typescript.mjs"),
+			import("shiki/langs/diff.mjs"),
+			import("shiki/langs/json.mjs"),
+			import("shiki/langs/css.mjs"),
+		],
+	});
+
+	return highlighter.codeToHtml(content, { theme: "github-light", lang });
+}
diff --git a/app/components/md/fence.tsx b/app/components/md/fence.tsx
@@ -1,24 +1,20 @@
-import { type Schema, Tag } from "@markdoc/markdoc";
-import Prism from "prismjs";
-import { z } from "zod";
-
-import "prismjs/components/prism-bash";
-import "prismjs/components/prism-cshtml";
-import "prismjs/components/prism-css";
-import "prismjs/components/prism-diff";
-import "prismjs/components/prism-graphql";
-import "prismjs/components/prism-http";
-import "prismjs/components/prism-javascript";
-import "prismjs/components/prism-json";
-import "prismjs/components/prism-jsx";
-import "prismjs/components/prism-markdown";
-import "prismjs/components/prism-ruby";
-import "prismjs/components/prism-sql";
-import "prismjs/components/prism-stylus";
-import "prismjs/components/prism-toml";
-import "prismjs/components/prism-typescript";
-import "prismjs/components/prism-yaml";
-import "prismjs/plugins/line-numbers/prism-line-numbers";
+// import "prismjs/components/prism-bash";
+// import "prismjs/components/prism-cshtml";
+// import "prismjs/components/prism-css";
+// import "prismjs/components/prism-diff";
+// import "prismjs/components/prism-graphql";
+// import "prismjs/components/prism-http";
+// import "prismjs/components/prism-javascript";
+// import "prismjs/components/prism-json";
+// import "prismjs/components/prism-jsx";
+// import "prismjs/components/prism-markdown";
+// import "prismjs/components/prism-ruby";
+// import "prismjs/components/prism-sql";
+// import "prismjs/components/prism-stylus";
+// import "prismjs/components/prism-toml";
+// import "prismjs/components/prism-typescript";
+// import "prismjs/components/prism-yaml";
+// import "prismjs/plugins/line-numbers/prism-line-numbers";
 
 import Icon from "~/components/icon";
 
@@ -28,7 +24,8 @@ type FenceProps = {
 	path?: string;
 };
 
-export function Fence({ content, language, path }: FenceProps) {
+export function Fence({ content, language, path, ...props }: FenceProps) {
+	console.log("component", content, language, path, props);
 	return (
 		<pre className={`language-${language}`}>
 			{path && (
@@ -43,44 +40,6 @@ export function Fence({ content, language, path }: FenceProps) {
 	);
 }
 
-export const fence: Schema = {
-	attributes: { language: { type: String }, path: { type: String } },
-	transform(node) {
-		let { content, language, path } = z
-			.object({
-				content: z.string(),
-				language: z.string(),
-				path: z.string().optional(),
-			})
-			.parse(node.attributes);
-
-		if (language === "tsx") language = "ts";
-		if (language === "dotenv") language = "plain";
-		if (language === "erb") language = "html";
-		if (language === "mdx") language = "md";
-		if (!language) language = "plain";
-
-		// if (language === "file-tree") {
-		// 	return <FileTree content={content} />;
-		// }
-
-		try {
-			content = Prism.highlight(content, Prism.languages[language], language);
-		} catch (error) {
-			if (error instanceof Error && error.message.includes("has no grammar")) {
-				try {
-					content = Prism.highlight(content, Prism.languages.plain, "plain");
-				} catch {
-					// ignore any error here
-				}
-			}
-			// ignore other errors
-		}
-
-		return new Tag("Fence", { language, path, content });
-	},
-};
-
 type FileNode = {
 	type: "file" | "directory";
 	name: string;

diff --git a/app/modules/md.server.ts b/app/modules/md.server.ts
@@ -6,10 +6,13 @@ import {
 import { remark } from "remark";
 import strip from "strip-markdown";
 
-import { fence } from "~/components/md/fence";
+import { fence } from "~/components/md/fence.server";
 
 export namespace Markdown {
-	export function parse(content: string, options: Omit<Config, "nodes"> = {}) {
+	export async function parse(
+		content: string,
+		options: Omit<Config, "nodes"> = {},
+	) {
 		return transform(markdocParse(content), { ...options, nodes: { fence } });
 	}
 

diff --git a/app/routes/_.$postType.$/queries.ts b/app/routes/_.$postType.$/queries.ts
@@ -22,7 +22,7 @@ export async function queryArticle(
 
 		return {
 			postType: "articles" as const,
-			article: { title: article.title, body: article.renderable },
+			article: { title: article.title, body: await article.renderable },
 			meta: [
 				{
 					title: t("article.meta.title", {
@@ -101,7 +101,7 @@ export async function queryTutorial(
 				slug: tutorial.slug,
 				tags: tutorial.tags,
 				title: tutorial.title,
-				content: tutorial.renderable,
+				content: await tutorial.renderable,
 			},
 			recommendations,
 			meta: [

diff --git a/app/routes/_.$postType.$/route.tsx b/app/routes/_.$postType.$/route.tsx
@@ -55,13 +55,14 @@ export async function loader({ request, params, context }: LoaderFunctionArgs) {
 	}
 
 	if (postType === "tutorials") {
-		let data = await cache.fetch(
-			`tutorials:${slug}`,
-			async () => JSON.stringify(await queryTutorial(context, request, slug)),
-			{ ttl: 60 * 5 },
-		);
-
-		return json(JSON.parse(data) as Awaited<ReturnType<typeof queryTutorial>>);
+		return json(await queryTutorial(context, request, slug));
+		// 	let data = await cache.fetch(
+		// 		`tutorials:${slug}`,
+		// 		async () => JSON.stringify(await queryTutorial(context, request, slug)),
+		// 		{ ttl: 60 * 5 },
+		// 	);
+
+		// 	return json(JSON.parse(data) as Awaited<ReturnType<typeof queryTutorial>>);
 	}
 
 	throw new Error("Invalid post type");

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
 		"remix-auth-oauth2": "^2.1.0",
 		"remix-i18next": "^6.0.1",
 		"remix-utils": "^7.1.0",
+		"shiki": "^1.10.3",
 		"spin-delay": "^1.2.0",
 		"strip-markdown": "^6.0.0",
 		"tailwind-merge": "^2.2.1",

diff --git a/server/index.ts b/server/index.ts
@@ -8,6 +8,7 @@ import {
 import * as build from "@remix-run/dev/server-build";
 import * as Sentry from "@sentry/remix";
 import { getClientIPAddress } from "remix-utils/get-client-ip-address";
+import { loadWasm } from "shiki/core";
 
 import { EnvSchema } from "./env";
 import { Measurer } from "./measure";
@@ -16,6 +17,12 @@ if (process.env.NODE_ENV === "development") logDevReady(build);
 
 let remix = createRequestHandler(build, build.mode);
 
+let initialized = false;
+if (!initialized) {
+	await loadWasm(import("shiki/onig.wasm"));
+	initialized = true;
+}
+
 export async function onRequest(
 	ctx: EventContext<RuntimeEnv, string, Record<string, unknown>>,
 ) {