feat: docus admin

package.json

@@ -41,7 +41,8 @@
     "clean:nuxt": "rm -rf .nuxt docs/.nuxt playground/.nuxt",
     "clean:node_modules": "rm -rf node_modules docs/node_modules playground/node_modules",
     "clean:dist": "rm -rf dist docs/dist playground/dist",
-    "clean": "yarn clean:nuxt & yarn clean:node_modules & yarn clean:dist"
+    "clean": "yarn clean:nuxt & yarn clean:node_modules & yarn clean:dist",
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "@docsearch/css": "^1.0.0-alpha.28",
@@ -51,28 +52,32 @@
     "@nuxt/typescript-build": "^2.1.0",
     "@nuxtjs/color-mode": "^2.0.5",
     "@nuxtjs/composition-api": "0.23.3",
+    "@nuxtjs/proxy": "^2.1.0",
     "@nuxtjs/pwa": "^3.3.5",
     "@types/graceful-fs": "^4.1.5",
+    "@vitejs/plugin-vue": "^1.2.2",
     "@vue/composition-api": "^1.0.0-rc.8",
     "@vueuse/integrations": "^4.9.1",
     "clear-module": "^4.1.1",
     "clipboard": "^2.0.8",
     "color": "^3.1.3",
     "defu": "^3.2.2",
     "detab": "^3.0.0",
+    "directory-tree": "^2.2.9",
     "graceful-fs": "^4.2.6",
     "gray-matter": "^4.0.3",
     "h3": "^0.2.10",
     "hasha": "^5.2.2",
     "hookable": "^4.4.1",
     "jiti": "^1.9.1",
+    "mande": "^1.0.0",
     "marked": "^2.0.3",
     "mkdirp": "^1.0.4",
-    "nuxt-edge": "^2.16.0-26994259.8e2cad5a",
+    "nuxt-edge": "^2.16.0-27002891.1676b861",
     "nuxt-extend": "^0.1.0",
     "nuxt-i18n": "^6.26.0",
     "nuxt-vite": "^0.0.37",
-    "nuxt-windicss": "^0.5.4",
+    "nuxt-windicss": "^0.7.1",
     "ohmyfetch": "^0.1.8",
     "plausible-tracker": "^0.3.1",
     "prism-theme-vars": "^0.2.2",
@@ -98,10 +103,13 @@
     "ufo": "^0.6.11",
     "unified": "^9.2.1",
     "unstorage": "^0.1.5",
+    "upath": "^2.0.1",
     "vue": "^2.6.12",
     "vue-demi": "^0.7.5",
     "vue-docgen-api": "^4.38.1",
