fix: use compile time markdown

packages/devtools/client/components/HelpFab.vue

@@ -1,9 +1,4 @@
 <script setup lang="ts">
-const props = defineProps<{
-  path: string
-}>()
-
-const { data } = useAsyncData(props.path, () => queryContent(props.path).findOne())
 const open = ref(false)
 const {
   showHelpButtons,
@@ -36,7 +31,7 @@ const {
         v-if="open" border="l base"
         class="prose" pos="fixed bottom-0 right-0 top-0" z-200 w-150 px8 py4 bg-base
       >
-        <ContentRenderer v-if="data" :value="data" />
+        <slot />
         <NIconButton
           icon="carbon-close"
           pos="absolute top-3 right-3"

packages/devtools/client/content/imports.md → packages/devtools/client/components/docs/imports.md

@@ -6,11 +6,11 @@ Nuxt auto-imports helper functions, composables and Vue APIs to use across your
 
 According to your config, exports of files under the following folders will be registed as auto-imports entry:
 
-:help-imports-dirs
+<HelpImportsDirs />
 
 Meanwhile, modules could also provide auto-imports for their own components. You have auto-imports from the following modules as well:
 
-:help-imports-modules
+<HelpImportsModules />
 
 <hr>
 

packages/devtools/client/content/plugins.md → packages/devtools/client/components/docs/plugins.md

@@ -2,8 +2,8 @@
 
 Nuxt plugins allows you to extend the functionality of Nuxt runtime and the Vue instance. You can add plugins to the `plugins/` directory and they will be automatically imported and registered.
 
-::help-tip-performance
+<HelpTipPerformance>
 Plugins runs before your application at runtime, the time each plugin cost will directly affect your application's initial loading time.
-::
+</HelpTipPerformance>
 
 [Learn more on the documentation](https://nuxt.com/docs/guide/directory-structure/plugins)

packages/devtools/client/components/content/HelpTipPerformance.vue → packages/devtools/client/components/help/HelpTipPerformance.vue

@@ -4,6 +4,6 @@
     icon="carbon-meter"
     n="lime6 dark:lime5"
   >
-    <ContentSlot :use="$slots.default" unwrap="p" />
+    <slot />
   </HelpTip>
 </template>

packages/devtools/client/modules/markdown.ts

@@ -0,0 +1,50 @@
+import { defineNuxtModule } from '@nuxt/kit'
+import Markdown from 'vite-plugin-vue-markdown'
+import LinkAttributes from 'markdown-it-link-attributes'
+import { getHighlighter } from 'shiki'
+
+export default defineNuxtModule({
+  async setup(_, nuxt) {
+    nuxt.options.imports.transform ||= {}
+    nuxt.options.imports.transform.include = [/\.vue$/, /\.md$/]
+
+    // @ts-expect-error any
+    nuxt.options.components.transform ||= {}
+    // @ts-expect-error any
+    nuxt.options.components.transform.include = [/\.vue$/, /\.md$/]
+
+    nuxt.options.vite.vue ||= {}
+    nuxt.options.vite.vue.include = [/\.vue$/, /\.md$/]
+
+    nuxt.options.extensions.push('.md')
+
+    const highlighter = await getHighlighter({
+      themes: [
+        'vitesse-dark',
+        'vitesse-light',
+      ],
+    })
+    nuxt.hook('vite:extendConfig', async (config) => {
+      config.plugins!.push(
+        Markdown({
+          markdownItSetup(md) {
+            md.use(LinkAttributes, {
+              matcher: (link: string) => /^https?:\/\//.test(link),
+              attrs: {
+                target: '_blank',
+                rel: 'noopener',
+              },
+            })
+            md.options.highlight = (code, lang) => {
+              const dark = highlighter.codeToHtml(code, { lang, theme: 'vitesse-dark' })
+                .replace('<pre class="shiki"', '<pre class="shiki shiki-dark"')
+              const light = highlighter.codeToHtml(code, { lang: lang || 'text', theme: 'vitesse-light' })
+                .replace('<pre class="shiki"', '<pre class="shiki shiki-light"')
+              return `<div class="shiki-container">${dark}${light}</div>`
+            }
+          },
+        }),
+      )
+    })
+  },
+})

packages/devtools/client/nuxt.config.ts

@@ -1,5 +1,4 @@
 import { resolve } from 'node:path'
-
 import DevTools from '../src/module'
 import DevToolsUiKit from '../../devtools-ui-kit/src/module'
 
@@ -10,8 +9,9 @@ function r(p: string) {
 export default defineNuxtConfig({
   modules: [
     'nuxt-vitest',
-    '@nuxt/content',
+    // '@nuxt/content',
     '~/modules/custom-tabs',
+    '~/modules/markdown',
     DevToolsUiKit,
     DevTools,
   ],

packages/devtools/client/pages/modules/components.vue

@@ -54,5 +54,7 @@ function toggleView() {
     </component>
   </div>
 
-  <HelpFab path="/components" />
+  <HelpFab>
+    <DocsComponents />
+  </HelpFab>
 </template>

packages/devtools/client/pages/modules/hooks.vue

@@ -31,5 +31,7 @@ const clientHooks = computed(() => client.value?.getClientHooksMetrics())
     </NSectionBlock>
   </div>
 
-  <HelpFab path="/hooks" />
+  <HelpFab>
+    <DocsHooks />
+  </HelpFab>
 </template>

packages/devtools/client/pages/modules/imports.vue

@@ -108,5 +108,7 @@ const filtered = computed(() => {
     </NSectionBlock>
   </div>
 
-  <HelpFab path="/imports" />
+  <HelpFab>
+    <DocsImports />
+  </HelpFab>
 </template>

packages/devtools/client/pages/modules/modules.vue

@@ -71,5 +71,7 @@ watchEffect(() => {
     </NSectionBlock>
   </div>
 
-  <HelpFab path="/modules" />
+  <HelpFab>
+    <DocsModules />
+  </HelpFab>
 </template>

packages/devtools/client/pages/modules/pages.vue

@@ -178,5 +178,7 @@ function navigateToRoute(path: string) {
     ]"
   />
 
-  <HelpFab path="/pages" />
+  <HelpFab>
+    <DocsPages />
+  </HelpFab>
 </template>

packages/devtools/client/pages/modules/payload.vue

@@ -66,5 +66,7 @@ async function refreshData(keys?: string[]) {
     </NSectionBlock>
   </div>
 
-  <HelpFab path="/payload" />
+  <HelpFab>
+    <DocsPayload />
+  </HelpFab>
 </template>

packages/devtools/client/pages/modules/plugins.vue

@@ -55,5 +55,7 @@ const totalTime = computed(() => {
     </div>
   </NSectionBlock>
 
-  <HelpFab path="/plugins" />
+  <HelpFab>
+    <DocsPlugins />
+  </HelpFab>
 </template>

packages/devtools/client/pages/modules/runtime-configs.vue

@@ -50,5 +50,7 @@ const privateConfig = computed(() => {
     </NSectionBlock>
   </div>
 
-  <HelpFab path="/runtime-configs" />
+  <HelpFab>
+    <DocsRuntimeConfig />
+  </HelpFab>
 </template>

packages/devtools/client/pages/modules/virtual-files.vue

@@ -93,7 +93,9 @@ const filteredFiles = computed(() => {
     </template>
   </PanelLeftRight>
 
-  <HelpFab path="/virtual-files" />
+  <HelpFab>
+    <DocsVirtualFiles />
+  </HelpFab>
 </template>
 
 <style>

packages/devtools/package.json

@@ -83,6 +83,7 @@
     "@nuxt/content": "^2.6.0",
     "@nuxt/devtools": "workspace:*",
     "@nuxtjs/color-mode": "^3.2.0",
+    "@types/markdown-it-link-attributes": "^3.0.1",
     "@unocss/nuxt": "^0.51.8",
     "@unocss/preset-icons": "^0.51.8",
     "@unocss/preset-uno": "^0.51.8",
@@ -94,6 +95,7 @@
     "fuse.js": "^6.6.2",
     "json-editor-vue": "^0.10.6",
     "markdown-it": "^13.0.1",
+    "markdown-it-link-attributes": "^4.0.1",
     "nanoid": "^4.0.2",
     "nuxt": "^3.4.2",
     "nuxt-vitest": "^0.6.10",
@@ -107,6 +109,7 @@
     "vanilla-jsoneditor": "^0.17.1",
     "vis-data": "^7.1.6",
     "vis-network": "^9.1.6",
+    "vite-plugin-vue-markdown": "^0.22.6",
     "vue-tsc": "^1.4.4",
     "xterm": "^5.1.0",
     "xterm-addon-fit": "^0.7.0"