Migrate to nuxt content v3 (#272)

.gitignore

@@ -96,3 +96,4 @@ sw.*
 tests/e2e/videos
 tests/e2e/screenshots
 tests/**/coverage
+.data/content

components/documents/MarkdownContent.vue

@@ -1,27 +1,27 @@
 <script lang="ts" setup>
-import { useMarkdownContent } from '~/composables/markdown';
+import { get } from '@vueuse/core';
+import { useRemoteOrLocal } from '~/composables/use-remote-or-local';
 import { commonAttrs, getMetadata } from '~/utils/metadata';
 
 const props = defineProps<{ path: string }>();
 
-const {
-  public: { baseUrl },
-} = useRuntimeConfig();
-const { loadContent } = useMarkdownContent();
+const { public: { baseUrl } } = useRuntimeConfig();
 
-const data = await loadContent(props.path);
+const { fallbackToLocalOnError } = useRemoteOrLocal();
 
-if (!data) {
+const { data: document } = await useAsyncData(props.path, async () => fallbackToLocalOnError(
+  async () => queryCollection('documentsRemote').path(props.path).first(),
+  async () => await queryCollection('documentsLocal').path(props.path).first(),
+));
+
+if (!document) {
   showError({ message: `Page not found: ${props.path}`, statusCode: 404 });
 }
 else {
-  useContentHead(data);
-  const { title, description } = data;
-
   useHead({
     meta: getMetadata(
-      title ?? '',
-      description ?? '',
+      get(document)?.title ?? '',
+      get(document)?.description ?? '',
       `${baseUrl}${props.path}`,
       baseUrl,
     ),
@@ -33,42 +33,40 @@ else {
 <template>
   <div class="py-10 md:py-20 border-b border-rui-grey-300">
     <div class="container flex flex-col lg:flex-row gap-8 justify-between">
-      <div v-if="data?.subtitle">
+      <div v-if="document?.subtitle">
         <div
-          v-if="data?.title"
+          v-if="document?.title"
           class="text-h6 text-rui-primary mb-3"
         >
-          {{ data.title }}
+          {{ document.title }}
         </div>
         <div
-          v-if="data?.subtitle"
+          v-if="document?.subtitle"
           class="text-h4"
         >
-          {{ data.subtitle }}
+          {{ document.subtitle }}
         </div>
       </div>
-      <div v-else-if="data?.title">
+      <div v-else-if="document?.title">
         <div class="text-h4">
-          {{ data.title }}
+          {{ document.title }}
         </div>
       </div>
       <div
-        v-if="data?.address"
+        v-if="document?.address"
         class="whitespace-pre-line text-body-1 text-rui-grey-600"
       >
-        {{ data.address }}
+        {{ document.address.split('\\n').join('\n') }}
       </div>
     </div>
   </div>
 
   <div class="py-10 md:py-20">
     <div class="container lg:max-w-[720px]">
       <ContentRenderer
-        v-if="data"
-        :value="data"
-      >
-        <ContentRendererMarkdown :value="data" />
-      </ContentRenderer>
+        v-if="document"
+        :value="document"
+      />
     </div>
   </div>
 </template>

components/home/testimonials/Testimonial.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import type { TestimonialMarkdownContent } from '~/composables/markdown';
+import type { TestimonialsLocalCollectionItem, TestimonialsRemoteCollectionItem } from '@nuxt/content';
 
-withDefaults(
-  defineProps<{
-    avatar?: string;
-    body: TestimonialMarkdownContent['body'];
-    username: string;
-    url?: string;
-  }>(),
-  { avatar: undefined, url: undefined },
-);
+type TestimonialBody = TestimonialsLocalCollectionItem['body'] | TestimonialsRemoteCollectionItem['body'];
+
+interface TestimonialProps {
+  avatar?: string;
+  body: TestimonialBody;
+  username: string;
+  url?: string;
+}
+
+withDefaults(defineProps<TestimonialProps>(), { avatar: undefined, url: undefined });
 </script>
 
 <template>
@@ -45,7 +46,7 @@ withDefaults(
       </span>
     </span>
     <ContentRenderer :value="body">
-      <ContentRendererMarkdown
+      <ContentRenderer
         :class="$style.text"
         :value="body"
         tag="span"

components/home/testimonials/TestimonialCarousel.vue

@@ -2,10 +2,10 @@
 import { SwiperSlide } from 'swiper/vue';
 import { get, set } from '@vueuse/core';
 import type { Swiper, SwiperOptions } from 'swiper/types';
-import type { TestimonialMarkdownContent } from '~/composables/markdown';
+import type { TestimonialsLocalCollectionItem, TestimonialsRemoteCollectionItem } from '@nuxt/content';
 
 defineProps<{
-  testimonials: TestimonialMarkdownContent[];
+  testimonials: TestimonialsLocalCollectionItem[] | TestimonialsRemoteCollectionItem[];
 }>();
 
 const swiper = ref<Swiper>();

components/home/testimonials/Testimonials.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { useMarkdownContent } from '~/composables/markdown';
+const { fallbackToLocalOnError } = useRemoteOrLocal();
+const { data: testimonials } = await useAsyncData('testimonials', () => fallbackToLocalOnError(
+  async () => await queryCollection('testimonialsRemote').all(),
+  async () => await queryCollection('testimonialsLocal').all(),
+));
 
 const { t } = useI18n();
-
-const { loadTestimonials, testimonials } = useMarkdownContent();
-
-await loadTestimonials();
 </script>
 
 <template>
@@ -17,7 +17,10 @@ await loadTestimonials();
       <div :class="$style.detail">
         {{ t('home.testimonials.detail') }}
       </div>
-      <TestimonialCarousel :testimonials="testimonials" />
+      <TestimonialCarousel
+        v-if="testimonials"
+        :testimonials="testimonials"
+      />
     </div>
   </div>
 </template>

components/jobs/JobDetail.vue

@@ -1,46 +1,34 @@
 <script setup lang="ts">
-import { get } from '@vueuse/core';
-import type { JobMarkdownContent } from '~/composables/markdown';
+import type { JobsLocalCollectionItem, JobsRemoteCollectionItem, MinimalTree } from '@nuxt/content';
 
 const props = defineProps<{
-  data: JobMarkdownContent;
+  data: JobsLocalCollectionItem | JobsRemoteCollectionItem;
 }>();
 
-const { data } = toRefs(props);
+function filterBy(filterMethod: (tag: string) => boolean) {
+  return computed(() => {
+    const data = props.data;
+    const body = data.body as any as MinimalTree;
+    assert(body.type === 'minimal');
 
-const separatedData = computed<{
-  default: JobMarkdownContent;
-  blockquote: JobMarkdownContent;
-}>(() => {
-  const regularItems = [];
-  const blockquoteItems = [];
+    const elements = body.value.filter(node => filterMethod(node[0]));
 
-  const dataVal = get(data);
+    if (elements.length === 0) {
+      return undefined;
+    }
 
-  for (const item of dataVal.body.children) {
-    if (item.tag !== 'blockquote')
-      regularItems.push(item);
-    else
-      blockquoteItems.push(item);
-  }
-
-  return {
-    default: {
-      ...dataVal,
-      body: {
-        ...dataVal.body,
-        children: regularItems,
-      },
-    },
-    blockquote: {
-      ...dataVal,
+    return {
+      ...data,
       body: {
-        ...dataVal.body,
-        children: blockquoteItems,
+        ...body,
+        value: elements,
       },
-    },
-  };
-});
+    };
+  });
+}
+
+const mainColumn = filterBy(tag => tag !== 'blockquote');
+const sideColumn = filterBy(tag => tag === 'blockquote');
 
 const { t } = useI18n();
 </script>
@@ -50,14 +38,12 @@ const { t } = useI18n();
     <div class="container flex flex-col lg:flex-row">
       <div class="grow">
         <ContentRenderer
-          v-if="separatedData.default"
-          :value="separatedData.default"
-        >
-          <ContentRendererMarkdown :value="separatedData.default" />
-        </ContentRenderer>
+          v-if="mainColumn"
+          :value="mainColumn"
+        />
       </div>
       <div
-        v-if="separatedData.blockquote.body.children.length > 0"
+        v-if="sideColumn"
         class="mt-8 lg:mt-0 lg:pl-16 xl:pl-24"
       >
         <div class="bg-rui-primary/[.04] p-6 lg:w-[384px]">
@@ -67,11 +53,9 @@ const { t } = useI18n();
             </div>
           </div>
           <ContentRenderer
-            v-if="separatedData.blockquote"
-            :value="separatedData.blockquote"
-          >
-            <ContentRendererMarkdown :value="separatedData.blockquote" />
-          </ContentRenderer>
+            v-if="sideColumn"
+            :value="sideColumn"
+          />
           <ButtonLink
             to="mailto:[email protected]"
             external