fix: handle cleanUrls with subfolders when using a trailing slash

docs/.vitepress/config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
   description: 'Vite & Vue powered static site generator.',
 
   lastUpdated: true,
-  cleanUrls: 'without-subfolders',
+  cleanUrls: 'with-subfolders',
 
   head: [['meta', { name: 'theme-color', content: '#3c8772' }]],
 

src/client/app/utils.ts

@@ -26,6 +26,13 @@ export function pathToFile(path: string): string {
     pagePath += 'index'
   }
 
+  if (
+    siteDataRef.value.cleanUrls === 'with-subfolders' &&
+    !pagePath.endsWith('index')
+  ) {
+    pagePath += '/index'
+  }
+
   if (import.meta.env.DEV) {
     // always force re-fetch content in dev
     pagePath += `.md?t=${Date.now()}`

src/node/build/buildMPAClient.ts

@@ -10,7 +10,17 @@ export async function buildMPAClient(
 ): Promise<RollupOutput> {
   const files = Object.keys(js)
   const themeFiles = files.filter((f) => !f.endsWith('.md'))
-  const pages = files.filter((f) => f.endsWith('.md'))
+  const pages = files
+    .filter((f) => f.endsWith('.md'))
+    .map((page) => {
+      if (
+        config.cleanUrls === 'with-subfolders' &&
+        !page.includes('index.md')
+      ) {
+        return page.replace('.md', '_index.md')
+      }
+      return page
+    })
 
   return build({
     root: config.srcDir,

src/node/build/bundle.ts

@@ -33,7 +33,14 @@ export async function bundle(
   config.pages.forEach((file) => {
     // page filename conversion
     // foo/bar.md -> foo_bar.md
-    input[slash(file).replace(/\//g, '_')] = path.resolve(config.srcDir, file)
+    // when using cleanUrls with-subfolders
+    // foo/bar.md -> foo_bar_index.md
+    let target = slash(file).replace(/\//g, '_')
+    if (config.cleanUrls === 'with-subfolders' && !file.includes('index.md')) {
+      target = target.replace('.md', '_index.md')
+    }
+
+    input[target] = path.resolve(config.srcDir, file)
   })
 
   // resolve options to pass to vite

src/node/build/render.ts

@@ -32,7 +32,15 @@ export async function renderPage(
   // render page
   const content = await render(routePath)
 
-  const pageName = sanitizeFileName(page.replace(/\//g, '_'))
+  let pageName = sanitizeFileName(page.replace(/\//g, '_'))
+
+  if (
+    config.cleanUrls === 'with-subfolders' &&
+    !pageName.includes('index.md')
+  ) {
+    pageName = pageName.replace('.md', '_index.md')
+  }
+
   // server build doesn't need hash
   const pageServerJsFileName = pageName + '.js'
   // for any initial page load, we only need the lean version of the page js