pds dash for shimaenaga.veryroundbird.house (based off of pds.witchcraft.systems)
veryroundbird.house
1<script lang="ts">
2 import { Post } from "./pdsfetch";
3 import { Config } from "../../config";
4 import { onMount } from "svelte";
5 import moment from "moment";
6
7 let { post }: { post: Post } = $props();
8 console.log(post);
9</script>
10
11<div class="postContainer">
12 <div class="postHeader">
13 {#if post.author.avatar}
14 <img
15 class="avatar"
16 src="{post.author.avatar}"
17 alt="avatar of {post.author.displayName}"
18 />
19 {/if}
20 <div class="headerText">
21 <a class="displayName" href="{Config.FRONTEND_URL}/profile/{post.author.did}">{post.author.displayName}</a>
22 <p class="handle">
23 <a href="{Config.FRONTEND_URL}/profile/{post.author.handle}"
24 >@{post.author.handle}</a
25 >
26 <a
27 class="postLink" href="{Config.FRONTEND_URL}/profile/{post.author.did}/post/{post.record.id}"
28 >{moment(post.record.createdAt).isBefore(moment().subtract(1, "month"))
29 ? moment(post.record.createdAt).format("MMM D, YYYY")
30 : moment(post.record.createdAt).fromNow()}</a>
31 </p>
32 </div>
33 </div>
34 <div class="postContent">
35 {#if post.record.quote}
36 <a
37 class="quotingText"
38 href="{Config.FRONTEND_URL}/profile/{post.record.quote.uri}/post/{post
39 .quotingUri.rkey}">quoting {post.quotingUri.repo}</a
40 >
41 {/if}
42 <div class="postText">{post.record.text}</div>
43 {#if post.record.imagesCid && post.record.imagesCid.length > 0}
44 <div id="carouselContainer">
45 <img
46 class="embedImages"
47 alt="Post Image {currentImageIndex + 1} of {post.record.imagesCid.length}"
48 src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={post.record.author.did}&cid={post.record
49 .imagesCid[currentImageIndex]}"
50 />
51
52 {#if post.imagesCid.length > 1}
53 <div class="carouselControls">
54 <button
55 id="prevBtn"
56 onclick={prevImage}
57 disabled={currentImageIndex === 0}>←</button
58 >
59 <div class="carouselIndicators">
60 {#each post.record.imagesCid as _, i}
61 <div
62 class="indicator {i === currentImageIndex ? 'active' : ''}"
63 ></div>
64 {/each}
65 </div>
66 <button
67 class="nextBtn"
68 onclick={nextImage}
69 disabled={currentImageIndex === post.imagesCid.length - 1}
70 >→</button
71 >
72 </div>
73 {/if}
74 </div>
75 {/if}
76 {#if post.record.videosLinkCid}
77 <!-- svelte-ignore a11y_media_has_caption -->
78 <video
79 class="embedVideo"
80 src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={post.authorDid}&cid={post.videosLinkCid}"
81 controls
82 ></video>
83 {/if}
84 {#if post.gifLink}
85 <img
86 class="embedVideo"
87 src="{post.record.gifLink}"
88 alt="Post GIF"
89 />
90 {/if}
91 </div>
92</div>