54 lines
1.9 KiB
Vue
54 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<div class="columnist-wall row">
|
||
|
|
<div v-for="post in posts" class="columnist-column col-12 col-sm-6 col-md-4 mb-3">
|
||
|
|
<div class="card shadow">
|
||
|
|
<nuxt-link v-if="post.hero" :to="`/blog/${post.slug}`" class="">
|
||
|
|
<img :src="post.hero" class="w-100"/>
|
||
|
|
</nuxt-link>
|
||
|
|
<nuxt-link :to="`/blog/${post.slug}`" class="card-body text-center h4 p-3 mb-0">
|
||
|
|
<span>{{post.title}}</span>
|
||
|
|
</nuxt-link>
|
||
|
|
<div class="card-footer small">
|
||
|
|
<ul class="list-inline mb-0">
|
||
|
|
<li class="list-inline-item small">
|
||
|
|
<Icon v="calendar"/>
|
||
|
|
{{post.date}}
|
||
|
|
</li>
|
||
|
|
<li v-for="author in post.authors" class="list-inline-item">
|
||
|
|
<nuxt-link v-if="author.startsWith('@')" :to="`/${author}`" class="badge bg-light text-dark border">
|
||
|
|
<Icon v="collective-logo.svg" class="invertible"/>
|
||
|
|
{{author}}
|
||
|
|
</nuxt-link>
|
||
|
|
<span v-else class="badge bg-light text-dark border">
|
||
|
|
{{author}}
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Columnist from 'avris-columnist';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
posts: { required: true },
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
if (!process.client) { return; }
|
||
|
|
|
||
|
|
const columnist = new Columnist(this.$el);
|
||
|
|
columnist.start();
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.columnist-wall > .columnist-column {
|
||
|
|
transition: margin-top .2s ease-in-out;
|
||
|
|
}
|
||
|
|
</style>
|