16bcaaf54b
Images can now go directly to media.snipettemag.com instead of being routed through the private Ghost instance. (Reduces traffic on that node).
76 lines
2.3 KiB
Vue
76 lines
2.3 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">{{ cardData.timeToRead }} MIN READ</span>
|
|
</footer>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script>
|
|
import Avatar from "./icons/Avatar";
|
|
import changeUrls from '../filters/changeUrls';
|
|
|
|
export default {
|
|
components: {
|
|
Avatar
|
|
},
|
|
props: {
|
|
cardData: Object
|
|
},
|
|
computed: {
|
|
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);
|
|
}
|
|
return classes;
|
|
}
|
|
},
|
|
filters: {
|
|
truncate: (text, length, suffix) => {
|
|
if (!text) return text
|
|
return text.substring(0, length) + suffix;
|
|
},
|
|
stripHTML: text => {
|
|
if (!text) return text
|
|
return text.replace(/<[^>]+>/g, '')
|
|
},
|
|
changeUrls: changeUrls
|
|
}
|
|
};
|
|
</script>
|