flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/blog-template. minimalistic astro blog template
flo-bit.dev/blog-template/
astro
blog
template
add ability to collapse comments
author
Florian
date
(Dec 2, 2024, 7:58 PM +0100)
commit
0ff4f1d8
0ff4f1d88836ea5533bc4e7874b4e7bacc9244c9
parent
2afb0374
2afb037414c089b630ad66d315ebdeae2b4ad2e7
+110
-73
+109
-72
src/components/bluesky/Comment.svelte
+109
-72
src/components/bluesky/Comment.svelte
···
10
10
import RelativeTime from "./relative-time";
11
11
12
12
const { comment, depth = 0 } = $props();
13
+
14
+
let expanded = $state(true);
13
15
</script>
14
16
15
-
<div class="border-l dark:border-base-800 border-base-300 pl-3">
16
-
<div class="mt-2 pb-2">
17
-
<div
18
-
class="text-sm text-base-600 dark:text-base-500 flex items-center -ml-6"
19
-
>
17
+
{#snippet top(expand: boolean)}
18
+
<div class="text-sm text-base-600 dark:text-base-500 flex items-center -ml-6">
19
+
<div class="relative size-6">
20
20
<Avatar
21
21
src={comment.post.author.avatar}
22
22
link={`https://bsky.app/profile/${comment.post.author.did}`}
23
23
size="size-6"
24
24
/>
25
-
<a
26
-
target="_blank"
27
-
rel="noopener noreferrer nofollow"
28
-
class="ml-2 dark:text-base-400 hover:text-base-500 hover:dark:text-base-300"
29
-
href={`https://bsky.app/profile/${comment.post.author.did}`}
30
-
>
31
-
{comment.post.author.displayName || comment.post.author.handle}
32
-
</a>
25
+
{#if expand}
26
+
<button
27
+
class="absolute inset-0 size-6 bg-black/50 text-white rounded-full flex items-center justify-center"
28
+
onclick={() => (expanded = !expanded)}
29
+
>
30
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-3">
31
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
32
+
</svg>
33
33
34
-
<div class="text-xs ml-2 text-base-500">
35
-
<RelativeTime date={new Date(comment.post.record.createdAt)} locale="en" />
36
-
</div>
34
+
<span class="sr-only">expand comment</span>
35
+
</button>
36
+
{/if}
37
+
</div>
38
+
<a
39
+
target="_blank"
40
+
rel="noopener noreferrer nofollow"
41
+
class="ml-2 dark:text-base-400 hover:text-base-500 hover:dark:text-base-300"
42
+
href={`https://bsky.app/profile/${comment.post.author.did}`}
43
+
>
44
+
{comment.post.author.displayName || comment.post.author.handle}
45
+
</a>
46
+
47
+
<div class="text-xs ml-2 text-base-500">
48
+
<RelativeTime
49
+
date={new Date(comment.post.record.createdAt)}
50
+
locale="en"
51
+
/>
37
52
</div>
38
-
<div>{@html renderPostAsHtml(comment.post)}</div>
53
+
</div>
54
+
{/snippet}
55
+
56
+
<div class="pl-3 relative">
57
+
<button
58
+
class="group absolute -left-1.5 top-0 w-3 h-full flex items-center"
59
+
onclick={() => (expanded = !expanded)}
60
+
>
61
+
<div
62
+
class="mx-auto w-0.5 h-full bg-base-200 dark:bg-base-800 group-hover:bg-base-300 dark:group-hover:bg-base-700"
63
+
></div>
64
+
<span class="sr-only">collapse comment</span>
65
+
</button>
66
+
67
+
<div class="mt-2 pb-2">
68
+
{#if expanded}
69
+
{@render top(false)}
70
+
<div>{@html renderPostAsHtml(comment.post)}</div>
39
71
40
-
<div class="mt-2 flex gap-8 text-base-500 dark:text-base-400">
41
-
<a
42
-
href={atUriToPostUri(comment.post.uri)}
43
-
target="_blank"
44
-
rel="noopener noreferrer nofollow"
45
-
class="group inline-flex items-center gap-2 text-sm"
46
-
>
47
-
<svg
48
-
xmlns="http://www.w3.org/2000/svg"
49
-
fill="none"
50
-
viewBox="0 0 24 24"
51
-
stroke-width="1.5"
52
-
stroke="currentColor"
53
-
class="-m-1.5 size-7 rounded-full p-1.5 transition-all duration-100 group-hover:bg-accent-500/10 group-hover:text-accent-700 dark:group-hover:text-accent-400"
72
+
<div class="mt-2 flex gap-8 text-base-500 dark:text-base-400">
73
+
<a
74
+
href={atUriToPostUri(comment.post.uri)}
75
+
target="_blank"
76
+
rel="noopener noreferrer nofollow"
77
+
class="group inline-flex items-center gap-2 text-sm"
54
78
>
55
-
<path
56
-
stroke-linecap="round"
57
-
stroke-linejoin="round"
58
-
d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 0 1-.923 1.785A5.969 5.969 0 0 0 6 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337Z"
59
-
/>
60
-
</svg>
61
-
<span class="sr-only">Replies</span>
62
-
{numberToHumanReadable(comment.post.replyCount)}
63
-
</a>
79
+
<svg
80
+
xmlns="http://www.w3.org/2000/svg"
81
+
fill="none"
82
+
viewBox="0 0 24 24"
83
+
stroke-width="1.5"
84
+
stroke="currentColor"
85
+
class="-m-1.5 size-7 rounded-full p-1.5 transition-all duration-100 group-hover:bg-accent-500/10 group-hover:text-accent-700 dark:group-hover:text-accent-400"
86
+
>
87
+
<path
88
+
stroke-linecap="round"
89
+
stroke-linejoin="round"
90
+
d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 0 1-.923 1.785A5.969 5.969 0 0 0 6 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337Z"
91
+
/>
92
+
</svg>
93
+
<span class="sr-only">Replies</span>
94
+
{numberToHumanReadable(comment.post.replyCount)}
95
+
</a>
64
96
65
-
<a
66
-
href={atUriToPostUri(comment.post.uri)}
67
-
target="_blank"
68
-
rel="noopener noreferrer nofollow"
69
-
class="group inline-flex items-center gap-2 text-sm"
70
-
>
71
-
<svg
72
-
xmlns="http://www.w3.org/2000/svg"
73
-
fill="none"
74
-
viewBox="0 0 24 24"
75
-
stroke-width="1.5"
76
-
stroke="currentColor"
77
-
class="-m-1.5 size-7 rounded-full p-1.5 transition-all duration-100 group-hover:bg-accent-500/10 group-hover:text-accent-700 dark:group-hover:text-accent-400"
97
+
<a
98
+
href={atUriToPostUri(comment.post.uri)}
99
+
target="_blank"
100
+
rel="noopener noreferrer nofollow"
101
+
class="group inline-flex items-center gap-2 text-sm"
78
102
>
79
-
<path
80
-
stroke-linecap="round"
81
-
stroke-linejoin="round"
82
-
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
83
-
/>
84
-
</svg>
85
-
<span class="sr-only">Likes</span>
86
-
{numberToHumanReadable(comment.post.likeCount)}
87
-
</a>
88
-
</div>
103
+
<svg
104
+
xmlns="http://www.w3.org/2000/svg"
105
+
fill="none"
106
+
viewBox="0 0 24 24"
107
+
stroke-width="1.5"
108
+
stroke="currentColor"
109
+
class="-m-1.5 size-7 rounded-full p-1.5 transition-all duration-100 group-hover:bg-accent-500/10 group-hover:text-accent-700 dark:group-hover:text-accent-400"
110
+
>
111
+
<path
112
+
stroke-linecap="round"
113
+
stroke-linejoin="round"
114
+
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
115
+
/>
116
+
</svg>
117
+
<span class="sr-only">Likes</span>
118
+
{numberToHumanReadable(comment.post.likeCount)}
119
+
</a>
120
+
</div>
89
121
90
-
{#if comment.replies?.length > 0 && depth > 4}
91
-
<a
92
-
href={atUriToPostUri(comment.post.uri)}
93
-
target="_blank"
94
-
rel="noopener noreferrer nofollow"
95
-
class="text-sm text-base-500 dark:text-base-400 hover:dark:text-base-300 hover:text-base-600 font-medium"
96
-
>View more replies on bluesky</a
97
-
>
122
+
{#if comment.replies?.length > 0 && depth > 4}
123
+
<a
124
+
href={atUriToPostUri(comment.post.uri)}
125
+
target="_blank"
126
+
rel="noopener noreferrer nofollow"
127
+
class="text-sm text-base-500 dark:text-base-400 hover:dark:text-base-300 hover:text-base-600 font-medium"
128
+
>View more replies on bluesky</a
129
+
>
130
+
{/if}
131
+
{:else}
132
+
<button onclick={() => (expanded = true)}>
133
+
{@render top(true)}
134
+
</button>
98
135
{/if}
99
136
</div>
100
137
101
-
{#if comment.replies?.length > 0 && depth <= 4}
138
+
{#if comment.replies?.length > 0 && depth <= 4 && expanded}
102
139
{#each comment.replies.toSorted((a: any, b: any) => new Date(a.post.record.createdAt).getTime() - new Date(b.post.record.createdAt).getTime()) as reply}
103
140
<Comment comment={reply} depth={depth + 1} />
104
141
{/each}
+1
-1
src/layouts/BaseLayout.astro
+1
-1
src/layouts/BaseLayout.astro