veryroundbird.house
pds dash for shimaenaga.veryroundbird.house (based off of pds.witchcraft.systems)
add some styling tweaks
+93
+92
src/lib/GuestbookPostComponent.svelte
+92
src/lib/GuestbookPostComponent.svelte
···
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>