42 lines
2.0 KiB
TypeScript
42 lines
2.0 KiB
TypeScript
// The fallback for any /js/* URL the router does not know.
|
|
//
|
|
// The server cannot 404 these: it answers every /js/* path with the same SPA shell,
|
|
// because it has no idea which routes the bundle contains. So the router has to be the
|
|
// one to say so — and if it does not, an unknown URL renders the chrome around an empty
|
|
// <main>, which is a blank page with a 200 and no explanation.
|
|
//
|
|
// It names the paths that MOVED, because that is what a stale bookmark most likely wants:
|
|
// /js/kit, /js/forms, /js/table and /js/theming were four pages, and are now four
|
|
// sections of one.
|
|
|
|
import { useLocation, useNavigate } from "@solidjs/router";
|
|
import { ButtonUI, BUTTON_COLOR_PRIMARY, BUTTON_COLOR_LIGHT_NEUTRAL } from "@ui/Buttons";
|
|
|
|
export function NotFound() {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div class="max-w-2xl py-10">
|
|
<h1 class="text-2xl font-semibold tracking-tight text-ink">Page not found</h1>
|
|
<p class="mt-2 leading-relaxed text-ink-soft">
|
|
No route matches <code class="rounded bg-surface-raised px-1 py-0.5 font-mono text-[13px]">{location.pathname}</code>.
|
|
</p>
|
|
<p class="mt-3 leading-relaxed text-ink-soft">
|
|
The kit used to be spread across several pages — <code class="font-mono">/js/kit</code>,{" "}
|
|
<code class="font-mono">/js/forms</code>, <code class="font-mono">/js/table</code>,{" "}
|
|
<code class="font-mono">/js/theming</code>. It is one page now, and they are sections of it.
|
|
</p>
|
|
|
|
<div class="mt-6 flex flex-wrap items-center gap-2">
|
|
<ButtonUI color={BUTTON_COLOR_PRIMARY} onclick={() => navigate("/components")}>
|
|
Go to Components
|
|
</ButtonUI>
|
|
<ButtonUI color={BUTTON_COLOR_LIGHT_NEUTRAL} onclick={() => navigate("/")}>
|
|
Overview
|
|
</ButtonUI>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|