feat: free to name markdown files

Author: fjc0k

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.name, {
       class: [props.custom ? 'custom' : '', data.class, data.staticClass],
       style: data.style
     })

lib/app/util.js

@@ -5,15 +5,8 @@ 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) {
+  path = decodeURIComponent(path)
   for (let i = 0; i < pages.length; i++) {
     const page = pages[i]
     if (page.path === path) {

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 store from '@app/store'
 import { resolveSidebarItems } from './util'
 import throttle from 'lodash.throttle'
@@ -94,7 +93,7 @@ export default {
     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/default-theme/SidebarLink.vue

@@ -1,5 +1,5 @@
 <script>
-import { isActive, hashRE, groupHeaders } from './util'
+import { isActive, hashRE, groupHeaders, getUrlSafePath } from './util'
 
 export default {
   functional: true,
@@ -32,7 +32,7 @@ export default {
 function renderLink (h, to, text, active) {
   return h('router-link', {
     props: {
-      to,
+      to: getUrlSafePath(to),
       activeClass: '',
       exactActiveClass: ''
     },

lib/default-theme/util.js

@@ -3,6 +3,9 @@ export const extRE = /\.(md|html)$/
 export const endingSlashRE = /\/$/
 export const outboundRE = /^(https?:|mailto:|tel:)/
 
+import { getUrlSafePath } from '../util/shared'
+export { getUrlSafePath }
+
 export function normalize (path) {
   return path
     .replace(hashRE, '')
@@ -43,6 +46,7 @@ export function ensureExt (path) {
 }
 
 export function isActive (route, path) {
+  path = getUrlSafePath(path)
   const routeHash = route.hash
   const linkHash = getHash(path)
   if (linkHash && routeHash !== linkHash) {

lib/dev.js

@@ -53,6 +53,15 @@ module.exports = async function dev (sourceDir, cliOptions = {}) {
   // resolve webpack config
   let config = createClientConfig(options, cliOptions)
 
+  // virtual-modules
+  let virtualModules
+  config.plugin('virtual-modules').init(
+    (Plugin, args) => {
+      virtualModules = new Plugin(...args)
+      return virtualModules
+    }
+  )
+
   config
     .plugin('html')
     // using a fork of html-webpack-plugin to avoid it requiring webpack
@@ -84,6 +93,15 @@ module.exports = async function dev (sourceDir, cliOptions = {}) {
   portfinder.basePort = cliOptions.port || options.siteConfig.port || 8080
   const port = await portfinder.getPortPromise()
 
+  // virtual-modules
+  compiler.hooks.watchRun.tap('vuepress', () => {
+    delete require.cache[require.resolve('./app/.temp/pageContent')]
+    const pageContent = require('./app/.temp/pageContent')
+    Object.keys(pageContent).forEach(pagePath => {
+      virtualModules.writeModule(pagePath, pageContent[pagePath])
+    })
+  })
+
   let isFirst = true
   compiler.hooks.done.tap('vuepress', () => {
     if (isFirst) {

lib/prepare.js

@@ -9,7 +9,9 @@ const {
   inferTitle,
   extractHeaders,
   parseFrontmatter,
-  getGitLastUpdatedTimeStamp
+  getGitLastUpdatedTimeStamp,
+  getUrlSafePath,
+  getPageComponentName
 } = require('./util')
 
 fs.ensureDirSync(tempPath)
@@ -71,6 +73,16 @@ if (!Object.assign) Object.assign = require('object-assign')`
   // 7. handle the theme enhanceApp.js
   await writeEnhanceTemp('themeEnhanceApp.js', options.themeEnhanceAppPath)
 
+  // 8. generate page content
+  const pageContent = options.siteData.pages.reduce(
+    (pageContent, { name: componentName, filepath, content }) => {
+      pageContent[pageFilePathToVirtualPath(filepath, componentName)] = content
+      return pageContent
+    },
+    {}
+  )
+  writeTemp('pageContent.js', `module.exports = ${JSON.stringify(pageContent)}`)
+
   return options
 }
 
@@ -204,8 +216,14 @@ async function resolveOptions (sourceDir) {
       data.lastUpdated = getGitLastUpdatedTimeStamp(filepath)
     }
 
-    // extract yaml frontmatter
     const content = await fs.readFile(filepath, 'utf-8')
+    Object.defineProperty(data, 'filepath', { value: filepath })
+    Object.defineProperty(data, 'content', { value: content })
+
+    // get page component name
+    data.name = getPageComponentName(data.path)
+
+    // extract yaml frontmatter
     const frontmatter = parseFrontmatter(content)
     // infer title
     const title = inferTitle(frontmatter)
@@ -297,6 +315,11 @@ function fileToComponentName (file) {
   return `${pagePrefix}${normalizedName}`
 }
 
+function pageFilePathToVirtualPath (filepath, componentName) {
+  const { dir, ext } = path.parse(filepath)
+  return path.join(dir, `__${componentName}__${ext}`)
+}
+
 function isIndexFile (file) {
   return indexRE.test(file)
 }
@@ -310,16 +333,17 @@ async function resolveComponents (sourceDir) {
 }
 
 async function genRoutesFile ({ siteData: { pages }, sourceDir, pageFiles }) {
-  function genRoute ({ path: pagePath }, index) {
+  function genRoute ({ path: pagePath, content, name: componentName }, index) {
     const file = pageFiles[index]
     const filePath = path.resolve(sourceDir, file)
     let code = `
   {
-    path: ${JSON.stringify(pagePath)},
+    name: ${JSON.stringify(componentName)},
+    path: ${JSON.stringify(getUrlSafePath(pagePath))},
     component: ThemeLayout,
     beforeEnter: (to, from, next) => {
-      import(${JSON.stringify(filePath)}).then(comp => {
-        Vue.component(${JSON.stringify(fileToComponentName(file))}, comp.default)
+      import(${JSON.stringify(pageFilePathToVirtualPath(filePath, componentName))}).then(comp => {
+        Vue.component(${JSON.stringify(componentName)}, comp.default)
         next()
       })
     }
@@ -328,8 +352,8 @@ async function genRoutesFile ({ siteData: { pages }, sourceDir, pageFiles }) {
     if (/\/$/.test(pagePath)) {
       code += `,
   {
-    path: ${JSON.stringify(pagePath + 'index.html')},
-    redirect: ${JSON.stringify(pagePath)}
+    path: ${JSON.stringify(getUrlSafePath(pagePath + 'index.html'))},
+    redirect: ${JSON.stringify(getUrlSafePath(pagePath))}
   }`
     }
 

lib/util/index.js

@@ -1,5 +1,8 @@
 const spawn = require('cross-spawn')
 const parseHeaders = require('./parseHeaders')
+const shared = require('./shared')
+
+Object.assign(exports, shared)
 
 exports.parseHeaders = parseHeaders
 
@@ -88,3 +91,12 @@ exports.extractHeaders = (content, include = [], md) => {
 exports.getGitLastUpdatedTimeStamp = filepath => {
   return parseInt(spawn.sync('git', ['log', '-1', '--format=%ct', filepath]).stdout.toString('utf-8')) * 1000
 }
+
+let pageComponentID = 0
+const pageComponentsCache = new Map()
+exports.getPageComponentName = pagePath => {
+  if (!pageComponentsCache.has(pagePath)) {
+    pageComponentsCache.set(pagePath, `page-${pageComponentID++}`)
+  }
+  return pageComponentsCache.get(pagePath)
+}

lib/util/shared.js

@@ -0,0 +1,9 @@
+exports.getUrlSafePath = rawPath => {
+  const [path, anchor] = rawPath.split(/#(?=[^#]*$)/)
+  return (
+    path
+      .split(/[/\\]+/)
+      .map(name => encodeURIComponent(name))
+      .join('/')
+  ) + (anchor ? `#${anchor}` : '')
+}

lib/webpack/createBaseConfig.js

@@ -14,6 +14,7 @@ module.exports = function createBaseConfig ({
   const Config = require('webpack-chain')
   const { VueLoaderPlugin } = require('vue-loader')
   const CSSExtractPlugin = require('mini-css-extract-plugin')
+  const VirtualModulesPlugin = require('webpack-virtual-modules')
 
   const isProd = process.env.NODE_ENV === 'production'
   const inlineLimit = 10000
@@ -255,5 +256,9 @@ module.exports = function createBaseConfig ({
       SW_ENABLED: !!siteConfig.serviceWorker
     }])
 
+  config
+    .plugin('virtual-modules')
+    .use(VirtualModulesPlugin, [require('../app/.temp/pageContent')])
+
   return config
 }

package.json

@@ -96,6 +96,7 @@
     "webpack-chain": "^4.6.0",
     "webpack-merge": "^4.1.2",
     "webpack-serve": "^0.3.1",
+    "webpack-virtual-modules": "^0.1.10",
     "webpackbar": "^2.6.1",
     "workbox-build": "^3.1.0"
   },

yarn.lock

@@ -2230,7 +2230,7 @@ de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
 
-debug@*, debug@^3.1.0:
+debug@*, debug@^3.0.0, debug@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
   dependencies:
@@ -7472,6 +7472,12 @@ webpack-sources@^1.0.1, webpack-sources@^1.1.0:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
+webpack-virtual-modules@^0.1.10:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.1.10.tgz#2039529cbf1007e19f6e897c8d35721cc2c41f68"
+  dependencies:
+    debug "^3.0.0"
+
 webpack@^4.8.1:
   version "4.8.1"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.8.1.tgz#59e38f99f2751c931dd09a035aba7bec4b5f916e"