Working

settings/Modules.ts

@@ -2,11 +2,7 @@ import {NuxtOptionsModule} from "@nuxt/types/config/module";
 
 const axios = {
   credentials: true,
-  baseURL: 'https://api.arthurdanjou.fr',
-  headers: {
-    'Access-Control-Allow-Origin': '*',
-    'Content-Type': 'application/json'
-  }
+  baseURL: 'https://api.arthurdanjou.fr'
 }
 
 const i18n = {
@@ -35,7 +31,6 @@ const i18n = {
 }
 
 const content = {
-  apiPrefix: 'api',
   nestedProperties: ['skills.slug'],
   markdown: {
     prism: {

src/components/GuestBookForm.vue

@@ -60,9 +60,12 @@ export default defineComponent({
           'Content-Type': 'application/json'
         },
         proxy: {
-          host: 'https://api.arthurdanjou.fr',
-          port: 80
-        }
+          protocol: 'https',
+          host: '127.0.0.1',
+          port: 80,
+        },
+      }).then((response) => {
+        console.log(response.headers, response.data, response.status, response.request)
       })
     }
 
@@ -89,7 +92,7 @@ export default defineComponent({
     const form = ref<GuestbookForm>({} as GuestbookForm)
 
     const handleForm = async () => {
-      const response = await $axios.post('/guestbook', {
+      const response = await $axios.post('/api/guestbook', {
         message: form.value.message
       },  {
         headers: {

src/components/icons/HeartIcon.vue

@@ -1,8 +1,14 @@
 <template>
-  <svg class="inline" width="1em" height="1em" viewBox="0 0 24 24" focusable="false">
+  <svg v-if="liked" class="icon inline" width="1em" height="1em" viewBox="0 0 256 256" focusable="false">
     <path
-      d="M12.1 18.55l-.1.1l-.11-.1C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5c1.54 0 3.04 1 3.57 2.36h1.86C13.46 6 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5c0 2.89-3.14 5.74-7.9 10.05M16.5 3c-1.74 0-3.41.81-4.5 2.08C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.41 2 8.5c0 3.77 3.4 6.86 8.55 11.53L12 21.35l1.45-1.32C18.6 15.36 22 12.27 22 8.5C22 5.41 19.58 3 16.5 3z"
-      :class="liked ? 'fill-heart': 'fill-current'"
+      d="M220.346 136.508l-81.032 81.031a16.013 16.013 0 0 1-22.625 0L33.58 134.43a59.974 59.974 0 0 1 2.344-87.07c23.281-21.015 61.25-19.054 84.578 4.297l7.5 7.492l9.578-9.578a60.698 60.698 0 0 1 43.984-17.554a59.55 59.55 0 0 1 43.063 19.89c20.984 23.297 19.062 61.25-4.281 84.602z"
+      class="fill-heart"
+    />
+  </svg>
+  <svg v-else class="icon inline" width="1em" height="1em" viewBox="0 0 256 256" focusable="false">
+    <path
+      d="M128 220.218a13.957 13.957 0 0 1-9.9-4.093l-83.112-83.113a58 58 0 0 1 2.257-84.166A56.049 56.049 0 0 1 78.826 34.79a62.72 62.72 0 0 1 40.266 18.28L128 61.975l10.988-10.988a58.003 58.003 0 0 1 84.166 2.257a56.05 56.05 0 0 1 14.058 41.581a62.725 62.725 0 0 1-18.28 40.267L137.9 216.125a13.96 13.96 0 0 1-9.899 4.093zm5.657-8.336zM74.985 46.734a44.094 44.094 0 0 0-29.71 11.03a46.003 46.003 0 0 0-1.802 66.763l83.112 83.113a2.005 2.005 0 0 0 2.83 0l81.032-81.033c18.168-18.168 19.868-47.476 3.79-65.332a46.003 46.003 0 0 0-66.764-1.802l-15.23 15.23a5.999 5.999 0 0 1-8.485 0l-13.15-13.15a50.6 50.6 0 0 0-35.623-14.82z"
+      fill="currentColor"
     />
   </svg>
 </template>
@@ -18,3 +24,9 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.icon {
+  transform: translate(0);
+}
+</style>

src/pages/blog/_slug.vue

@@ -51,26 +51,26 @@
         <div class="flex items-center mb-2 md:mb-0">
           <div
             @click="handleLike"
-            class="end-blog flex flex-row justify-center items-center cursor-pointer duration-300 text-lg p-1 border-solid border mr-2"
+            class="icon-hover flex flex-row justify-center items-center cursor-pointer duration-300 text-lg p-1 border-solid border mr-2"
             :class="liked ? 'border-red-500 dark:border-red-500 hover:border-gray-400 dark:hover:border-dark-200' : 'border-gray-400 dark:border-dark-200 hover:border-red-500 dark:hover:border-red-500'"
           >
             <div class="mr-2 lining-nums leading-3">
               {{ likes }}
             </div>
-            <div class="icon-hover inline leading-6" :class="{'heartbeat': liked}">
+            <div class="inline leading-6" :class="{'animate-pulse heartbeat': liked}">
               <HeartIcon :liked="liked"/>
             </div>
           </div>
           <a
             target="_blank"
             :href="'https://twitter.com/intent/tweet?url=https%3A%2F%2Farthurdanjou.fr%2Fblog%2F' + this.post.slug + '&text=' + $t('blog.tweet') + ' ' + post.title"
-            class="mr-2 end-blog cursor-pointer duration-300 text-2xl p-1 border-solid border border-gray-400 dark:border-dark-200 hover:border-cyan-500 dark:hover:border-cyan-400 flex justify-center items-center"
+            class="mr-2 icon-hover cursor-pointer duration-300 text-2xl p-1 border-solid border border-gray-300 dark:border-dark-200 hover:border-cyan-500 dark:hover:border-cyan-400 flex justify-center items-center"
           >
             <TwitterBlogIcon />
           </a>
           <div
             @click="scrollToTop"
-            class="mr-2 end-blog cursor-pointer duration-300 text-2xl p-1 border-solid border border-gray-400 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
+            class="mr-2 icon-hover cursor-pointer duration-300 text-2xl p-1 border-solid border border-gray-300 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
           >
             <ArrowUpIcon />
           </div>
@@ -78,13 +78,13 @@
         <div class="flex items-center">
           <nuxt-link
             to="/contact"
-            class="mr-2 end-blog cursor-pointer duration-300 text-2xl p-1 border-solid border border-gray-400 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
+            class="mr-2 icon-hover cursor-pointer duration-300 text-2xl p-1 border-solid border border-gray-300 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
           >
             <BookmarkIcon />
           </nuxt-link>
           <div
             @click="copyToClipboard"
-            class="nd-blog cursor-pointer duration-300 text-2xl p-1 border-solid border border-gray-400 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
+            class="icon-hover cursor-pointer duration-300 text-2xl p-1 border-solid border border-gray-300 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
           >
             <CopyIcon />
           </div>
@@ -234,28 +234,12 @@ export default defineComponent({
     transform: translate(3px, -1px);
   }
 
-  .end-blog .icon-hover {
+  .icon-hover svg {
     @apply duration-300
   }
 
-  .end-blog:hover .icon-hover {
-    @apply transform scale-105;
-  }
-
-  .heartbeat {
-    animation: 3s ease heartbeat infinite;
-  }
-}
-
-@keyframes heartbeat {
-  0% {
-    @apply transform scale-100;
-  }
-  50% {
-    @apply transform scale-75;
-  }
-  100% {
-    @apply transform scale-100;
+  .icon-hover:hover svg {
+    transform: scale(1.05);
   }
 }
 </style>

src/pages/guestbook.vue

@@ -34,7 +34,7 @@ export default defineComponent({
     const guestbook_messages = ref([])
 
     useAsync(async () => {
-      await $axios.get('guestbook', {
+      await $axios.get('/guestbook', {
         headers: {
           'Authorization': `Bearer ${process.env.API_TOKEN}`
         }