Importing blog

.gitignore

@@ -60,7 +60,7 @@ typings/
 .yarn-integrity
 
 # dotenv environment variables file
-.env
+src/.env
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache

config/Axios.ts

@@ -1,4 +1,4 @@
 export default {
-  baseUrl: 'http://localhost:3333',
-  credentials: true
+  credentials: true,
+  baseURL: 'http://localhost:5555/'
 }

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@nuxt/typescript-runtime": "^2.0.0",
-    "@nuxtjs/axios": "^5.12.2",
+    "@nuxtjs/axios": "5.12.1",
     "core-js": "^3.7.0",
     "nuxt": "^2.14.6",
     "sass": "^1.29.0",

src/assets/css/tailwind.css

@@ -4,4 +4,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-

src/components/Post.vue

@@ -1,16 +1,20 @@
 <template>
-  <article class="hover:bg-gray-200 dark:hover:bg-dark-800 border-2 border-solid border-black dark:border-white w-full h-auto h-blog p-2 flex flex-col justify-between my-5 duration-300">
+  <article
+    class="w-full h-blog p-2 flex flex-col justify-between my-5"
+    :style="{ backgroundImage: 'url(http://localhost:5555/files/' + cover.file_name + ')' }"
+  >
     <div>
-      <p class="text-3xl font-bold text-justify leading-7 mb-3">{{title}}</p>
-      <p class="dark:text-dark-900 text-gray-900 text-lg italic text-justify leading-5">{{description}}</p>
+      <p class="text-3xl text-white font-bold text-justify leading-7 mb-3">{{title}}</p>
+      <p class="text-dark-900 text-lg italic text-justify leading-5">{{description}}</p>
     </div>
-    <div class="flex justify-between mt-8">
+    <div class="flex justify-between mt-8 text-dark-900">
       <div>
-        <div>{{date}}</div>
+        <div>{{formatDate}}</div>
         <div>{{reading_time}} min read</div>
+        <div>{{likes}} ❤</div>
       </div>
-      <div class="self-end flex flex-wrap">
-        <div v-for="tag in tagsSplit" class="ml-2 py-1 px-2 dark:bg-white dark:text-black rounded bg-black text-white font-semibold">
+      <div class="self-end flex flex-wrap flex-col md:flex-row">
+        <div v-for="(tag) in tags" class="my-1 md:my-0 ml-2 py-1 px-2 bg-white text-black rounded font-semibold">
           #{{tag}}
         </div>
       </div>
@@ -31,16 +35,20 @@ export default {
       default: "New Post's description"
     },
     reading_time: {
-      type: String,
-      default: "0"
+      type: Number,
+      default: 0
     },
     date: {
       type: String,
       default: "Today"
     },
+    likes: {
+      type: Number,
+      default: 0
+    },
     tags: {
-      type: String,
-      default: "Tag1 Tag2 Tag3",
+      type: Array,
+      default: () => ["Tag1", "Tag2", "Tag3"],
     },
     cover: {
       type: String,
@@ -49,8 +57,15 @@ export default {
   },
   computed: {
     tagsSplit() {
-      return this.tags.split(" ")
-    }
+      return this.tags.keys
+    },
+    formatDate() {
+      const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
+        "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
+      ];
+      const date = new Date(this.date)
+      return date.getDate() + " " + monthNames[date.getMonth()] + " " + date.getFullYear()
+    },
   }
 }
 </script>
