feat: support filename that contains non-ASCII and unicode chars (#473)

Author: ulivz

lib/app/Content.js

@@ -1,5 +1,3 @@
-import { pathToComponentName } from './util'
-
 export default {
   functional: true,
 
@@ -11,7 +9,7 @@ export default {
   },
 
   render (h, { parent, props, data }) {
-    return h(pathToComponentName(parent.$page.path), {
+    return h(parent.$page.key, {
       class: [props.custom ? 'custom' : '', data.class, data.staticClass],
       style: data.style
     })

lib/app/util.js

@@ -5,14 +5,6 @@ export function injectMixins (options, mixins) {
   options.mixins.push(...mixins)
 }
 
-export function pathToComponentName (path) {
-  if (path.charAt(path.length - 1) === '/') {
-    return `page${path.replace(/\//g, '-') + 'index'}`
-  } else {
-    return `page${path.replace(/\//g, '-').replace(/\.html$/, '')}`
-  }
-}
-
 export function findPageForPath (pages, path) {
   for (let i = 0; i < pages.length; i++) {
     const page = pages[i]

lib/build.js

@@ -153,7 +153,7 @@ module.exports = async function build (sourceDir, cliOptions = {}) {
       console.error(chalk.red(`Error rendering ${pagePath}:`))
       throw e
     }
-    const filename = pagePath.replace(/\/$/, '/index.html').replace(/^\//, '')
+    const filename = decodeURIComponent(pagePath.replace(/\/$/, '/index.html').replace(/^\//, ''))
     const filePath = path.resolve(outDir, filename)
     await fs.ensureDir(path.dirname(filePath))
     await fs.writeFile(filePath, html)

lib/default-theme/Layout.vue

@@ -27,7 +27,6 @@ import Home from './Home.vue'
 import Navbar from './Navbar.vue'
 import Page from './Page.vue'
 import Sidebar from './Sidebar.vue'
-import { pathToComponentName } from '@app/util'
 import { resolveSidebarItems } from './util'
 
 export default {
@@ -86,11 +85,13 @@ export default {
   },
 
   mounted () {
+    window.addEventListener('scroll', this.onScroll)
+
     // configure progress bar
     nprogress.configure({ showSpinner: false })
 
     this.$router.beforeEach((to, from, next) => {
-      if (to.path !== from.path && !Vue.component(pathToComponentName(to.path))) {
+      if (to.path !== from.path && !Vue.component(to.name)) {
         nprogress.start()
       }
       next()

lib/prepare.js

@@ -5,6 +5,7 @@ const createMarkdown = require('./markdown')
 const loadConfig = require('./util/loadConfig')
 const tempPath = path.resolve(__dirname, 'app/.temp')
 const {
+  encodePath,
   inferTitle,
   extractHeaders,
   parseFrontmatter,
@@ -181,8 +182,10 @@ async function resolveOptions (sourceDir) {
   // resolve pagesData
   const pagesData = await Promise.all(pageFiles.map(async (file) => {
     const filepath = path.resolve(sourceDir, file)
+    const key = 'v-' + Math.random().toString(16).slice(2)
     const data = {
-      path: fileToPath(file)
+      key,
+      path: encodePath(fileToPath(file))
     }
 
     if (shouldResolveLastUpdated) {
@@ -296,21 +299,31 @@ async function resolveComponents (sourceDir) {
 }
 
 async function genRoutesFile ({ siteData: { pages }, sourceDir, pageFiles }) {
-  function genRoute ({ path: pagePath }, index) {
+  function genRoute ({ path: pagePath, key: componentName }, index) {
     const file = pageFiles[index]
     const filePath = path.resolve(sourceDir, file)
     let code = `
   {
+    name: ${JSON.stringify(componentName)},
     path: ${JSON.stringify(pagePath)},
     component: ThemeLayout,
     beforeEnter: (to, from, next) => {
       import(${JSON.stringify(filePath)}).then(comp => {
-        Vue.component(${JSON.stringify(fileToComponentName(file))}, comp.default)
+        Vue.component(${JSON.stringify(componentName)}, comp.default)
         next()
       })
     }
   }`
 
+    const dncodedPath = decodeURIComponent(pagePath)
+    if (dncodedPath !== pagePath) {
+      code += `,
+  {
+    path: ${JSON.stringify(dncodedPath)},
+    redirect: ${JSON.stringify(pagePath)}
+  }`
+    }
+
     if (/\/$/.test(pagePath)) {
       code += `,
   {

lib/util/index.js

@@ -1,6 +1,10 @@
 const spawn = require('cross-spawn')
 const parseHeaders = require('./parseHeaders')
 
+exports.encodePath = function (path) {
+  return path.split('/').map(item => encodeURIComponent(item)).join('/')
+}
+
 exports.parseHeaders = parseHeaders
 
 exports.normalizeHeadTag = tag => {