Move code highlighter to API route

components/Base/CodeSnippet.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+interface CodeSnippetProps {
+	name: string;
+	snippet: string;
+	language: string;
+	background: string;
+}
+
+const props = defineProps<CodeSnippetProps>();
+
+// Nuxt server components are still very experimental and not yet ready for production use. By setting up an API route, we can use the server to generate the HTML for the code snippet and offload the bundle size to the server.
+const { data } = await useFetch('/api/code-highlighter', {
+	key: 'code-highlighter' + slugify(props.name),
+	method: 'POST',
+	body: {
+		snippet: props.snippet,
+		language: props.language,
+		background: props.background,
+	},
+});
+</script>
+
+<template>
+	<!-- eslint-disable vue/no-v-html -->
+	<div class="snippet" v-html="(data as any).html" />
+</template>
+
+<style lang="scss" scoped>
+.snippet {
+	flex-grow: grow;
+	height: 100%;
+	overflow: auto;
+}
+
+:deep(pre.shiki.directus-light),
+:deep(pre.shiki.directus-dark) {
+	background-color: transparent !important;
+	tab-size: 3;
+	margin: 0;
+	padding: var(--space-5) var(--space-10);
+	counter-reset: section;
+
+	.line {
+		&::before {
+			counter-increment: section;
+			content: counter(section);
+			display: inline-block;
+			margin-inline-end: var(--space-5);
+		}
+	}
+}
+</style>

components/Block/Code.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { ThemeInput } from 'shikiji';
-import { getHighlighter } from 'shikiji';
 import type { BlockProps } from './types';
 
 const { $directus, $readItem } = useNuxtApp();
@@ -15,25 +13,6 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	),
 );
 
-const shiki = await getHighlighter({
-	themes: [
-		import('~/assets/shiki/directus-light.json') as unknown as ThemeInput,
-		import('~/assets/shiki/directus-dark.json') as unknown as ThemeInput,
-	],
-	langs: ['graphql', 'http', 'typescript', 'sql', 'json'],
-});
-
-const snippets = computed(
-	() =>
-		unref(block)?.snippets?.map((snippet) => ({
-			...snippet,
-			html: shiki.codeToHtml(snippet.snippet, {
-				lang: snippet.language,
-				theme: unref(block)?.background === 'dark-night' ? 'directus-dark' : 'directus-light',
-			}),
-		})),
-);
-
 const activeSnippet = ref(0);
 </script>
 
@@ -42,7 +21,7 @@ const activeSnippet = ref(0);
 		<div class="block-code">
 			<div class="buttons">
 				<button
-					v-for="(snippet, index) in snippets"
+					v-for="(snippet, index) in block.snippets"
 					:key="snippet.name"
 					:class="{ active: activeSnippet === index }"
 					@click="activeSnippet = index"
@@ -51,14 +30,14 @@ const activeSnippet = ref(0);
 				</button>
 			</div>
 
-			<!-- eslint-disable vue/no-v-html -->
-			<div
-				v-for="(snippet, index) in snippets"
+			<BaseCodeSnippet
+				v-for="(snippet, index) in block.snippets"
 				v-show="activeSnippet === index"
 				:key="snippet.name"
-				v-links
-				class="snippet"
-				v-html="snippet.html"
+				:name="snippet.name"
+				:background="block.background"
+				:snippet="snippet.snippet"
+				:language="snippet.language"
 			/>
 		</div>
 	</ThemeProvider>
@@ -105,28 +84,4 @@ const activeSnippet = ref(0);
 		background-color: color-mix(in srgb, transparent, var(--foreground) 5%);
 	}
 }
-
-.snippet {
-	flex-grow: grow;
-	height: 100%;
-	overflow: auto;
-}
-
-:deep(pre.shiki.directus-light),
-:deep(pre.shiki.directus-dark) {
-	background-color: transparent !important;
-	tab-size: 3;
-	margin: 0;
-	padding: var(--space-5) var(--space-10);
-	counter-reset: section;
-
-	.line {
-		&::before {
-			counter-increment: section;
-			content: counter(section);
-			display: inline-block;
-			margin-inline-end: var(--space-5);
-		}
-	}
-}
 </style>

package.json

@@ -7,7 +7,8 @@
 		"postinstall": "nuxt prepare",
 		"typecheck": "nuxt typecheck",
 		"lint": "eslint --cache .",
-		"format": "prettier --write \"**/*.{md,y?(a)ml,json,vue}\""
+		"format": "prettier --write \"**/*.{md,y?(a)ml,json,vue}\"",
+        "analyze": "nuxt analyze"
 	},
 	"devDependencies": {
 		"@directus/sdk": "12.0.1",
@@ -34,7 +35,7 @@
 		"nuxt-simple-sitemap": "3.2.5",
 		"prettier": "3.0.3",
 		"sass": "1.64.1",
-		"shikiji": "0.5.0",
+		"shiki": "1.1.2",
 		"sitemap": "7.1.1",
 		"typescript": "5.2.2",
 		"vue-tsc": "1.8.22"