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

6 months ago · 728cb15677
parent 620ee6ac4b
commit 728cb15677
6 changed files with 29 additions and 48 deletions
--- 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 }
      }
    }
  }
--- 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>
--- 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(
--- 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>
--- 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',
--- 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