Commit 0a85dc93 authored by Ben Hong's avatar Ben Hong

feature: Add features from vuepress-blog

parent 01ea311c
......@@ -12,7 +12,8 @@ export default {
displayRange: {
start: 0,
end: 4
}
},
selectedTag: ''
}
},
computed: {
......@@ -20,10 +21,29 @@ export default {
const props = this.$options.propsData
if (props) {
return props.list.filter(item => item.path.indexOf("/blog/") > -1)
.sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date))
if (this.selectedTag) {
return props.list.filter(item => {
const isBlogPost = item.path.indexOf("/blog/") > -1
const isReadyToPublish = new Date(item.frontmatter.date) <= new Date()
const hasTags = item.frontmatter.tags && item.frontmatter.tags.includes(this.selectedTag)
if (isBlogPost && isReadyToPublish && hasTags) {
return item
}
}).sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date))
} else {
return props.list.filter(item => {
const isBlogPost = item.path.indexOf("/blog/") > -1
const isReadyToPublish = new Date(item.frontmatter.date) <= new Date()
if (isBlogPost && isReadyToPublish) {
return item
}
}).sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date))
}
}
}
},
},
methods: {
nextPage() {
......@@ -33,13 +53,31 @@ export default {
previousPage() {
this.displayRange.start -= 5
this.displayRange.end -= 5
},
updateSelectedTag(tag) {
this.selectedTag = tag
}
}
}
</script>
<template>
<div>
<div>
<div
v-if="selectedTag"
class="filtered-heading"
>
<h2>
Filtered by {{ selectedTag }} tag
</h2>
<button
type="button"
@click="selectedTag = ''"
class="btn clear-filter-btn"
>
Clear filter
</button>
</div>
<ul class="blog-list">
<li v-for="(item, index) in filteredList"
class="blog-list__item">
......@@ -48,7 +86,9 @@ export default {
:excerpt="item.frontmatter.excerpt"
:path="item.path"
:publishDate="item.frontmatter.date"
:tags="item.frontmatter.tags"
:title="item.frontmatter.title"
@updateSelectedTag="updateSelectedTag"
/>
</li>
</ul>
......@@ -101,6 +141,15 @@ export default {
color: #32c8cf;
}
.clear-filter-btn {
align-self: center;
margin-left: 20px;
}
.filtered-heading {
display: flex;
}
.pagination {
text-align: center;
}
......
......@@ -6,6 +6,10 @@ export default {
type: String,
required: true
},
tags: {
type: Array,
required: false
},
title: {
type: String,
required: true
......@@ -40,6 +44,21 @@ export default {
<h3 class="blog-post__title">{{ title }}</h3>
<p v-if="excerpt">{{ excerpt }}</p>
<a class="button blog-post__button " :href="path">Read More ></a>
<ul class="tag-list">
<li
v-for="(tag, index) in tags"
:key="`${title}-${tag}`"
class="tag-list__item"
>
<button
@click="$emit('updateSelectedTag', tag)"
:key="title + '-' + tag"
class="tag-list__btn"
>
{{ tag }}
</button>
</li>
</ul>
</section>
</template>
......@@ -64,4 +83,25 @@ export default {
box-shadow: 0 0;
transition: background-color 0.2s ease-in, color 0.2s ease-in;
}
.tag-list {
list-style: none;
padding-left: 0;
display: flex;
margin-bottom: 25px;
}
.tag-list__item {
margin-left: 10px;
}
.tag-list__item:first-child {
margin-left: 0;
}
.tag-list__btn {
padding: 5px;
font-size: 0.9rem;
background-color: #fff;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment