Merge pull request #93

feature/no-ref/add-404-page

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>

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 {

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>

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",

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",