From 00e81a8f5d93118e90a9c7062bea5d8d0c8e15a9 Mon Sep 17 00:00:00 2001
From: botmaster <pascal.achard@gmail.com>
Date: Wed, 14 Feb 2024 17:19:14 +0100
Subject: [PATCH] feat: Add error page

Add error page.
Error page handle 404 issue
---
 components/app/CoverComponent.vue |  4 ++--
 components/layout/TheFooter.vue   |  4 ++--
 error.vue                         | 30 +++++++++++++++++++++++++-----
 locales/en.json                   | 10 ++++++++++
 locales/fr.json                   | 10 ++++++++++
 5 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/components/app/CoverComponent.vue b/components/app/CoverComponent.vue
index 9d3a45d..14230ed 100644
--- a/components/app/CoverComponent.vue
+++ b/components/app/CoverComponent.vue
@@ -281,10 +281,10 @@ onBeforeUnmount(() => {
       </div>
     </div>
     <div class="cover__bottom-gradient" />
-    <div class="container absolute inset-x-0 bottom-4 z-40 mx-auto xl:bottom-4">
+    <div class="container absolute inset-x-0 bottom-1.5 z-40 mx-auto xl:bottom-4">
       <div class="text-center xl:ml-auto xl:w-1/2">
         <template v-if="props.scrollToTarget">
-          <button ref="iconScroll" :title="t('miscellaneous.scrollToContent')" class="inline-block" @click.prevent="$lenisInstance.scrollTo(scrollToTarget, { easing: Expo.easeInOut, lerp: 0 })">
+          <button ref="iconScroll" :title="t('miscellaneous.scrollToContent')" class="inline-block size-12" @click.prevent="$lenisInstance.scrollTo(scrollToTarget, { easing: Expo.easeInOut, lerp: 0 })">
             <Icon name="pajamas:scroll-down" class="text-xl xl:text-2xl" />
           </button>
         </template>
diff --git a/components/layout/TheFooter.vue b/components/layout/TheFooter.vue
index db7a0f0..53c26e0 100644
--- a/components/layout/TheFooter.vue
+++ b/components/layout/TheFooter.vue
@@ -28,7 +28,7 @@ const themeList = computed(() => [
           <SocialIcons :links="socialsLinks" />
         </div>
         <p class="the-footer__copyright">
-          <span class="sr-only">copyright</span>Pascal Achard <sup><Icon name="material-symbols:copyright-outline" size="0.8em" /></sup> {{ new Date().getFullYear() }}
+          © {{ new Date().getFullYear() }} Pascal Achard
         </p>
       </div>
 
@@ -59,7 +59,7 @@ const themeList = computed(() => [
   }
 
   &__copyright {
-    @apply text-muted-text text-xs mt-2 md:mt-0;
+    @apply text-xs text-body-txt opacity-80 mt-2 md:mt-0;
   }
 
   &__theme-switcher {
diff --git a/error.vue b/error.vue
index 28e66ed..d1a4a77 100644
--- a/error.vue
+++ b/error.vue
@@ -6,17 +6,37 @@ const props = defineProps({
 });
 
 const localePath = useLocalePath();
+const { t } = useI18n();
+
+function handleError() {
+  clearError({
+    redirect: localePath({ name: 'index' }),
+  });
+  // localePath({ name: 'index' })
+}
 </script>
 
 <template>
   <div>
     <NuxtLayout>
       <div class="container mx-auto mb-12 mt-8 md:mb-24 md:mt-20">
-        <h1>{{ error?.statusCode }}</h1>
-        <pre v-if="error">{{ error }}</pre>
-        <NuxtLink :to="localePath({ name: 'index' })">
-          Go back home
-        </NuxtLink>
+        <template v-if="props.error?.statusCode === 404">
+          <h1>{{ t('pages.404.title') }}</h1>
+          <p>{{ t('pages.404.sorry') }}</p>
+        </template>
+        <template v-else>
+          <h1>{{ t('pages.error.title') }}</h1>
+          <p>
+            <strong>{{ props.error?.message }}</strong>
+          </p>
+          <p>{{ t('pages.error.intro') }}.</p>
+          <p>{{ t('pages.error.sorry') }}.</p>
+          <pre v-if="props.error">{{ props.error }}</pre>
+        </template>
+
+        <a href="#" class="mt-24 inline-flex" @click.prevent="handleError">
+          {{ t('pages.404.goBackHome') }}
+        </a>
       </div>
     </NuxtLayout>
   </div>
diff --git a/locales/en.json b/locales/en.json
index 3b525db..b247636 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -26,6 +26,16 @@
     "themeSelector": "Theme selector"
   },
   "pages": {
+    "404": {
+      "goBackHome": "Go back home",
+      "sorry": "Sorry, that page doesn't exist.",
+      "title": "404!"
+    },
+    "error": {
+      "intro": "It looks like something broke.",
+      "sorry": "Sorry about that 😕",
+      "title": "Dang!"
+    },
     "lab": {
       "listeningNothing": "Listen to nothing",
       "newestFirst": "New first",
diff --git a/locales/fr.json b/locales/fr.json
index 58e7d75..60012e9 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -26,6 +26,16 @@
     "themeSelector": "Sélecteur de thème"
   },
   "pages": {
+    "404": {
+      "goBackHome": "Retour à l'accueil",
+      "sorry": "Désolé, cette page n'existe pas.",
+      "title": "404 !!!"
+    },
+    "error": {
+      "intro": "On dirait que quelque chose s'est cassé.",
+      "sorry": "Désolé 😕",
+      "title": "Oups !!!"
+    },
     "lab": {
       "listeningNothing": "Écoute rien du tout",
       "newestFirst": "Nouveaux en premier",