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.
87 lines
2.1 KiB
87 lines
2.1 KiB
<blog-posts>
|
|
<article class="post m-bottom-6" each={ post in props.posts } if={ isVisible(post) }>
|
|
<header class="post__header m-bottom-3">
|
|
<h2 class="h4 m-bottom-3 highlight">
|
|
<a href="{ post.path }">
|
|
{ post.title }
|
|
</a>
|
|
</h2>
|
|
<span>
|
|
<time time="{ post.date_published }">
|
|
{ formatDate(post.date_published) }
|
|
</time>
|
|
</span>
|
|
<span each={ tag in post.tags } class="m-left-3">
|
|
/ <a class="underline" onclick={ () => { addTag(tag) } }>{ tag }</a>
|
|
</span>
|
|
</header>
|
|
<div if={ post.excerpt } class="post__excerpt">
|
|
<div class="content">
|
|
{ post.excerpt }
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<script>
|
|
|
|
import dayjs from 'dayjs'
|
|
|
|
export default {
|
|
|
|
state: {
|
|
tag: undefined,
|
|
limit: 1,
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @return {[type]}
|
|
*
|
|
*/
|
|
onBeforeMount() {
|
|
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {[type]} date
|
|
* @return {[type]}
|
|
*
|
|
*/
|
|
formatDate(date) {
|
|
return dayjs(date).format('DD.MM.YYYY')
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {[type]} post
|
|
* @return {Boolean}
|
|
*/
|
|
isVisible(post) {
|
|
|
|
let result = false
|
|
|
|
// if tag is set, check for tags in post.tags, if not valid not showing
|
|
if (this.tag) {
|
|
if (post.tags && post.tags.indexOf(this.tag) !== -1) {
|
|
result = true
|
|
}
|
|
} else {
|
|
result = true
|
|
}
|
|
|
|
return result
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {[type]} tag
|
|
*/
|
|
addTag(tag) {
|
|
this.tag = tag
|
|
this.update()
|
|
}
|
|
|
|
}
|
|
</script>
|
|
</blog-posts>npm |