-    "vue-plausible": "^1.1.4"
+    "vue-plausible": "^1.1.4",
+    "vue3": "npm:vue@next",
+    "vue3-router": "npm:vue-router@next"
   },
   "devDependencies": {
     "@nuxt/types": "^2.15.4",
@@ -116,8 +124,10 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-nuxt": "^2.0.0",
     "eslint-plugin-prettier": "^3.4.0",
+    "patch-package": "^6.4.7",
+    "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.2.1",
-    "standard-version": "^9.2.0",
+    "standard-version": "^9.3.0",
     "terser": "^5.7.0"
   },
   "peerDependencies": {

patches/@nuxtjs+composition-api+0.23.3.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/@nuxtjs/composition-api/dist/module.js b/node_modules/@nuxtjs/composition-api/dist/module.js
+index 04623fd..ac86fc3 100644
+--- a/node_modules/@nuxtjs/composition-api/dist/module.js
++++ b/node_modules/@nuxtjs/composition-api/dist/module.js
+@@ -159,7 +159,7 @@ const compositionApiModule = function compositionApiModule2() {
+   if (!nuxtOptions.buildModules.includes("@nuxtjs/pwa") && !nuxtOptions.modules.includes("@nuxtjs/pwa")) {
+     nuxtOptions.plugins.push(addResolvedTemplate.call(this, "meta.js"));
+   } else if (nuxtOptions.dev) {
+-    console.warn("useMeta is not supported in onGlobalSetup as @nuxtjs/pwa detected.\nSee https://github.com/nuxt-community/composition-api/issues/307");
++    // console.warn("useMeta is not supported in onGlobalSetup as @nuxtjs/pwa detected.\nSee https://github.com/nuxt-community/composition-api/issues/307");
+   }
+ };
+ compositionApiModule.meta = {

patches/nuxt-vite+0.0.37.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/nuxt-vite/dist/nuxt-vite.js b/node_modules/nuxt-vite/dist/nuxt-vite.js
+index 4572340..bbcd6dc 100644
+--- a/node_modules/nuxt-vite/dist/nuxt-vite.js
++++ b/node_modules/nuxt-vite/dist/nuxt-vite.js
+@@ -18,7 +18,7 @@ function nuxtVite() {
+     return;
+   }
+   nuxt.options.cli.badgeMessages.push(`\u26A1  Vite Mode Enabled (v${version})`);
+-  console.log("\u{1F9EA}  Vite mode is experimental and many nuxt modules are still incompatible\n", "   If found a bug, please report via https://github.com/nuxt/vite/issues with a minimal reproduction");
++  // console.log("\u{1F9EA}  Vite mode is experimental and many nuxt modules are still incompatible\n", "   If found a bug, please report via https://github.com/nuxt/vite/issues with a minimal reproduction");
+   nuxt.options.build.loadingScreen = false;
+   nuxt.options.build.indicator = false;
+   nuxt.options._modules = nuxt.options._modules.filter((m) => !(Array.isArray(m) && m[0] === "@nuxt/loading-screen"));

src/admin/api/functions/pages.ts

@@ -0,0 +1,76 @@
+import { promises as fs } from 'fs'
+import { join, extname } from 'path'
+import matter from 'gray-matter'
+import { createError, Middleware, useBody } from 'h3'
+import dirTree from 'directory-tree'
+import { normalizeFiles, r } from '../utils'
+
+interface Body {
+  data: any
+  content: string
+}
+
+export default <Middleware>async function pagesHandler(req) {
+  const url = req.url
+
+  if (req.method === 'GET') {
+    // List all pages
+    if (url === '/') {
+      const tree = dirTree(r('pages'))
+      return normalizeFiles(tree.children, r('pages'))
+    }
+    // Read a single page
+    try {
+      const path = join(r('pages'), url)
+      const file = await fs.readFile(path, 'utf-8')
+      const { content, data } = matter(file)
+
+      return {
+        path: path.replace(r('pages'), ''),
+        extension: extname(path),
+        data,
+        content
+      }
+    } catch (err) {
+      return createError({
+        statusCode: 404,
+        statusMessage: 'File not found'
+      })
+    }
+  }
+
+  // Update changes
+  if (req.method === 'PUT') {
+    const { data, content } = await useBody<Body>(req)
+
+    if (!data || !content) {
+      return createError({
+        statusCode: 400,
+        statusMessage: 'data and content keys are required'
+      })
+    }
+
+    const path = join(r('pages'), url)
+
+    try {
+      // @ts-ignore
+      await fs.stat(path, 'utf-8')
+
+      const file = matter.stringify(content, data)
+
+      await fs.writeFile(path, file)
+
+      return { ok: true }
+    } catch (err) {
+      return createError({
+        statusCode: 404,
+        statusMessage: 'File not found'
+      })
+    }
+  }
+
+  return createError({
+    statusCode: 400,
+    statusMessage: 'Bad Request'
+  })
+}

src/admin/api/functions/preview.ts

@@ -0,0 +1,7 @@
+import { Middleware } from 'h3'
+
+export default <Middleware>function previewHandler() {
+  const url = process.previewUrl
+
+  return { url }
+}

src/admin/api/functions/static.ts

@@ -0,0 +1,31 @@
+import { join, extname } from 'path'
+import { promises as fs } from 'fs'
+import directoryTree from 'directory-tree'
+import { createError, Middleware } from 'h3'
+import { normalizeFiles } from '../utils'
+
+export default <Middleware>async function staticHandler(req) {
+  const url = req.url
+
+  if (url === '/') {
+    const tree = directoryTree(process.options.dir.static)
+
+    return normalizeFiles(tree.children, process.options.dir.static)
+  }
+
+  try {
+    const path = join(process.options.dir.static, url)
+    const data = await fs.readFile(path, 'utf-8')
+
+    return {
+      path: path.replace(process.options.dir.static, ''),
+      extension: extname(path),
+      data
+    }
+  } catch (err) {
+    return createError({
+      statusCode: 400,
+      statusMessage: 'File not found'
+    })
+  }
+}

src/admin/api/index.ts

@@ -0,0 +1,12 @@
+import { createApp } from 'h3'
+import pagesHandler from './functions/pages'
+import previewHandler from './functions/preview'
+import staticHandler from './functions/static'
+
+const app = createApp()
+
+app.useAsync('/pages', pagesHandler)
+app.useAsync('/preview', previewHandler)
+app.useAsync('/static', staticHandler)
+
+export default app._handle

src/admin/api/utils/index.ts

@@ -0,0 +1,16 @@
+import { resolve } from 'path'
+
+export const r = (...paths: string[]) => resolve(process.options.srcDir, ...paths)
+
+export const normalizeFiles = (files, rootPath) => {
+  for (const file of files) {
+    file.path = file.path.replace(rootPath, '')
+    if (file.children) {
+      file.children = normalizeFiles(file.children, rootPath)
+    }
+  }
+
+  files.sort((f1: any, f2: any) => f2.type.length - f1.type.length)
+
+  return files
+}

src/admin/app/App.vue

@@ -0,0 +1,44 @@
+<template>
+  <AppHeader />
+
+  <!-- eslint-disable-next-line vue/no-multiple-template-root -->
+  <main class="flex items-stretch flex-grow h-full">
+    <RouterView v-slot="{ Component }">
+      <KeepAlive>
+        <Component :is="Component" />
+      </KeepAlive>
+    </RouterView>
+
+    <iframe ref="iframe" :src="previewUrl" class="h-full flex-1" />
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent, provide, ref, onBeforeMount } from 'vue3'
+import AppHeader from './components/AppHeader.vue'
+import { useApi } from './plugins/api'
+
+export default defineComponent({
+  components: {
+    AppHeader
+  },
+
+  setup() {
+    const api = useApi()
+
+    const previewUrl = ref('http://localhost:4000')
+
+    onBeforeMount(async () => {
+      const { url } = (await api.get('/preview')) as any
+
+      previewUrl.value = url
+    })
+
+    provide('previewUrl', previewUrl)
+
+    return {
+      previewUrl
+    }
+  }
+})
+</script>

src/admin/app/components/AppHeader.vue

@@ -0,0 +1,20 @@
+<template>
+  <header class="relative z-10 flex items-center border-b">
+    <AppHeaderLogo />
+
+    <AppHeaderNav />
+  </header>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue3'
+import AppHeaderLogo from './AppHeaderLogo.vue'
+import AppHeaderNav from './AppHeaderNav.vue'
+
+export default defineComponent({
+  components: {
+    AppHeaderLogo,
+    AppHeaderNav
+  }
+})
+</script>

src/admin/app/components/AppHeaderLogo.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="flex items-center h-12 px-4 border-r">
+    <h1>
+      Docus
+      <span class="px-2 py-1 ml-1 text-xs font-medium bg-gray-200 rounded">ADMIN</span>
+    </h1>
+  </div>
+</template>

src/admin/app/components/AppHeaderNav.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="flex items-center ml-4 space-x-2 flex-auto">
+    <!-- Editor -->
+    <RouterLink to="/" class="relative flex-none px-4 py-1 text-sm font-medium leading-5 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="[$route.path.includes('static') ? 'router-link-active' : '']"
+    >
+      Static
+    </RouterLink>
+  </div>
+</template>
+
+<style lang="postcss">
+.router-link-active {
+  @apply border-blue-500 bg-blue-100;
+}
+</style>