Improve Error Page

assets/css/style.scss

@@ -7,6 +7,10 @@ img, svg {
   position: static;
 }
 
+body {
+  @apply dark:bg-dark-900
+}
+
 * {
   @apply select-none outline-none;
 }

components/Footer.vue

@@ -16,7 +16,9 @@
             <a class="font-semibold" href="https://twitter.com/ArthurDanj" target="_blank">
               <img class="inline img" src="@/assets/img/socials/twitter.svg" alt="Twitter logo" height="20" width="20" />
               <span class="link">Twitter</span>
-            </a> {{ $t('footer.separator') }}
+            </a>
+            <br class="md:hidden"/>
+            {{ $t('footer.separator') }}
             <a class="font-semibold" href="mailto:contact@arthurdanjou.fr" target="_blank">
               <svg class="inline img" width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
@@ -24,11 +26,11 @@
               <span class="link">Mail</span>
               </a>
           </p>
+          <br class="md:hidden"/>
           <span class="inline dark:text-dark-200 text-gray-600 text-xs">
             {{ $t('footer.links_click') }}
           </span>
         </div>
-        <br class="md:hidden"/>
         <p>
           {{ $t('footer.credits') }}
           <a class="font-semibold" target="_blank" href="https://nuxtjs.org">

content/articles/fr/new-version-new-website.md

@@ -73,8 +73,6 @@ Dans cette version, j'ai utilisé plusieurs technologies :
 
 ## 5. Conclusion
 
-Pour conclure, je suis très satisfait du résultat de cette nouvelle version. 
-Je vous laisse visiter le reste du site
-
-### Informations Supplémentaires
+Pour conclure, je suis très satisfait du résultat de cette nouvelle version, de ses fonctionnalités.
+Je vous laisse visiter le reste du site et me donner votre avis !
 

content/articles/fr/test-1.md

