first push

src/components/listings/MiniBlueskyLinks.vue

@@ -0,0 +1,90 @@
+<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>