You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.6 KiB
68 lines
1.6 KiB
<template>
|
|
<div id="posts" v-if="months.length >= 0">
|
|
<h3 class="month" v-for="(month, i) in months" :key="i">
|
|
{{ month }}
|
|
<div>
|
|
<ul>
|
|
<li v-for="(postItem, j) in getPostItems(month)" :key="j">
|
|
{{ getPostItemDate(postItem) }} –
|
|
<a :href="/posts/ + postItem._id">{{ postItem.title }}</a>
|
|
</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> |