From d2f1e994121cad5dba70097b28bd21d60c11e06f Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 28 Jun 2021 21:54:35 +0800
Subject: [PATCH 01/16] wip: components playground

---
 package.json                              |  1 +
 src/admin/api/functions/components.ts     | 65 +++++++++++++++++++
 src/admin/api/index.ts                    |  2 +
 src/admin/app/components/AppHeaderNav.vue | 11 +++-
 src/admin/app/components/Editor.vue       | 15 ++++-
 src/admin/app/components/Preview.vue      |  3 +-
 src/admin/app/composables/monaco.ts       |  5 +-
 src/admin/app/pages/components.vue        | 42 ++++++++++++
 src/admin/app/plugins/components.ts       | 79 +++++++++++++++++++++++
 src/admin/app/plugins/router.ts           |  6 ++
 src/admin/index.ts                        |  4 +-
 yarn.lock                                 | 11 ++++
 12 files changed, 235 insertions(+), 9 deletions(-)
 create mode 100644 src/admin/api/functions/components.ts
 create mode 100644 src/admin/app/pages/components.vue
 create mode 100644 src/admin/app/plugins/components.ts

diff --git a/package.json b/package.json
index dea4fb37e..83aadf5db 100755
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "defu": "^5.0.0",
     "detab": "^3.0.0",
     "directory-tree": "^2.2.9",
+    "fast-glob": "^3.2.6",
     "flat": "^5.0.2",
     "graceful-fs": "^4.2.6",
     "gray-matter": "^4.0.3",
diff --git a/src/admin/api/functions/components.ts b/src/admin/api/functions/components.ts
new file mode 100644
index 000000000..29fd4dce2
--- /dev/null
+++ b/src/admin/api/functions/components.ts
@@ -0,0 +1,65 @@
+import { promises as fs } from 'fs'
+import { join, extname } from 'path'
+import { createError, Middleware, useBody } from 'h3'
+import dirTree from 'directory-tree'
+import { FileData, File } from '../../type'
+import { normalizeFiles, r } from '../utils'
+
+export default <Middleware>async function componentsHandler(req) {
+  const url = req.url
+
+  if (req.method === 'GET') {
+    // List all files in components/
+    if (url === '/') {
+      const tree = dirTree(r('components'))
+      return normalizeFiles(tree.children, r('components'))
+    }
+    // Read a single content file
+    try {
+      const path = join(r('components'), url)
+      const file = await fs.readFile(path, 'utf-8')
+
+      return <File>{
+        path: path.replace(r('components'), ''),
+        extension: extname(path),
+        raw: file
+      }
+    } catch (err) {
+      return createError({
+        statusCode: 404,
+        statusMessage: 'File not found'
+      })
+    }
+  }
+
+  // Update changes
+  if (req.method === 'PUT') {
+    const { raw } = await useBody<FileData>(req)
+    if (raw == null) {
+      return createError({
+        statusCode: 400,
+        statusMessage: '"raw" key is required'
+      })
+    }
+
+    const path = join(r('components'), url)
+
+    try {
+      // @ts-ignore
+      // await fs.stat(path, 'utf-8')
+      await fs.writeFile(path, raw)
+
+      return { ok: true }
+    } catch (err) {
+      return createError({
+        statusCode: 404,
+        statusMessage: 'File not found'
+      })
+    }
+  }
+
+  return createError({
+    statusCode: 400,
+    statusMessage: 'Bad Request'
+  })
+}
diff --git a/src/admin/api/index.ts b/src/admin/api/index.ts
index 830173ecf..72cf02f9c 100644
--- a/src/admin/api/index.ts
+++ b/src/admin/api/index.ts
@@ -2,11 +2,13 @@ import { createApp } from 'h3'
 import contentHandler from './functions/content'
 import previewHandler from './functions/preview'
 import staticHandler from './functions/static'
+import componentsHandler from './functions/components'
 
 const app = createApp()
 
 app.useAsync('/content', contentHandler)
 app.useAsync('/preview', previewHandler)
 app.useAsync('/static', staticHandler)
+app.useAsync('/components', componentsHandler)
 
 export default app._handle
diff --git a/src/admin/app/components/AppHeaderNav.vue b/src/admin/app/components/AppHeaderNav.vue
index a63fd1c84..d8b5c50f0 100644
--- a/src/admin/app/components/AppHeaderNav.vue
+++ b/src/admin/app/components/AppHeaderNav.vue
@@ -9,11 +9,20 @@
     <RouterLink
       to="/static"
       class="relative flex-none px-4 py-1 text-sm font-medium leading-5 d-border border rounded-md"
-      :class="[$route.path.includes('static') ? 'router-link-active' : '']"
+      :class="[$route.path.startsWith('/static') ? 'router-link-active' : '']"
     >
       Static
     </RouterLink>
 
+    <!-- :class used as this route is undefined in the router -->
+    <RouterLink
+      to="/components"
+      class="relative flex-none px-4 py-1 text-sm font-medium leading-5 d-border border rounded-md"
+      :class="[$route.path.startsWith('/components') ? 'router-link-active' : '']"
+    >
+      Components
+    </RouterLink>
+
     <div class="flex-auto"></div>
 
     <button class="p-1 opacity-50 hover:opacity-100 !outline-none" @click="toggleDark">
diff --git a/src/admin/app/components/Editor.vue b/src/admin/app/components/Editor.vue
index 447fdfdeb..47e629352 100644
--- a/src/admin/app/components/Editor.vue
+++ b/src/admin/app/components/Editor.vue
@@ -1,10 +1,10 @@
 <template>
-  <Monaco :value="raw" language="markdown" @change="update" />
+  <Monaco :value="raw" :language="language" @change="update" />
 </template>
 
 <script setup lang="ts">
 import type { PropType } from 'vue3'
-import { ref, watch, defineProps } from 'vue3'
+import { ref, watch, defineProps, computed } from 'vue3'
 import type { File } from '../../type'
 import { useApi } from '../plugins/api'
 import Monaco from './Monaco.vue'
@@ -13,12 +13,21 @@ const props = defineProps({
   file: {
     type: Object as PropType<File>,
     required: true
+  },
+  apiEntry: {
+    type: String,
+    default: '/content'
   }
 })
 
 const api = useApi()
 const raw = ref(props.file.raw)
 
