404: add custom page with scoped path handling (#32)

dscho · web-flow · commit 632fcfcaf86c · 2026-03-13T07:01:56.000Z
## Summary Adds a custom 404 page with centered branding, return-home link, and footer. Scopes 404 path handling so assets resolve reliably on 404 URLs without changing normal page behavior. The default banner is omitted on 404 so the error state and recovery action are immediately clear. Closes #30 <br /> <img width="772" height="682" alt="404-gitgitgadget" src="https://github.com/user-attachments/assets/ceda8b06-3d28-4265-96c1-1122400ab835" />
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
@@ -123,3 +123,36 @@ footer nav ul li a {
     margin: auto 0px;
   }
 }
+.not-found {
+  text-align: center;
+  margin: 3rem auto;
+}
+
+.not-found-logo {
+  width: 200px;
+  margin: 0 auto 1.5rem;
+  display: block;
+}
+
+.not-found h1 {
+  margin: 0 0 1rem;
+  font-size: 3rem;
+  font-weight: 700;
+}
+
+.not-found p {
+  margin: 0 0 1rem;
+}
+
+body.page-404 {
+  min-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+body.page-404 .not-found {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
diff --git a/layouts/404.html b/layouts/404.html
@@ -0,0 +1,9 @@
+{{ define "main" }}
+<div class="not-found">
+  <img class="not-found-logo" src="{{ relURL "images/gitgitgadget-logo.png" }}" alt="GitGitGadget logo" width="200">
+  <h1>404 Not Found</h1>
+  <p>The page you are looking for doesn't exist</p>
+  <p><a href="{{ relURL "/" }}">Return home</a></p>
+</div>
+{{ partial "footer.html" . }}
+{{ end }}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -6,13 +6,20 @@
     <title>{{ .Title }}</title>
     {{- $canonical := .Permalink | replaceRE "\\.html$" "" -}}
     <link rel="canonical" href="{{ $canonical }}">
-    <link rel="icon" href="{{ relURL "favicon.ico" }}">
+    {{- if eq .Kind "404" }}
+    <script>
+      document.write('<base href="{{ .Site.Home.Permalink }}">');
+    </script>
+    {{- end }}
     {{- $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "main.scss" . | css.Sass }}
+    <link rel="icon" href="{{ relURL "favicon.ico" }}">
     <link rel="stylesheet" href="{{ $style.RelPermalink }}">
     {{- partial "breadcrumbs.html" . -}}
   </head>
-  <body>
+  <body{{ if eq .Kind "404" }} class="page-404"{{ end }}>
+    {{- if ne .Kind "404" }}
     {{ partial "banner.html" . -}}
+    {{- end }}
 
     {{ block "main" . }}
     {{ .Content }}
diff --git a/static/images/gitgitgadget-logo.png b/static/images/gitgitgadget-logo.png
