feat(admin): improvements

- Select default page
- Fix Static tab
- Renamed Pages to Content on API

src/admin/api/functions/pages.ts → src/admin/api/functions/content.ts

@@ -10,16 +10,16 @@ interface Body {
   content: string
 }
 
-export default <Middleware>async function pagesHandler(req) {
+export default <Middleware>async function contentHandler(req) {
   const url = req.url
 
   if (req.method === 'GET') {
-    // List all pages
+    // List all files in content/
     if (url === '/') {
       const tree = dirTree(r('content'))
       return normalizeFiles(tree.children, r('content'))
     }
-    // Read a single page
+    // Read a single content file
     try {
       const path = join(r('content'), url)
       const file = await fs.readFile(path, 'utf-8')

src/admin/api/functions/static.ts

@@ -2,23 +2,23 @@ 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'
+import { normalizeFiles, r } from '../utils'
 
 export default <Middleware>async function staticHandler(req) {
   const url = req.url
 
   if (url === '/') {
-    const tree = directoryTree(process.options.dir.static)
+    const tree = directoryTree(r('static'))
 
-    return normalizeFiles(tree.children, process.options.dir.static)
+    return normalizeFiles(tree.children, r('static'))
   }
 
   try {
-    const path = join(process.options.dir.static, url)
+    const path = join(r('static'), url)
     const data = await fs.readFile(path, 'utf-8')
 
     return {
-      path: path.replace(process.options.dir.static, ''),
+      path: path.replace(r('static'), ''),
       extension: extname(path),
       data
     }

src/admin/api/index.ts

@@ -1,11 +1,11 @@
 import { createApp } from 'h3'
-import pagesHandler from './functions/pages'
+import contentHandler from './functions/content'
 import previewHandler from './functions/preview'
 import staticHandler from './functions/static'
 
 const app = createApp()
 
-app.useAsync('/pages', pagesHandler)
+app.useAsync('/content', contentHandler)
 app.useAsync('/preview', previewHandler)
 app.useAsync('/static', staticHandler)
 

src/admin/app/components/AppHeaderLogo.vue

@@ -1,8 +1,32 @@
 <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>
+      <svg 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"
+          transform="matrix(-1 0 0 1 140.947 142.371)"
+          fill="black"
+          stroke="white"
+          stroke-width="21.5173"
+        />
+        <path
+          d="M248.779 128.009C262.553 128.009 274.077 122.589 282.735 114.768L269.018 96.61C263.171 101.806 256.369 105.382 248.779 105.382C235.849 105.382 223.706 95.1015 223.706 81.1341C223.706 67.3343 235.343 56.7749 249.285 56.7749C255.975 56.7749 263.34 60.0712 268.905 65.0995L282.735 47.4447C273.459 39.0642 260.922 33.9801 249.229 33.8125C221.008 33.8125 199.308 54.3167 199.308 80.9665C199.308 109.237 223.2 128.009 248.779 128.009Z"
+          fill="black"
+        />
+        <path
+          d="M329.788 128.512C350.533 128.512 367.398 113.93 367.398 93.2578V35.9355H343.168V93.202C343.168 100.577 336.534 105.661 329.732 105.661C322.874 105.661 316.409 100.689 316.409 93.202V35.9355H292.179V93.2578C292.179 113.93 309.044 128.512 329.788 128.512Z"
+          fill="black"
+        />
+        <path
+          d="M410.629 127.227C428.787 127.227 444.865 116.555 444.865 99.4035C444.865 86.1065 435.477 77.5026 421.31 71.5804C411.528 67.5019 405.119 66.161 405.119 62.0267C405.119 58.9539 408.661 56.4397 413.608 56.4397C417.937 56.4397 424.908 58.5069 427.606 63.2558L441.492 49.9588C437.95 41.0756 427.157 34.5947 413.327 34.5947C396.125 34.5947 381.227 45.7127 381.227 61.3004C381.227 74.8767 391.065 82.3632 402.533 87.2798C411.416 91.1907 420.692 95.2691 420.692 99.9063C420.692 103.594 415.688 105.437 410.573 105.437C402.983 105.437 395.956 102.085 392.19 96.5541L377.629 110.745C382.183 120.69 395.731 127.227 410.629 127.227Z"
+          fill="black"
+        />
+        <path
+          d="M30.8307 33.8131L0 33.8718V128.512H30.8307C62.9509 128.512 82.5864 110.653 82.5864 81.2798C82.5864 51.6718 62.9509 33.6956 30.8307 33.8131ZM30.4204 104.837H24.4418V57.3115H30.186C47.1253 57.3115 57.4412 66.3583 57.4412 81.2211C57.4412 95.9076 47.1839 104.837 30.4204 104.837Z"
+          fill="black"
+        />
+      </svg>
     </h1>
   </div>
 </template>

src/admin/app/components/FilesTree.vue

@@ -7,6 +7,7 @@
       :class="{ 'bg-gray-200 text-gray-900': isCurrent(file) }"
     >
       <div
+        v-if="!isHidden(file)"
         class="
           group
           flex
@@ -60,6 +61,7 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const isDir = file => file.type === 'directory'
+    const isHidden = file => file.path.startsWith('/_') || file.path.startsWith('/.') || file.path.endsWith('.js')
 
     const isCurrent = file => props.currentFile && file.path === props.currentFile.path
 
@@ -78,6 +80,7 @@ export default defineComponent({
 
     const helpers = {
       isDir,
+      isHidden,
       isCurrent,
       hasOneDir,
       filename,

src/admin/app/pages/index.vue

@@ -33,10 +33,19 @@ export default defineComponent({
 
     const openFile = async file => {
       navigateToFile(file.path)
-      state.currentFile = await api.get(`/pages${file.path}`)
+      state.currentFile = await api.get(`/content${file.path}`)
     }
 
-    onMounted(async () => (state.files = await api.get('/pages')))
+    onMounted(async () => {
+      state.files = await api.get('/content')
+
+      if (!state.currentFile) {
+        const indexFile = state.files.find(file => file.path === '/index.md')
+        if (indexFile) {
+          openFile(indexFile)
+        }
+      }
+    })
 
     return {
       ...toRefs(state),

src/admin/app/plugins/router.ts

@@ -2,7 +2,7 @@ import { createRouter, createWebHistory } from 'vue3-router'
 
 // Pages
 import Index from '../pages/index.vue'
-import Pages from '../pages/static.vue'
+import Static from '../pages/static.vue'
 
 // Router plugin
 export const router = createRouter({
@@ -14,9 +14,9 @@ export const router = createRouter({
       component: Index as any
     },
     {
-      path: '/pages',
-      name: 'pages',
-      component: Pages as any
+      path: '/static',
+      name: 'static',
+      component: Static as any
     }
   ]
 })