feat: add custom 404/500 error pages

polylan_submitter/src/ErrorPage.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  code?: string;
+  title?: string;
+  message?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  code: "500",
+  title: "Something went wrong",
+  message: "An unexpected error occurred.",
+});
+
+const goBack = () => window.history.back();
+</script>
+
+<template>
+  <div class="min-h-screen bg-base-300 flex items-center justify-center px-4">
+    <div class="w-full max-w-xl text-center">
+      <i class="mdi mdi-alert-circle-outline text-7xl text-primary"></i>
+      <h1 class="text-7xl font-bold mt-4">{{ code }}</h1>
+      <h2 class="text-2xl font-semibold mt-2">{{ title }}</h2>
+      <p class="text-base-content/70 mt-4">{{ message }}</p>
+      <div class="mt-8 flex items-center justify-center gap-4">
+        <a href="/" class="btn btn-primary">
+          <i class="mdi mdi-home mr-2"></i>
+          Go home
+        </a>
+        <button @click="goBack" class="btn btn-ghost">
+          <i class="mdi mdi-arrow-left mr-2"></i>
+          Go back
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

polylan_submitter/src/error.ts

@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import ErrorPage from '@/ErrorPage.vue'
+import '@/style.css'
+
+const selector = "#app"
+const mountData = document.querySelector<HTMLElement>(selector)
+const app = createApp(ErrorPage, { ...mountData?.dataset })
+app.mount(selector)

polylan_submitter/templates/404.html

@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+{% load django_vite %}
+
+{% block title %}Page Not Found{% endblock %}
+
+{% block head %}
+    {% vite_asset 'src/error.ts' %}
+{% endblock %}
+
+{% block content %}
+    <div id="app" data-code="404" data-title="Page not found" data-message="The page you're looking for doesn't exist or has been moved."></div>
+{% endblock %}

polylan_submitter/templates/500.html

@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+{% load django_vite %}
+
+{% block title %}Server Error{% endblock %}
+
+{% block head %}
+    {% vite_asset 'src/error.ts' %}
+{% endblock %}
+
+{% block content %}
+    <div id="app" data-code="500" data-title="Server error" data-message="Something went wrong on our end. Please try again later."></div>
+{% endblock %}