@@ -58,5 +73,7 @@ export default {
 <style scoped lang="scss">
 .h-blog {
   min-height: 20rem;
+  background-position: center;
+  background-size: cover;
 }
 </style>

src/tailwind.config.js

@@ -160,6 +160,7 @@ module.exports = {
       '48': '12rem',
       '56': '14rem',
       '64': '16rem',
+      'blog': '25rem',
       '1/2': '50%',
       '1/3': '33.333333%',
       '2/3': '66.666667%',

src/templates/pages/blog/_id.vue

@@ -1,39 +1,39 @@
 <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">
-      Blog
-      <svg class="inline-block blog-img" height="40" width="40" 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-      </svg>
-    </h1>
-    <div class="flex flex-col justify-around items-center py-8 w-full bg-red-100">
-      <!-- TODO Insert blog's posts -->
-      <h1>
-        TITLE
+  <main class="blog flex flex-col items-center px-5 xl:px-64 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">
+      <h1 class="text-3xl md:text-5xl font-bold">
+        {{ title }}
       </h1>
-      <div class="w-1/2">
-        <div class="flex flex-row justify-between">
-          <div>
-            4 min. read
-          </div>
-          <div>
-            14 aout 2020
-          </div>
+      <h3 class="text-xl text-gray-800 dark:text-dark-900 my-4 md:mt-8">
+        {{ 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-900">Date</p>
+          <p>{{ formatDate }}</p>
         </div>
-        <div class="flex justify-center">
-          COVER
+        <div>
+          <p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">Time</p>
+          <p>{{ reading_time }} min</p>
+        </div>
+        <div>
+          <p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">Tags</p>
+          <p>{{formatTags}}</p>
         </div>
       </div>
-      <h3>
-        DESCRIPTION
-      </h3>
-      <p>
-        CONTENT
+      <div class="w-full">
+        <div class="flex justify-center w-full h-auto">
+          <img class="w-full h-auto" :src="'http://localhost:5555/files/'+cover.file_name" alt="Cover Img" />
+        </div>
+      </div>
+      <p class="my-6 md:my-12 text-gray-800 dark:text-dark-900">
+        {{ content }}
       </p>
-      <div class="my-10 border-t border-black border-solid w-full" />
       <p class="text-center">
         Merci d'avoir lu jusqu'au bout ! 😊<br class="md:hidden"/>
         Hésite surtout pas à partager l'article sur Twitter
+        Todo : replace par des buttons : - Likes, - Twitter (proposition de tweet), - partage (lien)
       </p>
     </div>
   </main>
@@ -44,25 +44,48 @@ export default {
   name: "blog",
   data() {
     return {
-      id: this.$route.params.id
+      id: this.$route.params.id,
+      title: '',
+      description: '',
+      content: '',
+      tags: [],
+      likes: 0,
+      date: '',
+      cover: '',
+      reading_time: 0
     }
   },
+  async asyncData({ params, $axios }) {
+    const {data: post} = await $axios.get('/posts/' + params.id)
+    return {
+      title: post.title.code,
+      description: post.description.code,
+      content: post.content.code,
+      tags: post.tags,
+      likes: post.likes,
+      date: post.created_at,
+      reading_time: post.reading_time,
+      cover: post.cover
+    }
+  },
+  computed: {
+    formatDate() {
+      const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
+        "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
+      ];
+      const date = new Date(this.date)
+      return date.getDate() + " " + monthNames[date.getMonth()] + " " + date.getFullYear()
+    },
+    formatTags() {
+      let tags = ""
+      this.tags.map(tag => {
+        tags += tag.label.code + ", "
+      })
+      return tags.substring(0, tags.length - 2)
+    },
+  }
 }
 </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>

src/templates/pages/blog/index.vue

@@ -7,23 +7,55 @@
       </svg>
     </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>
-      <Post reading_time="12"/>
-      <Post />
+      <!-- TODO
+      Insert research by tags
+      Insert see more
+      -->
+      <div v-if="posts.size !== 0" 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"
+            :date="post.created_at"
+            :likes="post.likes"
+          />
+        </nuxt-link>
+      </div>
+      <div v-else class="w-full">
+        Pas de blogs !
+      </div>
     </div>
   </main>
 </template>
 
 <script>
+import Post from "~/components/Post";
 export default {
-  name: "blog"
+  name: "blog",
+  components: {Post},
+  data () {
+    return {
+      posts: []
+    }
+  },
+  methods: {
+    displayTags(tags) {
+      const tags_label = []
+      tags.map(tag => {
+        tags_label.push(tag.label.code)
+      })
+      return tags_label
+    }
+  },
+  async asyncData ({ $axios }) {
+    const {data: posts} = await $axios.get('/posts')
+    return {
+      posts
+    }
+  }
 }
 </script>
 

src/templates/pages/index.vue

@@ -103,6 +103,13 @@
 import Vue from 'vue'
 
 export default Vue.extend({
+  data() {
+    return {
+      posts: [],
+      works: [],
+      services: []
+    }
+  }
 })
 </script>