88 lines
2.7 KiB
Vue
88 lines
2.7 KiB
Vue
<template>
|
|
<article :class="articleClass">
|
|
<a v-if="cardData.coverImage" class="post-card-image-link" :href="cardData.path">
|
|
<!-- FIXME Background size cover -->
|
|
<div class="post-card-image" :style="'background-image: url(' + cardData.coverImage + ')'|changeUrls"></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[0].name.replace('-', ' ') }}</span>
|
|
<h2 class="post-card-title">{{ cardData.title }}</h2>
|
|
</header>
|
|
<section class="post-card-excerpt">
|
|
<p>{{ cardData.description | stripHTML | changeUrls | truncate(190, '...') }}</p>
|
|
</section>
|
|
</a>
|
|
<footer class="post-card-meta">
|
|
<ul class="author-list">
|
|
<li v-for="author in cardData.authors" class="author-list-item" :key="author.slug">
|
|
<div class="author-name-tooltip">{{ author.name }}</div>
|
|
<a v-if="author.image" :href="'/author/' + author.slug" class="static-avatar">
|
|
<img class="author-profile-image" :src="author.image|changeUrls" :alt="author.name" />
|
|
</a>
|
|
<a v-else :href="'/author/' + author.slug" class="static-avatar author-profile-image">
|
|
<Avatar/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<span class="reading-time">{{ readingTime }}</span>
|
|
</footer>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script>
|
|
import Avatar from "./icons/Avatar";
|
|
import changeUrls from '../filters/changeUrls';
|
|
import { readingTime as readingTimeHelper } from '@tryghost/helpers'
|
|
|
|
export default {
|
|
components: {
|
|
Avatar
|
|
},
|
|
props: {
|
|
cardData: Object,
|
|
isLarge: Boolean
|
|
},
|
|
computed: {
|
|
readingTime() {
|
|
return readingTimeHelper({
|
|
html: this.cardData.content,
|
|
feature_image: this.cardData.coverImage
|
|
})
|
|
},
|
|
articleClass() {
|
|
let classes = ["post-card", "post"];
|
|
if (this.cardData.fields === null) {
|
|
classes.push("no-image");
|
|
}
|
|
for (var i=0;i<this.cardData.tags.length;i++) {
|
|
var cardTagClass = "post-" + this.cardData.tags[i].slug;
|
|
classes.push(cardTagClass);
|
|
}
|
|
if (this.isLarge) {
|
|
classes.push("post-card-large");
|
|
}
|
|
return classes;
|
|
}
|
|
},
|
|
filters: {
|
|
truncate: (text, length, suffix) => {
|
|
if (!text) return text
|
|
if (text.length <= length) return text
|
|
return text.substring(0, length) + suffix;
|
|
},
|
|
stripHTML: text => {
|
|
if (!text) return text
|
|
return text.replace(/<[^>]+>/g, '')
|
|
},
|
|
changeUrls: changeUrls
|
|
}
|
|
};
|
|
</script>
|