50 lines
1.5 KiB
Vue
50 lines
1.5 KiB
Vue
<template>
|
|
<a class='post' :href='post.URL' target='_blank'>
|
|
<v-row class='mb-5'>
|
|
<v-col cols=12 lg=4>
|
|
<v-img class='rounded-lg' max-height="250" :src="post.image" alt=""></v-img>
|
|
</v-col>
|
|
<v-col cols=12 lg=8>
|
|
<span>{{post.source.name}}</span>
|
|
<h1 class='text-h5 font-weight-bold'>{{post.title}}</h1>
|
|
<p class='font-weight-light'>{{new Date(post.date).toLocaleString('it-IT', { weekday: 'long', month: 'long', day: 'numeric'})}}</p>
|
|
</v-col>
|
|
</v-row>
|
|
</a>
|
|
<!-- <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;
|
|
}
|
|
|
|
a.post{
|
|
color: black;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.post:hover {
|
|
background-color: #fff;
|
|
}
|
|
</style>
|
|
|
|
|
|
|