feat: Use vue-timeago for comments

package.json

@@ -45,6 +45,7 @@
 		"vue-i18n": "^7.8.1",
 		"vue-router": "^3.0.1",
 		"vue-simplemde": "^0.4.8",
+		"vue-timeago": "^5.0.0",
 		"vuetify": "^1.1.14",
 		"vuex": "^3.0.1"
 	},
@@ -110,7 +111,7 @@
 		"vue-template-compiler": "^2.5.17",
 		"webpack": "^4.17.1",
 		"webpack-bundle-analyzer": "^2.13.1",
-		"webpack-cli": "^2.1.5",
+		"webpack-cli": "^3.1.2",
 		"webpack-dev-server": "^3.1.6",
 		"webpack-merge": "^4.1.4",
 		"workbox-webpack-plugin": "^3.4.1"

src/components/media/Comment.vue

@@ -9,7 +9,7 @@
           <div class="comment-content">
               <div class="username">
               {{ value.user.login }}
-              <h6 class="date">{{ value.posted }}</h6>
+              <h6 class="date"><timeago :datetime="value.posted" :locale="$i18n.locale" /></h6>
             </div>
             <p v-html="value.content"></p>
             <div v-if="!isReply">

src/main.js

@@ -8,6 +8,7 @@ import store, { onLoad } from "./store";
 import apolloProvider from "./graphql";
 import i18n from "./i18n";
 import autoSignIn from "./credentials";
+import VueTimeago from "vue-timeago";
 
 const mainColor = "#f6416c";
 const secondaryColor = "#fddd84";
@@ -30,6 +31,16 @@ Vue.use(VueHead, {
 	complement: "Popcorn.moe"
 });
 
+// vue-timeago
+Vue.use(VueTimeago, {
+	name: "timeago",
+	locale: "en",
+	locales: {
+		fr: require("date-fns/locale/fr"),
+		en: require("date-fns/locale/en")
+	}
+});
+
 /* eslint-disable no-new */
 window.vue = new Vue({
 	el: "#app",