fix: render 404 page completely on client to infer locale from browser path (#3858)

brc-dd · web-flow · commit 728cb15677f4 · 2024-05-03T01:16:55.000+05:30
diff --git a/src/client/app/router.ts b/src/client/app/router.ts
@@ -156,7 +156,13 @@ export function createRouter(
         latestPendingPath = null
         route.path = inBrowser ? pendingPath : withBase(pendingPath)
         route.component = fallbackComponent ? markRaw(fallbackComponent) : null
-        route.data = notFoundPageData
+        const relativePath = inBrowser
+          ? pendingPath
+              .replace(/(^|\/)$/, '$1index')
+              .replace(/(\.html)?$/, '.md')
+              .replace(/^\//, '')
+          : '404.md'
+        route.data = { ...notFoundPageData, relativePath }
       }
     }
   }
diff --git a/src/client/theme-default/NotFound.vue b/src/client/theme-default/NotFound.vue
@@ -1,55 +1,31 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
 import { withBase } from 'vitepress'
 import { useData } from './composables/data'
 import { useLangs } from './composables/langs'
 
-const { site } = useData()
-const { localeLinks } = useLangs({ removeCurrent: false })
-
-const locale = ref({
-  link: '/',
-  index: 'root'
-})
-
-onMounted(() => {
-  const path = window.location.pathname
-    .replace(site.value.base, '')
-    .replace(/(^.*?\/).*$/, '/$1')
-  if (localeLinks.value.length) {
-    locale.value =
-      localeLinks.value.find(({ link }) => link.startsWith(path)) ||
-      localeLinks.value[0]
-  }
-})
-
-const notFound = computed(() => ({
-  code: 404,
-  title: 'PAGE NOT FOUND',
-  quote:
-    "But if you don't change your direction, and if you keep looking, you may end up where you are heading.",
-  linkLabel: 'go to home',
-  linkText: 'Take me home',
-  ...(locale.value.index === 'root'
-    ? site.value.themeConfig?.notFound
-    : site.value.locales?.[locale.value.index]?.themeConfig?.notFound)
-}))
+const { theme } = useData()
+const { currentLang } = useLangs()
 </script>
 
 <template>
   <div class="NotFound">
-    <p class="code">{{ notFound.code }}</p>
-    <h1 class="title">{{ notFound.title }}</h1>
+    <p class="code">{{ theme.notFound?.code ?? '404' }}</p>
+    <h1 class="title">{{ theme.notFound?.title ?? 'PAGE NOT FOUND' }}</h1>
     <div class="divider" />
-    <blockquote class="quote">{{ notFound.quote }}</blockquote>
+    <blockquote class="quote">
+      {{
+        theme.notFound?.quote ??
+        "But if you don't change your direction, and if you keep looking, you may end up where you are heading."
+      }}
+    </blockquote>
 
     <div class="action">
       <a
         class="link"
-        :href="withBase(locale.link)"
-        :aria-label="notFound.linkLabel"
+        :href="withBase(currentLang.link)"
+        :aria-label="theme.notFound?.linkLabel ?? 'go to home'"
       >
-        {{ notFound.linkText }}
+        {{ theme.notFound?.linkText ?? 'Take me home' }}
       </a>
     </div>
   </div>
diff --git a/src/client/theme-default/composables/langs.ts b/src/client/theme-default/composables/langs.ts
@@ -2,13 +2,9 @@ import { computed } from 'vue'
 import { ensureStartingSlash } from '../support/utils'
 import { useData } from './data'
 
-export function useLangs({
-  removeCurrent = true,
-  correspondingLink = false
-} = {}) {
+export function useLangs({ correspondingLink = false } = {}) {
   const { site, localeIndex, page, theme, hash } = useData()
   const currentLang = computed(() => ({
-    index: localeIndex.value,
     label: site.value.locales[localeIndex.value]?.label,
     link:
       site.value.locales[localeIndex.value]?.link ||
@@ -17,10 +13,9 @@ export function useLangs({
 
   const localeLinks = computed(() =>
     Object.entries(site.value.locales).flatMap(([key, value]) =>
-      removeCurrent && currentLang.value.label === value.label
+      currentLang.value.label === value.label
         ? []
         : {
-            index: key,
             text: value.label,
             link:
               normalizeLink(
diff --git a/src/node/build/render.ts b/src/node/build/render.ts
@@ -180,7 +180,7 @@ export async function renderPage(
     ${await renderHead(head)}
   </head>
   <body>${teleports?.body || ''}
-    <div id="app">${content}</div>
+    <div id="app">${page === '404.md' ? '' : content}</div>
     ${metadataScript.inHead ? '' : metadataScript.html}
     ${inlinedScript}
   </body>
diff --git a/src/shared/shared.ts b/src/shared/shared.ts
@@ -24,7 +24,7 @@ const INDEX_OR_EXT_RE = /(?:(^|\/)index)?\.(?:md|html)$/
 export const inBrowser = typeof document !== 'undefined'
 
 export const notFoundPageData: PageData = {
-  relativePath: '',
+  relativePath: '404.md',
   filePath: '',
   title: '404',
   description: 'Not Found',
diff --git a/types/shared.d.ts b/types/shared.d.ts
@@ -7,7 +7,11 @@ export type Awaitable<T> = T | PromiseLike<T>
 
 export interface PageData {
   relativePath: string
-  filePath: string // differs from relativePath in case of path rewrites
+  /**
+   * differs from relativePath in case of path rewrites
+   * empty string if the page is virtual (e.g. 404 page)
+   */
+  filePath: string
   title: string
   titleTemplate?: string | boolean
   description: string

Original file line number	Diff line number	Diff line change
`@@ -156,7 +156,13 @@ export function createRouter(`
`156`	`156`	`latestPendingPath = null`
`157`	`157`	`route.path = inBrowser ? pendingPath : withBase(pendingPath)`
`158`	`158`	`route.component = fallbackComponent ? markRaw(fallbackComponent) : null`
`159`		`- route.data = notFoundPageData`
	`159`	`+ const relativePath = inBrowser`
	`160`	`+ ? pendingPath`
	`161`	`+ .replace(/(^\|\/)$/, '$1index')`
	`162`	`+ .replace(/(\.html)?$/, '.md')`
	`163`	`+ .replace(/^\//, '')`
	`164`	`+ : '404.md'`
	`165`	`+ route.data = { ...notFoundPageData, relativePath }`
`160`	`166`	`}`
`161`	`167`	`}`
`162`	`168`	`}`