Merge branch 'features/posts-index-page' into beta

client/package-lock.json

@@ -3648,6 +3648,11 @@
         }
       }
     },
+    "core-js": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
+      "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
+    },
     "core-js-compat": {
       "version": "3.6.4",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.6.4.tgz",

client/package.json

@@ -21,6 +21,7 @@
   },
   "homepage": "https://github.com/Raymonzut/Personal-Website#readme",
   "dependencies": {
+    "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-resource": "^1.5.1"
   },

client/src/views/posts.vue

@@ -0,0 +1,67 @@
+<template>
+  <div id="posts" v-if="months.length >= 0">
+    <h3 class="month" v-for="(month, i) in months" :key="i">
+      {{ month }}
+      <div class="listAlign">
+        <ul>
+          <li v-for="(postItem, j) in getPostItems(month)" :key="j">
+            {{ getPostItemDate(postItem) }} – {{ postItem.title }}
+          </li>
+        </ul>
+      </div>
+      <br>
+    </h3>
+  </div>
+  <h2 v-else>There are no posts yet, but don't worry they will be added soon</h2>
+</template>
+
+<script>
+import { getPosts } from '../remote'
+
+export default {
+  name: "posts",
+  computed: {
+    months: function () {
+      const dates = this.posts.map(post => new Date(post.date))
+
+      // Contains the month followed by the year
+      const months = dates.map(date => `${date.toLocaleString('default', { month: 'long' })} ${date.getFullYear()}`)
+      const uniques = Array.from(new Set(months))
+
+      return uniques
+    }
+  },
+  data() {
+    return {
+      posts: []
+    }
+  },
+  methods: {
+    getPosts,
+    getPostItems: function (month) {
+      const month_index = new Date(`1 ${month}`).getMonth()
+      return this.posts.filter((post) => (new Date(post.date)).getMonth() === month_index)
+    },
+    getPostItemDate: function (postItem) {
+      const date = new Date(postItem.date)
+      return `${date.getFullYear()} ${date.toLocaleString('default', { month: 'short' })} ${date.getDate()}`
+    }
+  },
+  mounted() {
+    getPosts.call(this)
+  },
+}
+</script>
+
+<style scoped>
+ul {
+  text-align: left;
+}
+
+@media (min-width: 420px) {
+  .month {
+    text-indent: 1em;
+    text-align: left;
+  }
+}
+</style>