fix: expand components-list in raw md

Author: onmax

docs/server/plugins/llms.ts

@@ -2,8 +2,8 @@ import type { H3Event } from 'h3'
 import type { PageCollectionItemBase } from '@nuxt/content'
 
 export default defineNitroPlugin((nitroApp) => {
-  nitroApp.hooks.hook('content:llms:generate:document', async (_: H3Event, doc: PageCollectionItemBase) => {
-    transformMDC(doc as any)
+  nitroApp.hooks.hook('content:llms:generate:document', async (event: H3Event, doc: PageCollectionItemBase) => {
+    await transformMDC(event, doc as any)
   })
 
   nitroApp.hooks.hook('llms:generate', (_, { sections }) => {

docs/server/routes/raw/[...slug].md.get.ts

@@ -20,7 +20,7 @@ export default eventHandler(async (event) => {
     page.body.value.unshift(['h1', {}, page.title])
   }
 
-  const transformedPage = transformMDC({
+  const transformedPage = await transformMDC(event, {
     title: page.title,
     body: page.body
   })

docs/server/utils/transformMDC.ts

@@ -1,6 +1,8 @@
+import type { H3Event } from 'h3'
 import json5 from 'json5'
 import { camelCase, kebabCase } from 'scule'
 import { visit } from '@nuxt/content/runtime'
+import { queryCollection } from '@nuxt/content/server'
 import * as theme from '../../.nuxt/ui'
 import meta from '#nuxt-component-meta'
 // @ts-expect-error - no types available
@@ -291,7 +293,7 @@ const generateComponentCode = ({
 </template>`
 }
 
-export function transformMDC(doc: Document): Document {
+export async function transformMDC(event: H3Event, doc: Document): Promise<Document> {
   const componentName = camelCase(doc.title)
 
   visitAndReplace(doc, 'component-theme', (node) => {
@@ -394,5 +396,31 @@ export function transformMDC(doc: Document): Document {
     replaceNodeWithPre(node, 'vue', code, `${name}.vue`)
   })
 
+  const componentsListNodes: any[] = []
+  visit(doc.body, (node) => {
+    if (Array.isArray(node) && node[0] === 'components-list') {
+      componentsListNodes.push(node)
+    }
+    return true
+  }, node => node)
+
+  for (const node of componentsListNodes) {
+    const category = node[1]?.category
+    if (!category) continue
+
+    const components = await queryCollection(event, 'docs')
+      .where('path', 'LIKE', '/docs/components/%')
+      .where('extension', '=', 'md')
+      .where('category', '=', category)
+      .select('path', 'title')
+      .all()
+
+    const links = components.map((c: any) => `- [${c.title}](https://ui.nuxt.com${c.path})`).join('\n')
+
+    node[0] = 'p'
+    node[1] = {}
+    node[2] = links
+  }
+
   return doc
 }