improve tag try

src/templates/pages/blog/_id.vue

@@ -1,7 +1,20 @@
 <template>
-  <main class="flex flex-col items-center px-5 xl:px-64 mb-16 md:mb-32">
+  <main class="blog flex flex-col items-center px-5 xl:px-96 mb-16 md:mb-32">
-    <!-- TODO Titre en blanc et desc en gris lien autre couleur + Définir un autre padding sur les cotés-->
     <div class="mt-8 md:mt-32 flex flex-col justify-around py-8 w-full">
+      <div>
+        <div class="mb-4 flex">
+          <nuxt-link to="/blog" class="back-arrow flex">
+            <div class="duration-300 arrow">
+              <svg height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+              </svg>
+            </div>
+            <div class="ml-2">
+              Retour en arrière
+            </div>
+          </nuxt-link>
+        </div>
+      </div>
       <h1 class="text-3xl md:text-5xl font-bold">
         {{ title }}
       </h1>
@@ -18,8 +31,7 @@
           <p>{{ reading_time }} min</p>
         </div>
         <div>
-          <!-- Todo remove if tags === 0 -->
+          <p :class="tags.length === 0 ? 'opacity-0': 'opacity-100'" class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">Tags</p>
-          <p :class="tags.size === 0 ? 'hidden': ''" class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">Tags</p>
           <p>{{formatTags}}</p>
         </div>
       </div>
@@ -94,4 +106,13 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.blog {
+  .back-arrow:hover .arrow {
+    transform: translate(-8px, -1px);
+  }
+
+  .arrow {
+    transform: translate(3px, -1px);
+  }
+}
 </style>

src/templates/pages/blog/index.vue

@@ -11,26 +11,81 @@
     <h1 v-if="posts.length === 0" class="text-xl font-bold text-center my-8 w-full">
       Malheureusement il n'y a pas encore d'articles disponibles. Reviens plus tard 😉
     </h1>
-    <div v-else>
+    <div class="w-full md:w-1/2" v-else>
-      <!-- TODO
+      <!-- TODO improve design research by tag -->
-      Insert research by tags
+      <div class="flex flex-col mt-8">
-      Insert see more
+        <h1>
-      -->
+          Classer les articles par tag :
-    </div>
+        </h1>
-    <div class="flex flex-col justify-around items-center py-8 w-full md:w-1/2">
+        <div class="flex flex-row">
-      <div class="w-full" v-for="post in posts">
+          <div
-        <nuxt-link :to="'/blog/' + post.id">
+            @click="resetPosts"
-          <Post
+            v-if="current_tag !== ''"
-            :title="post.title.code"
+            class="home-arrow flex cursor-pointer"
-            :reading_time="post.reading_time"
+          >
-            :description="post.description.code"
+            <div class="arrow duration-300">
-            :tags="displayTags(post.tags)"
+              <svg height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            :cover="post.cover.file_name"
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-            :date="post.created_at"
+              </svg>
-            :likes="post.likes"
+            </div>
-            :lightBg="post.light_back_ground"
+            Tous les articles
-          />
+          </div>
-        </nuxt-link>
+          <div v-else v-for="tag in tags"
+               @click="fetchPostsByTag(tag.label.code)"
+               :class="tag.label.code === current_tag ? 'border-solid border-black border-2' : ''"
+               class="hover:bg-gray-500 duration-300 cursor-pointer px-3 py-3 rounded-xl bg-gray-300 font-black mr-3"
+          >
+            {{tag.label.code}}
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col justify-around items-center py-8 w-full">
+        <div class="w-full" v-for="post in posts">
+          <nuxt-link :to="'/blog/' + post.id">
+            <Post
+              :title="post.title.code"
+              :reading_time="post.reading_time"
+              :description="post.description.code"
+              :tags="displayTags(post.tags)"
+              :cover="post.cover.file_name"
+              :date="post.created_at"
+              :likes="post.likes"
+              :lightBg="post.light_back_ground"
+            />
+          </nuxt-link>
+        </div>
+      </div>
+      <div class="relative flex flex-row justify-between w-full mb-4" v-if="postsCount > 5">
+        <div
+          class="duration-500 flex w-1/2 px-5 py-4 justify-center items-center"
+          :class="page > 1 ? 'opacity-100' : 'opacity-0'"
+        >
+          <div class="flex items-center duration-300 prev-arrow" @click="prevPage">
+            <div class="arrow duration-300">
+              <svg class="inline icon" height="30" width="30" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z" />
+              </svg>
+            </div>
+            <div class="inline ml-4 font-bold">
+              Précédent
+            </div>
+          </div>
+        </div>
+        <div
+          class="duration-500 flex w-1/2 px-5 py-4 justify-center items-center"
+          :class="hasNextPage ? 'opacity-100' : 'opacity-0'"
+        >
+          <div class="flex items-center duration-300 suiv-arrow" @click="nextPage">
+            <div class="ml-4 font-bold">
+              Suivant
+            </div>
+            <div class="inline arrow duration-300">
+              <svg class="inline icon" height="30" width="30" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </main>
@@ -49,7 +104,12 @@ export default {
   },
   data () {
     return {
-      posts: []
+      posts: [],
+      postsCount: 0,
+      page: 1,
+      current_tag: '',
+      tags: [],
+      hasNextPage: false,
     }
   },
   methods: {
@@ -59,16 +119,56 @@ export default {
         tags_label.push(tag.label.code)
       })
       return tags_label
