90 lines
2.6 KiB
Vue
90 lines
2.6 KiB
Vue
<script setup>
|
||
import moment from 'moment-timezone';
|
||
|
||
defineProps({
|
||
item: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
index: {
|
||
type: Number,
|
||
require: true
|
||
},
|
||
})
|
||
|
||
function format_date(dateString) {
|
||
let date = moment.utc(dateString);
|
||
// Then specify how you want your dates to be formatted
|
||
return date.format('MM/DD');
|
||
// return date.format('LLLL')
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div class="events xs:p-2 sm:p-2 md:p-4 lg:p-3 m-2" style="padding-top: revert-layer;">
|
||
<div class="p-2">
|
||
<div class="xs:text-center sm:text-center md:float-left lg:float-left text-xs">
|
||
#{{ item.id }} |
|
||
<a v-if="item.platform == 'bluesky'" :href="'https://bsky.app/profile/' + item.handle + '/post/' + item.uri" target="_blank" class="">
|
||
<b>
|
||
{{ item.platform }}
|
||
</b>
|
||
</a>
|
||
<a v-else="item.platform == 'reddit'" :href="item.link">
|
||
<b>
|
||
{{ item.platform }}
|
||
</b>
|
||
</a>
|
||
| {{ format_date(item.created_at) }}
|
||
<span v-if="item.published">
|
||
| <a :href="item.pub_link">
|
||
📝 {{ item.platform }}
|
||
</a>
|
||
|
||
</span>
|
||
<span v-else="!item.published">
|
||
| ✍️
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<br/>
|
||
<div class="text-left">
|
||
<p style="width:20em;">
|
||
{{ item.text.slice(0,256) }}
|
||
</p>
|
||
|
||
<p v-if="item.link != 'blank' && item.platform =='bluesky'" style="width:20em;">
|
||
<a :href="item.link">Link</a>
|
||
</p>
|
||
|
||
<p class="border" v-if="item.rt_text != 'blank'" style="width:20em;">
|
||
{{ item.rt_text }}
|
||
<p v-if="item.rt_link != 'blank'">
|
||
<a :href="item.rt_link">RT Link</a>
|
||
</p>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<style scoped>
|
||
.events {
|
||
/* background-color: #222; */
|
||
/* border: .1em solid #333; */
|
||
border-radius: 25px;
|
||
min-width: 325px;
|
||
max-width: 350px;
|
||
}
|
||
|
||
.link {
|
||
border-radius: 25px;
|
||
padding: .5rem;
|
||
margin: .5rem;
|
||
background-color: orange;
|
||
color: #000;
|
||
font-weight: bold;
|
||
}
|
||
|
||
div > span {
|
||
padding: .5em;
|
||
}
|
||
</style> |