Skip to content

Commit 496de84

Browse files
LeadcodeDevLeadcodeDev
committed
feat: add 404 page
1 parent a5a4de0 commit 496de84

6 files changed

Lines changed: 132 additions & 7 deletions

File tree

‎apps/blog/src/layouts/base.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,9 @@ const appUrlOverrides = {
6161
})
6262
</script>
6363
</head>
64-
<body class="min-h-screen antialiased">
64+
<body class="min-h-screen antialiased flex flex-col">
6565
<BlogNavbar activePath={Astro.url.pathname} appUrlOverrides={appUrlOverrides} locale={locale} locales={locales} localeSwitchUrls={localeSwitchUrls} client:load transition:persist />
66-
<main class="mx-auto max-w-6xl px-6 py-10">
66+
<main class="flex-1 flex flex-col mx-auto max-w-6xl px-6 py-10 w-full">
6767
<slot />
6868
</main>
6969
<div class="mx-auto max-w-6xl px-6">

‎apps/blog/src/pages/404.astro‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
import Base from '../layouts/base.astro'
3+
import { defaultLang } from '../i18n/ui'
4+
---
5+
6+
<Base title="404 — Page not found" locale={defaultLang}>
7+
<section class="flex-1 flex flex-col items-center justify-center text-center">
8+
<p class="text-primary text-sm font-semibold tracking-widest uppercase mb-4">404</p>
9+
<h1 class="text-4xl md:text-5xl font-bold tracking-tight mb-4">Page not found</h1>
10+
<p class="text-muted-foreground text-lg max-w-md mb-8">
11+
Sorry, we couldn't find the page you're looking for.
12+
</p>
13+
<a
14+
href="/"
15+
class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
16+
>
17+
Back to blog
18+
</a>
19+
</section>
20+
</Base>

‎apps/docs/src/layouts/base.astro‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,54 @@
11
---
22
import '../styles/globals.css'
3+
import { ClientRouter } from 'astro:transitions'
4+
import { formatTitle } from '@explainer/config'
5+
import { siteConfig } from '../config'
36
47
interface Props {
58
title: string
69
description?: string
10+
thumbnail?: string
711
}
812
9-
const { title, description } = Astro.props
13+
const { title, description, thumbnail } = Astro.props
14+
const thumbnailUrl = thumbnail ?? siteConfig.thumbnail
1015
---
1116

1217
<!doctype html>
1318
<html lang="en">
1419
<head>
1520
<meta charset="UTF-8" />
1621
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
17-
<meta name="description" content={description} />
18-
<title>{title}</title>
22+
<link rel="icon" type="image/svg+xml" href={siteConfig.favicon} />
23+
<meta name="description" content={description ?? siteConfig.description} />
24+
<meta property="og:title" content={title} />
25+
<meta property="og:description" content={description ?? siteConfig.description} />
26+
{thumbnailUrl && <meta property="og:image" content={thumbnailUrl} />}
27+
<meta property="og:type" content={siteConfig.ogType} />
28+
<meta name="twitter:card" content={siteConfig.twitterCard} />
29+
<meta name="twitter:title" content={title} />
30+
<meta name="twitter:description" content={description ?? siteConfig.description} />
31+
{thumbnailUrl && <meta name="twitter:image" content={thumbnailUrl} />}
32+
<title>{formatTitle(siteConfig, title)}</title>
33+
<ClientRouter />
34+
<script is:inline>
35+
(function () {
36+
var match = document.cookie.match(/(?:^|; )theme=([^;]*)/)
37+
var theme = match ? match[1] : 'system'
38+
var isDark = theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
39+
document.documentElement.classList.toggle('dark', isDark)
40+
})()
41+
</script>
42+
<script is:inline>
43+
document.addEventListener('astro:after-swap', function () {
44+
var match = document.cookie.match(/(?:^|; )theme=([^;]*)/)
45+
var theme = match ? match[1] : 'system'
46+
var isDark = theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
47+
document.documentElement.classList.toggle('dark', isDark)
48+
})
49+
</script>
1950
</head>
20-
<body class="min-h-screen antialiased">
51+
<body class="min-h-screen antialiased flex flex-col">
2152
<slot />
2253
</body>
2354
</html>

‎apps/docs/src/pages/404.astro‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
import Base from '../layouts/base.astro'
3+
import { Navbar, Footer } from '@explainer/ui'
4+
import { siteConfig } from '../config'
5+
6+
const appUrlOverrides = {
7+
website: import.meta.env.PUBLIC_WEBSITE_URL,
8+
docs: import.meta.env.PUBLIC_DOCS_URL,
9+
blog: import.meta.env.PUBLIC_BLOG_URL,
10+
}
11+
---
12+
13+
<Base title="404 — Page not found">
14+
<Navbar
15+
currentApp="docs"
16+
appUrlOverrides={appUrlOverrides}
17+
breakpoint="lg"
18+
className="border-b"
19+
client:load
20+
transition:persist
21+
/>
22+
23+
<main class="flex-1 flex flex-col items-center justify-center px-6 text-center">
24+
<p class="text-primary text-sm font-semibold tracking-widest uppercase mb-4">404</p>
25+
<h1 class="text-4xl md:text-5xl font-bold tracking-tight mb-4">Page not found</h1>
26+
<p class="text-muted-foreground text-lg max-w-md mb-8">
27+
Sorry, we couldn't find the page you're looking for.
28+
</p>
29+
<a
30+
href="/"
31+
class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
32+
>
33+
Back to docs
34+
</a>
35+
</main>
36+
37+
<div class="mx-auto max-w-6xl px-6 w-full">
38+
<Footer config={siteConfig} appUrlOverrides={appUrlOverrides} client:load />
39+
</div>
40+
</Base>

‎apps/website/src/layouts/base.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const thumbnailUrl = thumbnail ?? siteConfig.thumbnail
4848
})
4949
</script>
5050
</head>
51-
<body class="min-h-screen antialiased">
51+
<body class="min-h-screen antialiased flex flex-col">
5252
<slot />
5353
</body>
5454
</html>

‎apps/website/src/pages/404.astro‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
import Base from '../layouts/base.astro'
3+
import { WebsiteNavbar } from '../components/website-navbar'
4+
import { Footer } from '@explainer/ui'
5+
import { siteConfig } from '../config'
6+
7+
const appUrlOverrides = {
8+
website: import.meta.env.PUBLIC_WEBSITE_URL,
9+
docs: import.meta.env.PUBLIC_DOCS_URL,
10+
blog: import.meta.env.PUBLIC_BLOG_URL,
11+
}
12+
---
13+
14+
<Base title="404 — Page not found">
15+
<WebsiteNavbar appUrlOverrides={appUrlOverrides} client:load transition:persist />
16+
17+
<main class="flex-1 flex flex-col items-center justify-center px-6 text-center">
18+
<p class="text-primary text-sm font-semibold tracking-widest uppercase mb-4">404</p>
19+
<h1 class="text-4xl md:text-5xl font-bold tracking-tight mb-4">Page not found</h1>
20+
<p class="text-muted-foreground text-lg max-w-md mb-8">
21+
Sorry, we couldn't find the page you're looking for.
22+
</p>
23+
<a
24+
href="/"
25+
class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
26+
>
27+
Back to home
28+
</a>
29+
</main>
30+
31+
<div class="mx-auto max-w-6xl px-6 w-full">
32+
<Footer config={siteConfig} appUrlOverrides={appUrlOverrides} client:load />
33+
</div>
34+
</Base>

0 commit comments

Comments
 (0)