correct file paths for client prod build

lib/app/composables/router.js

@@ -68,6 +68,9 @@ export function initRouter(loadComponent, fallbackComponent) {
         comp = await comp
       }
       if (route.path === pendingPath) {
+        if (!comp) {
+          throw new Error(`Invalid route component: ${comp}`)
+        }
         route.contentComponent = markRaw(comp)
         if (inBrowser) {
           await nextTick()
@@ -91,8 +94,9 @@ export function initRouter(loadComponent, fallbackComponent) {
       }
     } catch (err) {
       if (!err.message.match(/fetch/)) {
-        throw err
-      } else if (route.path === pendingPath) {
+        console.error(err)
+      }
+      if (route.path === pendingPath) {
         route.contentComponent = fallbackComponent
           ? markRaw(fallbackComponent)
           : null

lib/app/index.js

@@ -19,14 +19,15 @@ const App = {
       if (pagePath.endsWith('/')) {
         pagePath += 'index'
       }
-
       if (__DEV__) {
         // awlays force re-fetch content in dev
         pagePath += `.md?t=${Date.now()}`
       } else {
         // in production, each .md file is built into a .md.js file following
         // the path conversion scheme.
-        pagePath += `.md.js`
+        // /foo/bar.html -> /js/foo_bar.md.js
+        // TODO handle base
+        pagePath = `/js/${pagePath.slice(1).replace(/\//g, '_')}.md.js`
       }
 
       if (inBrowser) {

package.json

@@ -35,6 +35,7 @@
     "markdown-it-table-of-contents": "^0.4.4",
     "minimist": "^1.2.5",
     "prismjs": "^1.20.0",
+    "slash": "^3.0.0",
     "vite": "^0.6.0"
   },
   "devDependencies": {

src/build/buildClient.ts

@@ -1,5 +1,6 @@
 import path from 'path'
 import globby from 'globby'
+import slash from 'slash'
 import { promises as fs } from 'fs'
 import { APP_PATH, createResolver } from '../utils/pathResolver'
 import { build, BuildOptions } from 'vite'
@@ -59,8 +60,16 @@ export async function buildClient(options: BuildOptions) {
             chunk.facadeModuleId &&
             chunk.facadeModuleId.endsWith('.md')
           ) {
-            const relativePath = path.relative(root, chunk.facadeModuleId)
-            chunk.fileName = relativePath + '.js'
+            // foo/bar.md -> js/foo_bar.md.js
+            chunk.fileName = path.join(
+              'js/',
+              slash(path.relative(root, chunk.facadeModuleId)).replace(
+                /\//g,
+                '_'
+              ) + '.js'
+            )
+          } else {
+            chunk.fileName = path.join('js/', chunk.fileName)
           }
         }
       }
@@ -76,7 +85,6 @@ export async function buildClient(options: BuildOptions) {
     cdn: false,
     resolvers: [resolver, ...resolvers],
     srcRoots: [APP_PATH, config.themePath, ...srcRoots],
-    indexPath: path.resolve(APP_PATH, 'index.html'),
     rollupInputOptions: {
       ...rollupInputOptions,
       input: [path.resolve(APP_PATH, 'index.js'), ...pages],
@@ -86,6 +94,7 @@ export async function buildClient(options: BuildOptions) {
       dir: path.resolve(root, '.vitepress/dist'),
       ...rollupOutputOptions
     },
+    cssFileName: 'css/style.css',
     debug: !!process.env.DEBUG
   })
 }

src/markdown/plugins/link.ts

@@ -6,7 +6,7 @@ import MarkdownIt from 'markdown-it'
 import { MarkdownParsedData } from '../markdown'
 import { URL } from 'url'
 
-const indexRE = /(^|.*\/)(index|readme).md(#?.*)$/i
+const indexRE = /(^|.*\/)index.md(#?.*)$/i
 
 export const linkPlugin = (
   md: MarkdownIt & { __data: MarkdownParsedData },
@@ -35,7 +35,7 @@ export const linkPlugin = (
 
     const indexMatch = url.match(indexRE)
     if (indexMatch) {
-      const [, path, , hash] = indexMatch
+      const [, path, hash] = indexMatch
       url = path + hash
     } else {
       let cleanUrl = url.replace(/\#.*$/, '').replace(/\?.*$/, '')
@@ -44,16 +44,16 @@ export const linkPlugin = (
         cleanUrl = cleanUrl.replace(/\.md$/, '.html')
       }
       // ./foo -> ./foo.html
-      if (!cleanUrl.endsWith('.html')) {
+      if (!cleanUrl.endsWith('.html') && !cleanUrl.endsWith('/')) {
         cleanUrl += '.html'
       }
       const parsed = new URL(url, 'http://a.com')
       url = cleanUrl + parsed.search + parsed.hash
     }
 
-    // relative path usage.
-    if (!url.startsWith('/')) {
-      url = ensureBeginningDotSlash(url)
+    // ensure leading . for relative paths
+    if (!url.startsWith('/') && !/^\.\//.test(url)) {
+      url = './' + url
     }
 
     // export it for existence check
@@ -65,11 +65,3 @@ export const linkPlugin = (
     hrefAttr[1] = decodeURI(url)
   }
 }
-
-const beginningSlashRE = /^\.\//
-const ensureBeginningDotSlash = (path: string) => {
-  if (beginningSlashRE.test(path)) {
-    return path
-  }
-  return './' + path
-}