Working

src/components/GuestBookLogin.vue

@@ -0,0 +1,53 @@
+<template>
+  <section class="p-6 border border-indigo-300 dark:border-indigo-700 rounded-lg text-justify">
+    <h1 class="text-black font-bold dark:text-white text-2xl">{{ $t('guestbook.signin') }}</h1>
+    <h3 class="text-gray-500 dark:text-gray-400">{{ $t('guestbook.share') }}</h3>
+    <div class="flex space-x-4 my-3">
+      <div @click="loginWithGoogle" class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
+        <GoogleIcon />
+      </div>
+      <div @click="loginWithGithub" class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
+        <GithubIcon />
+      </div>
+      <div @click="loginWithTwitter" class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
+        <TwitterIcon />
+      </div>
+    </div>
+    <p class="text-sm text-gray-700 dark:text-gray-300">{{ $t('guestbook.infos') }}</p>
+  </section>
+</template>
+
+<script lang="ts">
+import {defineComponent, useContext} from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  name: "GuestBookLogin",
+  setup() {
+    const { $axios } = useContext()
+
+    const loginWithGithub = () => {
+      return $axios.get('/auth/github').then((response) => {
+        console.log(response)
+      })
+    }
+
+    const loginWithGoogle = () => {
+
+    }
+
+    const loginWithTwitter = () => {
+
+    }
+
+    return  {
+      loginWithGithub,
+      loginWithTwitter,
+      loginWithGoogle
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

src/components/GuestbookMessage.vue

@@ -1,11 +1,28 @@
 <template>
-  <div>
+  <div class="my-6">
-
+    <div class="text-justify leading-6">
+      {{ message }}
+    </div>
+    <div class="flex mt-3">
+      <div class="text-gray-600">
+        {{ author }}
+      </div>
+      <div class="text-gray-200 px-3">/</div>
+      <div class="text-gray-400 lining-nums">
+        {{ formatDateAndTime }}
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import {defineComponent} from "@nuxtjs/composition-api";
+import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
+
+interface GuestBookMessageProps {
+  author: string,
+  message: string,
+  date: string
+}
 
 export default defineComponent({
   name: "GuestbookMessage",
@@ -22,10 +39,20 @@ export default defineComponent({
       type: String,
       default: "Guestbook Date"
     }
+  },
+  setup(props: GuestBookMessageProps) {
+    const {i18n} = useContext()
+
+    const formatDateAndTime = computed(() => {
+      const date = new Date(props.date)
+      const month = date.getMonth().toString().startsWith('0') ? date.getMonth() : `0${date.getMonth()}`
+      const minutes = date.getMinutes().toString().startsWith('0') ? date.getMinutes() : `0${date.getMinutes()}`
+      return `${date.getDate()} ${i18n.t(`month.${month}`)} ${date.getFullYear()} at ${date.getHours()}:${minutes}`
+    })
+
+    return {
+      formatDateAndTime
+    }
   }
 })
 </script>
-
-<style scoped>
-
-</style>

src/components/Header.vue

@@ -1,83 +1,77 @@
 <template>
-  <header class="dark:bg-black dark:text-white fixed z-50 top-0 left-0 bg-white w-full duration-400" :class="scrollPosition > 50 ? ' shadow-md dark:shadow-white h-16 lg:h-20' : 'h-20 lg:h-24'">
+  <header class="dark:bg-black dark:text-white fixed z-50 top-0 left-0 bg-white w-full duration-400"
+          :class="scrollPosition > 50 ? ' shadow-md dark:shadow-white h-16 lg:h-20' : 'h-20 lg:h-24'">
     <div class="header-container z-index-50 flex justify-between items-center h-full px-5 xl:px-32">
       <nuxt-link to="/">
-        <img src="~/assets/images/logo-header.png" alt="Logo Circle" class="h-10 left cursor-pointer duration-500" />
+        <img src="~/assets/images/logo-header.png" alt="Logo Circle" class="h-10 left cursor-pointer duration-500"/>
       </nuxt-link>
       <nav class="right">
         <div class="flex flex-col md:flex-row items-center">
           <ul class="flex text-lg">
             <nuxt-link class="hidden md:inline-block" to="/about">
-              <li class="nav-link">
+              <li class="nav-link text-gray-500 dark:text-gray-400" :class="{'text-black dark:text-white': isWindow('/about')}">
                 {{ $t('header.about') }}
               </li>
             </nuxt-link>
             <nuxt-link class="hidden md:inline-block" to="/blog">
-              <li class="nav-link">
+              <li class="nav-link text-gray-500 dark:text-gray-400" :class="{'text-black dark:text-white': isWindow('/blog')}">
                 {{ $t('header.blog') }}
               </li>
             </nuxt-link>
-            <nuxt-link class="hidden md:inline-block" to="/env">
-              <li class="nav-link">
-                {{ $t('header.env') }}
-              </li>
-            </nuxt-link>
             <nuxt-link class="hidden md:inline-block" to="/projects">
-              <li class="nav-link">
+              <li class="nav-link text-gray-500 dark:text-gray-400" :class="{'text-black dark:text-white': isWindow('/projects')}">
                 {{ $t('header.projects') }}
               </li>
             </nuxt-link>
             <nuxt-link class="hidden md:inline-block" to="/contact">
-              <li class="nav-link">
+              <li class="nav-link text-gray-500 dark:text-gray-400" :class="{'text-black dark:text-white': isWindow('/projects')}">
                 {{ $t('header.contact') }}
               </li>
             </nuxt-link>
           </ul>
         </div>
-        <ul class="dark:text-white dark:bg-black text-sm z-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
+        <ul
-          <nuxt-link to="/" class="w-1/6 nav-link-mobile">
+          class="dark:text-white dark:bg-black text-sm z-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
+          <nuxt-link to="/" class="w-1/5">
             <li class="h-full w-full font-medium flex flex-col items-center justify-center">
-              <HomeIcon :active="true" />
+              <HomeIcon :active="isWindow('')"/>
             </li>
           </nuxt-link>
-          <nuxt-link to="/about" class="w-1/6 nav-link-mobile">
+          <nuxt-link to="/about" class="w-1/5">
             <li class="font-medium flex flex-col items-center justify-center">
-              <UserIcon :active="false" />
+              <UserIcon :active="isWindow('/about')"/>
             </li>
           </nuxt-link>
-          <nuxt-link to="/blog" class="w-1/6 nav-link-mobile blog">
+          <nuxt-link to="/blog" class="w-1/5">
             <li class="font-medium flex flex-col items-center justify-center">
-              <BookIcon />
+              <BookIcon :active="isWindow('/blog')"/>
             </li>
           </nuxt-link>
-          <nuxt-link to="/env" class="w-1/6 nav-link-mobile">
+          <nuxt-link to="/projects" class="w-1/5">
             <li class="font-medium flex flex-col items-center justify-center">
-              <ComputerIcon />
+              <LightbulbIcon :active="isWindow('/projects')"/>
             </li>
           </nuxt-link>
-          <nuxt-link to="/projects" class="w-1/6 nav-link-mobile">
+          <nuxt-link to="/contact" class="w-1/5">
             <li class="font-medium flex flex-col items-center justify-center">
-              <LightbulbIcon />
+              <ContactIcon :active="isWindow('/contact')"/>
             </li>
           </nuxt-link>
-          <nuxt-link to="/contact" class="w-1/6 nav-link-mobile">
-              <li class="font-medium flex flex-col items-center justify-center">
-                <ContactIcon />
-              </li>
-          </nuxt-link>
         </ul>
       </nav>
       <div>
         <ul class="flex items-center">
-          <li @click="changeLanguage()" class="mx-1 h-9 w-9 cursor-pointer flex items-center justify-center p-1.5 rounded-xl hover:bg-gray-300 duration-200 dark:hover:bg-dark-400">
+          <li @click="changeLanguage()"
-            <TranslateIcon />
+              class="mx-1 h-9 w-9 cursor-pointer flex items-center justify-center p-1.5 rounded-xl hover:bg-gray-300 duration-200 dark:hover:bg-dark-400">
+            <TranslateIcon/>
           </li>
-          <li @click="changeColorMode()" class="mx-1 h-9 w-9 cursor-pointer flex items-center p-1.5 rounded-xl hover:bg-gray-300 dark:hover:bg-dark-400 duration-200">
+          <li @click="changeColorMode()"
+              class="mx-1 h-9 w-9 cursor-pointer flex items-center p-1.5 rounded-xl hover:bg-gray-300 dark:hover:bg-dark-400 duration-200">
             <div v-if="this.$colorMode.preference === 'light'">
-              <MoonIcon />
+              <MoonIcon/>
             </div>
             <div v-else>
-              <SunIcon />
+              <SunIcon/>
             </div>
           </li>
         </ul>
@@ -87,7 +81,16 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, onMounted, onUnmounted, ref, useAsync, useContext, useRouter} from "@nuxtjs/composition-api";
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  ref,
+  useAsync,
+  useContext,
+  useRouter, watch
+} from "@nuxtjs/composition-api";
 
 export default defineComponent({
   name: "Header",
@@ -119,11 +122,17 @@ export default defineComponent({
       }
     })
 
+    const isWindow = (loc: string) => {
+      if (loc === '') return $router.currentRoute.path === "/"
+      else return $router.currentRoute.path.includes(loc)
+    }
+
     return {
       scrollPosition,
       changeColorMode,
       updateScroll,
-      changeLanguage
+      changeLanguage,
+      isWindow
     }
   }
 })
