chore: update all dependencies to latest versions, migrate Nuxt SEO and OG image setup, and align workspace tooling

.env.example

@@ -1,14 +1,17 @@
-# Environment Variables
-#
-# Copy this file to `.env` and fill in the values for local development.
-# The `.env` file is gitignored and will not be committed.
-#
-# In production (GitHub Actions), these values are set via GitHub Variables
-# (Settings > Secrets and variables > Actions > Variables).
+# In production, only set in GitHub Actions. (Settings -> Secrets and variables -> Actions -> Secrets/Variables)
+
+# Cloudflare API credentials for deploying.
+# -> Secrets
+CLOUDFLARE_ACCOUNT_ID=
+CLOUDFLARE_API_TOKEN=
 
 # Legal page data (address and VAT ID for Impressum / Legal Notice).
-# These are injected into `runtimeConfig.public` at build time via Nuxt's `NUXT_PUBLIC_*` env var convention.
-NUXT_PUBLIC_LEGAL_ADDRESS_STREET="Musterstrasse 1"
-NUXT_PUBLIC_LEGAL_ADDRESS_CITY="01234 Musterstadt"
-NUXT_PUBLIC_LEGAL_ADDRESS_COUNTRY="Germany"
-NUXT_PUBLIC_LEGAL_VAT_ID="DE123456789"
+# -> Variables
+NUXT_PUBLIC_LEGAL_ADDRESS_STREET=Musterstrasse 1
+NUXT_PUBLIC_LEGAL_ADDRESS_CITY=01234 Musterstadt
+NUXT_PUBLIC_LEGAL_ADDRESS_COUNTRY=Germany
+NUXT_PUBLIC_LEGAL_VAT_ID=DE123456789
+
+# Nuxt OG Image Generation Secret (used for signing OG image URLs).
+# -> Secrets
+NUXT_OG_IMAGE_SECRET=

.gitignore

@@ -5,17 +5,31 @@
 .nitro
 .cache
 dist
+.vite-hooks
 
 # Node dependencies
 node_modules
 
 # Logs
 logs
 *.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
 # Misc
 .DS_Store
 .fleet
+.fleetrm
+dist-ssr
+*.local
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
 # Local env files
 .env

app/components/layout/SiteFooter.vue

