Skip to content

Commit

Permalink
feat(theme): allow customizing default theme's 404 page
Browse files Browse the repository at this point in the history
closes #2715
  • Loading branch information
brc-dd committed Aug 3, 2023
1 parent 17378c0 commit d7e2254
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 7 deletions.
23 changes: 16 additions & 7 deletions src/client/theme-default/NotFound.vue
Expand Up @@ -4,7 +4,7 @@ import { withBase } from 'vitepress'
import { useData } from './composables/data'
import { useLangs } from './composables/langs'
const { site } = useData()
const { site, theme } = useData()
const { localeLinks } = useLangs({ removeCurrent: false })
const root = ref('/')
Expand All @@ -22,16 +22,23 @@ onMounted(() => {

<template>
<div class="NotFound">
<p class="code">404</p>
<h1 class="title">PAGE NOT FOUND</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">
But if you don't change your direction, and if you keep looking, you may end up where you are heading.
{{
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(root)" aria-label="go to home">
Take me home
<a
class="link"
:href="withBase(root)"
:aria-label="theme.notFound?.linkLabel ?? 'go to home'"
>
{{ theme.notFound?.linkText ?? 'Take me home' }}
</a>
</div>
</div>
Expand Down Expand Up @@ -90,7 +97,9 @@ onMounted(() => {
font-size: 14px;
font-weight: 500;
color: var(--vp-c-brand);
transition: border-color 0.25s, color 0.25s;
transition:
border-color 0.25s,
color 0.25s;
}

.link:hover {
Expand Down
42 changes: 42 additions & 0 deletions types/default-theme.d.ts
Expand Up @@ -134,6 +134,11 @@ export namespace DefaultTheme {
* @default false
*/
externalLinkIcon?: boolean

/**
* Customize text of 404 page.
*/
notFound?: NotFoundOptions
}

// nav -----------------------------------------------------------------------
Expand Down Expand Up @@ -393,4 +398,41 @@ export namespace DefaultTheme {
*/
formatOptions?: Intl.DateTimeFormatOptions
}

// not found -----------------------------------------------------------------

export interface NotFoundOptions {
/**
* Set custom not found message.
*
* @default 'PAGE NOT FOUND'
*/
title?: string

/**
* Set custom not found description.
*
* @default "But if you don't change your direction, and if you keep looking, you may end up where you are heading."
*/
quote?: string

/**
* Set aria label for home link.
*
* @default 'go to home'
*/
linkLabel?: string

/**
* Set custom home link text.
*
* @default 'Take me home'
*/
linkText?: string

/**
* @default '404'
*/
code?: string
}
}

0 comments on commit d7e2254

Please sign in to comment.