@@ -28,6 +28,8 @@ console.log('Hello World !')
 
 Test de lien [Twitter](https://twitter.com/ArthurDanj)
 
+Lien [GitHub](https://github.com/arthurdanjou)
+
 ---
 
 Hey
@@ -36,9 +38,3 @@ __hey__
 _hey_
 ~~Hey~~
 
-```mermaid 
-graph TD
-  A --> B
-  B --> C
-  C --> A
-```

layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dark:bg-dark-900 dark:text-white font-sans">
     <Header />
-    <Nuxt class="z-10 pt-16 lg:pt-24 content"/>
+    <Nuxt class="z-10 pt-16 lg:pt-24 content" />
     <Footer />
   </div>
 </template>
@@ -10,12 +10,9 @@
 import Header from "~/components/Header";
 import Footer from "~/components/Footer";
 export default {
-  components: {Footer, Header}
+  components: {Footer, Header},
 }
 </script>
 
 <style scoped>
-.content {
-  min-height: calc(100vh - 118px);
-}
 </style>

layouts/error-2.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="dark:bg-dark-900 dark:text-white font-sans">
-    <Nuxt class="content"/>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "error-2"
-}
-</script>
-
-<style scoped>
-.content {
-  min-height: calc(100vh - 118px);
-}
-</style>

layouts/error.vue

@@ -1,23 +1,36 @@
 <template>
-  <main class="error relative">
-    <div class="w-full h-screen">
-      <img class="w-full h-full" src="~/assets/img/404.png" alt="404 Image" />
-    </div>
-    <div class="text absolute inset-1/4 w-full h-screen mb-8">
-      <div class="flex items-center justify-center h-full">
-        <div class="flex flex-col justify-center text-center">
-          <h1 class="title dark:text-white font-bold">
-            404
-          </h1>
-          <h2 class="text-4xl dark:text-white">
-            {{ $t('404.description') }}
-          </h2>
-          <p class="text-2xl dark:text-dark-100 mb-4">
-            {{ $t('404.no_page') }}
-          </p>
+  <main class="error w-full px-5 xl:px-64">
+    <div class="mt-24 w-full h-full flex items-center justify-center">
+      <div class="flex flex-col items-center md:mb-20">
+        <div class="flex">
+          <div class="h-16 w-16 mr-4">
+            <svg class="icon inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+          </div>
+          <div class="mb-12 lining-nums">
+            <div class="mb-2">
+              <p v-if="error.statusCode === 404" class="text-3xl md:text-6xl dark:text-white font-bold">
+                {{ $t('error.error').toUpperCase() }} 404
+              </p>
+              <p v-else class="text-3xl md:text-6xl dark:text-white font-bold">
+                {{ $t('error.error').toUpperCase() }} 500
+              </p>
+            </div>
+            <div class="flex flex-col">
+              <p v-if="error.statusCode === 404" class="text-xl md:text-2xl text-gray-900 dark:text-dark-100">
+                {{ $t('error.no_page') }}
+              </p>
+              <p v-else class="text-xl md:text-2xl text-gray-900 dark:text-dark-100">
+                {{ $t('error.internal') }}
+              </p>
+            </div>
+          </div>
+        </div>
+        <div>
           <nuxt-link class="home-btn" to="/">
-            <div class="py-3 px-6 font-bold border-2 border-solid border-red-500 hover:bg-red-500 duration-300 rounded">
-              {{ $t('404.back') }}
+            <div class="w-full py-4 px-8 md:py-8 md:px-16 font-bold hover:bg-red-500 duration-500 rounded">
+              {{ $t('error.back') }}
               <svg class="inline arrow-img" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
               </svg>
@@ -32,23 +45,16 @@
 <script>
 export default {
   name: "error",
-  layout: "error-2"
+  props: ['error'],
+  head: {
+    title: 'Error - Arthur Danjou'
+  }
 }
 </script>
 
 <style scoped lang="scss">
 .error {
 
-  .text {
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .title {
-    font-size: 14rem;
-  }
-
   .home-btn:hover .arrow-img {
     transform: translate(3px, 0);
   }

locales/fr-FR.ts

@@ -19,10 +19,11 @@ export default {
     copyrights: '© Copyright {date} - Tous droits réservés'
   },
 
-  404: {
-    description: 'Où suis-je ?',
+  error: {
     back: 'Revenir à l\'accueil',
-    no_page: 'La page demandée n\'existe pas'
+    no_page: 'La page demandée n\'existe pas',
+    internal: 'Erreur interne',
+    error: 'Erreur'
   },
 
   part: {

pages/blog/_slug.vue

@@ -120,8 +120,12 @@ export default {
       liked: false
     }
   },
-  async asyncData({ params, $content, app, $axios }) {
-    const post = await $content(`articles/${app.i18n.locale}/`, params.slug).fetch()
+  async asyncData({ params, $content, app, $axios, error }) {
+    const post = await $content(`articles/${app.i18n.locale}/`, params.slug)
+      .fetch()
+      .catch(() => {
+        error({ statusCode: 404, message: "Post not found" });
+      });
     const {data: likes} = await $axios.get(`posts/${params.slug}`)
     const liked = await $axios.get(`posts/is/${params.slug}`)
     return {

pages/blog/index.vue

@@ -112,9 +112,11 @@ export default {
   methods: {
     displayTags(tags) {
       const tags_label = []
-      tags.map(tag => {
-        tags_label.push(tag)
-      })
+      if (tags.length > 0) {
+        tags.map(tag => {
+          tags_label.push(tag)
+        })
+      }
       return tags_label
     },
     async fetchPostsByTag(tag) {

pages/work/_slug.vue

@@ -51,6 +51,7 @@
 
 <script>
 import WorkSkill from "~/components/WorkSkill";
+
 export default {
   components: {WorkSkill},
   head() {
@@ -63,14 +64,19 @@ export default {
       work: null
     }
   },
-  async asyncData({ params, $content }) {
-    let work
-    try {
-      work = await $content('works', params.slug).fetch()
-    } catch (e) {
-      return error({ message: 'Work not found' })
+  async asyncData({ params, $content, error }) {
+    const work = await $content('works', params.slug)
+      .fetch()
+      .catch(() => {
+        error({
+          statusCode: 404,
+          message: 'Work not found',
+        })
+      });
+    let skills = []
+    if (work) {
+      skills = await $content('skills').where({ slug: { $in: work.skills } }).fetch()
     }
-    const skills = await $content('skills').where({ slug: { $in: work.skills } }).fetch()
     return {
       work,
       skills