fix some detail

assets/css/style.scss

@@ -10,16 +10,3 @@ img, svg {
 * {
   @apply select-none outline-none;
 }
-
-.nuxt-content {
-
-  h1, h2, h3, h4, h5, h6 {
-    @apply text-black dark:text-white
-  }
-
-  p {
-    @apply text-gray-900 dark:text-gray-900;
-  }
-
-}
-

components/HomeLink.vue

@@ -8,7 +8,7 @@
           {{ $t(title) }}
           <slot />
         </h1>
-        <p class="w-5/6 text-gray-900 dark:text-dark-900 text-justify">{{ $t(description) }}</p>
+        <p class="w-5/6 text-gray-900 dark:text-dark-900 text-justify duration-300">{{ $t(description) }}</p>
       </div>
       <div class="mr-10 arrow duration-300">
         <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -44,7 +44,13 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.home-link:hover .arrow {
-  transform: translateX(15px);
+.home-link:hover {
+  p {
+    @apply dark:text-dark-200;
+  }
+
+  .arrow {
+    transform: translateX(15px);
+  }
 }
 </style>

components/PageTitle.vue

@@ -1,6 +1,6 @@
 <template>
   <h1
-    class="mt-16 md:mt-32 font-bold text-4xl mr-2 inline mb-4 border-b-2 border-solid"
+    class="mt-16 md:mt-32 font-bold text-2xl md:text-4xl mr-2 inline mb-4 border-b-2 border-solid"
     :class="' border-'+ color +'-400'"
   >
     {{ $t(title) }}

content/experiences.json

@@ -18,7 +18,7 @@
   {
     "slug": "idemia",
     "title": "experiences.idemia",
-    "company": "Idemia",
+    "company": "Idemia, Courbevoie",
     "location": "France",
     "begin_date": "06-2019",
     "end_date": "06-2019"
@@ -26,7 +26,7 @@
   {
     "slug": "la-salle-a-manger",
     "title": "experiences.lsam",
-    "company": "La Salle à manger",
+    "company": "La Salle à manger, Boulogne Billancourt",
     "location": "France",
     "begin_date": "04-2018",
     "end_date": "04-2018"

pages/blog/_slug.vue

@@ -45,7 +45,7 @@
       </p>
       <nuxt-content
         :document="post"
-        class="prose prose-sm sm:prose lg:prose-lg xl:prose-2xl my-6 md:my-12"
+        class="my-6 md:my-12 prose prose-sm sm:prose lg:prose-lg xl:prose-xl prose-black dark:prose-dark-900"
       />
       <p class="mb-3">
         {{ $t('blog.read.thanks') }}
@@ -105,12 +105,14 @@ export default {
       liked: false
     }
   },
-  async asyncData({ params, $content, app }) {
+  async asyncData({ params, $content, app, $axios }) {
     const post = await $content(`articles/${app.i18n.locale}/`, params.slug).fetch()
-    const liked = false
+    const {data: likes} = await $axios.get(`posts/${params.slug}`)
+    const liked = await $axios.get(`posts/is/${params.slug}`)
     return {
       post,
-      liked: liked
+      likes,
+      liked: liked.data !== 0
     }
   },
   methods: {
@@ -123,13 +125,13 @@ export default {
     },
     async handleLike() {
       if (this.liked) {
-        const {data} = await this.$axios.get('/post/' + this.post.slug  + '/unlike')
+        const {data} = await this.$axios.post(`posts/${this.post.slug}/unlike`)
         if (data.code === 200) {
           this.liked = false
           this.likes = data.post.likes
         }
       } else {
-        const {data} = await this.$axios.get('/post/' + this.post.slug  + '/like')
+        const {data} = await this.$axios.post(`posts/${this.post.slug}/like`)
         if (data.code === 200) {
           this.liked = true
           this.likes = data.post.likes

tailwind.config.js

@@ -9,7 +9,7 @@ module.exports = {
     './nuxt.config.{js,ts}',
   ],
   presets: [],
-  darkMode: 'class', // or 'media' or 'class'
+  darkMode: 'class',
   theme: {
     screens: {
       sm: '640px',
@@ -831,6 +831,7 @@ module.exports = {
     placeholderOpacity: ['responsive', 'focus'],
     pointerEvents: ['responsive'],
     position: ['responsive'],
+    prose: ['dark'],
     resize: ['responsive'],
     ringColor: ['responsive', 'dark', 'focus-within', 'focus'],
     ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],