From 40510d69a5abe3d77ba2e75a4cada185f65a4c19 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Wed, 16 Dec 2020 15:17:24 +0100
Subject: [PATCH] Fix all little bugs

---
 components/Header.vue                         |  4 +-
 components/Post.vue                           |  7 ++-
 components/Skill.vue                          |  4 +-
 components/Work.vue                           |  4 +-
 .../articles/en/new-version-new-website.md    |  6 +-
 .../articles/fr/new-version-new-website.md    |  2 +-
 content/skills.json                           |  2 +-
 content/works.json                            | 30 +++++-----
 pages/blog/_slug.vue                          | 10 ++--
 pages/contact.vue                             | 56 +++++++++++++++++-
 pages/work/_slug.vue                          | 58 ++++++++++++++++++-
 11 files changed, 148 insertions(+), 35 deletions(-)

diff --git a/components/Header.vue b/components/Header.vue
index c5c44ae..5cc4971 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -121,7 +121,9 @@ export default {
     },
     async changeLanguage(lang) {
       this.$i18n.setLocale(lang)
-      await this.$router.push('/')
+      if (this.$router.currentRoute.fullPath.includes('blog')) {
+        await this.$nuxt.refresh()
+      }
     },
   },
   mounted() {
diff --git a/components/Post.vue b/components/Post.vue
index 72bf647..5e03cae 100644
--- a/components/Post.vue
+++ b/components/Post.vue
@@ -1,7 +1,7 @@
 <template>
   <article
-    class="border-2 border-black border-solid rounded-xl w-full h-blog p-2 flex flex-col justify-between my-5 duration-200 transform hover:scale-95"
-    :style="{ backgroundImage: require(`@/assets/img/posts/${cover}.png`) }"
+    class="post border-2 border-black border-solid rounded-xl w-full h-blog p-2 flex flex-col justify-between my-5 duration-200 transform hover:scale-95"
+    :style="{ backgroundImage: `url(${this.getBackgroundUrl})` }"
   >
     <div>
       <p
@@ -71,6 +71,9 @@ export default {
       const dateFormat = this.date.split('-')
       return dateFormat[0] + " " + this.$t('month.' + dateFormat[1]) + " " + dateFormat[2]
     },
+    getBackgroundUrl() {
+      return require(`~/assets/img/posts/${this.cover}.png`)
+    }
   }
 }
 </script>
