feat: auto code groups (#98)

app/server/plugins/content.ts

@@ -30,7 +30,7 @@ export default defineNitroPlugin((nitroApp) => {
 
     // Handle GitHub flavoured markdown blockquotes
     // https://github.com/orgs/community/discussions/16925
-    for (const node of file.body?.children || []) {
+    for (const [idx, node] of (file.body?.children || []).entries()) {
       if (
         node.tag === 'blockquote' && // blockquote > p x 2 > span > text
         ['!NOTE', '!TIP', '!IMPORTANT', '!WARNING', '!CAUTION'].includes(
@@ -69,11 +69,44 @@ export default defineNitroPlugin((nitroApp) => {
           node.children = stepsChildren
         }
       }
+
+      // Generate Code Groups
+      generateCodeGroup(idx, file.body.children)
     }
   })
 })
 
-function getTextContents(children) {
+function isNamedCodeBlock(children: any): boolean {
+  return children?.tag === 'pre' && children?.children?.[0]?.tag === 'code' && children?.props?.filename
+}
+
+function generateCodeGroup(currChildIdx: number, children: any[]) {
+  if (!isNamedCodeBlock(children[currChildIdx])) {
+    return
+  }
+
+  const group: any[] = []
+
+  for (let i = currChildIdx; i < children.length; i++) {
+    const nextNode = children[i]
+    if (!isNamedCodeBlock(nextNode)) {
+      break
+    }
+    group.push(nextNode)
+    children[i] = { type: 'text', value: '' }
+  }
+
+  // Replace current children with the new code group if it has two or more code blocks
+  if (group.length > 1) {
+    children[currChildIdx] = {
+      type: 'element',
+      tag: 'CodeGroup',
+      children: [...group],
+    }
+  }
+}
+
+function getTextContents(children: any[]): string {
   return (children || [])
     .map((child) => {
       if (child.type === 'element') {

docs/1.guide/components.md

@@ -114,6 +114,46 @@ The component is used to create a link to another page.
 ::
 <!-- prettier-ignore-end -->
 
+### Auto Code Groups
+
+This is automatic transformation, if you have code blocks right after each other, they will be grouped together using [`code-group`](https://ui.nuxt.com/pro/prose/code-group).
+
+```md
+    ```ts [nuxt.config.ts]
+    export default defineNuxtConfig({
+      modules: [],
+    })
+    ```
+
+    ```vue [app.vue]
+    <template>
+      <h1>Hello World</h1>
+    </template>
+    ```
+```
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: [],
+})
+```
+
+```ts [server/api/hello.get.ts]
+export default defineEventHandler(() => {
+  return {
+    hello: 'world'
+  }
+})
+```
+
+```vue [app.vue]
+<template>
+  <div>
+   <h1>Welcome to the homepage</h1>
+  </div>
+</template>
+```
+
 ### Steps
 
 To generate steps all you have to do is use standard markdown numbered lists