@@ -131,15 +140,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .nav-link {
-  @apply text-gray-500 dark:text-gray-400 hover:dark:text-white font-medium hover:text-black mx-4 cursor-pointer duration-300
+  @apply hover:dark:text-white font-medium hover:text-black mx-4 cursor-pointer duration-300
-}
-
-.nav-link-mobile {
-  @apply text-gray-500 dark:text-gray-400 hover:dark:text-white hover:text-black duration-300
-}
-
-.nuxt-link-exact-active {
-  @apply text-black dark:text-white;
 }
 
 .navbar-bottom-items li {

src/components/icons/BookIcon.vue

@@ -1,5 +1,11 @@
 <template>
-  <svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
+  <svg v-if="active" class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
+    <path
+      d="M21 4H7a2 2 0 1 0 0 4h14v13a1 1 0 0 1-1 1H7a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h13a1 1 0 0 1 1 1v1zm-1 3H7a1 1 0 1 1 0-2h13v2z"
+      fill="currentColor"
+    />
+  </svg>
+  <svg v-else class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
     <path
       d="M21 4H7a2 2 0 1 0 0 4h14v13a1 1 0 0 1-1 1H7a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h13a1 1 0 0 1 1 1v1zM5 18a2 2 0 0 0 2 2h12V10H7a3.982 3.982 0 0 1-2-.535V18zM20 7H7a1 1 0 1 1 0-2h13v2z"
       fill="currentColor"

src/components/icons/ComputerIcon.vue

@@ -1,20 +0,0 @@
-<template>
-  <svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
-    <path
-      d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"
-      fill="currentColor"
-    />
-  </svg>
-</template>
-
-<script lang="ts">
-export default {
-  name: "ComputerIcon",
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    }
-  }
-}
-</script>