@@ -48,15 +48,24 @@ const yearSpan = computed(() =>
       </p>
 
       <p class="text-center text-xs text-text-dim">
+        <!-- `link-checker/valid-sitemap-link` does not resolve content-backed catch-all pages here, so we need: -->
+        <!-- eslint-disable-next-line link-checker/valid-sitemap-link -->
         <NuxtLink class="text-xs text-text-dim hover:text-text" to="/legal-notice">
           Legal Notice
         </NuxtLink>
+
         <span class="mx-1.5">·</span>
+
+        <!-- `link-checker/valid-sitemap-link` does not resolve content-backed catch-all pages here, so we need: -->
+        <!-- eslint-disable-next-line link-checker/valid-sitemap-link -->
         <NuxtLink class="text-xs text-text-dim hover:text-text" to="/privacy-policy">
           Privacy Policy
         </NuxtLink>
+
         <span class="mx-1.5">·</span>
+
         Source on
+
         <NuxtLink
           class="text-xs"
           target="_blank"

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { OgImageComponents } from '#og-image/components'
+
 const route = useRoute()
 
 // Strip trailing slash to prevent hydration key mismatches on CDNs that redirect
@@ -16,14 +18,22 @@ if (!page.value) {
 if (page.value.seo) {
   useSeoMeta(page.value.seo)
 }
-if (page.value.head) {
-  useHead(page.value.head as Record<string, unknown>)
+if (page.value.schemaOrg) {
+  useSchemaOrg(page.value.schemaOrg)
+}
+if (page.value.ogImage?.url) {
+  useSeoMeta({
+    ogImage: page.value.ogImage.url,
+  })
 }
-if (page.value.ogImage) {
-  defineOgImage(page.value.ogImage)
+else if (page.value.ogImage?.component) {
+  defineOgImage(
+    page.value.ogImage.component as keyof OgImageComponents,
+    page.value.ogImage.props,
+  )
 }
 else {
-  defineOgImageComponent('Default')
+  defineOgImage('Default')
 }
 </script>
 

app/pages/index.vue

@@ -11,7 +11,7 @@ useSeoMeta({
     + 'Nuxt, 3D on the web, and full-stack development.',
 })
 
-defineOgImageComponent('Home', {
+defineOgImage('Home', {
   title: 'Thorsten Seyschab',
   description: 'IT consultant, senior full-stack developer, and conference speaker.',
 })

app/pages/projects/[slug].vue

@@ -27,7 +27,7 @@ useSeoMeta({
   description: project.value.description,
 })
 
-defineOgImageComponent('Project', {
+defineOgImage('Project', {
   title: project.value.name,
   description: project.value.description,
   repoStars: project.value.repoStars,

app/pages/projects/index.vue

@@ -4,7 +4,7 @@ useSeoMeta({
   description: 'Projects by Thorsten Seyschab (toddeTV).',
 })
 
-defineOgImageComponent('Project', {
+defineOgImage('Project', {
   title: 'Projects',
   description: 'Tools, experiments, and applications for 3D on the web, Vue/Nuxt, and developer tooling.',
 })

app/pages/talks/[slug].vue

@@ -17,7 +17,7 @@ useSeoMeta({
   description: talk.value.description || `${talk.value.title} at ${talk.value.event} in ${talk.value.location}.`,
 })
 
-defineOgImageComponent('Talk', {
+defineOgImage('Talk', {
   title: talk.value.title,
   event: talk.value.event,
   date: talk.value.date,

app/pages/talks/index.vue

@@ -5,7 +5,7 @@ useSeoMeta({
     + 'tech and life topics - from Vue.js, Nuxt, and Vite plugins to 3D on the web.',
 })
 
-defineOgImageComponent('Talk', {
+defineOgImage('Talk', {
   title: 'Talks',
   event: 'Conference talks & speaking engagements',
 })

app/pages/vcard.vue

@@ -9,7 +9,7 @@ useSeoMeta({
 // Personal utility page - exclude from search engine indexing (robots file)
 useRobotsRule(false)
 
-defineOgImageComponent('Default')
+defineOgImage('Default')
 
 const { data: socials } = await useAsyncData('vcard-socials', () =>
   queryCollection('socials').where('active', '=', true).order('sortOrder', 'ASC').all(),

content.config.ts

@@ -4,7 +4,10 @@
  */
 
 import { defineContentConfig, defineCollection } from '@nuxt/content'
-import { asSeoCollection } from '@nuxtjs/seo/content'
+import { defineRobotsSchema } from '@nuxtjs/robots/content'
+import { defineSitemapSchema } from '@nuxtjs/sitemap/content'
+import { defineSchemaOrgSchema } from 'nuxt-schema-org/content'
+import { defineOgImageSchema } from 'nuxt-og-image/content'
 import { z } from 'zod'
 
 const testimonialSchema = z.object({
@@ -18,15 +21,19 @@ const testimonialSchema = z.object({
 
 export default defineContentConfig({
   collections: {
-    content: defineCollection(
-      asSeoCollection({
-        type: 'page',
-        source: {
-          include: 'pages/**',
-          prefix: '/',
-        },
+    content: defineCollection({
+      type: 'page',
+      source: {
+        include: 'pages/**',
+        prefix: '/',
+      },
+      schema: z.object({
+        robots: defineRobotsSchema(),
+        sitemap: defineSitemapSchema(),
+        ogImage: defineOgImageSchema(),
+        schemaOrg: defineSchemaOrgSchema(),
       }),
-    ),
+    }),
 
     socials: defineCollection({
       type: 'data',

nuxt.config.ts

@@ -145,6 +145,13 @@ export default defineNuxtConfig({
   },
 
   vite: {
+    optimizeDeps: {
+      include: [
+        '@unhead/schema-org/vue',
+        '@vue/devtools-core',
+        '@vue/devtools-kit',
+      ],
+    },
     plugins: [
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       tailwindcss() as any,
@@ -245,9 +252,6 @@ export default defineNuxtConfig({
       'OgImage',
       // 'OgImageTemplate',
     ],
-    defaults: {
-      component: 'Default',
-    },
   },
 
   robots: { // for `nuxt-robots` (via `@nuxtjs/seo`)

package.json

@@ -62,37 +62,41 @@
     "test:types": "nuxt typecheck"
   },
   "dependencies": {
-    "nuxt": "~4.3.1",
-    "vue": "~3.5.29"
+    "nuxt": "~4.4.6",
+    "vue": "~3.5.34"
   },
   "devDependencies": {
     "@iconify-json/noto": "~1.2.7",
     "@iconify-json/ph": "~1.2.2",
-    "@iconify-json/simple-icons": "~1.2.72",
-    "@nuxt/content": "~3.12.0",
+    "@iconify-json/simple-icons": "~1.2.82",
+    "@nuxt/content": "~3.13.0",
     "@nuxt/eslint": "~1.15.2",
     "@nuxt/fonts": "~0.14.0",
-    "@nuxt/icon": "~2.2.1",
+    "@nuxt/icon": "~2.2.2",
     "@nuxt/image": "~2.0.0",
-    "@nuxtjs/seo": "~3.4.0",
-    "@tailwindcss/vite": "~4.2.1",
+    "@nuxtjs/seo": "~5.1.3",
+    "@resvg/resvg-js": "~2.6.2",
+    "@tailwindcss/vite": "~4.3.0",
     "@types/qrcode": "~1.5.6",
-    "better-sqlite3": "~12.6.2",
+    "better-sqlite3": "~12.10.0",
     "cross-env": "~10.1.0",
-    "eslint": "~10.0.2",
+    "eslint": "~10.4.0",
     "eslint-plugin-format": "~2.0.1",
-    "eslint-plugin-jsonc": "~3.1.1",
+    "eslint-plugin-jsonc": "~3.1.2",
     "eslint-plugin-tailwindcss": "4.0.0-beta.0",
-    "eslint-plugin-yml": "~3.3.1",
+    "eslint-plugin-yml": "~3.3.2",
     "npm-run-all2": "~8.0.4",
-    "nuxi": "~3.33.1",
-    "prettier": "~3.8.1",
+    "nuxi": "~3.35.2",
+    "prettier": "~3.8.3",
     "qrcode": "~1.5.4",
     "rimraf": "~6.1.3",
+    "rolldown": "~1.0.1",
+    "satori": "~0.26.0",
     "serve": "~14.2.6",
-    "tailwindcss": "~4.2.1",
-    "typescript": "~5.9.3",
-    "vue-tsc": "~3.2.5",
-    "zod": "~4.3.6"
+    "tailwindcss": "~4.3.0",
+    "typescript": "~6.0.3",
+    "vite-plus": "catalog:",
+    "vue-tsc": "~3.2.9",
+    "zod": "~4.4.3"
   }
 }

patches/nuxt-og-image@6.5.0.patch

@@ -0,0 +1,18 @@
+diff --git a/dist/runtime/server/util/kit.js b/dist/runtime/server/util/kit.js
+index 386f4cc7beb21f2402ce1a33846d1314c1950d1f..95e6acee61a440a44c947c0726a0d73894373527 100644
+--- a/dist/runtime/server/util/kit.js
++++ b/dist/runtime/server/util/kit.js
+@@ -1,11 +1,11 @@
+ import { defu } from "defu";
++import { computeIslandHash, filterIslandProps } from "#app/island-hash";
+ import { useRuntimeConfig } from "nitropack/runtime";
+-import { hash } from "ohash";
+ import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
+ import { withoutBase, withoutTrailingSlash } from "ufo";
+ export { withoutQuery } from "nuxtseo-shared/utils";
+ export function fetchIsland(e, component, props, timeout) {
+-  const hashId = hash([component, props]).replaceAll("_", "-");
++  const hashId = computeIslandHash(component, filterIslandProps(props), {}, void 0);
+   const signal = timeout ? AbortSignal.timeout(timeout) : void 0;
+   return e.$fetch(`/__nuxt_island/${component}_${hashId}.json`, {
+     params: {