Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
May 2, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f1b4e03
fix: render 404 page completely on client
brc-dd May 2, 2024
aa95d9e
update comment
brc-dd May 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/client/app/router.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
}
}
}
Expand Down
50 changes: 13 additions & 37 deletions src/client/theme-default/NotFound.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
9 changes: 2 additions & 7 deletions src/client/theme-default/composables/langs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ||
Expand All @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion src/node/build/render.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/shared/shared.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
6 changes: 5 additions & 1 deletion types/shared.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down