70 lines
2.1 KiB
Vue
70 lines
2.1 KiB
Vue
<template>
|
|
<article :class="articleClass">
|
|
<a v-if="cardData.image" class="post-card-image-link" :href="cardData.path">
|
|
<!-- FIXME Background size cover -->
|
|
<div class="post-card-image" :style="'background-image: url(' + cardData.image + ')'"></div>
|
|
</a>
|
|
<div class="post-card-content">
|
|
<a class="post-card-content-link" :href="cardData.path">
|
|
<header class="post-card-header">
|
|
<span
|
|
v-if="cardData.tags"
|
|
class="post-card-tags"
|
|
>{{ cardData.tags.title.replace('-', ' ') }}</span>
|
|
<h2 class="post-card-title">{{ cardData.title }}</h2>
|
|
</header>
|
|
<section class="post-card-excerpt">
|
|
<p>{{ cardData.content | stripHTML | truncate(190, '...') }}</p>
|
|
</section>
|
|
</a>
|
|
<footer class="post-card-meta">
|
|
<ul class="author-list">
|
|
<li v-for="author in cardData.author" class="author-list-item" :key="author.name">
|
|
<div class="author-name-tooltip">{{ author.name }}</div>
|
|
<a v-if="author.image" :href="'/author/' + author.id" class="static-avatar">
|
|
<img class="author-profile-image" :src="author.image" :alt="author.name" />
|
|
</a>
|
|
<a v-else :href="'/author/' + author.id" class="static-avatar author-profile-image">
|
|
<Avatar/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<span class="reading-time">{{ cardData.timeToRead }} MIN READ</span>
|
|
</footer>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script>
|
|
import Avatar from "./icons/Avatar";
|
|
|
|
export default {
|
|
components: {
|
|
Avatar
|
|
},
|
|
props: {
|
|
cardData: Object
|
|
},
|
|
computed: {
|
|
articleClass() {
|
|
let classes = ["post-card", "post"];
|
|
if (this.cardData.fields === null) {
|
|
classes.push("no-image");
|
|
}
|
|
const cardTagClass = "post-" + this.cardData.tags;
|
|
classes.push(cardTagClass);
|
|
return classes;
|
|
}
|
|
},
|
|
filters: {
|
|
truncate: (text, length, suffix) => {
|
|
return text.substring(0, length) + suffix;
|
|
},
|
|
stripHTML: text => {
|
|
return text.replace(/<[^>]+>/g, '')
|
|
}
|
|
}
|
|
};
|
|
</script>
|