fix(update): improve content integration

nuxt.config.js

@@ -47,6 +47,15 @@ export default defineNuxtConfig(() => {
       }
     },
 
+    runtimeConfig: {
+      isDev,
+      public: {
+        general: {
+          url: getWebsiteHost()
+        }
+      }
+    },
+
     devServer: {
       port: getPort(),
       host: getHost()
@@ -314,6 +323,14 @@ function getBaseUrl() {
   return process.env.npm_config_base_url || process.env.BASE_URL || '/';
 }
 
+function getWebsiteHost() {
+  return (
+    process.env.npm_config_website_host ||
+    process.env.WEBSITE_HOST ||
+    'https://'
+  );
+}
+
 function getHost() {
   return process.env.npm_config_host || process.env.HOST || 'localhost';
 }

src/composables/pageContent.js

@@ -8,17 +8,20 @@ export function usePageContent() {
     fetch: async () => {
       try {
         const path = `/pages${normalizePath(route.path).replace('/index', '')}`;
-        const {
-          body: { title, components, i18nParams }
-        } = await queryCollection('page').path(path).first();
+        const { components, i18nParams, ...meta } = await queryCollection(
+          'page'
+        )
+          .path(path)
+          .first()
+          .then(({ body }) => body);
 
         if (!import.meta.server) {
           setI18nParams(i18nParams);
         }
 
         return {
           components,
-          pageMeta: { title }
+          ...meta
         };
       } catch (error) {
         console.error(error);

src/layouts/default.vue

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

src/pages/[...slug].vue

@@ -20,12 +20,33 @@
 </template>
 
 <script setup>
-import { usePageContent, useHead } from '#imports';
+import { joinURL } from 'ufo';
+import {
+  useRuntimeConfig,
+  usePageContent,
+  useSeoMeta,
+  // eslint-disable-next-line no-unused-vars
+  useHead
+} from '#imports';
 
 const { fetch } = usePageContent();
-const { components, pageMeta } = await fetch();
+const { components, title, description, image } = await fetch();
 
-useHead({
-  title: () => pageMeta.title
+const {
+  app: { baseURL },
+  public: {
+    general: { url }
+  }
+} = await useRuntimeConfig();
+
+useSeoMeta({
+  title: () => title,
+  ogTitle: () => title,
+  description: () => description,
+  ogDescription: () => description,
+  ogImage: () => joinURL(url, baseURL, image?.src),
+  ogImageWidth: () => image?.width,
+  ogImageHeight: () => image?.height,
+  ogImageType: () => image?.type
 });
 </script>