diff --git a/components/Skill.vue b/components/Skill.vue
index 4f78289..104cdec 100644
--- a/components/Skill.vue
+++ b/components/Skill.vue
@@ -58,9 +58,9 @@ export default {
         case 'rose':
           return 'hover:bg-rose-400'
         case 'black':
-          return 'hover:bg-black-400'
+          return 'hover:bg-black'
         case 'white':
-          return 'hover:bg-white-400'
+          return 'hover:bg-white'
         case 'pink':
           return 'hover:bg-pink-400'
         case 'fuchsia':
diff --git a/components/Work.vue b/components/Work.vue
index d2014c9..cc337f8 100644
--- a/components/Work.vue
+++ b/components/Work.vue
@@ -67,9 +67,9 @@ export default {
         case 'rose':
           return 'hover:bg-rose-600'
         case 'black':
-          return 'hover:bg-black-600'
+          return 'hover:bg-black'
         case 'white':
-          return 'hover:bg-white-600'
+          return 'hover:bg-white'
         case 'pink':
           return 'hover:bg-pink-600'
         case 'fuchsia':
diff --git a/content/articles/en/new-version-new-website.md b/content/articles/en/new-version-new-website.md
index 59a996a..a06f99c 100644
--- a/content/articles/en/new-version-new-website.md
+++ b/content/articles/en/new-version-new-website.md
@@ -1,10 +1,10 @@
 ---
 slug: new-version-new-website
-title: Ouverture de la nouvelle version de mon site !
-description: Après de long mois de développement, voici la version 2 de mon site !
+title: Opening of the new version of my site!
+description: After long months of development, here is version 2 of my site!
 reading_time: 2
 tags: ["tags.dev"]
-cover: 'post-1'
+cover: post-1
 date: 13-12-2020
 background: false
 ---
diff --git a/content/articles/fr/new-version-new-website.md b/content/articles/fr/new-version-new-website.md
index 9880d8b..2fa692e 100644
--- a/content/articles/fr/new-version-new-website.md
+++ b/content/articles/fr/new-version-new-website.md
@@ -4,7 +4,7 @@ title: Ouverture de la nouvelle version de mon site !
 description: Après de long mois de développement, voici la version 2 de mon site !
 reading_time: 2
 tags: ["tags.dev"]
-cover: 'post-1'
+cover: post-1
 date: 13-12-2020
 background: false
 ---
diff --git a/content/skills.json b/content/skills.json
index 5195202..386c9de 100644
--- a/content/skills.json
+++ b/content/skills.json
@@ -43,7 +43,7 @@
   },
   {
     "title": "AdonisJs",
-    "color": "black",
+    "color": "lime",
     "cover": "AdonisJs",
     "slug": "adonisjs"
   },
diff --git a/content/works.json b/content/works.json
index 338ea17..8adcc35 100644
--- a/content/works.json
+++ b/content/works.json
@@ -1,11 +1,25 @@
 [
+  {
+    "slug": "erisium",
+    "title": "Erisium",
+    "description": "works.erisium",
+    "url": "https://erisium.com",
+    "cover": "erisium",
+    "color": "fuchsia",
+    "skills": [
+      "java",
+      "git",
+      "redis",
+      "mariadb"
+    ]
+  },
   {
     "slug": "artsite",
     "title": "ArtSite",
     "description": "works.artsite",
     "url": "https://arthurdanjou.fr",
     "cover": "artsite",
-    "color": "gray",
+    "color": "trueGray",
     "skills": [
       "typescript",
       "nuxtjs",
@@ -35,20 +49,6 @@
       "mariadb"
     ]
   },
-  {
-    "slug": "erisium",
-    "title": "Erisium",
-    "description": "works.erisium",
-    "url": "https://erisium.com",
-    "cover": "erisium",
-    "color": "fuchsia",
-    "skills": [
-      "java",
-      "git",
-      "redis",
-      "mariadb"
-    ]
-  },
   {
     "slug": "artclick",
     "title": "ArtClick",
diff --git a/pages/blog/_slug.vue b/pages/blog/_slug.vue
index 3ec3934..73511b4 100644
--- a/pages/blog/_slug.vue
+++ b/pages/blog/_slug.vue
@@ -37,7 +37,7 @@
       </div>
       <div class="w-full">
         <div class="flex justify-center w-full h-auto">
-          <img class="w-full h-auto" :src="'http://localhost:5555/files/'+post.cover" alt="Cover Img" />
+          <img class="w-full h-auto" :src="require(`@/assets/img/posts/${post.cover}.png`)" alt="Cover Img" />
         </div>
       </div>
       <nuxt-content
@@ -126,12 +126,12 @@ export default {
       .catch(() => {
         error({ statusCode: 404, message: "Post not found" });
       });
-    const {data: likes} = await $axios.get(`posts/${params.slug}`)
-    const liked = 0 // await $axios.get(`posts/is/${params.slug}`)
+    //const {data: likes} = await $axios.get(`posts/${params.slug}`)
+    //const liked = 0 await $axios.get(`posts/is/${params.slug}`)
     return {
       post,
-      likes,
-      liked: 0//liked.data !== 0
+      likes: 0,
+      liked: true//liked.data !== 0
     }
   },
   methods: {
diff --git a/pages/contact.vue b/pages/contact.vue
index 70b11d1..38d946e 100644
--- a/pages/contact.vue
+++ b/pages/contact.vue
@@ -83,7 +83,7 @@
         {{ $t('contact.available.start') }}
         <span
           class="py-1 px-2 font-bold rounded-xl"
-          :class="'bg-' +color+ '-200 text-' +color+ '-500'"
+          :class="getColor"
         >
           {{ $t('hiring.status.' + status) }}
         </span>
@@ -138,6 +138,60 @@ export default {
           }, 5000)
         })
     }
