reproduce body edition with data type

Author: larbish

playground/docus/app/pages/authors-data.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { MarkdownRoot } from '@nuxt/content'
+import { decompressTree } from '@nuxt/content/runtime'
+
+const { data: datas } = await useAsyncData('datas-collection', async () => {
+  const items = await queryCollection('datas').order('order', 'ASC').all()
+  return items.map(item => ({
+    ...item,
+    body: item.meta?.body ? decompressTree(item.meta.body as MarkdownRoot) : null,
+  }))
+})
+</script>
+
+<template>
+  <div>
+    <UContainer class="m-4">
+      <h1 class="text-2xl font-bold mb-4">
+        Data Collection
+      </h1>
+      <div class="flex flex-col gap-4">
+        <UCard
+          v-for="item in datas"
+          :key="item.stem"
+          :to="item.link"
+          target="_blank"
+        >
+          <div class="flex items-center gap-2 mb-2">
+            <UIcon
+              :name="item.icon"
+              class="w-5 h-5"
+            />
+            <h2 class="text-lg font-semibold">
+              {{ item.title }}
+            </h2>
+          </div>
+          <MDCRenderer
+            v-if="item.body"
+            :body="item.body"
+          />
+          <img
+            :src="item.image"
+            :alt="item.title"
+            class="w-full h-32 object-cover rounded mb-2"
+          >
+        </UCard>
+      </div>
+    </UContainer>
+  </div>
+</template>

playground/docus/app/pages/authors.vue …yground/docus/app/pages/authors-page.vueplayground/docus/app/pages/authors.vue renamed to playground/docus/app/pages/authors-page.vue playground/docus/app/pages/authors.vue renamed to playground/docus/app/pages/authors-page.vue

@@ -30,6 +30,20 @@ const collections: Record<string, DefinedCollection> = {
       prefix: '/',
     },
   }),
+  datas: defineCollection({
+    type: 'data',
+    source: {
+      include: '4.datas/**/*.md',
+      prefix: '/',
+    },
+    schema: z.object({
+      title: z.string().nonempty(),
+      link: z.string().nonempty(),
+      icon: z.string().nonempty().editor({ input: 'icon' }),
+      image: z.string().nonempty().editor({ input: 'media' }),
+      order: z.number(),
+    }),
+  }),
   landing: defineCollection({
     type: 'page',
     source: {
@@ -40,7 +54,7 @@ const collections: Record<string, DefinedCollection> = {
     type: 'page',
     source: {
       include: '**',
-      exclude: ['index.md', '3.pages/**/*.md', 'authors/**/*'],
+      exclude: ['index.md', '3.pages/**/*.md', 'authors/**/*', '4.datas/**/*.md'],
     },
     schema: createDocsSchema(),
   }),

playground/docus/content.config.ts

@@ -0,0 +1,11 @@
+---
+title: Nuxt Framework
+link: https://nuxt.com
+icon: i-simple-icons-nuxtdotjs
+image: /mountains.webp
+order: 1
+---
+
+The Intuitive Vue Framework. Build your next Vue.js application with confidence using Nuxt.
+
+

…yground/docus/content/3.pages/authors.md …nd/docus/content/3.pages/authors-page.mdplayground/docus/content/3.pages/authors.md renamed to playground/docus/content/3.pages/authors-page.md playground/docus/content/3.pages/authors.md renamed to playground/docus/content/3.pages/authors-page.md

@@ -0,0 +1,10 @@
+---
+title: Vue.js
+link: https://vuejs.org
+icon: i-simple-icons-vuedotjs
+image: /mountains.webp
+order: 2
+---
+
+The Progressive JavaScript Framework. An approachable, performant and versatile framework for building web user interfaces.
+