Testing and debugging

@types/types.ts

@@ -58,8 +58,7 @@ interface Project {
   description: string,
   url: string,
   cover: string,
-  color: string,
-  skills: Array<Skill>
+  tags: Array<Tag>,
 }
 
 export { Form, InfoData, Skill, Experience, Formation, Post, Tag, Project }

src/components/Post.vue

@@ -2,7 +2,7 @@
   <nuxt-link :to="`/blog/${slug}`" rel="noreferrer noopener">
     <div class="rounded-lg shadow-xl h-116 w-full lg:w-100 text-left bg-gray-100 dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 lg:mb-0">
       <div class="h-2/5 post rounded-t-lg"
-           :style="{ backgroundImage: `url(${getBackgroundCover})` }">
+           :style="{ backgroundImage: `url(${getCover})` }">
       </div>
       <div class="h-3/5 p-4 flex flex-col justify-between">
         <div>
@@ -26,7 +26,7 @@
 <script lang="ts">
 import {computed, useContext} from "@nuxtjs/composition-api";
 
-interface PostHomeProps {
+interface PostProps {
   title: string,
   description: string,
   date: string,
@@ -37,7 +37,7 @@ interface PostHomeProps {
 }
 
 export default {
-  name: "PostHome",
+  name: "Post",
   props: {
     title: {
       type: String,
@@ -68,8 +68,8 @@ export default {
       default: 0
     }
   },
-  setup(props: PostHomeProps) {
-    const getBackgroundCover = computed(() => require(`~/assets/images/posts/${props.cover}`))
+  setup(props: PostProps) {
+    const getCover = computed(() => require(`~/assets/images/posts/${props.cover}`))
 
     const { i18n } = useContext()
     const formatDate = computed(() => {
@@ -78,7 +78,7 @@ export default {
     })
 
     return {
-      getBackgroundCover,
+      getCover,
       formatDate
     }
   }

src/components/PostsHome.vue

@@ -1,8 +1,8 @@
 <template>
-  <section class="w-full flex items-center justify-center my-20">
+  <section v-if="posts" class="w-full flex items-center justify-center my-20">
     <div class="flex flex-col items-center text-center">
       <div class="flex flex-col items-center">
-        <h2 class="font-bold text-3xl">
+        <h2 @click="debug" class="font-bold text-3xl">
           {{ $t('blog.latest') }}
         </h2>
         <p class="text-gray-700 dark:text-gray-400 text-xl lg:w-2/3 mt-4">
@@ -10,7 +10,7 @@
         </p>
       </div>
       <div class="my-8 lg:flex w-full lg:space-x-6">
-        <div v-if="posts" v-for="post in posts">
+        <div v-for="post in posts">
           <Post
             :title="post.title"
             :cover="post.cover"
@@ -34,24 +34,25 @@ import {useAsync, useContext} from "@nuxtjs/composition-api";
 import {Post} from "../../@types/types";
 
 export default {
-  name: "PostsPreview",
+  name: "PostsHome",
   setup() {
     const { $content, i18n } = useContext()
 
     const posts = useAsync(() => {
       return $content(`articles/${i18n.locale}`)
-        .sortBy("date", "asc")
+        .sortBy('date', 'asc')
         .limit(3)
         .fetch<Post>()
     })
 
-   return {
-      posts
-   }
+    const debug = () => {
+      console.log(posts)
+    }
+
+    return {
+      posts,
+      debug
+    }
   }
 }
 </script>
-
-<style scoped lang="scss">
-
-</style>

src/components/ProjectsHome.vue

@@ -1,8 +1,8 @@
 <template>
-  <section class="w-full flex items-center justify-center my-20">
+  <section v-if="projects" class="w-full flex items-center justify-center my-20">
     <div class="flex flex-col items-center text-center">
       <div class="flex flex-col items-center">
-        <h2 class="font-bold text-3xl">
+        <h2 @click="debug" class="font-bold text-3xl">
           {{ $t('projects.latest') }}
         </h2>
         <p class="text-gray-700 dark:text-gray-400 text-xl lg:w-2/3 mt-4">
@@ -10,7 +10,7 @@
         </p>
       </div>
       <div class="my-8 lg:flex w-full lg:space-x-8">
-        <div v-if="projects" v-for="project in projects">
+        <div v-for="project in projects">
           <Project
             :title="project.title"
             :cover="project.cover"
@@ -32,7 +32,7 @@ import {useAsync, useContext} from "@nuxtjs/composition-api";
 import {Project} from "../../@types/types";
 
 export default {
-  name: "ProjectsPreview",
+  name: "ProjectsHome",
   setup() {
     const { $content } = useContext()
 
@@ -42,13 +42,14 @@ export default {
         .fetch<Project>()
     })
 
+    const debug = () => {
+      console.log(projects)
+    }
+
     return {
-      projects
+      projects,
+      debug
     }
   }
 }
 </script>
-
-<style scoped lang="scss">
-
-</style>

src/pages/projects.vue

@@ -12,7 +12,7 @@
       <h1 class="text-gray-700 dark:text-gray-400 text-xl mt-4">{{ $t('projects.description') }}</h1>
       <div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full space-y-3 md:space-y-0">
         <div class="flex py-8 w-full flex-wrap" >
-          <div class="md:mx-3 my-2 w-full xl:w-auto" v-for="project in projects">
+          <div class="md:mx-3 my-2 w-full lg:w-auto" v-for="project in projects">
             <Project
               :title="project.title"
               :cover="project.cover"