52 lines
1.7 KiB
Vue
52 lines
1.7 KiB
Vue
<template>
|
|
<v-row class='post mb-8'>
|
|
<v-col cols=12 lg=4 class='py-0 pa-md-2'>
|
|
<a :href='post.URL' target='_blank'><v-img class='rounded-lg' max-height="250" :src="post.image" alt=""></v-img></a>
|
|
</v-col>
|
|
<v-col cols=12 lg=8 class='py-0 pl-md-3'>
|
|
<div>{{post.source.name}}</div>
|
|
<a class='text-h6 pa-1 font-weight-bold' :href='post.URL' target='_blank'>{{post.title}}</a>
|
|
<p class='font-weight-light'>{{new Date(post.date).toLocaleString('it-IT', { weekday: 'long', month: 'long', day: 'numeric'})}}</p>
|
|
<v-chip v-for='tag in post.tags' :key='tag.id' label small
|
|
class='ma-1 yellow accent-1'
|
|
v-text='`#${tag.name}`'></v-chip>
|
|
</v-col>
|
|
</v-row>
|
|
<!-- <div class='post 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 || post.content'></span>
|
|
</div> -->
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
post: Object
|
|
},
|
|
// async setup(props) {
|
|
// const res = await fetch(`http://localhost:3000/api/cohort/${props.cohort.id}`).then(res => res.json())
|
|
// return { cohort: res.cohort, posts: res.posts }
|
|
// },
|
|
}
|
|
</script>
|
|
<style>
|
|
.post img {
|
|
max-width: 500px;
|
|
max-height: 400px;
|
|
}
|
|
|
|
.post a{
|
|
color: black;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.post a:hover {
|
|
background-color: #fff;
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
|
|
|
|
|