From 8a473500048e2cb58538fe54e18b12e6d42101e4 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 23 Jun 2021 17:12:18 +0800
Subject: [PATCH 1/3] feat(admin): use Vite as middleware on dev

close #293
---
 package.json                       |  6 +--
 src/admin/{ => app}/vite.config.ts |  8 +--
 src/admin/index.ts                 | 80 ++++++++++++++++--------------
 3 files changed, 49 insertions(+), 45 deletions(-)
 rename src/admin/{ => app}/vite.config.ts (82%)

diff --git a/package.json b/package.json
index a6cea052b..5fb2ee3c6 100755
--- a/package.json
+++ b/package.json
@@ -30,14 +30,14 @@
   ],
   "scripts": {
     "build": "rm -rf dist && siroc build",
-    "dev": "BUILD_ADMIN=true nuxt dev docs",
+    "dev": "ADMIN_DEV=true nuxt dev docs",
     "dev:nuxtjs": "nuxt dev nuxtjs.org",
-    "dev:admin": "vite --config src/admin/vite.config.ts",
+    "dev:admin": "vite --config src/admin/app/vite.config.ts",
     "generate": "nuxt generate --force-build docs",
     "generate:nuxtjs": "nuxt generate --force-build nuxtjs.org",
     "start": "nuxt start docs",
     "start:nuxtjs": "nuxt start nuxtjs.org",
-    "play": "BUILD_ADMIN=true nuxt dev playground",
+    "play": "ADMIN_DEV=true nuxt dev playground",
     "lint": "eslint --ext .ts,.js,.vue .",
     "prepare": "yarn link && yarn link docus",
     "release": "yarn test && standard-version && git push --follow-tags && npm publish",
diff --git a/src/admin/vite.config.ts b/src/admin/app/vite.config.ts
similarity index 82%
rename from src/admin/vite.config.ts
rename to src/admin/app/vite.config.ts
index 13b0d5542..f3aea414f 100644
--- a/src/admin/vite.config.ts
+++ b/src/admin/app/vite.config.ts
@@ -1,13 +1,13 @@
-import { join, resolve } from 'path'
+import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import WindiCSS from 'vite-plugin-windicss'
 import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
 import ViteComponents from 'vite-plugin-components'
-import { dependencies, devDependencies } from '../../package.json'
+import { dependencies, devDependencies } from '../../../package.json'
 
 const r = path => resolve(__dirname, path)
-const root = join(__dirname, 'app')
+const root = __dirname
 
 export default defineConfig({
   root,
@@ -20,7 +20,7 @@ export default defineConfig({
     WindiCSS({
       root,
       scan: {
-        include: [r('app/**/*')]
+        include: [r('**/*')]
       }
     }),
     ViteComponents({
diff --git a/src/admin/index.ts b/src/admin/index.ts
index 2156e975c..d47cb0dda 100644
--- a/src/admin/index.ts
+++ b/src/admin/index.ts
@@ -1,9 +1,9 @@
-import { execSync } from 'child_process'
 import { join } from 'upath'
 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 () {
@@ -12,43 +12,6 @@ export default <Module>function () {
   process.options = nuxt.options
   process.previewUrl = 'http://localhost:4000'
 
-  addServerMiddleware({
-    path: '/admin/api',
-    handler: api
-  })
-
-  // TODO: Implement Vite as server middleware/proxy, so we can remove this
-  // Build the admin
-  if (process.env.BUILD_ADMIN) execSync('npx vite --config src/admin/vite.config.ts build')
-
-  this.addServerMiddleware({
-    path: '/admin/',
-    handler: serveStatic(join(__dirname, 'app/dist'))
-  })
-
-  // TODO: Implement Vite as server middleware/proxy
-  //       instead of using the built version.
-  /* if (process.env.ADMIN_DEV && false) {
-    // Start the admin in development
-    const viteServer = await createServer({
-      configFile: false,
-      ...viteConfig
-    })
-    await viteServer.listen()
-    const viteUrl = `http://localhost:${viteServer.config.server.port}`
-
-    // TODO: handle when Array syntax
-    const proxy = (this.options.proxy = this.options.proxy || {})
-    proxy['/admin/'] = {
-      target: viteUrl,
-      pathRewrite: {
-        '^/admin/': '/'
-      }
-    }
-
-    this.requireModule('@nuxtjs/proxy')
-  } */
-
   // Add runtime plugin
   if (options.dev) this.options.plugins.push(require.resolve(join(__dirname, '/runtime/plugin')))
 
@@ -60,4 +23,45 @@ export default <Module>function () {
       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
+    })
+  }
 }

From ece221f96e2f8890da681c32156e6ba5c6ac19e5 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 23 Jun 2021 17:16:12 +0800
Subject: [PATCH 2/3] chore: fix build

---
 siroc.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/siroc.config.ts b/siroc.config.ts
index af87168c2..be3a7cab2 100644
--- a/siroc.config.ts
+++ b/siroc.config.ts
@@ -10,7 +10,7 @@ export default defineSirocConfig({
     'build:extend'() {
       // eslint-disable-next-line no-console
       console.log('📝 Building the admin app')
-      execSync('npx vite --config src/admin/vite.config.ts build')
+      execSync('npx vite --config src/admin/app/vite.config.ts build', { stdio: 'inherit' })
     }
   }
 })

From 92d0c8af74616af502f69d74d91a5ce253f867d4 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 23 Jun 2021 18:27:10 +0800
Subject: [PATCH 3/3] feat(admin): dark mode (#502)

---
 package.json                               |  3 ++-
 src/admin/app/components/AppHeader.vue     | 13 ++---------
 src/admin/app/components/AppHeaderLogo.vue | 14 ++++++++++--
 src/admin/app/components/AppHeaderNav.vue  | 19 ++++++++++++----
 src/admin/app/components/Editor.vue        |  7 ++----
 src/admin/app/components/FilesTree.vue     |  8 +++----
 src/admin/app/components/Preview.vue       |  2 +-
 src/admin/app/composables/dark.ts          |  4 ++++
 src/admin/app/composables/index.ts         |  1 +
 src/admin/app/index.css                    |  8 +++++++
 src/admin/app/index.html                   |  2 +-
 src/admin/app/pages/index.vue              |  6 +++---
 src/admin/app/pages/static.vue             |  4 ++--
 src/admin/app/vite.config.ts               |  5 +++--
 src/admin/app/windi.config.ts              | 25 ++++++++++++++++++++++
 yarn.lock                                  |  8 +++++++
 16 files changed, 93 insertions(+), 36 deletions(-)
 create mode 100644 src/admin/app/composables/dark.ts
 create mode 100644 src/admin/app/windi.config.ts

diff --git a/package.json b/package.json
index 5fb2ee3c6..d05d37b48 100755
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "start:nuxtjs": "nuxt start nuxtjs.org",
     "play": "ADMIN_DEV=true nuxt dev playground",
     "lint": "eslint --ext .ts,.js,.vue .",
-    "prepare": "yarn link && yarn link docus",
+    "prepare": "yarn link && yarn link docus && vue-demi-switch 3 vue3",
     "release": "yarn test && standard-version && git push --follow-tags && npm publish",
     "test": "yarn lint && echo 'TODO tests'",
     "clean:nuxt": "rm -rf .nuxt docs/.nuxt playground/.nuxt nuxtjs.org/.nuxt",
@@ -124,6 +124,7 @@
     "@types/fs-extra": "^9.0.11",
     "@types/graceful-fs": "^4.1.5",
     "@types/node-fetch": "^2.5.10",
+    "@vueuse/core": "^5.0.3",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.29.0",
     "eslint-config-prettier": "^8.3.0",
diff --git a/src/admin/app/components/AppHeader.vue b/src/admin/app/components/AppHeader.vue
index 73218349c..d0937b306 100644
--- a/src/admin/app/components/AppHeader.vue
+++ b/src/admin/app/components/AppHeader.vue
@@ -1,20 +1,11 @@
 <template>
-  <header class="relative z-10 flex items-center border-b">
+  <header class="relative z-10 flex items-center d-border border-b">
     <AppHeaderLogo />
-
     <AppHeaderNav />
   </header>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue3'
+<script setup lang="ts">
 import AppHeaderLogo from './AppHeaderLogo.vue'
 import AppHeaderNav from './AppHeaderNav.vue'
-
-export default defineComponent({
-  components: {
-    AppHeaderLogo,
-    AppHeaderNav
-  }
-})
 </script>
diff --git a/src/admin/app/components/AppHeaderLogo.vue b/src/admin/app/components/AppHeaderLogo.vue
index d4bf2e516..d44b7d039 100644
--- a/src/admin/app/components/AppHeaderLogo.vue
+++ b/src/admin/app/components/AppHeaderLogo.vue
@@ -1,7 +1,13 @@
 <template>
-  <div class="flex items-center h-12 px-4 border-r">
+  <div class="flex items-center h-12 px-4 d-border border-r">
     <h1>
-      <svg class="h-8 -mb-2" viewBox="0 0 445 190" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        :class="isDark ? 'filter invert' : ''"
+        class="h-8 -mb-2"
+        viewBox="0 0 445 190"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <circle r="35.3495" transform="matrix(-1 0 0 1 140.947 47.3495)" stroke="black" stroke-width="24" />
         <circle
           r="36.5909"
@@ -30,3 +36,7 @@
     </h1>
   </div>
 </template>
+
+<script setup lang="ts">
+import { isDark } from '../composables/dark'
+</script>
diff --git a/src/admin/app/components/AppHeaderNav.vue b/src/admin/app/components/AppHeaderNav.vue
index 9e37cb69c..85d9dd6d8 100644
--- a/src/admin/app/components/AppHeaderNav.vue
+++ b/src/admin/app/components/AppHeaderNav.vue
@@ -1,23 +1,34 @@
 <template>
-  <div class="flex items-center ml-4 space-x-2 flex-auto">
+  <div class="flex items-center ml-4 space-x-2 flex-auto pr-2">
     <!-- Editor -->
-    <RouterLink to="/" class="relative flex-none px-4 py-1 text-sm font-medium leading-5 border rounded-md">
+    <RouterLink to="/" class="relative flex-none px-4 py-1 text-sm font-medium leading-5 d-border border rounded-md">
       Pages
     </RouterLink>
 
     <!-- :class used as this route is undefined in the router -->
     <RouterLink
       to="/static"
-      class="relative flex-none px-4 py-1 text-sm font-medium leading-5 border rounded-md"
+      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' : '']"
     >
       Static
     </RouterLink>
+
+    <div class="flex-auto"></div>
+
+    <button @click="toggleDark" class="p-1 opacity-50 hover:opacity-100 !outline-none">
+      <heroicons-outline-moon v-if="isDark" />
+      <heroicons-outline-sun v-else />
+    </button>
   </div>
 </template>
 
+<script setup lang="ts">
+import { toggleDark, isDark } from '../composables/dark'
+</script>
+
 <style lang="postcss">
 .router-link-active {
-  @apply border-blue-500 bg-blue-100;
+  @apply border-blue-500 bg-blue-400 bg-opacity-25;
 }
 </style>
diff --git a/src/admin/app/components/Editor.vue b/src/admin/app/components/Editor.vue
index 785077c23..efc04d081 100644
--- a/src/admin/app/components/Editor.vue
+++ b/src/admin/app/components/Editor.vue
@@ -1,8 +1,5 @@
 <template>
-  <textarea
-    v-model="frontmatter"
-    class="h-24 w-full font-mono px-4 py-2 d-border-primary border-b outline-none text-sm"
-  />
+  <textarea v-model="frontmatter" class="h-24 w-full font-mono px-4 py-2 d-border border-b outline-none text-sm" />
   <textarea v-model="content" class="w-full h-full font-mono px-4 py-2 outline-none text-sm" />
 </template>
 
@@ -70,6 +67,6 @@ export default defineComponent({
 
 <style lang="postcss" scoped>
 textarea {
-  @apply whitespace-nowrap overflow-scroll;
+  @apply whitespace-nowrap overflow-scroll bg-transparent;
 }
 </style>
diff --git a/src/admin/app/components/FilesTree.vue b/src/admin/app/components/FilesTree.vue
index 26126db10..56df80266 100644
--- a/src/admin/app/components/FilesTree.vue
+++ b/src/admin/app/components/FilesTree.vue
@@ -3,8 +3,8 @@
     <li
       v-for="file of files"
       :key="file.path"
-      class="rounded text-gray-600"
-      :class="{ 'bg-gray-200 text-gray-900': isCurrent(file) }"
+      class="rounded"
+      :class="isCurrent(file) ? 'bg-gray-400 bg-opacity-20' : 'opacity-75'"
     >
       <div
         v-if="!isHidden(file)"
@@ -17,8 +17,8 @@
           py-1
           text-sm
           leading-5
-          hover:text-gray-900 hover:bg-gray-50
-          focus:outline-none focus:text-gray-900 focus:bg-gray-50
+          rounded
+          hover:bg-gray-400 hover:bg-opacity-15
         "
         @click="open(file)"
       >
diff --git a/src/admin/app/components/Preview.vue b/src/admin/app/components/Preview.vue
index a123df5e1..40ddef3b8 100644
--- a/src/admin/app/components/Preview.vue
+++ b/src/admin/app/components/Preview.vue
@@ -45,7 +45,7 @@ function onUrlInput() {
 
 <template>
   <div class="h-full flex-1 grid grid-rows-[min-content,1fr]">
-    <div class="p-2 flex d-border-primary border-b gap-2">
+    <div class="p-2 flex d-border border-b gap-2">
       <button class="px-1 opacity-50 hover:opacity-100" @click="refresh">
         <heroicons-outline:refresh />
       </button>
diff --git a/src/admin/app/composables/dark.ts b/src/admin/app/composables/dark.ts
new file mode 100644
index 000000000..5467599bd
--- /dev/null
+++ b/src/admin/app/composables/dark.ts
@@ -0,0 +1,4 @@
+import { useDark, useToggle } from '@vueuse/core'
+
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)
diff --git a/src/admin/app/composables/index.ts b/src/admin/app/composables/index.ts
index 2d3d80bf1..9773a5161 100644
--- a/src/admin/app/composables/index.ts
+++ b/src/admin/app/composables/index.ts
@@ -1 +1,2 @@
 export * from './preview'
+export * from './dark'
diff --git a/src/admin/app/index.css b/src/admin/app/index.css
index 0aae3c118..cfccb92ab 100644
--- a/src/admin/app/index.css
+++ b/src/admin/app/index.css
@@ -9,6 +9,14 @@ body {
   width: 100vw;
 }
 
+html {
+  @apply text-gray-900;
+}
+
+html.dark {
+  @apply text-gray-100 bg-gray-900;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/src/admin/app/index.html b/src/admin/app/index.html
index 8a40e56f6..8f5623e61 100644
--- a/src/admin/app/index.html
+++ b/src/admin/app/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Docus Admin</title>
   </head>
-  <body class="fixed flex w-full min-h-full overflow-hidden text-gray-900">
+  <body class="fixed flex w-full min-h-full overflow-hidden d-body-text-color d-body-bg">
     <div id="app"></div>
     <script type="module" src="/main.ts"></script>
   </body>
diff --git a/src/admin/app/pages/index.vue b/src/admin/app/pages/index.vue
index c0dcadd5e..7b4ae21e3 100644
--- a/src/admin/app/pages/index.vue
+++ b/src/admin/app/pages/index.vue
@@ -1,13 +1,13 @@
 <template>
-  <aside class="w-64 p-2 relative border-r">
+  <aside class="w-64 p-2 relative d-border border-r">
     <FilesTree :files="files" :current-file="currentFile" @open="openFile" />
   </aside>
 
   <!-- eslint-disable-next-line vue/no-multiple-template-root -->
-  <div class="flex-1 border-r">
+  <div class="flex-1 d-border border-r">
     <Editor v-if="currentFile" :file="currentFile" />
 
-    <p v-else class="p-4 text-gray-700">👈 &nbsp;Select a file to edit.</p>
+    <p v-else class="p-4 opacity-75">👈 &nbsp;Select a file to edit.</p>
   </div>
 </template>
 
diff --git a/src/admin/app/pages/static.vue b/src/admin/app/pages/static.vue
index 91b2a6bb2..8e620ccb5 100644
--- a/src/admin/app/pages/static.vue
+++ b/src/admin/app/pages/static.vue
@@ -3,9 +3,9 @@
   <div class="flex flex-shrink-0">
     <div class="flex flex-col w-64">
       <!-- Sidebar component, swap this element with another sidebar if you like -->
-      <div class="flex flex-col flex-grow border-r border-gray-r-200 bg-white overflow-y-auto">
+      <div class="flex flex-col flex-grow d-border border-r border-gray-r-200 overflow-y-auto">
         <div class="mt-2 flex-grow flex flex-col">
-          <nav class="flex-1 px-2 bg-white space-y-1">
+          <nav class="flex-1 px-2 space-y-1">
             <FilesTree :files="files" :current-file="currentFile" @open="openFile" />
           </nav>
         </div>
diff --git a/src/admin/app/vite.config.ts b/src/admin/app/vite.config.ts
index f3aea414f..1f87559fd 100644
--- a/src/admin/app/vite.config.ts
+++ b/src/admin/app/vite.config.ts
@@ -36,9 +36,10 @@ export default defineConfig({
   resolve: {
     alias: {
       vue: 'vue3'
-    }
+    },
+    dedupe: ['vue-demi']
   },
   optimizeDeps: {
-    exclude: Object.keys({ ...dependencies, ...devDependencies }).concat(['fs', 'path'])
+    exclude: Object.keys({ ...dependencies, ...devDependencies }).concat(['fs', 'path', 'vue-demi'])
   }
 })
diff --git a/src/admin/app/windi.config.ts b/src/admin/app/windi.config.ts
new file mode 100644
index 000000000..505144265
--- /dev/null
+++ b/src/admin/app/windi.config.ts
@@ -0,0 +1,25 @@
+import { defineConfig } from 'windicss/helpers'
+import colors from 'windicss/colors'
+import settings from '../../defaultTheme/settings'
+
+export default defineConfig({
+  theme: {
+    extend: {
+      colors: {
+        transparent: 'transparent',
+        current: 'currentColor',
+        black: '#000',
+        white: '#fff',
+        blue: colors.lightBlue,
+        green: colors.emerald,
+        red: colors.red,
+        rose: colors.rose,
+        yellow: colors.amber,
+        gray: colors.gray
+      }
+    }
+  },
+  shortcuts: {
+    ...settings.shortcuts
+  }
+})
diff --git a/yarn.lock b/yarn.lock
index b606d6b69..9c0d1de1a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2674,6 +2674,14 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.11.tgz#20d22dd0da7d358bb21c17f9bde8628152642c77"
   integrity sha512-b+zB8A2so8eCE0JsxjL24J7vdGl8rzPQ09hZNhystm+KqSbKcAej1A+Hbva1rCMmTTqA+hFnUSDc5kouEo0JzA==
 
+"@vueuse/core@^5.0.3":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-5.0.3.tgz#8f3170e2a51ae62fb1725c84d4cc02a7552aad0b"
+  integrity sha512-TMCL11EVMaj2Y5qdYosvuwA+i1aKrerFXs7fhNZiQiLCWxF8XsrNdxzoiaI2n12UcmSOXvd1xdyWs7Nss+p/Hg==
+  dependencies:
+    "@vueuse/shared" "5.0.3"
+    vue-demi "*"
+
 "@vueuse/integrations@^5.0.3":
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-5.0.3.tgz#64820965d068b356b4df50ed47a87adf0141f68e"