remove syntax highlighting from social image build script for perf

build-scripts/social-previews/layouts/banner-css.ts

@@ -5,6 +5,31 @@ export default `
 	font-family: 'Roboto Mono', monospace;
 }
 
+pre {
+	counter-reset: step;
+	counter-increment: step 0;
+}
+
+pre code {
+	display: block;
+	position: relative;
+	padding-left: 3.5rem;
+	tab-size: 4;
+	height: 1.4rem;
+}
+
+pre code::before {
+	content: counter(step);
+	counter-increment: step;
+
+	position: absolute;
+	left: 1rem;
+	width: 1rem;
+	display: inline-block;
+	text-align: right;
+	color: var(--foreground_disabled);
+}
+
 .theme-0 {
 	--color-screen-background: #FFF;
 	--color-screen-border: #CCC;

build-scripts/social-previews/layouts/banner.tsx

@@ -65,7 +65,7 @@ function BannerCodeScreen({
 				style={`--rotX: ${rotX}deg; --rotY: ${rotY}deg; --left: ${rotY}%;`}
 			>
 				<div class="codeScreen">
-					<pre dangerouslySetInnerHTML={{ __html: postHtml }} />
+					<div dangerouslySetInnerHTML={{ __html: postHtml }} />
 					<div class="tags">
 						{post.tags.map((tag) => (
 							<span key={tag}>{tag}</span>

build-scripts/social-previews/shared-post-preview-png.ts

@@ -1,65 +1,60 @@
 import { readFileAsBase64 } from "./utils";
 import { ExtendedPostInfo } from "types/index";
-import * as fs from "fs";
 import { render } from "preact-render-to-string";
 import { createElement } from "preact";
 
 import { unified } from "unified";
 import remarkParse from "remark-parse";
-import { default as remarkTwoslashDefault } from "remark-shiki-twoslash";
 import remarkToRehype from "remark-rehype";
 import { findAllAfter } from "unist-util-find-all-after";
+import { toString } from "hast-util-to-string";
 import rehypeStringify from "rehype-stringify";
 import { Layout, PAGE_HEIGHT, PAGE_WIDTH } from "./base";
-import { Literal } from "unist";
 
-// https://github.com/shikijs/twoslash/issues/147
+const unifiedChain = unified()
-const remarkTwoslash =
+	.use(remarkParse)
-	(remarkTwoslashDefault as never as { default: typeof remarkTwoslashDefault })
+	.use(remarkToRehype, { allowDangerousHtml: true })
-		.default ?? remarkTwoslashDefault;
+	.use(() => (tree) => {
+		// extract code snippets from parsed markdown
+		const nodes = findAllAfter(tree, 0, { tagName: "pre" });
 
-const unifiedChain = () => {
+		// join code parts into one element
-	const unifiedChain = unified()
+		const value =
-		.use(remarkParse)
+			nodes
-		.use(() => (tree) => {
+				.map((node) => toString(node))
-			// extract code snippets from parsed markdown
+				.join("\n")
-			const nodes = findAllAfter(tree, 0, { type: "code" });
+				.trim() +
+			"\n" +
+			renderPostPreviewToString.toString().replace(/([;,])/g, (s) => s + "\n");
 
-			// join code parts into one element
+		const children = value.split("\n").map((value) => ({
-			const value =
+			type: "element",
-				nodes
+			tagName: "code",
-					.map((node) => (node as Literal).value)
+			children: [
-					.join("\n")
+				{
-					.trim() +
+					type: "text",
-				"\n" +
+					value,
-				renderPostPreviewToString
+				},
-					.toString()
+			],
-					.replace(/([;,])/g, (s) => s + "\n");
+		}));
 
-			return {
+		return {
-				type: "root",
+			type: "root",
-				children: [
+			children: [
-					{
+				{
-						type: "code",
+					type: "element",
-						lang: (nodes[0] as { lang?: string })?.lang || "javascript",
+					tagName: "pre",
-						value,
+					children,
-					},
+				},
-				],
+			],
-			};
+		};
-		})
+	})
-		.use([[remarkTwoslash, { themes: ["css-variables"] }]])
+	.use(rehypeStringify, { allowDangerousHtml: true });
-		.use(remarkToRehype, { allowDangerousHtml: true })
-		.use(rehypeStringify, { allowDangerousHtml: true });
-
-	return unifiedChain;
-};
 
 async function markdownToHtml(content: string) {
-	return await (await unifiedChain().process(content)).toString();
+	return await (await unifiedChain.process(content)).toString();
 }
 
-const shikiSCSS = fs.readFileSync("src/styles/shiki.scss", "utf8");
-
 export const renderPostPreviewToString = async (
 	layout: Layout,
 	post: ExtendedPostInfo,
@@ -78,9 +73,6 @@ export const renderPostPreviewToString = async (
 	<html>
 	<head>
 	<style>
-	${shikiSCSS}
-	</style>
-	<style>
 	${layout.css}
 
 	html, body {

package.json

@@ -90,6 +90,7 @@
 		"json5": "^2.2.3",
 		"junk": "^4.0.1",
 		"lint-staged": "^14.0.0",
+		"live-server": "^1.2.2",
 		"msw": "^1.2.3",
 		"npm-run-all": "^4.1.5",
 		"octokit": "^3.1.1",