src/components/icons/ContactIcon.vue

@@ -1,8 +1,16 @@
 <template>
-  <svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
+  <svg v-if="active" class="inline" width="2.5em" height="2.5em" viewBox="0 0 20 20" focusable="false">
     <path
-      d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-1 14H5c-.55 0-1-.45-1-1V8l6.94 4.34c.65.41 1.47.41 2.12 0L20 8v9c0 .55-.45 1-1 1zm-7-7L4 6h16l-8 5z"
       fill="currentColor"
+      fill-rule="evenodd"
+      d="M7.172 11.334l2.83 1.935l2.728-1.882l6.115 6.033c-.161.052-.333.08-.512.08H1.667c-.22 0-.43-.043-.623-.12l6.128-6.046zM20 6.376v9.457c0 .247-.054.481-.15.692l-5.994-5.914L20 6.376zM0 6.429l6.042 4.132l-5.936 5.858A1.663 1.663 0 0 1 0 15.833V6.43zM18.333 2.5c.92 0 1.667.746 1.667 1.667v.586L9.998 11.648L0 4.81v-.643C0 3.247.746 2.5 1.667 2.5h16.666z"
+    />
+  </svg>
+  <svg v-else class="inline" width="2.5em" height="2.5em" viewBox="0 0 20 20" focusable="false">
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M18.333 2.5c.92 0 1.667.746 1.667 1.667v11.666c0 .92-.746 1.667-1.667 1.667H1.667C.747 17.5 0 16.754 0 15.833V4.167C0 3.247.746 2.5 1.667 2.5h16.666zM7.168 11.328l-4.91 4.852h15.325l-4.857-4.802L10 13.265l-2.832-1.937zM18.64 7.292l-4.796 3.316l4.796 4.736V7.292zm-17.279.061v7.836l4.686-4.631l-4.686-3.205zm16.956-3.532H1.698a.358.358 0 0 0-.25.086a.26.26 0 0 0-.085.222v1.62L10 11.656l8.644-5.965V4.199c.001-.134-.03-.231-.092-.292a.306.306 0 0 0-.234-.086z"
     />
   </svg>
 </template>