+  },
+  computed: {
+    getColor() {
+      switch (this.color) {
+        case 'red':
+          return 'bg-red-200 text-red-500'
+        case 'orange':
+          return 'bg-orange-200 text-orange-500'
+        case 'purple':
+          return 'bg-purple-200 text-purple-500'
+        case 'blue':
+          return 'bg-blue-200 text-blue-500'
+        case 'green':
+          return 'bg-green-200 text-green-500'
+        case 'yellow':
+          return 'bg-yellow-200 text-yellow-500'
+        case 'cyan':
+          return 'bg-cyan-200 text-cyan-500'
+        case 'teal':
+          return 'bg-teal-200 text-teal-500'
+        case 'amber':
+          return 'bg-amber-200 text-amber-500'
+        case 'blueGray':
+          return 'bg-blueGray-200 text-blueGray-500'
+        case 'emerald':
+          return 'bg-emerald-200 text-emerald-500'
+        case 'lightBlue':
+          return 'bg-lightBlue-200 text-lightBlue-500'
+        case 'lime':
+          return 'bg-lime-200 text-lime-500'
+        case 'rose':
+          return 'bg-rose-200 text-rose-500'
+        case 'black':
+          return 'bg-black text-black'
+        case 'white':
+          return 'bg-white text-white'
+        case 'pink':
+          return 'bg-pink-200 text-pink-500'
+        case 'fuchsia':
+          return 'bg-fuchsia-200 text-fuchsia-500'
+        case 'violet':
+          return 'bg-violet-200 text-violet-500'
+        case 'indigo':
+          return 'bg-indigo-200 text-indigo-500'
+        case 'warmGray':
+          return 'bg-warmGray-200 text-warmGray-500'
+        case 'trueGray':
+          return 'bg-trueGray-200 text-trueGray-500'
+        case 'gray':
+          return 'bg-gray-200 text-gray-500'
+        case 'coolGray':
+          return 'bg-coolGray-200 text-coolGray-500'
+      }
+    }
   }
 }
 </script>
diff --git a/pages/work/_slug.vue b/pages/work/_slug.vue
index 4b89dfa..bd726f2 100644
--- a/pages/work/_slug.vue
+++ b/pages/work/_slug.vue
@@ -16,10 +16,10 @@
             </nuxt-link>
           </div>
         </div>
-        <img class="w-4/5 rounded-xl" :src="require(`@/assets/img/works/${work.cover}.png`)" alt="Project Img" />
+        <img class="w-72 rounded-xl" :src="require(`@/assets/img/works/${work.cover}.png`)" alt="Project Img" />
         <a
           class="mt-4 py-3 px-6 rounded-full cursor-pointer duration-300 mb-10 lg:mb-0"
-          :class="'bg-' + work.color + '-400 hover:bg-' + work.color + '-600'"
+          :class="getColor"
           :href="work.url"
         >{{work.url.replace('https://', '').replace('http://', '')}}</a>
       </div>
@@ -81,6 +81,60 @@ export default {
       work,
       skills
     }
+  },
+  computed: {
+    getColor() {
+      switch (this.work.color) {
+        case 'red':
+          return 'bg-red-400 hover:bg-red-600'
+        case 'orange':
+          return 'bg-orange-400 hover:bg-orange-600'
+        case 'purple':
+          return 'bg-purple-400 hover:bg-purple-600'
+        case 'blue':
+          return 'bg-blue-400 hover:bg-blue-600'
+        case 'green':
+          return 'bg-green-400 hover:bg-green-600'
+        case 'yellow':
+          return 'bg-yellow-400 hover:bg-yellow-600'
+        case 'cyan':
+          return 'bg-cyan-400 hover:bg-cyan-600'
+        case 'teal':
+          return 'bg-teal-400 hover:bg-teal-600'
+        case 'amber':
+          return 'bg-amber-400 hover:bg-amber-600'
+        case 'blueGray':
+          return 'bg-blueGray-400 hover:bg-blueGray-600'
+        case 'emerald':
+          return 'bg-emerald-400 hover:bg-emerald-600'
+        case 'lightBlue':
+          return 'bg-lightBlue-400 hover:bg-lightBlue-600'
+        case 'lime':
+          return 'bg-lime-400 hover:bg-lime-600'
+        case 'rose':
+          return 'bg-rose-400 hover:bg-rose-600'
+        case 'black':
+          return 'bg-black hover:bg-black'
+        case 'white':
+          return 'bg-white hover:bg-white'
+        case 'pink':
+          return 'bg-pink-400 hover:bg-pink-600'
+        case 'fuchsia':
+          return 'bg-fuchsia-400 hover:bg-fuchsia-600'
+        case 'violet':
+          return 'bg-violet-400 hover:bg-violet-600'
+        case 'indigo':
+          return 'bg-indigo-400 hover:bg-indigo-600'
+        case 'warmGray':
+          return 'bg-warmGray-400 hover:bg-warmGray-600'
+        case 'trueGray':
+          return 'bg-trueGray-400 hover:bg-trueGray-600'
+        case 'gray':
+          return 'bg-gray-400 hover:bg-gray-600'
+        case 'coolGray':
+          return 'bg-coolGray-400 hover:bg-coolGray-600'
+      }
+    }
   }
 }
 </script>