Attempt 2 at fixing Shiki (#99)

* Add vercel to gitignore

* Try it with transpilation instead

* Update dependencies

* Temp disable prerender

* Prerender without dynamic og

Author: rijkvanzanten

.gitignore

@@ -24,3 +24,4 @@ logs
 !.env.example
 
 .netlify
+.vercel

app/app.vue

@@ -5,6 +5,10 @@ const { data: navigation } = useAsyncData('navigation', () => fetchContentNaviga
 
 provide('openapi', spec);
 provide('navigation', navigation);
+
+defineOgImage({
+	url: '/img/og-image.png',
+});
 </script>
 
 <template>

app/pages/[...slug].vue

@@ -15,14 +15,6 @@ if (!page.value) {
 const headline = computed(() => findPageHeadline(page.value!));
 
 const { data: surround } = await useAsyncData(`${route.path}-surround`, () => queryContent().where({ _extension: 'md', navigation: { $ne: false } }).only(['title', 'description', '_path']).findSurround(withoutTrailingSlash(route.path)));
-
-defineOgImage({
-	component: 'OgImageDefault',
-	props: {
-		title: page.value.title,
-		breadcrumb: pageBreadcrumb(page.value._path!),
-	},
-});
 </script>
 
 <template>

app/pages/api/[tag].vue

@@ -39,14 +39,6 @@ const operations = computed<FlattenedOperationObject<DerefedOperationObject>[]>(
 if (!tag.value) {
 	throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true });
 }
-
-defineOgImage({
-	component: 'OgImageDefault',
-	props: {
-		title: tag.value.name,
-		breadcrumb: ['api'],
-	},
-});
 </script>
 
 <template>

app/pages/api/index.vue

@@ -13,14 +13,6 @@ const openapi = inject<OpenAPIObject>('openapi')!;
 if (!page.value) {
 	throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true });
 }
-
-defineOgImage({
-	component: 'OgImageDefault',
-	props: {
-		title: page.value.title,
-		breadcrumb: pageBreadcrumb(page.value._path!),
-	},
-});
 </script>
 
 <template>

app/pages/index.vue

@@ -11,13 +11,6 @@ if (!page.value) {
 		fatal: true,
 	});
 }
-
-defineOgImage({
-	component: 'OgImageDefault',
-	props: {
-		title: page.value.title,
-	},
-});
 </script>
 
 <template>

app/pages/tutorials/[category]/[...slug].vue

@@ -9,14 +9,6 @@ const { data: page } = await useAsyncData(route.path, () => queryContent(route.p
 if (!page.value) {
 	throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true });
 }
-
-defineOgImage({
-	component: 'OgImageDefault',
-	props: {
-		title: page.value.title,
-		breadcrumb: pageBreadcrumb(page.value._path!),
-	},
-});
 </script>
 
 <template>

app/pages/tutorials/[category]/index.vue

@@ -9,14 +9,6 @@ const { data: page } = await useAsyncData(route.path, () => queryContent(route.p
 if (!page.value) {
 	throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true });
 }
-
-defineOgImage({
-	component: 'OgImageDefault',
-	props: {
-		title: page.value.title,
-		breadcrumb: pageBreadcrumb(page.value._path!),
-	},
-});
 </script>
 
 <template>

app/pages/tutorials/index.vue

@@ -11,14 +11,6 @@ const { data: categories } = await useAsyncData(route.path + '-categories', () =
 if (!page.value) {
 	throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true });
 }
-
-defineOgImage({
-	component: 'OgImageDefault',
-	props: {
-		title: page.value.title,
-		breadcrumb: pageBreadcrumb(page.value._path!),
-	},
-});
 </script>
 
 <template>

nuxt.config.ts

@@ -87,17 +87,17 @@ export default defineNuxtConfig({
 		},
 	},
 
+	build: {
+		transpile: ['shiki'],
+	},
+
 	future: {
 		compatibilityVersion: 4,
 	},
 
 	compatibilityDate: '2024-11-01',
 
 	nitro: {
-		// preset: 'static',
-		// output: {
-		// 	publicDir: '.output/public/docs',
-		// },
 		prerender: {
 			routes: [
 				'/',
@@ -112,19 +112,6 @@ export default defineNuxtConfig({
 		},
 	},
 
-	vite: {
-		build: {
-			rollupOptions: {
-				external: [
-					'shiki/onig.wasm',
-				],
-			},
-		},
-		assetsInclude: [
-			'**/*.wasm',
-		],
-	},
-
 	algolia: {
 		docSearch: {
 			indexName: 'directus',

package.json

@@ -15,16 +15,16 @@
 		"@docsearch/js": "3.8.2",
 		"@iconify-json/heroicons-outline": "1.2.1",
 		"@iconify-json/material-symbols": "1.2.12",
-		"@iconify-json/simple-icons": "1.2.16",
+		"@iconify-json/simple-icons": "1.2.17",
 		"@nuxt/content": "2.13.4",
 		"@nuxt/eslint": "0.7.4",
 		"@nuxt/scripts": "0.9.5",
 		"@nuxt/ui-pro": "1.6.0",
 		"@nuxtjs/color-mode": "^3.5.2",
 		"@nuxtjs/seo": "2.0.2",
 		"@nuxtjs/tailwindcss": "6.12.2",
-		"@vueuse/core": "12.1.0",
-		"@vueuse/nuxt": "12.1.0",
+		"@vueuse/core": "12.2.0",
+		"@vueuse/nuxt": "12.2.0",
 		"lodash-es": "4.17.21",
 		"nuxt": "^3.14.1592",
 		"nuxt-posthog": "1.6.1",