src/components/icons/HomeIcon.vue

@@ -1,9 +1,14 @@
 <template>
-  <svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
+  <svg v-if="active" class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
+    <path
+      d="M15 22.065v-5a3 3 0 0 0-6 0v5H4a2 2 0 0 1-2-2V9.197a2 2 0 0 1 .971-1.715l8-4.8a2 2 0 0 1 2.058 0l8 4.8A2 2 0 0 1 22 9.197v10.868a2 2 0 0 1-2 2h-5z"
+      fill="currentColor"
+    />
+  </svg>
+  <svg v-else class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
     <path
       d="M20 20V9.132l-8-4.8l-8 4.8V20h4v-2.75a4 4 0 1 1 8 0V20h4zm-6 2v-4.75a2 2 0 1 0-4 0V22H4a2 2 0 0 1-2-2V9.132a2 2 0 0 1 .971-1.715l8-4.8a2 2 0 0 1 2.058 0l8 4.8A2 2 0 0 1 22 9.132V20a2 2 0 0 1-2 2h-6z"
-      stroke="currentColor"
+      fill="currentColor"
-      :class="{active: 'fill-black dark:fill-white'}"
     />
   </svg>
 </template>

src/components/icons/LightbulbIcon.vue

@@ -1,9 +1,15 @@
 <template>
-  <svg class="inline" width="1.5em" height="2.5em" viewBox="0 0 352 512" focusable="false">
+  <svg v-if="active" class="inline" width="2.5em" height="2.5em" viewBox="0 0 256 256" focusable="false">
     <path