+const language = computed(() => {
+  if (props.file.extension === '.vue') return 'html'
+  return 'markdown'
+})
+
 // Sync local data when file changes
 watch(
   () => props.file,
@@ -28,7 +37,7 @@ watch(
 )
 
 function update(content) {
-  api.put(`/content${props.file.path}`, {
+  api.put(props.apiEntry + props.file.path, {
     raw: content
   })
 }
diff --git a/src/admin/app/components/Preview.vue b/src/admin/app/components/Preview.vue
index e9db26e71..4ee5ad2c6 100644
--- a/src/admin/app/components/Preview.vue
+++ b/src/admin/app/components/Preview.vue
@@ -18,9 +18,10 @@ watch(
 
 function updateIframe(url: string) {
   if (!iframe.value) return
-  if (!url.startsWith(previewOrigin.value)) return updateIframeHard(url)
+  if (!url.startsWith(previewOrigin.value) || previewPath.value.startsWith('/admin')) return updateIframeHard(url)
 
   try {
+    // use nuxt router
     iframe.value.contentWindow.$nuxt.$router.push(previewPath.value)
   } catch (e) {
     // fallback to hard refresh when working with cross-origin
diff --git a/src/admin/app/composables/monaco.ts b/src/admin/app/composables/monaco.ts
index cc5aa20ce..d4c58681b 100644
--- a/src/admin/app/composables/monaco.ts
+++ b/src/admin/app/composables/monaco.ts
@@ -41,7 +41,8 @@ const setupMonaco = createSingletonPromise(async () => {
         getWorker(_: any, label: string) {
           if (label === 'json') return new JsonWorker()
           if (label === 'css' || label === 'scss' || label === 'less') return new CssWorker()
-          if (label === 'html' || label === 'handlebars' || label === 'razor') return new HtmlWorker()
+          if (label === 'html' || label === 'handlebars' || label === 'razor' || label === 'vue')
+            return new HtmlWorker()
           if (label === 'typescript' || label === 'javascript') return new TsWorker()
           return new EditorWorker()
         }
@@ -110,10 +111,8 @@ export function useMonaco(
 
         isSetup.value = true
 
-        // const plugins = editorPlugins.filter(({ language }) => language === options.language)
         editor.getModel()?.onDidChangeContent(() => {
           options.onChanged?.(editor.getValue())
-          // plugins.forEach(({ onContentChanged }) => onContentChanged(editor))
         })
       },
       {
diff --git a/src/admin/app/pages/components.vue b/src/admin/app/pages/components.vue
new file mode 100644
index 000000000..7c53353b5
--- /dev/null
+++ b/src/admin/app/pages/components.vue
@@ -0,0 +1,42 @@
+<template>
+  <Splitpanes class="h-full default-theme" :push-other-panes="false">
+    <Pane size="15" max-size="30">
+      <div class="h-full overflow-y-scroll">
+        <FilesTree :files="files" :current-file="currentFile" @open="openFile" />
+      </div>
+    </Pane>
+    <Pane>
+      <Editor v-if="currentFile" :file="currentFile" api-entry="/components" />
+      <p v-else class="p-4 opacity-75">👈 &nbsp;Select a file to edit.</p>
+    </Pane>
+    <Pane>
+      <KeepAlive>
+        <Preview />
+      </KeepAlive>
+    </Pane>
+  </Splitpanes>
+</template>
+
+<script setup lang="ts">
+import { Splitpanes, Pane } from 'splitpanes'
+import { ref, onMounted } from 'vue3'
+import FilesTree from '../components/FilesTree.vue'
+import Editor from '../components/Editor.vue'
+import Preview from '../components/Preview.vue'
+import { useApi } from '../plugins/api'
+import { navigateToFile } from '../composables/preview'
+
+const api = useApi()
+
+const files = ref([])
+const currentFile = ref(null)
+
+const openFile = async file => {
+  navigateToFile(`/admin/__components${file.path}`)
+  currentFile.value = await api.get(`/components${file.path}`)
+}
+
+onMounted(async () => {
+  files.value = await api.get('/components')
+})
+</script>
diff --git a/src/admin/app/plugins/components.ts b/src/admin/app/plugins/components.ts
new file mode 100644
index 000000000..752d1b258
--- /dev/null
+++ b/src/admin/app/plugins/components.ts
@@ -0,0 +1,79 @@
+import { join } from 'path'
+import { existsSync } from 'fs'
+import fg from 'fast-glob'
+import { Plugin, ViteDevServer } from 'vite'
+
+export function VitePluginVuePreview(root: string): Plugin {
+  let server: ViteDevServer | undefined
+
+  return {
+    name: 'vite-plugin-vue-preview',
+    apply: 'serve',
+    enforce: 'pre',
+    resolveId(id) {
+      return id.startsWith('/__components_script/')
+    },
+    load(id) {
+      if (!id.startsWith('/__components_script/')) return
+
+      const url = join(root, 'components', id.slice('/__components_script/'.length))
+
+      return `
+<template>
+  <Component>
+    Preview
+  </Component>
+</template>
+
+<script setup>
+import Component from '/@fs${url}'
+</script>
+
+<script>
+import 'virtual:windi.css'
+import { createApp } from 'vue'
+setTimeout(()=>{
+  createApp(_sfc_main).mount('#app')
+}, 0)
+</script>
+`
+    },
+    configureServer(_server) {
+      server = _server
+
+      server.middlewares.use('/__components/', async (req, res, next) => {
+        if (!req.url) return
+
+        if (req.url === '/') {
+          const files = await fg('**/*.vue', {
+            cwd: join(root, 'components'),
+            ignore: ['.git', 'node_modules'],
+            onlyFiles: true
+          })
+
+          res.statusCode = 200
+          res.end(`
+<body>
+  <ul>
+  ${files.map(f => `<li><a href="/admin/__components/${f}">${f}</a></li>`).join('\n')}
+  </ul>
+</body>
+`)
+        } else {
+          const path = join(root, 'components', req.url.slice(1))
+          if (!existsSync(path)) return next()
+
+          res.statusCode = 200
+          res.end(`
+      <body>
+        <div id="app"></div>
+        <script type="module" src="/admin/__components_script${req.url}"></script>
+      </body>
+      `)
+        }
+      })
+    }
+  } as Plugin
+}
+
+export default VitePluginVuePreview
diff --git a/src/admin/app/plugins/router.ts b/src/admin/app/plugins/router.ts
index 9c1dfebc6..4252ef7cc 100644
--- a/src/admin/app/plugins/router.ts
+++ b/src/admin/app/plugins/router.ts
@@ -3,6 +3,7 @@ import { createRouter, createWebHistory } from 'vue3-router'
 // Pages
 import Index from '../pages/index.vue'
 import Static from '../pages/static.vue'
+import Components from '../pages/Components.vue'
 
 // Router plugin
 export const router = createRouter({
@@ -17,6 +18,11 @@ export const router = createRouter({
       path: '/static',
       name: 'static',
       component: Static as any
+    },
+    {
+      path: '/components',
+      name: 'components',
+      component: Components as any
     }
   ]
 })
diff --git a/src/admin/index.ts b/src/admin/index.ts
index d47cb0dda..481c11f66 100644
--- a/src/admin/index.ts
+++ b/src/admin/index.ts
@@ -5,6 +5,7 @@ import serveStatic from 'serve-static'
 import { Module } from '@nuxt/types'
 import { createServer as createViteServer } from 'vite'
 import api from './api'
+import VitePluginVuePreview from './app/plugins/components'
 
 export default <Module>function () {
   const { nuxt, addServerMiddleware, options } = this
@@ -37,7 +38,8 @@ export default <Module>function () {
           configureServer(server) {
             server.middlewares.use('/api', api)
           }
-        }
+        },
+        VitePluginVuePreview(nuxt.options.rootDir)
       ]
     })
 
diff --git a/yarn.lock b/yarn.lock
index f1385fe5f..1cdc8c65b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6355,6 +6355,17 @@ fast-glob@^3.0.3, fast-glob@^3.1.1, fast-glob@^3.2.5:
     micromatch "^4.0.2"
     picomatch "^2.2.1"
 
+fast-glob@^3.2.6:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.6.tgz#434dd9529845176ea049acc9343e8282765c6e1a"
+  integrity sha512-GnLuqj/pvQ7pX8/L4J84nijv6sAnlwvSDpMkJi9i7nPmPxGtRPkBSStfvDW5l6nMdX9VWe+pkKWFTgD+vF2QSQ==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"

From e66d3b904d596f779d9c557e76a3ebcd5878cdcc Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 29 Jun 2021 04:25:37 +0800
Subject: [PATCH 02/16] fix: switch to nuxt module for components preview

---
 src/admin/app/pages/components.vue  |  2 +-
 src/admin/app/plugins/components.ts | 79 -----------------------------
 src/admin/index.ts                  |  4 +-
 src/app/layouts/none.vue            |  3 ++
 src/app/pages/preview.vue           | 11 ++++
 src/core/module.ts                  |  5 +-
 src/core/preview/index.ts           | 26 ++++++++++
 7 files changed, 46 insertions(+), 84 deletions(-)
 delete mode 100644 src/admin/app/plugins/components.ts
 create mode 100644 src/app/layouts/none.vue
 create mode 100644 src/app/pages/preview.vue
 create mode 100644 src/core/preview/index.ts

diff --git a/src/admin/app/pages/components.vue b/src/admin/app/pages/components.vue
index 7c53353b5..3a71c9e8c 100644
--- a/src/admin/app/pages/components.vue
+++ b/src/admin/app/pages/components.vue
@@ -32,7 +32,7 @@ const files = ref([])
 const currentFile = ref(null)
 
 const openFile = async file => {
-  navigateToFile(`/admin/__components${file.path}`)
+  navigateToFile(`/__components${file.path}`)
   currentFile.value = await api.get(`/components${file.path}`)
 }
 
diff --git a/src/admin/app/plugins/components.ts b/src/admin/app/plugins/components.ts
deleted file mode 100644
index 752d1b258..000000000
--- a/src/admin/app/plugins/components.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { join } from 'path'
-import { existsSync } from 'fs'
-import fg from 'fast-glob'
-import { Plugin, ViteDevServer } from 'vite'
-
-export function VitePluginVuePreview(root: string): Plugin {
-  let server: ViteDevServer | undefined
-
-  return {
-    name: 'vite-plugin-vue-preview',
-    apply: 'serve',
-    enforce: 'pre',
-    resolveId(id) {
-      return id.startsWith('/__components_script/')
-    },
-    load(id) {
-      if (!id.startsWith('/__components_script/')) return
-
-      const url = join(root, 'components', id.slice('/__components_script/'.length))
-
-      return `
-<template>
-  <Component>
-    Preview
-  </Component>
-</template>
-
-<script setup>
-import Component from '/@fs${url}'
-</script>
-
-<script>
-import 'virtual:windi.css'
-import { createApp } from 'vue'
-setTimeout(()=>{
-  createApp(_sfc_main).mount('#app')
-}, 0)
-</script>
-`
-    },
-    configureServer(_server) {
-      server = _server
-
-      server.middlewares.use('/__components/', async (req, res, next) => {
-        if (!req.url) return
-
-        if (req.url === '/') {
-          const files = await fg('**/*.vue', {
-            cwd: join(root, 'components'),
-            ignore: ['.git', 'node_modules'],
-            onlyFiles: true
-          })
-
-          res.statusCode = 200
-          res.end(`
-<body>
-  <ul>
-  ${files.map(f => `<li><a href="/admin/__components/${f}">${f}</a></li>`).join('\n')}
-  </ul>
-</body>
-`)
-        } else {
-          const path = join(root, 'components', req.url.slice(1))
-          if (!existsSync(path)) return next()
-
-          res.statusCode = 200
-          res.end(`
-      <body>
-        <div id="app"></div>
-        <script type="module" src="/admin/__components_script${req.url}"></script>
-      </body>
-      `)
-        }
-      })
-    }
-  } as Plugin
-}
-
-export default VitePluginVuePreview
diff --git a/src/admin/index.ts b/src/admin/index.ts
index 481c11f66..d47cb0dda 100644
--- a/src/admin/index.ts
+++ b/src/admin/index.ts
@@ -5,7 +5,6 @@ import serveStatic from 'serve-static'
 import { Module } from '@nuxt/types'
 import { createServer as createViteServer } from 'vite'
 import api from './api'
-import VitePluginVuePreview from './app/plugins/components'
 
 export default <Module>function () {
   const { nuxt, addServerMiddleware, options } = this
@@ -38,8 +37,7 @@ export default <Module>function () {
           configureServer(server) {
             server.middlewares.use('/api', api)
           }
-        },
-        VitePluginVuePreview(nuxt.options.rootDir)
+        }
       ]
     })
 
diff --git a/src/app/layouts/none.vue b/src/app/layouts/none.vue
new file mode 100644
index 000000000..5d3ae9c40
--- /dev/null
+++ b/src/app/layouts/none.vue
@@ -0,0 +1,3 @@
+<template>
+  <Nuxt />
+</template>
diff --git a/src/app/pages/preview.vue b/src/app/pages/preview.vue
new file mode 100644
index 000000000..5a7a841ab
--- /dev/null
+++ b/src/app/pages/preview.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <RouterView />
+  </div>
+</template>
+
+<script>
+export default {
+  layout: 'none'
+}
+</script>
diff --git a/src/core/module.ts b/src/core/module.ts
index 8a9310377..e7347998d 100644
--- a/src/core/module.ts
+++ b/src/core/module.ts
@@ -34,7 +34,10 @@ export default <Module>async function docusModule() {
   const isSSG = options.dev === false && (options.target === 'static' || options._generate || options.mode === 'spa')
 
   // Inject Docus Admin module in development
-  if (!isSSG) addModule(resolve(__dirname, '../admin'))
+  if (!isSSG) {
+    addModule(resolve(__dirname, '../admin'))
+    addModule(resolve(__dirname, './preview'))
+  }
 
   const pluginOptions = {
     apiBase: '_docus',
diff --git a/src/core/preview/index.ts b/src/core/preview/index.ts
new file mode 100644
index 000000000..0e8e4ff2b
--- /dev/null
+++ b/src/core/preview/index.ts
@@ -0,0 +1,26 @@
+import { resolve } from 'path'
+import { Module } from '@nuxt/types'
+import fg from 'fast-glob'
+
+const r = (i: string) => resolve(__dirname, '../../app', i)
+
+// serve components preview under `/__components`
+export default <Module>async function () {
+  const { nuxt } = this
+
+  const dir = resolve(nuxt.options.srcDir, 'components')
+  const components = await fg('**/*.vue', { cwd: dir })
+
+  nuxt.options.layouts.none = r('layouts/none.vue')
+  nuxt.hook('build:extendRoutes', (routes: any[]) => {
+    routes.unshift({
+      name: 'components-preview',
+      path: '/__components',
+      component: r('pages/preview.vue'),
+      children: components.map(i => ({
+        path: i,
+        component: resolve(dir, i)
+      }))
+    })
+  })
+}

From 6551c1055bc299a8de96a56681c6538d86822094 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 29 Jun 2021 21:09:39 +0800
Subject: [PATCH 03/16] refactor(admin): modulize preview

---
 src/admin/index.ts                                         | 4 +++-
 src/{core/preview/index.ts => admin/preview.ts}            | 6 ++----
 src/{app/layouts/none.vue => admin/runtime/noneLayout.vue} | 0
 src/{app/pages => admin/runtime}/preview.vue               | 0
 src/core/module.ts                                         | 5 +----
 5 files changed, 6 insertions(+), 9 deletions(-)
 rename src/{core/preview/index.ts => admin/preview.ts} (79%)
 rename src/{app/layouts/none.vue => admin/runtime/noneLayout.vue} (100%)
 rename src/{app/pages => admin/runtime}/preview.vue (100%)

diff --git a/src/admin/index.ts b/src/admin/index.ts
index d47cb0dda..3a1bd9149 100644
--- a/src/admin/index.ts
+++ b/src/admin/index.ts
@@ -1,4 +1,4 @@
-import { join } from 'upath'
+import { join, resolve } from 'path'
 import chalk from 'chalk'
 import { NuxtOptionsServer } from '@nuxt/types/config/server'
 import serveStatic from 'serve-static'
@@ -7,6 +7,8 @@ import { createServer as createViteServer } from 'vite'
 import api from './api'
 
 export default <Module>function () {
+  this.addModule(resolve(__dirname, 'preview.ts'))
+
   const { nuxt, addServerMiddleware, options } = this
 
   process.options = nuxt.options
diff --git a/src/core/preview/index.ts b/src/admin/preview.ts
similarity index 79%
rename from src/core/preview/index.ts
rename to src/admin/preview.ts
index 0e8e4ff2b..646b8e1fb 100644
--- a/src/core/preview/index.ts
+++ b/src/admin/preview.ts
@@ -2,8 +2,6 @@ import { resolve } from 'path'
 import { Module } from '@nuxt/types'
 import fg from 'fast-glob'
 
-const r = (i: string) => resolve(__dirname, '../../app', i)
-
 // serve components preview under `/__components`
 export default <Module>async function () {
   const { nuxt } = this
@@ -11,12 +9,12 @@ export default <Module>async function () {
   const dir = resolve(nuxt.options.srcDir, 'components')
   const components = await fg('**/*.vue', { cwd: dir })
 
-  nuxt.options.layouts.none = r('layouts/none.vue')
+  nuxt.options.layouts.none = resolve(__dirname, 'runtime/noneLayout.vue')
   nuxt.hook('build:extendRoutes', (routes: any[]) => {
     routes.unshift({
       name: 'components-preview',
       path: '/__components',
-      component: r('pages/preview.vue'),
+      component: resolve(__dirname, 'runtime/preview.vue'),
       children: components.map(i => ({
         path: i,
         component: resolve(dir, i)
diff --git a/src/app/layouts/none.vue b/src/admin/runtime/noneLayout.vue
similarity index 100%
rename from src/app/layouts/none.vue
rename to src/admin/runtime/noneLayout.vue
diff --git a/src/app/pages/preview.vue b/src/admin/runtime/preview.vue
similarity index 100%
rename from src/app/pages/preview.vue
rename to src/admin/runtime/preview.vue
diff --git a/src/core/module.ts b/src/core/module.ts
index e7347998d..8a9310377 100644
--- a/src/core/module.ts
+++ b/src/core/module.ts
@@ -34,10 +34,7 @@ export default <Module>async function docusModule() {
   const isSSG = options.dev === false && (options.target === 'static' || options._generate || options.mode === 'spa')
 
   // Inject Docus Admin module in development
-  if (!isSSG) {
-    addModule(resolve(__dirname, '../admin'))
-    addModule(resolve(__dirname, './preview'))
-  }
+  if (!isSSG) addModule(resolve(__dirname, '../admin'))
 
   const pluginOptions = {
     apiBase: '_docus',

From 63db4afb7b3ab11fa188f90b6c86cf3357217465 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 29 Jun 2021 21:12:46 +0800
Subject: [PATCH 04/16] refactor(admin): folder structure

---
 src/admin/index.ts                            | 68 +------------------
 src/admin/modules/admin.ts                    | 67 ++++++++++++++++++
 src/admin/{ => modules}/preview.ts            |  4 +-
 .../{noneLayout.vue => layouts/none.vue}      |  0
 4 files changed, 72 insertions(+), 67 deletions(-)
 create mode 100644 src/admin/modules/admin.ts
 rename src/admin/{ => modules}/preview.ts (80%)
 rename src/admin/runtime/{noneLayout.vue => layouts/none.vue} (100%)

diff --git a/src/admin/index.ts b/src/admin/index.ts
index 3a1bd9149..d4923328d 100644
--- a/src/admin/index.ts
+++ b/src/admin/index.ts
@@ -1,69 +1,7 @@
-import { join, resolve } from 'path'
-import chalk from 'chalk'
-import { NuxtOptionsServer } from '@nuxt/types/config/server'
-import serveStatic from 'serve-static'
+import { resolve } from 'path'
 import { Module } from '@nuxt/types'
-import { createServer as createViteServer } from 'vite'
-import api from './api'
 
 export default <Module>function () {
-  this.addModule(resolve(__dirname, 'preview.ts'))
-
-  const { nuxt, addServerMiddleware, options } = this
-
-  process.options = nuxt.options
-  process.previewUrl = 'http://localhost:4000'
-
-  // Add runtime plugin
-  if (options.dev) this.options.plugins.push(require.resolve(join(__dirname, '/runtime/plugin')))
-
-  nuxt.hook('listen', (_: any, { host, port }: NuxtOptionsServer) => {
-    process.previewUrl = `http://${host}:${port}`
-
-    nuxt.options.cli.badgeMessages.push(
-      '',
-      chalk.bold('📝 Admin: ') + chalk.underline.yellow(`${process.previewUrl}/admin/`)
-    )
-  })
-
-  if (process.env.ADMIN_DEV) {
-    // use Vite as middleware
-    const server = createViteServer({
-      root: join(__dirname, 'app'),
-      server: {
-        middlewareMode: 'html'
-      },
-      plugins: [
-        {
-          name: 'docus:admin-api',
-          configureServer(server) {
-            server.middlewares.use('/api', api)
-          }
-        }
-      ]
-    })
-
-    nuxt.hook('render:setupMiddleware', async () => {
-      const middleware = (await server).middlewares
-
-      // remove Vite's base middleware since it's already handled by connect route
-      // it's right before '/__open-in-editor' middleware
-      const viteBaseMiddlewareIndex = middleware.stack.findIndex(i => i.route === '/__open-in-editor') - 1
-      if (viteBaseMiddlewareIndex >= 0) {
-        middleware.stack.splice(viteBaseMiddlewareIndex, 1)
-      }
-
-      nuxt.server.app.use('/admin/', middleware)
-    })
-  } else {
-    // use built dist
-    addServerMiddleware({
-      path: '/admin/',
-      handle: serveStatic(join(__dirname, 'app/dist'))
-    })
-    addServerMiddleware({
-      path: '/admin/api',
-      handler: api
-    })
-  }
+  this.addModule(resolve(__dirname, 'modules/admin.ts'))
+  this.addModule(resolve(__dirname, 'modules/preview.ts'))
 }
diff --git a/src/admin/modules/admin.ts b/src/admin/modules/admin.ts
new file mode 100644
index 000000000..aeb620914
--- /dev/null
+++ b/src/admin/modules/admin.ts
@@ -0,0 +1,67 @@
+import { join } from 'path'
+import chalk from 'chalk'
+import { NuxtOptionsServer } from '@nuxt/types/config/server'
+import serveStatic from 'serve-static'
+import { Module } from '@nuxt/types'
+import { createServer as createViteServer } from 'vite'
+import api from '../api'
+
+export default <Module>function () {
+  const { nuxt, addServerMiddleware, options } = this
+
+  process.options = nuxt.options
+  process.previewUrl = 'http://localhost:4000'
+
+  // Add runtime plugin
+  if (options.dev) this.options.plugins.push(require.resolve(join(__dirname, '../runtime/plugin')))
+
+  nuxt.hook('listen', (_: any, { host, port }: NuxtOptionsServer) => {
+    process.previewUrl = `http://${host}:${port}`
+
+    nuxt.options.cli.badgeMessages.push(
+      '',
+      chalk.bold('📝 Admin: ') + chalk.underline.yellow(`${process.previewUrl}/admin/`)
+    )
+  })
+
+  if (process.env.ADMIN_DEV) {
+    // use Vite as middleware
+    const server = createViteServer({
+      root: join(__dirname, '../app'),
+      server: {
+        middlewareMode: 'html'
+      },
+      plugins: [
+        {
+          name: 'docus:admin-api',
+          configureServer(server) {
+            server.middlewares.use('/api', api)
+          }
+        }
+      ]
+    })
+
+    nuxt.hook('render:setupMiddleware', async () => {
+      const middleware = (await server).middlewares
+
+      // remove Vite's base middleware since it's already handled by connect route
+      // it's right before '/__open-in-editor' middleware
+      const viteBaseMiddlewareIndex = middleware.stack.findIndex(i => i.route === '/__open-in-editor') - 1
+      if (viteBaseMiddlewareIndex >= 0) {
+        middleware.stack.splice(viteBaseMiddlewareIndex, 1)
+      }
+
+      nuxt.server.app.use('/admin/', middleware)
+    })
+  } else {
+    // use built dist
+    addServerMiddleware({
+      path: '/admin/',
+      handle: serveStatic(join(__dirname, '../app/dist'))
+    })
+    addServerMiddleware({
+      path: '/admin/api',
+      handler: api
+    })
+  }
+}
diff --git a/src/admin/preview.ts b/src/admin/modules/preview.ts
similarity index 80%
rename from src/admin/preview.ts
rename to src/admin/modules/preview.ts
index 646b8e1fb..afd9e2054 100644
--- a/src/admin/preview.ts
+++ b/src/admin/modules/preview.ts
@@ -9,12 +9,12 @@ export default <Module>async function () {
   const dir = resolve(nuxt.options.srcDir, 'components')
   const components = await fg('**/*.vue', { cwd: dir })
 
-  nuxt.options.layouts.none = resolve(__dirname, 'runtime/noneLayout.vue')
+  nuxt.options.layouts.none = resolve(__dirname, '../runtime/layouts/none.vue')
   nuxt.hook('build:extendRoutes', (routes: any[]) => {
     routes.unshift({
       name: 'components-preview',
       path: '/__components',
-      component: resolve(__dirname, 'runtime/preview.vue'),
+      component: resolve(__dirname, '../runtime/preview.vue'),
       children: components.map(i => ({
         path: i,
         component: resolve(dir, i)
diff --git a/src/admin/runtime/noneLayout.vue b/src/admin/runtime/layouts/none.vue
similarity index 100%
rename from src/admin/runtime/noneLayout.vue
rename to src/admin/runtime/layouts/none.vue

From 113bcd6887a00bac32d8336d216aeb32718869e7 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 29 Jun 2021 21:34:29 +0800
Subject: [PATCH 05/16] chore: typo

---
 src/admin/app/plugins/router.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/admin/app/plugins/router.ts b/src/admin/app/plugins/router.ts
index 4252ef7cc..091ef4d92 100644
--- a/src/admin/app/plugins/router.ts
+++ b/src/admin/app/plugins/router.ts
@@ -3,7 +3,7 @@ import { createRouter, createWebHistory } from 'vue3-router'
 // Pages
 import Index from '../pages/index.vue'
 import Static from '../pages/static.vue'
-import Components from '../pages/Components.vue'
+import Components from '../pages/components.vue'
 
 // Router plugin
 export const router = createRouter({

From 90a3468e8980c65ad8fa923187f7825118c29c97 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 1 Jul 2021 06:52:34 +0800
Subject: [PATCH 06/16] feat(admin): embed windicss-analysis

---
 package.json                  |   3 +-
 src/admin/modules/admin.ts    |   6 ++
 src/admin/modules/windicss.ts |  32 ++++++++++
 yarn.lock                     | 111 +++++++++++++++++++++++++++++++++-
 4 files changed, 150 insertions(+), 2 deletions(-)
 create mode 100644 src/admin/modules/windicss.ts

diff --git a/package.json b/package.json
index 83aadf5db..11249f8e8 100755
--- a/package.json
+++ b/package.json
@@ -116,7 +116,8 @@
     "vue-docgen-api": "^4.40.0",
     "vue-plausible": "^1.1.4",
     "vue3": "npm:vue@next",
-    "vue3-router": "npm:vue-router@next"
+    "vue3-router": "npm:vue-router@next",
+    "windicss-analysis": "^0.3.4"
   },
   "devDependencies": {
     "@iconify/json": "^1.1.360",
diff --git a/src/admin/modules/admin.ts b/src/admin/modules/admin.ts
index aeb620914..9f8519819 100644
--- a/src/admin/modules/admin.ts
+++ b/src/admin/modules/admin.ts
@@ -5,6 +5,7 @@ import serveStatic from 'serve-static'
 import { Module } from '@nuxt/types'
 import { createServer as createViteServer } from 'vite'
 import api from '../api'
+import windicss from './windicss'
 
 export default <Module>function () {
   const { nuxt, addServerMiddleware, options } = this
@@ -36,6 +37,7 @@ export default <Module>function () {
           name: 'docus:admin-api',
           configureServer(server) {
             server.middlewares.use('/api', api)
+            server.middlewares.use('/windicss', windicss(nuxt.options.srcRoot))
           }
         }
       ]
@@ -63,5 +65,9 @@ export default <Module>function () {
       path: '/admin/api',
       handler: api
     })
+    addServerMiddleware({
+      path: '/admin/windicss',
+      handler: windicss(nuxt.options.srcDir)
+    })
   }
 }
diff --git a/src/admin/modules/windicss.ts b/src/admin/modules/windicss.ts
new file mode 100644
index 000000000..9e260a640
--- /dev/null
+++ b/src/admin/modules/windicss.ts
@@ -0,0 +1,32 @@
+import { resolve, dirname, join } from 'path'
+import fs from 'fs'
+import { ApiMiddleware } from 'windicss-analysis'
+import sirv from 'sirv'
+import Connect from 'connect'
+
+export default function (srcDir: string): Connect.NextHandleFunction {
+  const analysisRoot = dirname(resolve(require.resolve('windicss-analysis/package.json')))
+
+  // TODO: resue the utils instance from `nuxt-windicss`, awaiting for:
+  // https://github.com/windicss/nuxt-windicss-module/pull/106
+  const api = ApiMiddleware({
+    root: srcDir
+  })
+  const serve = sirv(join(analysisRoot, 'dist/app'), {
+    dev: true,
+    single: true
+  })
+
+  return (req, res, next) => {
+    if (req.url === '/') {
+      const index = fs.readFileSync(join(analysisRoot, 'dist/app/index.html'), 'utf-8')
+      res.end(index.replace(/="\//g, '="/admin/windicss/'))
+    } else if (req.url.startsWith('/api/')) {
+      req.url = req.url.slice(4)
+      console.log(req.url)
+      api(req, res, next)
+    } else {
+      serve(req, res, next)
+    }
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 1cdc8c65b..62ae4fc6a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1901,6 +1901,11 @@
     mustache "^2.3.0"
     stack-trace "0.0.10"
 
+"@polka/url@^1.0.0-next.15":
+  version "1.0.0-next.15"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.15.tgz#6a9d143f7f4f49db2d782f9e1c8839a29b43ae23"
+  integrity sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA==
+
 "@polka/url@^1.0.0-next.9":
   version "1.0.0-next.12"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.12.tgz#431ec342a7195622f86688bbda82e3166ce8cb28"
@@ -4317,6 +4322,30 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+cheerio-select@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-1.5.0.tgz#faf3daeb31b17c5e1a9dabcee288aaf8aafa5823"
+  integrity sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==
+  dependencies:
+    css-select "^4.1.3"
+    css-what "^5.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+    domutils "^2.7.0"
+
+cheerio@^1.0.0-rc.3:
+  version "1.0.0-rc.10"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.10.tgz#2ba3dcdfcc26e7956fc1f440e61d51c643379f3e"
+  integrity sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==
+  dependencies:
+    cheerio-select "^1.5.0"
+    dom-serializer "^1.3.2"
+    domhandler "^4.2.0"
+    htmlparser2 "^6.1.0"
+    parse5 "^6.0.1"
+    parse5-htmlparser2-tree-adapter "^6.0.1"
+    tslib "^2.2.0"
+
 chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -5145,6 +5174,17 @@ css-select@^3.1.2:
     domutils "^2.4.3"
     nth-check "^2.0.0"
 
+css-select@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.1.3.tgz#a70440f70317f2669118ad74ff105e65849c7067"
+  integrity sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^5.0.0"
+    domhandler "^4.2.0"
+    domutils "^2.6.0"
+    nth-check "^2.0.0"
+
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -5171,6 +5211,11 @@ css-what@^4.0.0:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-4.0.0.tgz#35e73761cab2eeb3d3661126b23d7aa0e8432233"
   integrity sha512-teijzG7kwYfNVsUh2H/YN62xW3KK9YhXEgSlbxMlcyjPNvdKJqFx5lrwlJgoFP1ZHlB89iGDlo/JyshKeRhv5A==
 
+css-what@^5.0.0, css-what@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad"
+  integrity sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==
+
 cssdb@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
@@ -5349,6 +5394,13 @@ decamelize@^1.1.0, decamelize@^1.1.2, decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
+declass@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/declass/-/declass-0.0.1.tgz#2c3cbda5e4ac66bc445b8bd61aa5449bf6ed39d1"
+  integrity sha512-V1tO9kGH+GLfkeiYCF016HSBcTP5mI+eMusSFgxZv0BzKvUQgI/Xn6FdoFuMwQHEqxKXhaW02s8oZqXPclKPUg==
+  dependencies:
+    cheerio "^1.0.0-rc.3"
+
 decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
@@ -5579,6 +5631,15 @@ dom-serializer@^1.0.1:
     domhandler "^4.0.0"
     entities "^2.0.0"
 
+dom-serializer@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
+  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -5625,6 +5686,15 @@ domutils@^2.4.3:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
+domutils@^2.5.2, domutils@^2.6.0, domutils@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.7.0.tgz#8ebaf0c41ebafcf55b0b72ec31c56323712c5442"
+  integrity sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
 dot-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
@@ -7322,6 +7392,16 @@ htmlparser2@^3.10.1:
     inherits "^2.0.1"
     readable-stream "^3.1.1"
 
+htmlparser2@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
+  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.0.0"
+    domutils "^2.5.2"
+    entities "^2.0.0"
+
 http-errors@~1.7.2:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
@@ -9848,7 +9928,14 @@ parse-url@^5.0.0:
     parse-path "^4.0.0"
     protocols "^1.4.0"
 
-parse5@^6.0.0:
+parse5-htmlparser2-tree-adapter@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
+  integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
+  dependencies:
+    parse5 "^6.0.1"
+
+parse5@^6.0.0, parse5@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
@@ -12147,6 +12234,15 @@ siroc@^0.9.3:
     upath "^2.0.1"
     v8-compile-cache "^2.3.0"
 
+sirv@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.12.tgz#d816c882b35489b3c63290e2f455ae3eccd5f652"
+  integrity sha512-+jQoCxndz7L2tqQL4ZyzfDhky0W/4ZJip3XoOuxyQWnAwMxindLl3Xv1qT4x1YX/re0leShvTm8Uk0kQspGhBg==
+  dependencies:
+    "@polka/url" "^1.0.0-next.15"
+    mime "^2.3.1"
+    totalist "^1.0.0"
+
 sirv@^1.0.7:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.11.tgz#81c19a29202048507d6ec0d8ba8910fda52eb5a4"
@@ -13861,6 +13957,19 @@ widest-line@^3.1.0:
   dependencies:
     string-width "^4.0.0"
 
+windicss-analysis@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/windicss-analysis/-/windicss-analysis-0.3.4.tgz#52d0d4d542f42b57d69ae0d38e3fefc1ecc0ea6a"
+  integrity sha512-3GbzXNQ53UuyMAnrdSw6qaB6+mR8sZziRqPo/ZUamD9L8aQu+paw2NFuJ4CF/FLfPZo+kjUZika7e/XGHCf9kQ==
+  dependencies:
+    "@windicss/plugin-utils" "^1.1.1"
+    cac "^6.7.3"
+    connect "^3.7.0"
+    declass "^0.0.1"
+    fast-glob "^3.2.6"
+    fs-extra "^10.0.0"
+    sirv "^1.0.12"
+
 windicss-webpack-plugin@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/windicss-webpack-plugin/-/windicss-webpack-plugin-1.1.2.tgz#c1b451dbef88df1863638a9a8b3f788800de889a"

From cbfb219adbf5d91062d9febd020eb4b3ec7ca4a4 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 1 Jul 2021 07:13:06 +0800
Subject: [PATCH 07/16] chore: update notes

---
 src/admin/modules/admin.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/admin/modules/admin.ts b/src/admin/modules/admin.ts
index 9f8519819..f8f542cbc 100644
--- a/src/admin/modules/admin.ts
+++ b/src/admin/modules/admin.ts
@@ -48,6 +48,7 @@ export default <Module>function () {
 
       // remove Vite's base middleware since it's already handled by connect route
       // it's right before '/__open-in-editor' middleware
+      // await for https://github.com/vitejs/vite/pull/4057
       const viteBaseMiddlewareIndex = middleware.stack.findIndex(i => i.route === '/__open-in-editor') - 1
       if (viteBaseMiddlewareIndex >= 0) {
         middleware.stack.splice(viteBaseMiddlewareIndex, 1)

From 3c2ff4a8fd9bcd15ade54292423eae202a54d5b3 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 1 Jul 2021 09:01:51 +0800
Subject: [PATCH 08/16] feat: config tab

---
 src/admin/api/functions/config.ts             | 49 +++++++++++++++++++
 src/admin/api/index.ts                        |  2 +
 src/admin/app/components/AppHeaderNav.vue     |  9 +++-
 src/admin/app/components/Editor.vue           |  2 +
 src/admin/app/pages/config.vue                | 33 +++++++++++++
 src/admin/app/plugins/router.ts               |  6 +++
 src/admin/index.ts                            |  2 +-
 .../modules/{preview.ts => components.ts}     |  0
 8 files changed, 101 insertions(+), 2 deletions(-)
 create mode 100644 src/admin/api/functions/config.ts
 create mode 100644 src/admin/app/pages/config.vue
 rename src/admin/modules/{preview.ts => components.ts} (100%)

diff --git a/src/admin/api/functions/config.ts b/src/admin/api/functions/config.ts
new file mode 100644
index 000000000..0dafc8a19
--- /dev/null
+++ b/src/admin/api/functions/config.ts
@@ -0,0 +1,49 @@
+import { parse } from 'path'
+import fs from 'fs-extra'
+import { createError, Middleware, useBody } from 'h3'
+import { FileData } from '../../type'
+import { r } from '../utils'
+
+export default <Middleware>async function configHandler(req) {
+  const root = r()
+  let path = [r('nuxt.config.ts'), r('nuxt.config.js')].find(i => fs.existsSync(i))
+  const exist = Boolean(path)
+  path = path || r('nuxt.config.ts')
+
+  if (req.method === 'GET') {
+    // List all files in content/
+    return {
+      path: path.replace(root, ''),
+      exist,
+      extension: parse(path).ext,
+      raw: exist ? await fs.readFile(path, 'utf-8') : ''
+    }
+  }
+
+  // Update changes
+  if (req.method === 'PUT') {
+    const { raw } = await useBody<FileData>(req)
+    if (raw == null) {
+      return createError({
+        statusCode: 400,
+        statusMessage: '"raw" key is required'
+      })
+    }
+
+    try {
+      await fs.writeFile(path, raw)
+
+      return { ok: true }
+    } catch (err) {
+      return createError({
+        statusCode: 404,
+        statusMessage: 'File not found'
+      })
+    }
+  }
+
+  return createError({
+    statusCode: 400,
+    statusMessage: 'Bad Request'
+  })
+}
diff --git a/src/admin/api/index.ts b/src/admin/api/index.ts
index 72cf02f9c..ea6defa51 100644
--- a/src/admin/api/index.ts
+++ b/src/admin/api/index.ts
@@ -3,6 +3,7 @@ import contentHandler from './functions/content'
 import previewHandler from './functions/preview'
 import staticHandler from './functions/static'
 import componentsHandler from './functions/components'
+import configHandler from './functions/config'
 
 const app = createApp()
 
@@ -10,5 +11,6 @@ app.useAsync('/content', contentHandler)
 app.useAsync('/preview', previewHandler)
 app.useAsync('/static', staticHandler)
 app.useAsync('/components', componentsHandler)
+app.useAsync('/config', configHandler)
 
 export default app._handle
diff --git a/src/admin/app/components/AppHeaderNav.vue b/src/admin/app/components/AppHeaderNav.vue
index d8b5c50f0..629803104 100644
--- a/src/admin/app/components/AppHeaderNav.vue
+++ b/src/admin/app/components/AppHeaderNav.vue
@@ -14,7 +14,6 @@
       Static
     </RouterLink>
 
-    <!-- :class used as this route is undefined in the router -->
     <RouterLink
       to="/components"
       class="relative flex-none px-4 py-1 text-sm font-medium leading-5 d-border border rounded-md"
@@ -23,6 +22,14 @@
       Components
     </RouterLink>
 
+    <RouterLink
+      to="/config"
+      class="relative flex-none px-4 py-1 text-sm font-medium leading-5 d-border border rounded-md"
+      :class="[$route.path.startsWith('/config') ? 'router-link-active' : '']"
+    >
+      Config
+    </RouterLink>
+
     <div class="flex-auto"></div>
 
     <button class="p-1 opacity-50 hover:opacity-100 !outline-none" @click="toggleDark">
diff --git a/src/admin/app/components/Editor.vue b/src/admin/app/components/Editor.vue
index 47e629352..ea8ed4649 100644
--- a/src/admin/app/components/Editor.vue
+++ b/src/admin/app/components/Editor.vue
@@ -25,6 +25,8 @@ const raw = ref(props.file.raw)
 
 const language = computed(() => {
   if (props.file.extension === '.vue') return 'html'
+  if (props.file.extension === '.ts') return 'javascript'
+  if (props.file.extension === '.js') return 'javascript'
   return 'markdown'
 })
 
diff --git a/src/admin/app/pages/config.vue b/src/admin/app/pages/config.vue
new file mode 100644
index 000000000..a4429007c
--- /dev/null
+++ b/src/admin/app/pages/config.vue
@@ -0,0 +1,33 @@
+<template>
+  <Splitpanes class="h-full default-theme" :push-other-panes="false">
+    <Pane>
+      <Editor v-if="currentFile" :file="currentFile" api-entry="/config" />
+      <p v-else class="p-4 opacity-75">👈 &nbsp;Select a file to edit.</p>
+    </Pane>
+    <Pane>
+      <KeepAlive>
+        <Preview />
+      </KeepAlive>
+    </Pane>
+  </Splitpanes>
+</template>
+
+<script setup lang="ts">
+import { Splitpanes, Pane } from 'splitpanes'
+import { ref, onMounted } from 'vue3'
+import Editor from '../components/Editor.vue'
+import Preview from '../components/Preview.vue'
+import { useApi } from '../plugins/api'
+
+const api = useApi()
+const currentFile = ref(null)
+
+const openFile = async () => {
+  currentFile.value = await api.get('/config')
+  console.log(currentFile.value)
+}
+
+onMounted(() => {
+  openFile()
+})
+</script>
diff --git a/src/admin/app/plugins/router.ts b/src/admin/app/plugins/router.ts
index 091ef4d92..66f8f7223 100644
--- a/src/admin/app/plugins/router.ts
+++ b/src/admin/app/plugins/router.ts
@@ -4,6 +4,7 @@ import { createRouter, createWebHistory } from 'vue3-router'
 import Index from '../pages/index.vue'
 import Static from '../pages/static.vue'
 import Components from '../pages/components.vue'
+import Config from '../pages/config.vue'
 
 // Router plugin
 export const router = createRouter({
@@ -23,6 +24,11 @@ export const router = createRouter({
       path: '/components',
       name: 'components',
       component: Components as any
+    },
+    {
+      path: '/config',
+      name: 'config',
+      component: Config as any
     }
   ]
 })
diff --git a/src/admin/index.ts b/src/admin/index.ts
index d4923328d..5aa28c467 100644
--- a/src/admin/index.ts
+++ b/src/admin/index.ts
@@ -3,5 +3,5 @@ import { Module } from '@nuxt/types'
 
 export default <Module>function () {
   this.addModule(resolve(__dirname, 'modules/admin.ts'))
-  this.addModule(resolve(__dirname, 'modules/preview.ts'))
+  this.addModule(resolve(__dirname, 'modules/components.ts'))
 }
diff --git a/src/admin/modules/preview.ts b/src/admin/modules/components.ts
similarity index 100%
rename from src/admin/modules/preview.ts
rename to src/admin/modules/components.ts

From 08e806a1087d2cd077c46a507dff7080e041a717 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 1 Jul 2021 09:32:20 +0800
Subject: [PATCH 09/16] feat: preview navigate to editor

---
 src/admin/app/components/Preview.vue | 14 ++++++++++-
 src/admin/app/composables/content.ts | 37 ++++++++++++++++++++++++++++
 src/admin/app/composables/preview.ts | 10 +++++---
 src/admin/app/pages/index.vue        | 17 +++----------
 4 files changed, 60 insertions(+), 18 deletions(-)
 create mode 100644 src/admin/app/composables/content.ts

diff --git a/src/admin/app/components/Preview.vue b/src/admin/app/components/Preview.vue
index 4ee5ad2c6..8d1d523bc 100644
--- a/src/admin/app/components/Preview.vue
+++ b/src/admin/app/components/Preview.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onBeforeMount, ref, watch } from 'vue3'
+import { onPreviewNavigated } from '../composables/content'
 import { fetchPreviewOrigin, previewOrigin, previewUrl, previewPath } from '../composables/preview'
 
 const iframe = ref<HTMLIFrameElement>()
@@ -42,6 +43,17 @@ function onUrlInput() {
 
   updateIframe(url.value)
 }
+
+function onIframeLoad() {
+  try {
+    iframe.value.contentWindow.$nuxt.$router.afterEach(to => {
+      previewPath.value = to.path
+      onPreviewNavigated(to.path)
+    })
+  } catch (e) {
+    console.warn(e)
+  }
+}
 </script>
 
 <template>
@@ -59,6 +71,6 @@ function onUrlInput() {
         <heroicons-outline:external-link class="m-auto" />
       </a>
     </div>
-    <iframe ref="iframe" :src="previewOrigin" class="w-full h-full" />
+    <iframe ref="iframe" :src="previewOrigin" class="w-full h-full" @load="onIframeLoad" />
   </div>
 </template>
diff --git a/src/admin/app/composables/content.ts b/src/admin/app/composables/content.ts
new file mode 100644
index 000000000..07018d9ac
--- /dev/null
+++ b/src/admin/app/composables/content.ts
@@ -0,0 +1,37 @@
+import { ref } from 'vue3'
+import { useApi } from '../plugins/api'
+import { File } from '../../type'
+import { getRoutePath, navigateToFile } from './preview'
+
+const api = useApi()
+
+export const files = ref<File[]>([])
+export const currentFile = ref(null)
+
+export const openFile = async (file: File) => {
+  if (currentFile.value?.path === file.path) return
+
+  navigateToFile(file.path)
+  currentFile.value = await api.get(`/content${file.path}`)
+}
+
+export async function fetchFiles() {
+  files.value = await api.get('/content')
+}
+
+export function findFileFromRoute(routePath: string, fileList: File[] = files.value) {
+  for (const file of fileList) {
+    if (getRoutePath(file.path) === routePath) {
+      return file
+    }
+    if (file.children) {
+      const result = findFileFromRoute(routePath, file.children)
+      if (result) return result
+    }
+  }
+}
+
+export function onPreviewNavigated(routePath: string) {
+  const file = findFileFromRoute(routePath)
+  if (file) openFile(file)
+}
diff --git a/src/admin/app/composables/preview.ts b/src/admin/app/composables/preview.ts
index b4e622c57..1d0cad012 100644
--- a/src/admin/app/composables/preview.ts
+++ b/src/admin/app/composables/preview.ts
@@ -13,9 +13,13 @@ export async function fetchPreviewOrigin() {
   previewOrigin.value = url
 }
 
-export function navigateToFile(filepath: string) {
-  previewPath.value = filepath
-    .replace(/\/\d+\./g, '/')
+export function getRoutePath(filepath: string) {
+  return filepath
+    .replace(/\/\d+\./g, '/') // remove digit index
     .replace(/\.md$/, '')
     .replace(/\/index$/, '/')
 }
+
+export function navigateToFile(filepath: string) {
+  previewPath.value = getRoutePath(filepath)
+}
diff --git a/src/admin/app/pages/index.vue b/src/admin/app/pages/index.vue
index 945b77d14..f75111685 100644
--- a/src/admin/app/pages/index.vue
+++ b/src/admin/app/pages/index.vue
@@ -19,25 +19,14 @@
 
 <script setup lang="ts">
 import { Splitpanes, Pane } from 'splitpanes'
-import { ref, onMounted } from 'vue3'
+import { onMounted } from 'vue3'
 import FilesTree from '../components/FilesTree.vue'
 import Editor from '../components/Editor.vue'
 import Preview from '../components/Preview.vue'
-import { useApi } from '../plugins/api'
-import { navigateToFile } from '../composables/preview'
-
-const api = useApi()
-
-const files = ref([])
-const currentFile = ref(null)
-
-const openFile = async file => {
-  navigateToFile(file.path)
-  currentFile.value = await api.get(`/content${file.path}`)
-}
+import { files, fetchFiles, currentFile, openFile } from '../composables/content'
 
 onMounted(async () => {
-  files.value = await api.get('/content')
+  await fetchFiles()
 
   if (!currentFile.value) {
     const indexFile = files.value.find(file => file.path === '/index.md')

From 0917efb8807a68cdd945103268e7575a9785197c Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 1 Jul 2021 16:56:35 +0800
Subject: [PATCH 10/16] fix(admin): reuse utils instance for windi analysis

---
 package.json                  |  2 +-
 src/admin/modules/admin.ts    |  6 ++++--
 src/admin/modules/windicss.ts | 20 ++++++++++++++++----
 yarn.lock                     | 19 ++++++++++---------
 4 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 11249f8e8..8292b8250 100755
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "nuxt-extend": "^0.1.0",
     "nuxt-i18n": "^6.27.2",
     "nuxt-vite": "^0.1.1",
-    "nuxt-windicss": "1.0.8",
+    "nuxt-windicss": "1.1.2",
     "ohmyfetch": "^0.1.8",
     "plausible-tracker": "^0.3.1",
     "prism-theme-vars": "^0.2.2",
diff --git a/src/admin/modules/admin.ts b/src/admin/modules/admin.ts
index f8f542cbc..2c143c025 100644
--- a/src/admin/modules/admin.ts
+++ b/src/admin/modules/admin.ts
@@ -25,6 +25,8 @@ export default <Module>function () {
     )
   })
 
+  const windiMiddleware = windicss(nuxt)
+
   if (process.env.ADMIN_DEV) {
     // use Vite as middleware
     const server = createViteServer({
@@ -37,7 +39,7 @@ export default <Module>function () {
           name: 'docus:admin-api',
           configureServer(server) {
             server.middlewares.use('/api', api)
-            server.middlewares.use('/windicss', windicss(nuxt.options.srcRoot))
+            server.middlewares.use('/windicss', windiMiddleware)
           }
         }
       ]
@@ -68,7 +70,7 @@ export default <Module>function () {
     })
     addServerMiddleware({
       path: '/admin/windicss',
-      handler: windicss(nuxt.options.srcDir)
+      handler: windiMiddleware
     })
   }
 }
diff --git a/src/admin/modules/windicss.ts b/src/admin/modules/windicss.ts
index 9e260a640..1cf003231 100644
--- a/src/admin/modules/windicss.ts
+++ b/src/admin/modules/windicss.ts
@@ -4,14 +4,26 @@ import { ApiMiddleware } from 'windicss-analysis'
 import sirv from 'sirv'
 import Connect from 'connect'
 
-export default function (srcDir: string): Connect.NextHandleFunction {
+export default function (nuxt: any): Connect.NextHandleFunction {
   const analysisRoot = dirname(resolve(require.resolve('windicss-analysis/package.json')))
 
+  let utils: any
+  nuxt.hook('windicss:utils', _utils => {
+    utils = _utils
+  })
+
   // TODO: resue the utils instance from `nuxt-windicss`, awaiting for:
   // https://github.com/windicss/nuxt-windicss-module/pull/106
-  const api = ApiMiddleware({
-    root: srcDir
-  })
+  const api = ApiMiddleware(
+    {
+      root: nuxt.options.srcDir
+    },
+    {
+      get utils() {
+        return utils
+      }
+    }
+  )
   const serve = sirv(join(analysisRoot, 'dist/app'), {
     dev: true,
     single: true
diff --git a/yarn.lock b/yarn.lock
index 62ae4fc6a..40ce62db0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9549,18 +9549,19 @@ nuxt-vite@^0.1.1:
     vite "^2.3.4"
     vite-plugin-vue2 "^1.5.1"
 
-nuxt-windicss@1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/nuxt-windicss/-/nuxt-windicss-1.0.8.tgz#48eb19be8584584d2835e290c875ed35d8b2ef65"
-  integrity sha512-kUq989Pui5yXtXZ5PN3Dlp+c/U1pnaBG+Yej0Fatc98cxAR5rqci6v4giSC5A8la7OPcuwrmn1TlUpUuH/djJw==
+nuxt-windicss@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/nuxt-windicss/-/nuxt-windicss-1.1.2.tgz#04c522aa733befd6fb3772ca0e0e37e503338f9e"
+  integrity sha512-kdx6Rsstil1AsEgXMvIPBOggxQajUJkhIVD41R6xJ+yrd5XW4J5cTZntYypn3gALj33CZGhmAlIhXLYP3vIKfg==
   dependencies:
     clear-module "^4.1.1"
     defu "^4.0.1"
+    read-cache "^1.0.0"
     rimraf "^3.0.2"
     semver "^7.3.5"
     upath "^2.0.1"
     vite-plugin-windicss "1.1.1"
-    windicss-webpack-plugin "1.1.2"
+    windicss-webpack-plugin "1.2.1"
 
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
@@ -13970,10 +13971,10 @@ windicss-analysis@^0.3.4:
     fs-extra "^10.0.0"
     sirv "^1.0.12"
 
-windicss-webpack-plugin@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/windicss-webpack-plugin/-/windicss-webpack-plugin-1.1.2.tgz#c1b451dbef88df1863638a9a8b3f788800de889a"
-  integrity sha512-OSsetjS4iOWfwF95CDqyUHCiP/U3cmBQuqs67IKAxOaUrnzpeHlDK+6wXrkkbV3kDa/ApxoQXND/7Ww+rXXN8A==
+windicss-webpack-plugin@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/windicss-webpack-plugin/-/windicss-webpack-plugin-1.2.1.tgz#bae5a0112c5e548299cd2201bdee204f3c218b08"
+  integrity sha512-wvMjr7cD9adVdttizDGndTon6Jpm8efn0CWLagd6L2E1cQZ36jM7f5QbvsUh+N1mR/7aDfQqg55ndxc45L1+hA==
   dependencies:
     "@windicss/plugin-utils" "1.1.0"
     debug "^4.3.1"

From e3df45b1bde6900d58666c29d9e7c5ab10aacef1 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 6 Jul 2021 16:23:00 +0800
Subject: [PATCH 11/16] chore: update deps

---
 package.json |  4 +--
 yarn.lock    | 80 +++++++++++++++++++++++++++++++++-------------------
 2 files changed, 53 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index 8292b8250..1703b31fe 100755
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
     "@vitejs/plugin-vue": "^1.2.3",
     "@vue/composition-api": "^1.0.0-rc.12",
     "@vueuse/integrations": "^5.0.3",
-    "@windicss/plugin-utils": "^1.1.1",
+    "@windicss/plugin-utils": "^1.2.3",
     "clear-module": "^4.1.1",
     "clipboard": "^2.0.8",
     "color": "^3.1.3",
@@ -85,7 +85,7 @@
     "nuxt-extend": "^0.1.0",
     "nuxt-i18n": "^6.27.2",
     "nuxt-vite": "^0.1.1",
-    "nuxt-windicss": "1.1.2",
+    "nuxt-windicss": "^1.1.3",
     "ohmyfetch": "^0.1.8",
     "plausible-tracker": "^0.3.1",
     "prism-theme-vars": "^0.2.2",
diff --git a/yarn.lock b/yarn.lock
index 40ce62db0..ddb6943be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -106,11 +106,6 @@
     "@algolia/logger-common" "4.9.1"
     "@algolia/requester-common" "4.9.1"
 
-"@antfu/utils@^0.2.2":
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.2.2.tgz#b74c5b6f6de64f7e47a669deba054790b26f85d8"
-  integrity sha512-8GwVE0j48SpZaLxsHO0BSO0sEpkb+EhFQcABFBFomH4O8AwNVVvGQNRCBKOPUwU4Vxj3ZSVz8PDjUrPGwaYP9A==
-
 "@antfu/utils@^0.2.3":
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.2.4.tgz#c7d33fc6faa0d3a6fcc2555673f5e9b19c0fbc15"
@@ -2866,12 +2861,21 @@
     "@webassemblyjs/wast-parser" "1.9.0"
     "@xtuc/long" "4.2.2"
 
-"@windicss/plugin-utils@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.1.0.tgz#c0834165f40142bf52f24eced1bbf68cbf8bd506"
-  integrity sha512-v9WhtcGKRehsbY2Omd9m+Jd0IsjbKJmRSa712BuPLZ+fZuCSomne9twjqtPn29IGqS6T/9lM8aOjW7mRMU1x/g==
+"@windicss/config@1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@windicss/config/-/config-1.2.3.tgz#ab1b4563aa04df0dcba6b2f7aef2400778ac37c9"
+  integrity sha512-NdnnF03Oq/4ovfCVW0FrEqjdpPI+tAK/FcCmTmC3bULi/h2OY4wL2WBm2GntbWKcTjFPwYM/EqAr8iOonesrgA==
+  dependencies:
+    debug "^4.3.2"
+    jiti "^1.10.1"
+    windicss "^3.1.3"
+
+"@windicss/plugin-utils@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.2.0.tgz#f9c657f981d7696dfa6b8e8069b311161a2ac9b4"
+  integrity sha512-6OAsyz2yI0VKNHACT35FjWWzMZlMEF7Z0pIiNUd9+R9jc73+qJcK1DRCZ3YxnjuGk0G76b542uXQEJgv2jL3vA==
   dependencies:
-    "@antfu/utils" "^0.2.2"
+    "@antfu/utils" "^0.2.3"
     debug "^4.3.2"
     fast-glob "^3.2.5"
     jiti "^1.10.1"
@@ -2879,7 +2883,7 @@
     micromatch "^4.0.4"
     windicss "^3.1.3"
 
-"@windicss/plugin-utils@1.1.1", "@windicss/plugin-utils@^1.1.1":
+"@windicss/plugin-utils@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.1.1.tgz#7f70952adc8d33f607706e434a153e2cdff52b64"
   integrity sha512-niKEDyUpOfCGemFHopI9fxdWPpJQIZ/jmaU4spQXsGc1oEts164P8LUJPQmXc8C6vjKwkrH7KA+lxYNG5LmlDA==
@@ -2892,6 +2896,19 @@
     micromatch "^4.0.4"
     windicss "^3.1.3"
 
+"@windicss/plugin-utils@^1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.2.3.tgz#d2bc45747a17f2f92722a106a40ec50bf92d8a90"
+  integrity sha512-lEw6MJ5tERA2IIufVB924nQH8gJMiEluCze/sk6kkyEI48P95QJS8hauMsDfK4vx5IlESya9Um7LoPnga06KxA==
+  dependencies:
+    "@antfu/utils" "^0.2.3"
+    "@windicss/config" "1.2.3"
+    debug "^4.3.2"
+    fast-glob "^3.2.5"
+    magic-string "^0.25.7"
+    micromatch "^4.0.4"
+    windicss "^3.1.3"
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -9549,10 +9566,10 @@ nuxt-vite@^0.1.1:
     vite "^2.3.4"
     vite-plugin-vue2 "^1.5.1"
 
-nuxt-windicss@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/nuxt-windicss/-/nuxt-windicss-1.1.2.tgz#04c522aa733befd6fb3772ca0e0e37e503338f9e"
-  integrity sha512-kdx6Rsstil1AsEgXMvIPBOggxQajUJkhIVD41R6xJ+yrd5XW4J5cTZntYypn3gALj33CZGhmAlIhXLYP3vIKfg==
+nuxt-windicss@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/nuxt-windicss/-/nuxt-windicss-1.1.3.tgz#9efd6260b008631e9685ca5bb9609cdd4528756e"
+  integrity sha512-9LKng04V4eZm4dv+Ur0YCax7IIlJRJT0BuOhyS01fORTM3hkH5edsUZJtP+EU2Da+AncPW8FDeL/OIJ+DsCyfw==
   dependencies:
     clear-module "^4.1.1"
     defu "^4.0.1"
@@ -9560,8 +9577,8 @@ nuxt-windicss@1.1.2:
     rimraf "^3.0.2"
     semver "^7.3.5"
     upath "^2.0.1"
-    vite-plugin-windicss "1.1.1"
-    windicss-webpack-plugin "1.2.1"
+    vite-plugin-windicss "1.2.0"
+    windicss-webpack-plugin "1.2.4"
 
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
@@ -13581,12 +13598,12 @@ vite-plugin-vue2@^1.5.1:
     vue-template-compiler "^2.6.11"
     vue-template-es2015-compiler "^1.9.1"
 
-vite-plugin-windicss@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/vite-plugin-windicss/-/vite-plugin-windicss-1.1.1.tgz#c13d4c2d9fec4afae2eea5058f426c693255d02f"
-  integrity sha512-J1n3DoSg8BkQ42HDNzh+FqPhvBgCRgQ0Nvp2HLvb5FVl8FKEPw26Frc/oLaC1g9ypSlvkSM8011gHi+c+pxsRQ==
+vite-plugin-windicss@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/vite-plugin-windicss/-/vite-plugin-windicss-1.2.0.tgz#6b21e76f3aae1cd2f71c548c4bfe8d87b4328ad0"
+  integrity sha512-3teAmQHCDDDcy7On5fOj1sYTRVo8zAwJJd4SOapeGI7EuEzO2fHy6oDS6sPXVUnstbfoPbvrng1xvc3VAqI+sg==
   dependencies:
-    "@windicss/plugin-utils" "1.1.1"
+    "@windicss/plugin-utils" "1.2.0"
     chalk "^4.1.1"
     debug "^4.3.2"
     windicss "^3.1.3"
@@ -13971,20 +13988,25 @@ windicss-analysis@^0.3.4:
     fs-extra "^10.0.0"
     sirv "^1.0.12"
 
-windicss-webpack-plugin@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/windicss-webpack-plugin/-/windicss-webpack-plugin-1.2.1.tgz#bae5a0112c5e548299cd2201bdee204f3c218b08"
-  integrity sha512-wvMjr7cD9adVdttizDGndTon6Jpm8efn0CWLagd6L2E1cQZ36jM7f5QbvsUh+N1mR/7aDfQqg55ndxc45L1+hA==
+windicss-webpack-plugin@1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/windicss-webpack-plugin/-/windicss-webpack-plugin-1.2.4.tgz#c799370c307af48f1b7dd38b32fdce551a250f3d"
+  integrity sha512-pARSqzaQUTVuG2Rj2zRuILTZ/KYiOvDNyHuG2/8H5/110QnmVItMqGbfRfuJp7nZVDSivKzOkfeYxgOYCZVSpg==
   dependencies:
-    "@windicss/plugin-utils" "1.1.0"
+    "@windicss/plugin-utils" "1.2.0"
     debug "^4.3.1"
     loader-utils "^2.0.0"
     magic-string "^0.25.7"
     upath "^2.0.1"
     webpack-virtual-modules "^0.4.3"
-    windicss "3.1.3"
+    windicss "3.1.4"
+
+windicss@3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/windicss/-/windicss-3.1.4.tgz#557eaf8e3c08064a309ccb5d887c82c4bce25069"
+  integrity sha512-3RBcANxdOy/n4dLVT8+0X409sGI+piO06ARbQ8RncxGuYgdw5Ip3hrhGIYajH67lV+tHc7xNVGxj73amOC9N0g==
 
-windicss@3.1.3, windicss@^3.1.3:
+windicss@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/windicss/-/windicss-3.1.3.tgz#a4b80af48bdd5d4be13520f700b497af455df700"
   integrity sha512-l7fpoba2LY9AYRy4UgcuOpbPsed8UsbpEQYUVWRR1wdAwiKxK6bGIMfpiKJtjPAPdh0GOGUqr6KJar0EDZSxzg==

From 49ef13e60b3c77bef8e4022923e582cfe4a1e9dd Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 6 Jul 2021 16:30:26 +0800
Subject: [PATCH 12/16] feat(admin): entry for  windi analyzer

---
 src/admin/app/components/AppHeaderNav.vue | 8 ++++++++
 src/admin/app/pages/windicss.vue          | 3 +++
 src/admin/app/plugins/router.ts           | 6 ++++++
 src/admin/modules/admin.ts                | 4 ++--
 src/admin/modules/windicss.ts             | 5 ++---
 5 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 src/admin/app/pages/windicss.vue

diff --git a/src/admin/app/components/AppHeaderNav.vue b/src/admin/app/components/AppHeaderNav.vue
index 629803104..6b031b988 100644
--- a/src/admin/app/components/AppHeaderNav.vue
+++ b/src/admin/app/components/AppHeaderNav.vue
@@ -30,6 +30,14 @@
       Config
     </RouterLink>
 
+    <RouterLink
+      to="/windicss"
+      class="relative flex-none px-4 py-1 text-sm font-medium leading-5 d-border border rounded-md"
+      :class="[$route.path.startsWith('/windicss') ? 'router-link-active' : '']"
+    >
+      Windi Analyzer
+    </RouterLink>
+
     <div class="flex-auto"></div>
 
     <button class="p-1 opacity-50 hover:opacity-100 !outline-none" @click="toggleDark">
diff --git a/src/admin/app/pages/windicss.vue b/src/admin/app/pages/windicss.vue
new file mode 100644
index 000000000..80d0aa414
--- /dev/null
+++ b/src/admin/app/pages/windicss.vue
@@ -0,0 +1,3 @@
+<template>
+  <iframe src="/admin/__windicss/" class="w-full h-full"></iframe>
+</template>
diff --git a/src/admin/app/plugins/router.ts b/src/admin/app/plugins/router.ts
index 66f8f7223..1fbf01c0c 100644
--- a/src/admin/app/plugins/router.ts
+++ b/src/admin/app/plugins/router.ts
@@ -5,6 +5,7 @@ import Index from '../pages/index.vue'
 import Static from '../pages/static.vue'
 import Components from '../pages/components.vue'
 import Config from '../pages/config.vue'
+import WindiCSS from '../pages/windicss.vue'
 
 // Router plugin
 export const router = createRouter({
@@ -29,6 +30,11 @@ export const router = createRouter({
       path: '/config',
       name: 'config',
       component: Config as any
+    },
+    {
+      path: '/windicss',
+      name: 'windicss',
+      component: WindiCSS as any
     }
   ]
 })
diff --git a/src/admin/modules/admin.ts b/src/admin/modules/admin.ts
index 2c143c025..3785c6742 100644
--- a/src/admin/modules/admin.ts
+++ b/src/admin/modules/admin.ts
@@ -39,7 +39,7 @@ export default <Module>function () {
           name: 'docus:admin-api',
           configureServer(server) {
             server.middlewares.use('/api', api)
-            server.middlewares.use('/windicss', windiMiddleware)
+            server.middlewares.use('/__windicss', windiMiddleware)
           }
         }
       ]
@@ -69,7 +69,7 @@ export default <Module>function () {
       handler: api
     })
     addServerMiddleware({
-      path: '/admin/windicss',
+      path: '/admin/__windicss',
       handler: windiMiddleware
     })
   }
diff --git a/src/admin/modules/windicss.ts b/src/admin/modules/windicss.ts
index 1cf003231..929c93c50 100644
--- a/src/admin/modules/windicss.ts
+++ b/src/admin/modules/windicss.ts
@@ -12,13 +12,12 @@ export default function (nuxt: any): Connect.NextHandleFunction {
     utils = _utils
   })
 
-  // TODO: resue the utils instance from `nuxt-windicss`, awaiting for:
-  // https://github.com/windicss/nuxt-windicss-module/pull/106
   const api = ApiMiddleware(
     {
       root: nuxt.options.srcDir
     },
     {
+      // reuse the utils instance from `nuxt-windicss`
       get utils() {
         return utils
       }
@@ -32,7 +31,7 @@ export default function (nuxt: any): Connect.NextHandleFunction {
   return (req, res, next) => {
     if (req.url === '/') {
       const index = fs.readFileSync(join(analysisRoot, 'dist/app/index.html'), 'utf-8')
-      res.end(index.replace(/="\//g, '="/admin/windicss/'))
+      res.end(index.replace(/="\//g, '="/admin/__windicss/'))
     } else if (req.url.startsWith('/api/')) {
       req.url = req.url.slice(4)
       console.log(req.url)

From cb7eae82b54bc11462375cceccbeec19ec2f7a15 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 6 Jul 2021 22:44:32 +0800
Subject: [PATCH 13/16] chore: clean up

---
 src/admin/app/pages/config.vue | 1 -
 src/admin/modules/windicss.ts  | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/admin/app/pages/config.vue b/src/admin/app/pages/config.vue
index a4429007c..94123d7dc 100644
--- a/src/admin/app/pages/config.vue
+++ b/src/admin/app/pages/config.vue
@@ -24,7 +24,6 @@ const currentFile = ref(null)
 
 const openFile = async () => {
   currentFile.value = await api.get('/config')
-  console.log(currentFile.value)
 }
 
 onMounted(() => {
diff --git a/src/admin/modules/windicss.ts b/src/admin/modules/windicss.ts
index 929c93c50..565acbc24 100644
--- a/src/admin/modules/windicss.ts
+++ b/src/admin/modules/windicss.ts
@@ -34,7 +34,6 @@ export default function (nuxt: any): Connect.NextHandleFunction {
       res.end(index.replace(/="\//g, '="/admin/__windicss/'))
     } else if (req.url.startsWith('/api/')) {
       req.url = req.url.slice(4)
-      console.log(req.url)
       api(req, res, next)
     } else {
       serve(req, res, next)

From 5e3c89bb7c756ae5c5da4b6a64e260f4e8ae1324 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 6 Jul 2021 22:52:04 +0800
Subject: [PATCH 14/16] Apply suggestions from code review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
---
 src/admin/api/functions/config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/admin/api/functions/config.ts b/src/admin/api/functions/config.ts
index 0dafc8a19..1f3853aca 100644
--- a/src/admin/api/functions/config.ts
+++ b/src/admin/api/functions/config.ts
@@ -11,7 +11,7 @@ export default <Middleware>async function configHandler(req) {
   path = path || r('nuxt.config.ts')
 
   if (req.method === 'GET') {
-    // List all files in content/
+    // Get config file
     return {
       path: path.replace(root, ''),
       exist,
@@ -20,7 +20,7 @@ export default <Middleware>async function configHandler(req) {
     }
   }
 
-  // Update changes
+  // Update config
   if (req.method === 'PUT') {
     const { raw } = await useBody<FileData>(req)
     if (raw == null) {

From 1822c7abbd698ad155d78c821d518ee40a3429ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yae=CC=88l=20GUILLOUX?= <yael.guilloux@gmail.com>
Date: Wed, 7 Jul 2021 20:14:56 +0200
Subject: [PATCH 15/16] :rotating_light: (lint) no-console fix

---
 src/admin/app/components/Preview.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/admin/app/components/Preview.vue b/src/admin/app/components/Preview.vue
index 8d1d523bc..4dd905df8 100644
--- a/src/admin/app/components/Preview.vue
+++ b/src/admin/app/components/Preview.vue
@@ -51,6 +51,7 @@ function onIframeLoad() {
       onPreviewNavigated(to.path)
     })
   } catch (e) {
+    // eslint-disable-next-line no-console
     console.warn(e)
   }
 }

From 0407a301c30455380177f35a34c4753a673ef8e7 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 12 Jul 2021 17:56:50 +0800
Subject: [PATCH 16/16] chore: cleanup vite fix

---
 src/admin/modules/admin.ts | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/admin/modules/admin.ts b/src/admin/modules/admin.ts
index 3785c6742..a9947a624 100644
--- a/src/admin/modules/admin.ts
+++ b/src/admin/modules/admin.ts
@@ -46,17 +46,7 @@ export default <Module>function () {
     })
 
     nuxt.hook('render:setupMiddleware', async () => {
-      const middleware = (await server).middlewares
-
-      // remove Vite's base middleware since it's already handled by connect route
-      // it's right before '/__open-in-editor' middleware
-      // await for https://github.com/vitejs/vite/pull/4057
-      const viteBaseMiddlewareIndex = middleware.stack.findIndex(i => i.route === '/__open-in-editor') - 1
-      if (viteBaseMiddlewareIndex >= 0) {
-        middleware.stack.splice(viteBaseMiddlewareIndex, 1)
-      }
-
-      nuxt.server.app.use('/admin/', middleware)
+      nuxt.server.app.use('/admin/', (await server).middlewares)
     })
   } else {
     // use built dist