fix: remove upgrade to nuxt og image v6

This reverts commit 7a0fc21.

Author: danielroe

.github/workflows/ci.yml

@@ -154,7 +154,6 @@ jobs:
         run: pnpm build:test
         env:
           VALIDATE_HTML: true
-          NODE_OPTIONS: --max-old-space-size=6144
 
       - name: 🖥️ Test project (browser)
         run: pnpm test:browser:prebuilt
@@ -183,8 +182,6 @@ jobs:
 
       - name: 🏗️ Build project
         run: pnpm build:test
-        env:
-          NODE_OPTIONS: --max-old-space-size=6144
 
       - name: ♿ Accessibility audit (Lighthouse - ${{ matrix.mode }} mode)
         run: pnpm test:a11y:prebuilt

app/app.vue

@@ -118,10 +118,6 @@ if (import.meta.client) {
     useEventListener(document, 'click', handleModalLightDismiss)
   }
 }
-
-// title and description will be inferred
-// this will be overridden by upstream pages that use different templates
-defineOgImage('Page.takumi')
 </script>
 
 <template>

app/components/OgImage/Default.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+interface Props {
+  primaryColor?: string
+  title?: string
+  description?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  primaryColor: '#60a5fa',
+  title: 'npmx',
+  description: 'a fast, modern browser for the **npm registry**',
+})
+</script>
+
+<template>
+  <div
+    class="h-full w-full flex flex-col justify-center px-20 bg-[#050505] text-[#fafafa] relative overflow-hidden"
+    style="font-family: 'Geist Mono', sans-serif"
+  >
+    <div class="relative z-10 flex flex-col gap-6">
+      <div class="flex items-start gap-4">
+        <div
+          class="flex items-start justify-center w-16 h-16 p-3.5 rounded-xl bg-gradient-to-tr from-[#3b82f6] shadow-lg"
+          :style="{ backgroundColor: props.primaryColor }"
+        >
+          <svg
+            width="36"
+            height="36"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="white"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m7.5 4.27 9 5.15" />
+            <path
+              d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"
+            />
+            <path d="m3.3 7 8.7 5 8.7-5" />
+            <path d="M12 22V12" />
+          </svg>
+        </div>
+
+        <h1 class="text-8xl font-bold">
+          <span
+            class="opacity-80 tracking-[-0.1em]"
+            :style="{ color: props.primaryColor }"
+            style="margin-left: -1rem; margin-right: 0.5rem"
+            >./</span
+          >{{ props.title }}
+        </h1>
+      </div>
+
+      <div
+        class="flex flex-wrap items-center gap-x-3 text-4xl text-[#a3a3a3]"
+        style="font-family: 'Geist', sans-serif"
+      >
+        <template v-for="(part, index) in props.description.split(/(\*\*.*?\*\*)/)" :key="index">
+          <span
+            v-if="part.startsWith('**') && part.endsWith('**')"
+            class="px-3 py-1 rounded-lg border font-normal"
+            :style="{
+              color: props.primaryColor,
+              backgroundColor: props.primaryColor + '10',
+              borderColor: props.primaryColor + '30',
+              boxShadow: `0 0 20px ${props.primaryColor}25`,
+            }"
+          >
+            {{ part.replaceAll('**', '') }}
+          </span>
+          <span v-else-if="part.trim() !== ''">
+            {{ part }}
+          </span>
+        </template>
+      </div>
+    </div>
+
+    <div
+      class="absolute -top-32 -inset-ie-32 w-[550px] h-[550px] rounded-full blur-3xl"
+      :style="{ backgroundColor: props.primaryColor + '10' }"
+    />
+  </div>
+</template>

app/components/OgImage/Package.d.vue.ts

@@ -0,0 +1,16 @@
+// This type declaration file is required to break a circular type resolution in vue-tsc.
+//
+// nuxt-og-image generates a type declaration (.nuxt/module/nuxt-og-image.d.ts) that imports
+// this component's type. This creates a cycle: nuxt.d.ts → nuxt-og-image.d.ts → Package.vue →
+// needs auto-import globals from nuxt.d.ts. Without this file, vue-tsc resolves the component
+// before the globals are available, so all auto-imports (computed, toRefs, useFetch, etc.) fail.
+
+import type { DefineComponent } from 'vue'
+
+declare const _default: DefineComponent<{
+  name: string
+  version: string
+  primaryColor?: string
+}>
+
+export default _default