msb-public
/
vitepress
mirror of https://github.com/vuejs/vitepress
2
1
Code Issues Projects Releases Wiki Activity

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

Browse Source
pull/3862/head
Divyansh Singh 8 months ago committed by GitHub
parent 620ee6ac4b
commit 728cb15677
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 29 additions and 48 deletions
Show Stats Download Patch File Download Diff File

8
src/client/app/router.ts
Unescape View File

@ -156,7 +156,13 @@ export function createRouter(
latestPendingPath = null latestPendingPath = null
route.path = inBrowser ? pendingPath : withBase(pendingPath) route.path = inBrowser ? pendingPath : withBase(pendingPath)
route.component = fallbackComponent ? markRaw(fallbackComponent) : null 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 }
} }
} }
} }

50
src/client/theme-default/NotFound.vue
Unescape View File

@ -1,55 +1,31 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { withBase } from 'vitepress' import { withBase } from 'vitepress'
import { useData } from './composables/data' import { useData } from './composables/data'
import { useLangs } from './composables/langs' import { useLangs } from './composables/langs'
const { site } = useData() const { theme } = useData()
const { localeLinks } = useLangs({ removeCurrent: false }) const { currentLang } = useLangs()
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)
}))
</script> </script>
<template> <template>
<div class="NotFound"> <div class="NotFound">
<p class="code">{{ notFound.code }}</p> <p class="code">{{ theme.notFound?.code ?? '404' }}</p>
<h1 class="title">{{ notFound.title }}</h1> <h1 class="title">{{ theme.notFound?.title ?? 'PAGE NOT FOUND' }}</h1>
<div class="divider" /> <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"> <div class="action">
<a <a
class="link" class="link"
:href="withBase(locale.link)" :href="withBase(currentLang.link)"
:aria-label="notFound.linkLabel" :aria-label="theme.notFound?.linkLabel ?? 'go to home'"
> >
{{ notFound.linkText }} {{ theme.notFound?.linkText ?? 'Take me home' }}
</a> </a>
</div> </div>
</div> </div>

9
src/client/theme-default/composables/langs.ts
Unescape View File

@ -2,13 +2,9 @@ import { computed } from 'vue'
import { ensureStartingSlash } from '../support/utils' import { ensureStartingSlash } from '../support/utils'
import { useData } from './data' import { useData } from './data'
export function useLangs({ export function useLangs({ correspondingLink = false } = {}) {
removeCurrent = true,
correspondingLink = false
} = {}) {
const { site, localeIndex, page, theme, hash } = useData() const { site, localeIndex, page, theme, hash } = useData()
const currentLang = computed(() => ({ const currentLang = computed(() => ({
index: localeIndex.value,
label: site.value.locales[localeIndex.value]?.label, label: site.value.locales[localeIndex.value]?.label,
link: link:
site.value.locales[localeIndex.value]?.link || site.value.locales[localeIndex.value]?.link ||
@ -17,10 +13,9 @@ export function useLangs({
const localeLinks = computed(() => const localeLinks = computed(() =>
Object.entries(site.value.locales).flatMap(([key, value]) => Object.entries(site.value.locales).flatMap(([key, value]) =>
removeCurrent && currentLang.value.label === value.label currentLang.value.label === value.label
? [] ? []
: { : {
index: key,
text: value.label, text: value.label,
link: link:
normalizeLink( normalizeLink(

2
src/node/build/render.ts
Unescape View File

@ -180,7 +180,7 @@ export async function renderPage(
${await renderHead(head)} ${await renderHead(head)}
</head> </head>
<body>${teleports?.body || ''} <body>${teleports?.body || ''}
<div id="app">${content}</div> <div id="app">${page === '404.md' ? '' : content}</div>
${metadataScript.inHead ? '' : metadataScript.html} ${metadataScript.inHead ? '' : metadataScript.html}
${inlinedScript} ${inlinedScript}
</body> </body>

2
src/shared/shared.ts
Unescape View File

@ -24,7 +24,7 @@ const INDEX_OR_EXT_RE = /(?:(^|\/)index)?\.(?:md|html)$/
export const inBrowser = typeof document !== 'undefined' export const inBrowser = typeof document !== 'undefined'
export const notFoundPageData: PageData = { export const notFoundPageData: PageData = {
relativePath: '', relativePath: '404.md',
filePath: '', filePath: '',
title: '404', title: '404',
description: 'Not Found', description: 'Not Found',

6
types/shared.d.ts vendored
Unescape View File

@ -7,7 +7,11 @@ export type Awaitable<T> = T | PromiseLike<T>
export interface PageData { export interface PageData {
relativePath: string 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 title: string
titleTemplate?: string | boolean titleTemplate?: string | boolean
description: string description: string

Write Preview
Loading…
Cancel
Save