Skip to content

Add rough custom 404 page in astro with quick search #1257

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

Merged
ksen0 merged 10 commits into from
Mar 20, 2026
+63 −2
Merged

Add rough custom 404 page in astro with quick search #1257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6abd848
add rough 404 page in astro to present user with a quick search option
nbogie Mar 18, 2026
26b1cb4
404: switch to tailwind for (minimal) styling
nbogie Mar 18, 2026
a1de05b
set cloudflare not_found_handling to look for our custom 404 page
nbogie Mar 19, 2026
84576c2
updated 404 search-link population to discard any hash part of url path
nbogie Mar 19, 2026
c6bd11c
CI: have deploy job do npm ci (was missing)
nbogie Mar 19, 2026
8543a0a
CI: specifically setup node v22 before install
nbogie Mar 19, 2026
1ce03c8
switch 404 to use client-side JS
nbogie Mar 19, 2026
f9f15c3
404: use Head + BaseLayout
nbogie Mar 19, 2026
54981cd
404: remove as-yet unused ui translator
nbogie Mar 19, 2026
e63ed25
correct page title in layout
nbogie Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion .github/workflows/beta_deploy.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: Deploy beta to Netlify
name: Deploy beta to Cloudflare

on:
# Trigger the workflow every time you push to the `main` branch
Expand All @@ -20,6 +20,12 @@ jobs:
steps:
- name: Checkout your repository using git
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '22'
- name: Install dependencies
run: npm ci
- name: Build website
run: npm run build
- name: Deploy to Cloudflare Workers
Expand Down
54 changes: 54 additions & 0 deletions src/pages/404.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
---
import Head from "@components/Head/index.astro";
import BaseLayout from "../layouts/BaseLayout.astro";
import { getCurrentLocale } from "../i18n/utils.ts";
const currentLocale = getCurrentLocale(Astro.url.pathname);
---

<Head title="404: Page Not Found" locale={currentLocale} />

<BaseLayout title="404: Page Not Found">
<section class="flex flex-col items-start gap-8 py-8 px-2 prose max-w-none">
<p>
Sorry, we couldn't find your exact page
<code id="display-path"></code>.

<div class="flex flex-col gap-4">
<a id="search-link" href="/search/" class="btn">
Search here for <code id="display-search-term"></code>
</a>
or
<a href="/" class="btn secondary">go home</a>
</div>
</p>
</section>
<script is:inline>
(function update404PageDetails() {
function getLastPathSegment(path) {
return path.split("/").filter(Boolean).pop() ?? "";
}

// 1. Get the last meaningful segment from the URL path, excluding hash part
// 2. Use that in the link href to the search
// 3. Also display it and the failed path

//(This .pathname already strips away any hash part)
const realPath = window.location.pathname;
const term = getLastPathSegment(realPath);

const displayPathEl = document.getElementById("display-path");
const searchLinkEl = document.getElementById("search-link");
const displaySearchTermEl = document.getElementById("display-search-term");

if (displayPathEl) {
displayPathEl.textContent = realPath;
}
if (displaySearchTermEl) {
displaySearchTermEl.textContent = term;
}
if (searchLinkEl) {
searchLinkEl.href = `/search/?term=${encodeURIComponent(term)}`;
}
})();
</script>
</BaseLayout>
3 changes: 2 additions & 1 deletion wrangler.jsonc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@
"nodejs_compat"
],
"assets": {
"directory": "dist"
"directory": "dist",
"not_found_handling": "404-page"
},
"env": {
"beta": {
Expand Down
Loading