feat: better 404 page

internal/assets/static/main.css

@@ -285,6 +285,20 @@ body {
     font-size: 2rem;
 }
 
+.page-404-container {
+    margin: 50px auto;
+    width: fit-content;
+    font-size: 2rem;
+    text-align: center;
+}
+
+.logo-404 {
+    height: 100%;
+    line-height: var(--header-height);
+    font-size: 2rem;
+    color: var(--color-text-highlight);
+}
+
 @keyframes loadingContainerEntrance {
     from {
         opacity: 0;

internal/assets/templates.go

@@ -13,6 +13,7 @@ import (
 
 var (
 	PageTemplate                  = compileTemplate("page.html", "document.html", "page-style-overrides.gotmpl")
+	Page404Template               = compileTemplate("404.html", "document.html", "page-style-overrides.gotmpl")
 	PageContentTemplate           = compileTemplate("content.html")
 	CalendarTemplate              = compileTemplate("calendar.html", "widget-base.html")
 	BookmarksTemplate             = compileTemplate("bookmarks.html", "widget-base.html")

internal/assets/templates/404.html

@@ -0,0 +1,52 @@
+{{ template "document.html" . }}
+
+{{ define "document-title" }}{{ .Page.Title }} - Glance{{ end }}
+
+{{ define "document-head-before" }}
+<script>
+    const pageData = {
+        slug: "{{ .Page.Slug }}",
+    };
+</script>
+{{ end }}
+
+{{ define "document-root-attrs" }}{{ if .App.Config.Theme.Light }}class="light-scheme"{{ end }}{{ end }}
+{{ define "document-head-after" }}
+{{ template "page-style-overrides.gotmpl" . }}
+{{ if ne "" .App.Config.Theme.CustomCSSFile }}
+<link rel="stylesheet" href="{{ .App.Config.Theme.CustomCSSFile }}?v={{ .App.Config.Server.StartedAt.Unix }}">
+{{ end }}
+{{ end }}
+
+{{ define "navigation-links" }}
+{{ range .App.Config.Pages }}
+<a href="/{{ .Slug }}" class="nav-item{{ if eq .Slug $.Page.Slug }} nav-item-current{{ end }}">{{ .Title }}</a>
+{{ end }}
+{{ end }}
+
+{{ define "document-body" }}
+<div class="content-bounds">
+    <div class="page">
+        <div class="page-404-container">
+            <!-- TODO: Replace G with actual logo, first need an actual logo -->
+            <div class="logo-404">G</div>
+            <div class="margin-top-15">
+                <span>Page Not Found</span>
+                <div class="margin-top-5 size-h5 color-primary">
+                    <a href="/home" rel="noreferrer">Go back to home</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="footer flex items-center flex-column">
+    <div>
+        <span class="size-h3">Glance</span> ({{ .App.Version }})
+    </div>
+    <ul class="list-horizontal-text margin-top-5 size-h5 color-primary">
+        <li><a href="https://github.com/glanceapp/glance/issues" target="_blank" rel="noreferrer">Report issue</a></li>
+        <li><a href="https://github.com/glanceapp/glance/discussions" target="_blank" rel="noreferrer">Submit feedback</a></li>
+    </ul>
+</div>
+{{ end }}

internal/glance/glance.go

@@ -174,9 +174,18 @@ func (a *Application) HandlePageContentRequest(w http.ResponseWriter, r *http.Re
 }
 
 func (a *Application) HandleNotFound(w http.ResponseWriter, r *http.Request) {
-	// TODO: add proper not found page
-	w.WriteHeader(http.StatusNotFound)
-	w.Write([]byte("Page not found"))
+	pageData := templateData{
+		App: a,
+		Page: &Page{
+			Title: "Page Not Found",
+			Slug:  "404",
+		},
+	}
+
+	var responseBytes bytes.Buffer
+	assets.Page404Template.Execute(&responseBytes, pageData)
+
+	w.Write(responseBytes.Bytes())
 }
 
 func FileServerWithCache(fs http.FileSystem, cacheDuration time.Duration) http.Handler {