-      d="M176 80c-52.94 0-96 43.06-96 96c0 8.84 7.16 16 16 16s16-7.16 16-16c0-35.3 28.72-64 64-64c8.84 0 16-7.16 16-16s-7.16-16-16-16zM96.06 459.17c0 3.15.93 6.22 2.68 8.84l24.51 36.84c2.97 4.46 7.97 7.14 13.32 7.14h78.85c5.36 0 10.36-2.68 13.32-7.14l24.51-36.84c1.74-2.62 2.67-5.7 2.68-8.84l.05-43.18H96.02l.04 43.18zM176 0C73.72 0 0 82.97 0 176c0 44.37 16.45 84.85 43.56 115.78c16.64 18.99 42.74 58.8 52.42 92.16v.06h48v-.12c-.01-4.77-.72-9.51-2.15-14.07c-5.59-17.81-22.82-64.77-62.17-109.67c-20.54-23.43-31.52-53.15-31.61-84.14c-.2-73.64 59.67-128 127.95-128c70.58 0 128 57.42 128 128c0 30.97-11.24 60.85-31.65 84.14c-39.11 44.61-56.42 91.47-62.1 109.46a47.507 47.507 0 0 0-2.22 14.3v.1h48v-.05c9.68-33.37 35.78-73.18 52.42-92.16C335.55 260.85 352 220.37 352 176C352 78.8 273.2 0 176 0z"
+      d="M176 232a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h80a8 8 0 0 1 8 8zm40-128a87.544 87.544 0 0 1-33.642 69.208A16.235 16.235 0 0 0 176 185.977V192a16.018 16.018 0 0 1-16 16H96a16.018 16.018 0 0 1-16-16v-6.031a16.02 16.02 0 0 0-6.23-12.66a87.575 87.575 0 0 1-33.769-68.814c-.263-47.662 38.263-87.35 85.881-88.47A88.002 88.002 0 0 1 216 104zm-50.343 2.343a8.002 8.002 0 0 0-11.314 0L128 132.687l-26.343-26.344a8 8 0 0 0-11.314 11.314L120 147.314V184a8 8 0 0 0 16 0v-36.686l29.657-29.657a8 8 0 0 0 0-11.314z"
       fill="currentColor"
-    />
+  />
+  </svg>
+  <svg v-else class="inline" width="2.5em" height="2.5em" viewBox="0 0 256 256" focusable="false">
+    <path
+      d="M176 232a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h80a8 8 0 0 1 8 8zm40-128a87.544 87.544 0 0 1-33.642 69.208A16.235 16.235 0 0 0 176 185.977V192a16.018 16.018 0 0 1-16 16H96a16.018 16.018 0 0 1-16-16v-6.031a16.02 16.02 0 0 0-6.23-12.66a87.575 87.575 0 0 1-33.769-68.814c-.263-47.662 38.263-87.35 85.881-88.47A88.002 88.002 0 0 1 216 104zm-16 0a72 72 0 0 0-73.741-71.98C87.303 32.939 55.786 65.41 56 104.408a71.657 71.657 0 0 0 27.637 56.307A31.922 31.922 0 0 1 96 185.968V192h24v-44.686l-29.657-29.657a8 8 0 0 1 11.314-11.314L128 132.687l26.343-26.344a8 8 0 1 1 11.314 11.314L136 147.314V192h24v-6.024a32.135 32.135 0 0 1 12.467-25.344A71.638 71.638 0 0 0 200 104z"
+      fill="currentColor"
+  />
   </svg>
 </template>
 

src/components/icons/UserIcon.vue

@@ -1,9 +1,14 @@
 <template>
-  <svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
+  <svg v-if="active" class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
     <path
-      d="M15.71 12.71a6 6 0 1 0-7.42 0a10 10 0 0 0-6.22 8.18a1 1 0 0 0 2 .22a8 8 0 0 1 15.9 0a1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1a10 10 0 0 0-6.25-8.19zM12 12a4 4 0 1 1 4-4a4 4 0 0 1-4 4z"
+      d="M20 22H4v-2a5 5 0 0 1 5-5h6a5 5 0 0 1 5 5v2zm-8-9a6 6 0 1 1 0-12a6 6 0 0 1 0 12z"
-      stroke="currentColor"
+      fill="currentColor"
-      :class="{active: 'fill-black dark:fill-white'}"
+    />
+  </svg>
+  <svg v-else class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
+    <path
+      d="M20 22h-2v-2a3 3 0 0 0-3-3H9a3 3 0 0 0-3 3v2H4v-2a5 5 0 0 1 5-5h6a5 5 0 0 1 5 5v2zm-8-9a6 6 0 1 1 0-12a6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8z"
+      fill="currentColor"
     />
   </svg>
 </template>

