48 lines
1.5 KiB
Vue
48 lines
1.5 KiB
Vue
<template>
|
|
<div class="news-preview">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2><a target="_blank" :href="post.url">{{ post.title }}</a></h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-8">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="news-subtitle">
|
|
<img v-if="post.primaryAuthor?.profileImage" style="max-height: 25px; padding-right: 10px;"
|
|
:src="post.primaryAuthor.profileImage">
|
|
{{ `${post.primaryAuthor?.name ?? 'Anonymous'} • ${postDate} • ${post.readingTime} minute read` }}
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12">{{ post.customExcerpt ?? post.excerpt }}<a target="_blank" :href="post.url">more
|
|
>>
|
|
</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4"><a target="_blank" :href="post.url"><img style="max-height: 225px; max-width: 100%"
|
|
:src="post.featureImage" :alt="post.featureImageAlt ?? ''"></a></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import type { NewsPost } from '@/services/newsService'
|
|
import type { PropType } from 'vue'
|
|
|
|
export default {
|
|
name: "NewsPreview",
|
|
props: {
|
|
post: {
|
|
type: Object as PropType<NewsPost>,
|
|
required: true,
|
|
}
|
|
},
|
|
computed: {
|
|
postDate(): string {
|
|
if (!this.post.publishedAt) return ''
|
|
return new Date(Date.parse(this.post.publishedAt)).toDateString()
|
|
}
|
|
}
|
|
}
|
|
</script> |