docs: api/file.get.ts

Author: hunterliu1003

package.json

@@ -27,7 +27,7 @@
     "pnpm": "^7.13.2",
     "sass": "^1.55.0",
     "typescript": "^4.7.4",
-    "vite": "^3.1.6",
+    "vite": "^3.2.2",
     "vue-tsc": "^1.0.9"
   }
 }

packages/docs/components/content/CodeBlockFile.vue

@@ -9,27 +9,15 @@ const props = defineProps<{
   filename?: string
 }>()
 
-// const modules = import.meta.glob('./*.vue', { as: 'raw' })
-
-const modules = {
-  './Playground.vue': await import('./Playground.vue?raw'),
-}
+const { data } = await useFetch(`/api/file?path=${props.path}`)
+const content = prepareContent((data.value as any).content)
 
 // console.log('modules → ', modules)
 
 function prepareContent(content: string) {
   return `\`\`\`${props.language || ''}${props.filename ? ` [${props.filename}]` : ''}\n${content}\n\`\`\``
 }
 
-const module = modules[props.path]
-if (!module)
-  console.error('Component Not Found.')
-
-// const content = prepareContent(await module() as any)
-const content = prepareContent(module.default as any)
-
-// console.log(content)
-
 const shiki = await useShiki()
 
 const { data: doc } = await useAsyncData(`playground-${content}`, async () => {

packages/docs/components/content/Playground.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TeleportProps, TransitionProps } from 'vue'
-import { ModalsContainer, VueFinalModal, useModal } from 'vue-final-modal'
+import type { TransitionProps } from 'vue'
+import { ModalsContainer, VueFinalModal } from 'vue-final-modal'
 
 const initValues = {
   teleportTo: 'body',

packages/docs/content/4.use-cases/1.playground.md

@@ -8,8 +8,4 @@ head.title: 'Playground | Examples'
   ::code-block{label="Preview" preview}
     :playground
   ::
-
-  ::code-block{label="Playground.vue"}
-    :code-block-file{path="./Playground.vue" language="vue"}
-  ::
 ::

packages/docs/package.json

@@ -40,7 +40,7 @@
   },
   "devDependencies": {
     "@nuxt-themes/docus": "npm:@nuxt-themes/docus-edge@latest",
-    "@nuxt/content": "^2.1.1",
+    "@nuxt/content": "^2.2.1",
     "monaco-editor-core": "^0.34.1",
     "nuxt": "3.0.0-rc.12"
   }

packages/docs/server/api/file.get.ts

@@ -0,0 +1,13 @@
+import path from 'path'
+import fs from 'node:fs'
+
+export default defineEventHandler(async (event) => {
+  const query = getQuery(event)
+  const _path = path.resolve(`./components/content/${query.path}`)
+
+  const content = fs.readFileSync(_path, 'utf-8')
+
+  return {
+    content,
+  }
+})