melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add custom 404 page with playful inline artwork and prose

Browse Source
This commit is contained in:
mkelvers
2026-06-26 15:12:10 +02:00
parent 3aa8ce4638
commit 0d31d46fae
4 changed files with 116 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
internal/server/server.go
View File

@@ -28,6 +28,15 @@ func ProvideRouter(cfg config.Config, htmlRender render.HTMLRender) *gin.Engine
}
r := gin.New()
r.Use(CORSMiddlewareWithConfig(cfg), RequestContextMiddleware(), audit.ContextMiddleware(), RequestLogger(), gin.Recovery())
r.NoRoute(func(c *gin.Context) {
if acceptsHTML(c) {
c.HTML(http.StatusNotFound, "not_found.gohtml", gin.H{
"CurrentPath": c.Request.URL.Path,
})
return
}
c.JSON(http.StatusNotFound, ErrorResponse{Error: "Not found"})
})
r.Static("/static", "./static")
r.Static("/dist", "./dist")
r.GET("/debug/pprof", gin.WrapH(http.DefaultServeMux))

48
internal/server/server_test.go
View File

@@ -6,6 +6,7 @@ import (
"io"
"log"
"mal/internal/config"
"mal/templates"
"net/http"
"net/http/httptest"
"strings"
@@ -182,3 +183,50 @@ func TestRespondErrorIncludesRequestContext(t *testing.T) {
t.Fatalf("log line missing request route: %s", logLine)
}
}
func TestProvideRouterRendersNotFoundPageForHTMLRequests(t *testing.T) {
gin.SetMode(gin.TestMode)
renderer, err := templates.ProvideRenderer()
if err != nil {
t.Fatalf("ProvideRenderer: %v", err)
}
router := ProvideRouter(config.Config{GinMode: gin.TestMode}, renderer)
req := httptest.NewRequestWithContext(context.Background(), http.MethodGet, "/missing", nil)
req.Header.Set("Accept", "text/html")
rec := httptest.NewRecorder()
router.ServeHTTP(rec, req)
if rec.Code != http.StatusNotFound {
t.Fatalf("status = %d, want %d", rec.Code, http.StatusNotFound)
}
for _, want := range []string{"You got a little lost", "This page slipped off the map for a minute", "Head back home"} {
if !strings.Contains(rec.Body.String(), want) {
t.Fatalf("not found page missing %q in body:\n%s", want, rec.Body.String())
}
}
}
func TestProvideRouterReturnsJSONForAPINotFound(t *testing.T) {
gin.SetMode(gin.TestMode)
renderer, err := templates.ProvideRenderer()
if err != nil {
t.Fatalf("ProvideRenderer: %v", err)
}
router := ProvideRouter(config.Config{GinMode: gin.TestMode}, renderer)
req := httptest.NewRequestWithContext(context.Background(), http.MethodGet, "/api/missing", nil)
rec := httptest.NewRecorder()
router.ServeHTTP(rec, req)
if rec.Code != http.StatusNotFound {
t.Fatalf("status = %d, want %d", rec.Code, http.StatusNotFound)
}
if got := rec.Body.String(); got != `{"error":"Not found"}` {
t.Fatalf("body = %q, want %q", got, `{"error":"Not found"}`)
}
}

40
templates/not_found.gohtml
View File

@@ -1,7 +1,39 @@
{{define "title"}}Not Found{{end}}
{{define "content"}}
<div class="text-center py-20">
<h2 class="text-4xl font-normal mb-4">404</h2>
<p class="text-xl text-foreground-muted">Page not found</p>
</div>
<section class="flex min-h-[78dvh] items-center justify-center px-4 py-8 sm:px-6 lg:px-8">
<div class="mx-auto flex w-full max-w-4xl flex-col items-center text-center">
<div class="relative flex aspect-square w-full max-w-110 items-center justify-center overflow-hidden rounded-full bg-background-surface ring-1 ring-black/5">
<div class="absolute inset-8 rounded-full border border-foreground/10"></div>
<div class="absolute inset-16 rounded-full border border-foreground/8"></div>
<div class="absolute left-12 top-16 h-4 w-4 rounded-full bg-foreground/12"></div>
<div class="absolute right-14 top-18 h-3 w-3 rounded-full bg-foreground/18"></div>
<div class="absolute left-18 bottom-20 h-2.5 w-2.5 rounded-full bg-foreground/14"></div>
<div class="absolute right-18 bottom-16 h-20 w-20 rounded-full border border-foreground/10"></div>
<div class="absolute left-16 top-1/2 h-px w-18 -translate-y-1/2 rotate-[-12deg] bg-foreground/18"></div>
<div class="absolute right-16 top-1/2 h-px w-18 -translate-y-1/2 rotate-[12deg] bg-foreground/18"></div>
<div class="relative flex h-52 w-52 items-center justify-center rounded-full bg-background shadow-sm ring-1 ring-black/5 sm:h-64 sm:w-64">
<div class="absolute top-16 left-16 h-4 w-4 rounded-full bg-foreground"></div>
<div class="absolute top-16 right-16 h-4 w-4 rounded-full bg-foreground"></div>
<div class="absolute bottom-18 h-16 w-28 rounded-b-full border-b-[3px] border-foreground/80"></div>
<div class="absolute -left-8 top-1/2 h-px w-14 -translate-y-1/2 bg-foreground/20"></div>
<div class="absolute -right-8 top-1/2 h-px w-14 -translate-y-1/2 bg-foreground/20"></div>
</div>
</div>
<h1 class="mt-8 max-w-3xl font-[Newsreader] text-5xl leading-none text-foreground sm:text-6xl lg:text-7xl">
You got a little lost.
</h1>
<p class="mt-5 max-w-xl text-lg text-foreground-muted sm:text-xl">
This page slipped off the map for a minute. Let&apos;s get you back to something worth watching.
</p>
<div class="mt-9 flex flex-col items-center gap-3 sm:flex-row">
<a href="/" class="inline-flex h-11 items-center justify-center rounded-xs bg-[#cccccc] px-6 text-base font-normal text-black transition hover:bg-[#bfbfbf] active:bg-[#b3b3b3]">
Head back home
</a>
<a href="/browse" class="inline-flex h-11 items-center justify-center px-3 text-base text-foreground-muted transition hover:text-foreground">
Browse something good
</a>
</div>
</div>
</section>
{{end}}

23
templates/snapshot_test.go
View File

@@ -29,3 +29,26 @@ func TestLoginTemplateShowsCoreCopy(t *testing.T) {
}
}
}
func TestNotFoundTemplateShowsCoreCopy(t *testing.T) {
r, err := ProvideRenderer()
if err != nil {
t.Fatalf("ProvideRenderer: %v", err)
}
var buf bytes.Buffer
if err := r.ExecuteFragment(&buf, "not_found.gohtml", "content", map[string]any{}); err != nil {
t.Fatalf("ExecuteFragment: %v", err)
}
body := buf.String()
for _, want := range []string{
"You got a little lost",
"This page slipped off the map for a minute",
"Head back home",
} {
if !strings.Contains(body, want) {
t.Fatalf("not found template missing %q in output:\n%s", want, body)
}
}
}