feat(editor): form editor for YAML/JSON and frontmatter (#178)

Author: larbish

package.json

@@ -89,7 +89,7 @@
     "zod": "^4.1.13"
   },
   "resolutions": {
-    "@nuxt/content": "https://pkg.pr.new/@nuxt/content@c5cc00c",
+    "@nuxt/content": "https://pkg.pr.new/@nuxt/content@9b4b4f2",
     "nuxt-component-meta": "^0.15.0",
     "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@049b182"
   },

playground/docus/app/pages/authors.vue

@@ -8,15 +8,39 @@ const { data: authors } = await useAsyncData('authors-list', () => queryCollecti
   <div>
     <UContainer>
       <ContentRenderer :value="page" />
+      <div class="flex flex-col gap-2">
+        <UUser
+          v-for="author in authors"
+          :key="author.name"
+          :name="author.name"
+          :description="author.username ? `@${author.username}` : ''"
+          :avatar="author.avatar"
+          :to="author.to"
+        >
+          <template #name>
+            <div class="flex gap-2">
+              <span class="text-sm font-medium">{{ author.name }}</span>
+              <span class="text-sm text-muted">
+                - {{ author.username ? `@${author.username}` : '' }}
+              </span>
+            </div>
+          </template>
 
-      <UUser
-        v-for="author in authors"
-        :key="author.name"
-        :name="author.name"
-        :description="author.username ? `@${author.username}` : ''"
-        :avatar="author.avatar"
-        :to="author.to"
-      />
+          <template #description>
+            <div class="flex gap-2">
+              <UBadge
+                v-for="module in author.modules"
+                :key="module"
+                variant="soft"
+                size="xs"
+                color="neutral"
+              >
+                {{ module }}
+              </UBadge>
+            </div>
+          </template>
+        </UUser>
+      </div>
     </UContainer>
   </div>
 </template>

playground/docus/content.config.ts

@@ -19,6 +19,7 @@ const createAuthorsSchema = () => z.object({
   }),
   to: z.string(),
   username: z.string(),
+  modules: z.array(z.string()),
 })
 
 const collections: Record<string, DefinedCollection> = {

playground/docus/content/3.pages/authors.md

@@ -21,4 +21,14 @@ pages: defineCollection({
 
 ## Authors list
 
-Fetch from data collection:
+Fetch from data collection
+
+```[content.config.ts]
+authors: defineCollection({
+    type: 'data',
+    source: {
+      include: 'authors/**/*',
+    },
+    schema: createAuthorsSchema(),
+  }),
+```

playground/docus/content/authors/atinux.yml

@@ -3,3 +3,7 @@ avatar:
   src: https://avatars.githubusercontent.com/u/904724?v=4
 to: https://x.com/atinux
 username: atinux
+modules:
+  - hub
+  - ui
+  - auth

playground/docus/content/authors/farnabaz.md

@@ -4,4 +4,9 @@ avatar:
   src: https://avatars.githubusercontent.com/u/2047945?v=4
 to: https://x.com/farnabaz
 username: farnabaz
+modules:
+  - studio
+  - content
+  - mdc
+  - hub
 ---

playground/docus/content/authors/larbish.json

@@ -0,0 +1,13 @@
+{
+  "name": "Baptiste Leproux",
+  "avatar": {
+    "src": "https://avatars.githubusercontent.com/u/7290030?v=4"
+  },
+  "to": "https://x.com/_larbish",
+  "username": "larbish",
+  "modules": [
+    "studio",
+    "content",
+    "supabase"
+  ]
+}

playground/docus/content/authors/larbish.yml

@@ -123,19 +123,27 @@ const language = computed(() => {
         class="flex-1"
       />
       <template v-else>
-        <ContentEditorTipTap
-          v-if="preferences.editorMode === 'tiptap' && document.extension === ContentFileExtension.Markdown"
-          v-model="document"
-          :draft-item="draftItem"
-          class="flex-1"
-        />
         <ContentEditorCode
-          v-else
+          v-if="preferences.editorMode === 'code'"
           v-model="document"
           :draft-item="draftItem"
           :read-only="readOnly"
           class="flex-1"
         />
+        <template v-else>
+          <ContentEditorTipTap
+            v-if="document.extension === ContentFileExtension.Markdown"
+            v-model="document"
+            :draft-item="draftItem"
+            class="flex-1"
+          />
+          <ContentEditorForm
+            v-else
+            v-model="document"
+            :draft-item="draftItem"
+            class="flex-1"
+          />
+        </template>
       </template>
     </template>
   </div>