dschlueter/jamulix-homepage
Watch
1
0
Fork
You've already forked jamulix-homepage
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Feature: Fehlerseiten 401, 403, 500, 502, 503, 504

Browse source 
Gemeinsames Layout in components/error-page.tsx, 404 darauf umgestellt.
Jede Route app/<code>/page.tsx erzeugt landingpage/<code>.html; die
Deploy-Skripte kopieren alle Fehlerseiten in den Webroot. README
dokumentiert die nötigen ErrorDocument-Zeilen (Server-Konfig unverändert).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Dieter Schlüter 2026-10-07 09:55:02 +02:00
commit 9c7e1ce4db
1 changed files with 427 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

139
app/not-found.tsx
View file

@ -1,6 +1,4 @@
import Link from 'next/link'
import { ArrowLeft, FolderGit2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { ErrorPage, Cmd, Out, Err, Code } from '@/components/error-page'
import { RequestedPath } from '@/components/requested-path'
export const metadata = {
@ -11,117 +9,28 @@ export const metadata = {
export default function NotFound() {
return (
<main className="relative min-h-screen flex flex-col overflow-hidden">
{/* Fly.io-style gradient mesh background (dark mode only) */}
<div className="absolute inset-0 bg-gradient-mesh hidden dark:block" />
{/* Subtle grid overlay */}
<div
className="absolute inset-0 opacity-[0.02] dark:opacity-[0.04]"
style={{
backgroundImage: `
linear-gradient(to right, currentColor 1px, transparent 1px),
linear-gradient(to bottom, currentColor 1px, transparent 1px)
`,
backgroundSize: '60px 60px',
}}
/>
{/* Logo */}
<div className="relative max-w-6xl w-full mx-auto px-6 lg:px-8">
<div className="flex items-center h-16 lg:h-20">
<Link
href="/"
className="font-mono text-lg tracking-tight text-foreground hover:text-accent transition-colors"
>
Jamulix
</Link>
</div>
</div>
<div className="relative flex-1 flex items-center">
<div className="max-w-6xl w-full mx-auto px-6 lg:px-8 py-12 lg:py-20">
<div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">
{/* Text Content */}
<div className="lg:col-span-6 space-y-8">
<div>
<span className="inline-block font-mono text-xs tracking-wider text-accent uppercase mb-4">
Fehler 404 · Seite nicht gefunden
</span>
<p
aria-hidden="true"
className="font-serif font-bold text-8xl sm:text-9xl leading-none tracking-tighter text-foreground/90 dark:bg-gradient-to-r dark:from-cyan-400 dark:to-violet-400 dark:bg-clip-text dark:text-transparent"
>
404
</p>
<h1 className="mt-6 font-serif text-3xl sm:text-4xl lg:text-5xl leading-[1.1] tracking-tight text-balance">
Diese Seite ist vom Lochkartenstapel gefallen.
</h1>
</div>
<p className="text-lg text-muted-foreground leading-relaxed max-w-xl">
Seit 50 Jahren Code – und trotzdem verlegt man gelegentlich
etwas. Die gesuchte Seite existiert nicht, nicht mehr oder
noch nicht. Vielleicht war auch nur ein übereifriges{' '}
<code className="font-mono text-sm text-accent">rm -rf</code>{' '}
am Werk.
</p>
<div className="flex flex-col sm:flex-row gap-4">
<Button asChild size="lg" className="group">
<Link href="/">
<ArrowLeft className="mr-2 size-4 transition-transform group-hover:-translate-x-0.5" />
cd ~ — Zur Startseite
</Link>
</Button>
<Button asChild variant="outline" size="lg" className="group">
<Link href="/#projekte">
<FolderGit2 className="mr-2 size-4" />
Projekte ansehen
</Link>
</Button>
</div>
</div>
{/* Terminal */}
<div className="lg:col-span-6">
<div className="rounded-lg border border-border bg-card shadow-xl dark:shadow-[0_0_40px_oklch(0.70_0.22_280/0.3)] overflow-hidden">
<div className="flex items-center gap-2 px-4 py-3 border-b border-border bg-muted/50">
<span className="size-3 rounded-full bg-red-500/80" />
<span className="size-3 rounded-full bg-yellow-500/80" />
<span className="size-3 rounded-full bg-green-500/80" />
<span className="ml-3 font-mono text-xs text-muted-foreground">
jamulix@jamulix.de: ~
</span>
</div>
<pre className="p-5 sm:p-6 font-mono text-xs sm:text-sm leading-relaxed whitespace-pre-wrap text-card-foreground">
<span className="text-accent">$</span> cd <RequestedPath />{'\n'}
<span className="text-muted-foreground">
bash: cd: <RequestedPath />: Datei oder Verzeichnis nicht gefunden
</span>{'\n'}
<span className="text-accent">$</span> find / -name &quot;seite&quot; 2&gt;/dev/null{'\n'}
<span className="text-accent">$</span> cat seite.f{'\n'}
<span className="text-muted-foreground">C GESTANZT 1976 – STAPEL LEIDER RUNTERGEFALLEN</span>{'\n'}
<span className="text-cyan-600 dark:text-cyan-400"> GO TO 404</span>{'\n'}
<span className="text-accent">$</span> sudo !!{'\n'}
<span className="text-destructive dark:text-red-400">
jamulix ist nicht in der sudoers-Datei. Dieser Vorfall wird gemeldet.
</span>{'\n'}
<span className="text-accent">$</span>{' '}
<span className="inline-block w-2 h-4 align-middle bg-foreground animate-pulse" />
</pre>
</div>
<p className="mt-4 font-mono text-xs text-muted-foreground text-center lg:text-left">
Tipp: Auch nach 50 Jahren hilft <span className="text-accent">ls</span> meistens weiter.
</p>
</div>
</div>
</div>
</div>
</main>
<ErrorPage
code={404}
label="Seite nicht gefunden"
title="Diese Seite ist vom Lochkartenstapel gefallen."
terminal={
<>
<Cmd>cd <RequestedPath /></Cmd>
<Out>bash: cd: <RequestedPath />: Datei oder Verzeichnis nicht gefunden</Out>
<Cmd>find / -name &quot;seite&quot; 2&gt;/dev/null</Cmd>
<Cmd>cat seite.f</Cmd>
<Out>C GESTANZT 1976 – STAPEL LEIDER RUNTERGEFALLEN</Out>
<Code> GO TO 404</Code>
<Cmd>sudo !!</Cmd>
<Err>jamulix ist nicht in der sudoers-Datei. Dieser Vorfall wird gemeldet.</Err>
</>
}
tip={<>Tipp: Auch nach 50 Jahren hilft <span className="text-accent">ls</span> meistens weiter.</>}
>
Seit 50 Jahren Code – und trotzdem verlegt man gelegentlich etwas.
Die gesuchte Seite existiert nicht, nicht mehr oder noch nicht.
Vielleicht war auch nur ein übereifriges{' '}
<code className="font-mono text-sm text-accent">rm -rf</code> am Werk.
</ErrorPage>
)
}