37 lines
1.2 KiB
Vue
37 lines
1.2 KiB
Vue
<template>
|
|
<div v-if='posts'>
|
|
<h3 class="font-extrabold text-3xl text-pink-500 p-2 mt-10 rounded border-2 border-pink-500">{{cohort.name}}</h3>
|
|
<div v-for='post in posts' :key="post.URL" class='p-2 mb-10 bg-white'>
|
|
<div role='title' class="block pt-2 mb-3 border-b-2" >
|
|
<a target="_blank" :href='post.URL' v-html='post.title' class='text-xl font-bold text-violet-500'></a>
|
|
<span class="font-base text-base float-right">{{new Date(post.date).toLocaleString()}} - <b><a :href='post.source.link'>{{post.source.name}} <img class="inline h-5 w-5 rounded-full" :src="post.source.image || post.source.link + 'favicon.ico'" alt="" /></a></b></span>
|
|
</div>
|
|
<span class='text-xl' v-html='post.summary'></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
cohort: Object
|
|
},
|
|
async fetch(props) {
|
|
const res = await fetch(`/api/cohort/${props.cohort.id}`).then(res => res.json())
|
|
return { cohort: res.cohort, posts: res.posts }
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.card {
|
|
@apply w-full rounded-md border-2 bg-stone-800 mt-3 inline-block
|
|
max-w-sm border-pink-500;
|
|
|
|
.title {
|
|
@apply text-lime-300 p-0 m-2;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|