From fdb77a20f384505956ea77e3d2449b2c5373ceb0 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Thu, 13 Mar 2025 12:25:34 +0100
Subject: [PATCH] Added catch layout for error pages

---
 components/global/Heading.vue |  11 ++--
 error.vue                     | 104 ++++++++++++++++++++++++++++++++++
 i18n.config.ts                |  36 ++++++++++++
 3 files changed, 147 insertions(+), 4 deletions(-)
 create mode 100644 error.vue
diff --git a/components/global/Heading.vue b/components/global/Heading.vue
index 8e51843..bbb6f0f 100644
--- a/components/global/Heading.vue
+++ b/components/global/Heading.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-type HeadingLevel = "h1" | "h2" | "h3"
+type HeadingLevel = "h0" | "h1" | "h2" | "h3"
 
 interface HeadingProps {
   level?: HeadingLevel
@@ -11,13 +11,16 @@ withDefaults(defineProps<HeadingProps>(), {
 </script>
 
 <template>
-  <h1 v-if="level === 'h1'" class="text-4xl font-bold flex">
+  <h1 v-if="level === 'h0'" class="text-4xl md:text-6xl font-bold flex">
     <slot />
   </h1>
-  <h2 v-else-if="level === 'h2'" class="text-2xl font-bold flex">
+  <h1 v-else-if="level === 'h1'" class="text-2xl md:text-4xl font-bold flex">
+    <slot />
+  </h1>
+  <h2 v-else-if="level === 'h2'" class="text-xl md:text-2xl font-bold flex">
     <slot />
   </h2>
-  <h3 v-if="level === 'h3'" class="text-xl font-bold flex">
+  <h3 v-if="level === 'h3'" class="text-lg md:text-xl font-bold flex">
     <slot />
   </h3>
 </template>
diff --git a/error.vue b/error.vue
new file mode 100644
index 0000000..b8100dc
--- /dev/null
+++ b/error.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { NuxtError } from "#app";
+import { PhArrowBendDoubleUpLeft, PhBugBeetle, PhImageBroken, PhLinkBreak } from "@phosphor-icons/vue";
+
+useHead({
+  titleTemplate: (titleChunk) => {
+    return titleChunk ? `${titleChunk} — TTTools` : "TTTools";
+  },
+  meta: [
+    { name: "charset", content: "UTF-8" },
+    { name: "viewport", content: "width=device-width, initial-scale=1.0" },
+    { name: "author", content: "Alexis Pelé" },
+    { name: "generator", content: "Nuxt" },
+    { name: "msapplication-TileColor", content: "00aba9" },
+    { name: "theme-color", content: "00aba9" },
+    { name: "og:type", content: "tabletop-tools" },
+    { name: "og:url", content: "ttt.alexcreates.fr" },
+    { name: "robots", content: "noindex, nofollow"}
+  ],
+  link: [
+    { rel: "apple-touch-icon", sizes: "76x76", href: "/apple-touch-icon.png" },
+    { rel: "icon", sizes: "32x32", type: "image/png", href: "/favicon-32x32.png" },
+    { rel: "icon", sizes: "16x16", type: "image/png", href: "/favicon-16x16.png" },
+    { rel: "manifest", href: "/site.webmanifest" },
+    { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: "#6595b4" },
+  ]
+})
+
+const props = defineProps({
+  // eslint-disable-next-line vue/require-default-prop
+  error: Object as () => NuxtError
+})
+
+const { statusCode } = props.error!
+
+let titleKey: string
+let descriptionKey: string
+let subDescriptionKey: string
+
+switch (statusCode) {
+  case 404:
+    titleKey = "error.notFound.title"
+    descriptionKey = "error.notFound.descriptionMain"
+    subDescriptionKey = "error.notFound.descriptionSub"
+    break;
+
+  case 500:
+    titleKey = "error.unknownServer.title"
+    descriptionKey = "error.unknownServer.descriptionMain"
+    subDescriptionKey = "error.unknownServer.descriptionSub"
+    break;
+
+  default:
+    titleKey = "error.default.title"
+    descriptionKey = "error.default.descriptionMain"
+    subDescriptionKey = "error.default.descriptionSub"
+    break;
+}
+</script>
+
+<template>
+  <div class="h-screen">
+    <div class="h-full grid grid-cols-[auto_1fr] dark:bg-black transition-colors">
+      <Sidebar />
+
+      <div class="wrapper shadow-body-light dark:shadow-body-dark transition-all">
+        <div class="h-full w-full grid place-items-center">
+          <Head>
+            <Title>{{ $t(titleKey) }}</Title>
+          </Head>
+
+          <div class="grid justify-items-center opacity-80">
+            <PhImageBroken v-if="statusCode === 404" size="100" class="opacity-60" />
+            <PhLinkBreak v-else-if="statusCode === 500" size="100" class="opacity-60" />
+            <PhBugBeetle v-else size="100" class="opacity-60" />
+
+            <Heading level="h0">
+              {{ $t(titleKey) }}
+            </Heading>
+
+            <div class="mt-6 md:text-lg text-center">
+              <p>{{ $t(descriptionKey) }}</p>
+              <p>{{ $t(subDescriptionKey) }}</p>
+            </div>
+
+            <UiButton variant="default" class="mt-6 gap-2" as-child>
+              <RouterLink to="/">
+                <PhArrowBendDoubleUpLeft size="24" />
+
+                {{ $t('ui.backToHome') }}
+              </RouterLink>
+            </UiButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.wrapper > * {
+  height: 100%;
+}
+</style>
diff --git a/i18n.config.ts b/i18n.config.ts
index 8ee5b1e..6aa8d35 100644
--- a/i18n.config.ts
+++ b/i18n.config.ts
@@ -8,6 +8,23 @@ export default defineI18nConfig(() => ({
         title: "Fantasy calendars for TTRPGs",
         description: "Tools for players and game masters to help them visualize fantasy worlds better.",
       },
+      error: {
+        default: {
+          title: "An error occured",
+          description: "An error occured while loading the page.",
+          descriptionSub: "Please try again later or contact the administrator !"
+        },
+        notFound: {
+          title: "Page not found",
+          description: "The page you're looking for doesn't exist.",
+          descriptionSub: "Maybe it has been deleted or moved ?"
+        },
+        unknownServer: {
+          title: "Internal server error",
+          description: "An error occured while loading the page.",
+          descriptionSub: "Please try again later or contact the administrator !"
+        },
+      },
       ui: {
         action: {
           back: "Back",
@@ -49,6 +66,7 @@ export default defineI18nConfig(() => ({
         greeting: "Connected as {user}",
         anonymousGreeting: "Preferences",
         backToProfile: "Back to profile",
+        backToHome: "Back to home",
         sidebarMenu: {
           profile: "Profile",
           appearance: "Appearance",
@@ -273,6 +291,23 @@ export default defineI18nConfig(() => ({
         title: "Calendriers fantasies pour JDR",
         description: "Outils destinés aux joueurs et maîtres de jeux pour visualiser plus facilement leurs univers.",
       },
+      error: {
+        default: {
+          title: "Une erreur est survenue",
+          descriptionMain: "Une erreur est survenue lors du chargement de la page.",
+          descriptionSub: "Merci de rééssayer plus tard ou de contacter l'administrateur !"
+        },
+        notFound: {
+          title: "Page introuvable",
+          descriptionMain: "La page que vous cherchez n'existe pas.",
+          descriptionSub: "Peut-être a t-elle été supprimée ou déplacée ?"
+        },
+        unknownServer: {
+          title: "Une erreur du serveur est survenue",
+          descriptionMain: "Une erreur est survenue lors du chargement de la page.",
+          descriptionSub: "Merci de rééssayer plus tard ou de contacter l'administrateur !"
+        },
+      },
       ui: {
         action: {
           back: "Retour",
@@ -314,6 +349,7 @@ export default defineI18nConfig(() => ({
         greeting: "Connecté en tant que {user}",
         anonymousGreeting: "Préférences",
         backToProfile: "Retour au profil",
+        backToHome: "Retourner à l'accueil",
         sidebarMenu: {
           profile: "Profil",
           appearance: "Apparence",
