feat: Bump @nuxtjs/seo (#107)

Author: HugoRCD

app/components/FAQ.vue

@@ -12,24 +12,23 @@ const { locale } = useI18n()
 const slug = computed(() => withLeadingSlash(String(route.params.slug)))
 const { data: articles } = await useAsyncData('articles-' + slug.value, async () => {
   const collection = ('articles_' + locale.value) as keyof Collections
-  return await queryCollection(collection).all()
+  return await queryCollection(collection).all() as Collections['articles_en'][] | Collections['articles_fr'][]
 }, {
   watch: [locale],
 })
-console.log(articles.value)
 
 if (!articles.value)
   throw createError({ statusCode: 404, statusMessage: 'Page not found' })
 
 const tags = computed(() =>
-  Array.from(new Set(articles.value.flatMap(article => article.tags))),
+  Array.from(new Set(articles.value?.flatMap(article => article.tags))),
 )
 
 const filteredArticles = computed(() =>
-  articles.value.filter(article =>
+  articles.value?.filter(article =>
     (searchedTags.value.length === 0 || searchedTags.value.some(tag => article.tags.includes(tag)))
     && (searchedTitle.value === '' || article.title!.toLowerCase().includes(searchedTitle.value.toLowerCase())),
-  ),
+  ) ?? [],
 )
 
 const toggleTag = (tag: string) => {

app/components/content/Writing.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { withLeadingSlash } from 'ufo'
+import type { Collections } from '@nuxt/content'
 
 const route = useRoute()
 const { locale } = useI18n()
 
 const slug = computed(() => withLeadingSlash(String(route.params.slug)))
 const { data: faq } = await useAsyncData('faq-' + slug.value, async () => {
-  const collection = ('faq_' + locale.value)
-  return await queryCollection(collection).first()
+  const collection = ('faq_' + locale.value) as keyof Collections
+  return await queryCollection(collection).first() as Collections['faq_en'] | Collections['faq_fr']
 }, {
   watch: [locale],
 })
@@ -58,7 +59,7 @@ const ui = {
           :items="item.questions"
           :ui="{
             item: 'mb-2 group px-4 transform-gpu rounded-xl border border-white/10 bg-white/5 transition duration-500 will-change-transform hover:bg-white/[0.075]',
-            trailingIcon: 'group-data-[state=closed]:rotate-45 group-data-[state=open]:rotate-180',
+            trailingIcon: 'group-data-[state=closed]:rotate-0 group-data-[state=open]:rotate-135',
           }"
         />
       </template>

app/components/home/Faq.vue

@@ -1,4 +1,5 @@
 import { defineCollection, z } from '@nuxt/content'
+import { asSeoCollection } from '@nuxtjs/seo/content'
 
 const commonContentSchema = z.object({
   title: z.string().nonempty(),
@@ -41,48 +42,60 @@ const commonFaqSchema = z.object({
 })
 
 export const collections = {
-  content_en: defineCollection({
-    type: 'page',
-    source: {
-      include: 'en/**/*.md',
-      prefix: '/',
-    },
-    schema: commonContentSchema,
-  }),
-  content_fr: defineCollection({
-    type: 'page',
-    source: {
-      include: 'fr/**/*.md',
-      prefix: '/',
-    },
-    schema: commonContentSchema,
-  }),
-  articles_en: defineCollection({
-    type: 'page',
-    source: {
-      include: 'en/articles/*.md',
-      prefix: '/articles',
-    },
-    schema: commonArticleSchema,
-  }),
-  articles_fr: defineCollection({
-    type: 'page',
-    source: {
-      include: 'fr/articles/*.md',
-      prefix: '/articles',
-    },
-    schema: commonArticleSchema,
-  }),
-  projects_en: defineCollection({
-    type: 'data',
-    source: 'en/projects/*.json',
-    schema: commonProjectSchema,
-  }),
-  projects_fr: defineCollection({
-    type: 'data',
-    source: 'fr/projects/*.json',
-    schema: commonProjectSchema,
-  }),
+  content_en: defineCollection(
+    asSeoCollection({
+      type: 'page',
+      source: {
+        include: 'en/**/*.md',
+        prefix: '/',
+      },
+      schema: commonContentSchema,
+    }),
+  ),
+  content_fr: defineCollection(
+    asSeoCollection({
+      type: 'page',
+      source: {
+        include: 'fr/**/*.md',
+        prefix: '/',
+      },
+      schema: commonContentSchema,
+    }),
+  ),
+  articles_en: defineCollection(
+    asSeoCollection({
+      type: 'page',
+      source: {
+        include: 'en/articles/*.md',
+        prefix: '/articles',
+      },
+      schema: commonArticleSchema,
+    }),
+  ),
+  articles_fr: defineCollection(
+    asSeoCollection({
+      type: 'page',
+      source: {
+        include: 'fr/articles/*.md',
+        prefix: '/articles',
+      },
+      schema: commonArticleSchema,
+    }),
+  ),
+  projects_en: defineCollection(
+    asSeoCollection({
+      type: 'data',
+      source: 'en/projects/*.json',
+      schema: commonProjectSchema,
+    }),
+  ),
+  projects_fr: defineCollection(
+    asSeoCollection({
+      type: 'data',
+      source: 'fr/projects/*.json',
+      schema: commonProjectSchema,
+    }),
+  ),
   stack: defineCollection({
     type: 'data',
     source: 'stack.json',

content.config.ts

@@ -3,10 +3,9 @@ export default defineNuxtConfig({
     '@vueuse/nuxt',
     '@nuxtjs/i18n',
     '@nuxt/ui',
+    '@nuxtjs/seo',
     '@nuxt/content',
     '@nuxt/image',
-    'nuxt-og-image',
-    '@nuxt/fonts',
     '@nuxt/scripts',
   ],
 
@@ -40,8 +39,8 @@ export default defineNuxtConfig({
     renderer: {
       anchorLinks: false,
     },
-    studio: {
-      enabled: true,
+    preview: {
+      api: 'https://api.nuxt.studio',
       dev: true,
     },
   },
@@ -111,4 +110,8 @@ export default defineNuxtConfig({
     },
     provider: 'iconify',
   },
+
+  ogImage: {
+    zeroRuntime: true,
+  },
 })

nuxt.config.ts

@@ -23,10 +23,10 @@
     "@nuxt/scripts": "0.9.5",
     "@nuxt/ui": "3.0.0-alpha.11",
     "@nuxtjs/i18n": "9.1.1",
+    "@nuxtjs/seo": "^2.1.0",
     "@vueuse/core": "12.4.0",
     "@vueuse/nuxt": "12.4.0",
     "nuxt": "3.15.2",
-    "nuxt-og-image": "4.0.2",
     "resend": "4.0.1",
     "sitemap": "8.0.0",
     "vue-sonner": "1.3.0"