Add 404 page

static/src/scss/_404.scss

@@ -0,0 +1,43 @@
+body.page-404 {
+  main {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin: 0;
+    color: $white;
+  }
+
+  .content-wrapper {
+    position: absolute;
+    text-align: center;
+    background-color: color.adjust($dark, $alpha: -0.2);
+    border-radius: $input-radius;
+    padding: 2rem;
+
+    h1 {
+      font-size: 5rem;
+    }
+
+    p {
+      font-size: 110%;
+    }
+
+    a:hover {
+      color: $grey-lighter;
+    }
+  }
+
+  marquee {
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    width: 100%;
+    height: 100%;
+
+    &.outer {
+      font-size: 5rem;
+    }
+  }
+}

static/src/scss/base.scss

@@ -16,6 +16,7 @@
 @import "shareon";
 @import "search";
 @import "spotify";
+@import "404";
 
 html,
 body {

website/common/templates/404.html

@@ -1,11 +1,21 @@
 {% extends "base.html" %}
 
+{% load static wagtailcore_tags wagtailimages_tags %}
+
+{% block body_class %}page-404{% endblock %}
+
 {% block title %}Page not found{% endblock %}
 
-{% block body_class %}template-404{% endblock %}
+{% block main_content %}
+  <marquee {% if homepage.image %}style="background-image: url({% image_url homepage.image 'width-1200' %})"{% endif %} class="outer" direction="down" behavior="alternate" scrolldelay="15" truespeed scrollamount="2">
+    <marquee class="inner" behavior="alternate" scrolldelay="15" scrollamount="3" truespeed>
+      <a href="{% pageurl homepage %}">🤷</a>
+    </marquee>
+  </marquee>
 
-{% block content %}
+  <div class="content-wrapper">
-  <h1>Page not found</h1>
+    <h1>There's nothing here!</h1>
-
+    <p>The page you are looking for could not be found.</p>
-  <h2>Sorry, this page could not be found.</h2>
+    <p><a href="{% pageurl homepage %}">Go home</a></p>
+  </div>
 {% endblock %}

website/common/tests/test_views.py

@@ -0,0 +1,14 @@
+from django.test import TestCase
+from django.urls import reverse
+
+
+class Error404PageTestCase(TestCase):
+    url = reverse("404")
+
+    def test_accessible(self) -> None:
+        response = self.client.get(self.url)
+        self.assertEqual(response.status_code, 404)
+
+    def test_queries(self) -> None:
+        with self.assertNumQueries(10):
+            self.client.get(self.url)

website/common/views.py

@@ -0,0 +1,23 @@
+from typing import Any
+
+from django.http.response import HttpResponse
+from django.views.defaults import ERROR_404_TEMPLATE_NAME
+from django.views.generic import TemplateView
+
+from website.home.models import HomePage
+
+
+class Error404View(TemplateView):
+    template_name = ERROR_404_TEMPLATE_NAME
+
+    def render_to_response(self, context: dict, **response_kwargs: Any) -> HttpResponse:
+        response_kwargs["status"] = 404
+        return super().render_to_response(context, **response_kwargs)
+
+    def get_context_data(self, **kwargs: dict) -> dict:
+        context = super().get_context_data(**kwargs)
+        context["homepage"] = HomePage.objects.live().get()
+        return context
+
+
+page_not_found = Error404View.as_view()

website/urls.py

@@ -6,6 +6,8 @@ from wagtail.contrib.sitemaps.views import sitemap
 from wagtail.documents import urls as wagtaildocs_urls
 from wagtail.images.views.serve import ServeView
 
+from website.common.views import page_not_found
+
 urlpatterns = [
     path("admin/", include(wagtailadmin_urls)),
     path("documents/", include(wagtaildocs_urls)),
@@ -19,9 +21,14 @@ urlpatterns = [
         name="wagtailimages_serve",
     ),
     path("sitemap.xml", sitemap),
+    path("404/", page_not_found, name="404"),
 ]
 
 
+if not settings.DEBUG:
+    handler404 = "website.common.views.page_not_found"
+
+
 if settings.DEBUG:
     from django.conf.urls.static import static