src/pages/blog/_slug.vue

@@ -16,20 +16,20 @@
       <h1 class="text-3xl md:text-5xl font-bold">
         {{ post.title }}
       </h1>
-      <h3 class="text-xl text-gray-800 dark:text-dark-100 my-4 md:mt-8">
+      <h3 class="text-xl text-gray-800 dark:text-gray-300 my-4 md:mt-8">
         {{ post.description }}
       </h3>
       <div class="flex flex-row justify-between w-full md:w-2/3 mb-12">
         <div>
-          <p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-100">Date</p>
+          <p class="uppercase text-sm font-bold text-gray-800 dark:text-gray-400">Date</p>
           <p>{{ formatDate }}</p>
         </div>
         <div>
-          <p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-100">{{ $t('blog.read.time') }}</p>
+          <p class="uppercase text-sm font-bold text-gray-800 dark:text-gray-400">{{ $t('blog.read.time') }}</p>
           <p>{{ post.reading_time }} min</p>
         </div>
         <div>
-          <p :class="post.tags.length === 0 ? 'opacity-0': 'opacity-100'" class="uppercase text-sm font-bold text-gray-800 dark:text-dark-100">Tags</p>
+          <p :class="post.tags.length === 0 ? 'opacity-0': 'opacity-100'" class="uppercase text-sm font-bold text-gray-800 dark:text-gray-400">Tags</p>
           <p>{{ formatTags }}</p>
         </div>
       </div>

src/pages/guestbook.vue

@@ -1,30 +1,20 @@
 <template>
   <main v-if="guestbook_messages" class="flex flex-col mb-8 px-5 xl:px-64">
     <PageTitle class="self-center" title="part.guestbook"/>
-    <section @click="log" class="flex flex-col 2xl:flex-row items-center py-8">
+    <section class="flex flex-col 2xl:flex-row items-center py-8">
       <div class="ml-2 text-lg leading-6 text-justify dark:text-gray-400 text-gray-700">
         <p>{{ $t('guestbook.description') }}</p>
       </div>
     </section>
-    <section class="md:w-2/3 p-6 border border-indigo-300 dark:border-indigo-700 rounded-lg text-justify">
+    <GuestBookLogin />
-      <h1 class="text-black font-bold dark:text-white text-2xl">{{ $t('guestbook.signin') }}</h1>
+    <section class="flex flex-col py-8">
-      <h3 class="text-gray-500 dark:text-gray-400">{{ $t('guestbook.share') }}</h3>
+      <div v-for="message in guestbook_messages">
-      <div class="flex space-x-4 my-3">
+        <GuestbookMessage
-        <div class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
+          :message="message.message"
-          <GoogleIcon />
+          :author="message.user.username"
-        </div>
+          :date="message.created_at"
-        <div class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
+        />
-          <GithubIcon />
-        </div>
-        <div class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
-          <TwitterIcon />
-        </div>
       </div>
-      <p class="text-sm text-gray-700 dark:text-gray-300">{{ $t('guestbook.infos') }}</p>
-    </section>
-    <section class="flex flex-col 2xl:flex-row justify-center items-center py-8">
-      FETCH messages
-      {{ guestbook_messages }}
     </section>
   </main>
 </template>
@@ -46,7 +36,7 @@ export default defineComponent({
     }
   },
   setup() {
-    const { $axios } = useContext()
+    const { $axios, $sentry } = useContext()
     const guestbook_messages = ref([])
 
     useAsync(async () => {
@@ -59,17 +49,12 @@ export default defineComponent({
           guestbook_messages.value = response.data.guestbook_messages
         })
         .catch(error => {
-          console.log("error", error)
+          $sentry.captureEvent(error)
         })
     })
 
-    const log = () => {
-      console.log(guestbook_messages)
-    }
-
     return {
-      guestbook_messages,
+      guestbook_messages
-      log
     }
   }
 })