+    },
+    async fetchPostsByTag(tag) {
+      this.current_tag = tag
+      const {data} = await this.$axios.get('/post/' + tag + '?page=1')
+      this.posts = data.data
+      this.hasNextPage = data.meta.next_page_url !== null
+    },
+    async resetPosts() {
+      this.current_tag = ''
+      const {data} = await this.$axios.get('/posts?page=1')
+      this.posts = data.data
+      this.hasNextPage = data.meta.next_page_url !== null
+    },
+    nextPage() {
+      this.page++
+    },
+    prevPage() {
+      this.page--
     }
   },
   async asyncData ({ $axios }) {
-    const {data: posts} = await $axios.get('/posts')
+    const {data: count} = await $axios.get('/posts/size')
+    const {data} = await $axios.get('/posts?page=1')
+    const {data: tags} = await $axios.get('/tags')
     return {
-      posts
+      posts: data.data,
+      postsCount: count,
+      tags,
+      hasNextPage: data.meta.next_page_url !== null
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
+.blog {
+  .home-arrow:hover .arrow {
+    transform: translateX(-15px);
+  }
+
+  .prev-arrow:hover .arrow {
+    transform: translateX(-10px);
+  }
+
+  .suiv-arrow:hover .arrow {
+    transform: translateX(15px);
+  }
+
+  .arrow {
+    transform: translateX(-3px);
+  }
+}
 </style>

src/templates/pages/blog/tags/_id.vue

@@ -1,55 +0,0 @@
-<template>
-  <main class="blog flex flex-col items-center px-5 xl:px-64">
-    <h1 class="mt-16 md:mt-32 title font-bold text-4xl mr-2 inline mb-4">
-      #{{this.getCapitalizedTag}}
-    </h1>
-    <div class="flex flex-col justify-around items-center py-8 w-full md:w-1/2">
-      <!-- TODO Insert blog's posts -->
-      <nuxt-link to="/blog/1">
-        <Post
-          title="Il était une nouvelle fois la vie"
-          reading_time="4"
-          description="Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi."
-          tags="Dev Tech Vie"/>
-      </nuxt-link>
-    </div>
-  </main>
-</template>
-
-<script>
-export default {
-  name: "blog",
-  head() {
-    return {
-      title: 'Blog - Arthur Danjou'
-    }
-  },
-  data() {
-    return {
-      tag: this.$route.params.id
-    }
-  },
-  computed: {
-    getCapitalizedTag() {
-      return this.tag[0].toUpperCase() + this.tag.slice(1)
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.blog {
-  .blog-img {
-    transform: translate(3px, -10px);
-  }
-
-  .title:after {
-    margin-top: 0.1rem;
-    content: '';
-    height: 2px;
-    width: 100%;
-    display: block;
-    @apply bg-green-400;
-  }
-}
-</style>