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

ui: add custom centered 404 page

Browse Source
This commit is contained in:
mkelvers
2026-04-12 14:58:08 +02:00
parent 39f09c104f
commit 09d2fd3a88
3 changed files with 55 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
internal/features/anime/handler.go
View File

@@ -53,7 +53,8 @@ func NewHandler(svc *Service) *Handler {
func (h *Handler) HandleCatalog(w http.ResponseWriter, r *http.Request) { func (h *Handler) HandleCatalog(w http.ResponseWriter, r *http.Request) {
if r.URL.Path != "/" { if r.URL.Path != "/" {
http.NotFound(w, r) w.WriteHeader(http.StatusNotFound)
templates.NotFoundPage().Render(r.Context(), w)
return return
} }
templates.Catalog().Render(r.Context(), w) templates.Catalog().Render(r.Context(), w)
@@ -122,7 +123,8 @@ func (h *Handler) HandleAnimeDetails(w http.ResponseWriter, r *http.Request) {
idStr := r.URL.Path[len("/anime/"):] idStr := r.URL.Path[len("/anime/"):]
id, err := strconv.Atoi(idStr) id, err := strconv.Atoi(idStr)
if err != nil || id <= 0 { if err != nil || id <= 0 {
http.NotFound(w, r) w.WriteHeader(http.StatusNotFound)
templates.NotFoundPage().Render(r.Context(), w)
return return
} }
@@ -136,7 +138,8 @@ func (h *Handler) HandleAnimeDetails(w http.ResponseWriter, r *http.Request) {
} }
if jikan.IsNotFoundError(err) { if jikan.IsNotFoundError(err) {
http.NotFound(w, r) w.WriteHeader(http.StatusNotFound)
templates.NotFoundPage().Render(r.Context(), w)
return return
} }
@@ -210,7 +213,8 @@ func (h *Handler) HandleAPIAnime(w http.ResponseWriter, r *http.Request) {
} }
templates.AnimeRecommendations(recs).Render(r.Context(), w) templates.AnimeRecommendations(recs).Render(r.Context(), w)
default: default:
http.Error(w, "not found", http.StatusNotFound) w.WriteHeader(http.StatusNotFound)
templates.NotFoundPage().Render(r.Context(), w)
} }
} }

12
internal/templates/not_found.templ Normal file
View File

@@ -0,0 +1,12 @@
package templates
templ NotFoundPage() {
@Layout("mal - not found", false) {
<section class="not-found-page anime-surface">
<p class="not-found-code">404</p>
<h1>Page not found</h1>
<p class="empty-inline-note">The page you requested does not exist, or it was moved.</p>
<p><a href="/" class="not-found-link">Back to catalog</a></p>
</section>
}
}

35
static/css/style.css
View File

@@ -466,6 +466,41 @@ main {
font-size: 0.9rem; font-size: 0.9rem;
} }
.not-found-page {
width: min(780px, calc(100vw - (var(--space-6) * 2)));
min-height: 72vh;
margin: 0 auto;
padding: var(--space-8) var(--space-7);
display: grid;
align-content: center;
justify-items: center;
gap: var(--space-3);
text-align: center;
}
.not-found-code {
margin: 0;
color: var(--text-muted);
font-size: clamp(4rem, 15vw, 10rem);
letter-spacing: 0.04em;
line-height: 0.9;
}
.not-found-page h1 {
margin: 0;
font-size: clamp(2rem, 4vw, 3rem);
}
.not-found-link {
color: var(--accent);
text-decoration: none;
font-size: 1.05rem;
}
.not-found-link:hover {
text-decoration: underline;
}
.auth-shell { .auth-shell {
width: min(560px, 100%); width: min(560px, 100%);
} }