fix(content): prepare for nuxt content v3

Author: ThornWalli

.gitignore

@@ -34,3 +34,4 @@ env/cert/*
 
 dist
 .output
+.data

.lintstagedrc

@@ -3,6 +3,6 @@
     "eslint ."
   ],
   "*.(vue|css)": [
-    "stylelint --fix"
+    "stylelint"
   ]
 }

content.config.js

@@ -0,0 +1,14 @@
+import { defineContentConfig, defineCollection } from '@nuxt/content';
+
+export default defineContentConfig({
+  collections: {
+    page: defineCollection({
+      type: 'page',
+      source: 'pages/**/*.json'
+    }),
+    layout: defineCollection({
+      type: 'page',
+      source: 'layout/**.json'
+    })
+  }
+});

src/content/layout/de.json renamed to content/layout/de.json

@@ -1,13 +1,13 @@
 <template>
   <fragment-link-list class="fragment-language-switch">
     <li v-for="language in languages" :key="language.code">
-      <site-link
+      <nuxt-link
         :to="switchLocalePath(language.code)"
         class="language-switch"
         :title="language.code"
       >
         {{ language.code }}
-      </site-link>
+      </nuxt-link>
     </li>
   </fragment-link-list>
 </template>

src/content/layout/en.json renamed to content/layout/en.json

@@ -6,9 +6,9 @@
   >
     <slot>
       <li v-for="item in list" :key="item.title">
-        <site-link :to="localePath(item.to)">
+        <nuxt-link :to="localePath(item.to)">
           {{ item.title }}
-        </site-link>
+        </nuxt-link>
       </li>
     </slot>
   </ul>

src/content/pages/about.json renamed to content/pages/about.json

@@ -11,9 +11,9 @@
         <fragment-content
           v-bind="{ headline: { overline, headline, subline }, content }"
         />
-        <site-link v-if="link" v-bind="{ ...link, to: localePath(link.to) }">{{
+        <nuxt-link v-if="link" v-bind="{ ...link, to: localePath(link.to) }">{{
           link.title
-        }}</site-link>
+        }}</nuxt-link>
       </template>
     </base-layout-two-column-container>
   </base-content-container>

src/content/pages/contact.json renamed to content/pages/contact.json

@@ -6,15 +6,15 @@
   >
     <template #container>
       <div class="logo">
-        <site-link
+        <nuxt-link
           :to="
             localePath({
               path: '/'
             })
           "
         >
           Logo
-        </site-link>
+        </nuxt-link>
       </div>
     </template>
   </base-layout-lost-container>

src/content/pages/de/index.json renamed to content/pages/de/index.json

@@ -3,9 +3,9 @@
     <nav>
       <fragment-link-list class="links" type="page-menu-links">
         <li v-for="item in navigation" :key="item.title">
-          <site-link :to="localePath(item.to)">
+          <nuxt-link :to="localePath(item.to)">
             {{ item.title }}
-          </site-link>
+          </nuxt-link>
           <fragment-link-list
             v-if="item.childs && item.childs.length"
             :list="item.childs"

src/content/pages/de/kontakt.json renamed to content/pages/de/kontakt.json

@@ -1,4 +1,4 @@
-import { useRoute, queryContent, useSetI18nParams } from '#imports';
+import { useRoute, queryCollection, useSetI18nParams } from '#imports';
 
 export function usePageContent() {
   const route = useRoute();
@@ -7,11 +7,10 @@ export function usePageContent() {
   return {
     fetch: async () => {
       try {
-        const path = normalizePath(route.path).replace('/index', '');
-        const { title, components, i18nParams } = await queryContent(
-          'pages',
-          path
-        ).findOne();
+        const path = `/pages${normalizePath(route.path).replace('/index', '')}`;
+        const {
+          body: { title, components, i18nParams }
+        } = await queryCollection('page').path(path).first();
 
         if (!import.meta.server) {
           setI18nParams(i18nParams);

src/content/pages/de/layout.json renamed to content/pages/de/layout.json

@@ -1,29 +1,29 @@
 <template>
   <base-content-container>
     <template #before>
-      <page-header v-bind="layoutData?.components.pageHeader" sticky />
+      <page-header v-bind="layoutData?.body.components.pageHeader" sticky />
     </template>
     <template #default>
       <page-menu
         class="page-menu"
-        v-bind="layoutData?.components.pageMenu"
+        v-bind="layoutData?.body.components.pageMenu"
         :opened="!preventMenuOpened"
       />
       <page-menu-button
-        v-bind="layoutData?.components.pageMenuButton"
+        v-bind="layoutData?.body.components.pageMenuButton"
         @click="onClickMenuButton"
       />
       <slot />
     </template>
     <template #after>
-      <page-footer v-bind="layoutData?.components.pageFooter" />
+      <page-footer v-bind="layoutData?.body.components.pageFooter" />
     </template>
   </base-content-container>
 </template>
 
 <script setup>
 import {
-  queryContent,
+  queryCollection,
   useI18n,
   useAsyncData,
   useBoosterHydrate
@@ -53,8 +53,8 @@ const { locale } = useI18n();
 
 const { data: layoutData } = await useAsyncData(
   `layout-data-${locale.value}`,
-  () => {
-    return queryContent('layout', locale.value).findOne();
+  async () => {
+    return queryCollection('layout').path(`/layout/${locale.value}`).first();
   },
   { watch: [locale] }
 );