claycow.com
A Astro blog hosted on Vercel
update bluesky comments component with new url
+118
-134
+115
-131
src/components/organisms/BlueskyComments.svelte
+115
-131
src/components/organisms/BlueskyComments.svelte
···
1
1
<script lang="ts">
2
-
import { formatDate } from "@/utils";
3
-
import getBlogPostComments from "@/utils/getBlogPostComments";
2
+
import { formatDate } from "@/utils";
3
+
import getBlogPostComments from "@/utils/getBlogPostComments";
4
4
5
-
interface Props {
6
-
blogTitle: string;
7
-
}
5
+
interface Props {
6
+
blogTitle: string;
7
+
}
8
8
9
-
let { blogTitle }: Props = $props();
9
+
let { blogTitle }: Props = $props();
10
10
11
-
const comments = getBlogPostComments(blogTitle);
11
+
const comments = getBlogPostComments(blogTitle);
12
12
</script>
13
13
14
14
<section class="bluesky-comments">
15
-
<h2>Comments 🗣️</h2>
15
+
<h2>Comments 🗣️</h2>
16
16
17
-
{#await comments}
18
-
<p>Loading comments... ⏰</p>
19
-
{:then comments}
20
-
{#each comments as comment}
21
-
<article
22
-
class="comment"
23
-
aria-labelledby="comment-{comment.cid}-author"
17
+
{#await comments}
18
+
<p>Loading comments... ⏰</p>
19
+
{:then comments}
20
+
{#each comments as comment}
21
+
<article class="comment" aria-labelledby="comment-{comment.cid}-author">
22
+
<header>
23
+
<h2 class="comment-author" id="comment-{comment.cid}-author">
24
+
<a
25
+
href={`https://bsky.app/profile/${comment.author.did}`}
26
+
rel="noopener noreferrer"
27
+
target="_blank"
28
+
aria-label="{comment.author.displayName}'s profile on Bluesky"
24
29
>
25
-
<header>
26
-
<h2
27
-
class="comment-author"
28
-
id="comment-{comment.cid}-author"
29
-
>
30
-
<a
31
-
href={`https://bsky.app/profile/${comment.author.did}`}
32
-
rel="noopener noreferrer"
33
-
target="_blank"
34
-
aria-label="{comment.author
35
-
.displayName}'s profile on Bluesky"
36
-
>
37
-
{comment.author.displayName}
38
-
<span class="handle"
39
-
>(@{comment.author.handle})</span
40
-
>
41
-
</a>
42
-
<time
43
-
class="comment-time"
44
-
aria-label="Commented on"
45
-
datetime={comment.record.createdAt}
46
-
>
47
-
{formatDate(new Date(comment.record.createdAt))}
48
-
</time>
49
-
</h2>
50
-
</header>
51
-
<p class="comment-body">{comment.record.text}</p>
52
-
<footer class="comment-counts">
53
-
<a
54
-
href={`https://bsky.app/profile/${comment.author.did}`}
55
-
rel="noopener noreferrer"
56
-
target="_blank"
57
-
>
58
-
<p class="likes">
59
-
<iconify-icon
60
-
icon={"fa6-solid:heart"}
61
-
height={"1rem"}
62
-
></iconify-icon>
63
-
{comment.likeCount} Likes
64
-
</p>
65
-
<p class="replies">
66
-
<iconify-icon
67
-
icon={"fa6-solid:comment"}
68
-
height={"1rem"}
69
-
></iconify-icon>
70
-
{comment.replyCount} Replies
71
-
</p>
72
-
<p class="replies">
73
-
<iconify-icon
74
-
icon={"fa6-solid:repeat"}
75
-
height={"1rem"}
76
-
></iconify-icon>
77
-
{comment.quoteCount} Quotes
78
-
</p>
79
-
</a>
80
-
</footer>
81
-
</article>
82
-
{:else}
83
-
<p>No comments just yet 🐄</p>
84
-
{/each}
85
-
{:catch}
86
-
<div>
87
-
<p>There was an error getting the comments! ⚠️</p>
88
-
<p>
89
-
Please <a href="mailto:me@claycow.com">reach out</a> if this persists.
90
-
❤️
30
+
{comment.author.displayName}
31
+
<span class="handle">(@{comment.author.handle})</span>
32
+
</a>
33
+
<time
34
+
class="comment-time"
35
+
aria-label="Commented on"
36
+
datetime={comment.record.createdAt}
37
+
>
38
+
{formatDate(new Date(comment.record.createdAt))}
39
+
</time>
40
+
</h2>
41
+
</header>
42
+
<p class="comment-body">{comment.record.text}</p>
43
+
<footer class="comment-counts">
44
+
<a
45
+
href={`https://bsky.app/profile/${comment.author.did}`}
46
+
rel="noopener noreferrer"
47
+
target="_blank"
48
+
>
49
+
<p class="likes">
50
+
<iconify-icon icon={"fa6-solid:heart"} height={"1rem"}
51
+
></iconify-icon>
52
+
{comment.likeCount} Likes
91
53
</p>
92
-
</div>
93
-
{/await}
54
+
<p class="replies">
55
+
<iconify-icon icon={"fa6-solid:comment"} height={"1rem"}
56
+
></iconify-icon>
57
+
{comment.replyCount} Replies
58
+
</p>
59
+
<p class="replies">
60
+
<iconify-icon icon={"fa6-solid:repeat"} height={"1rem"}
61
+
></iconify-icon>
62
+
{comment.quoteCount} Quotes
63
+
</p>
64
+
</a>
65
+
</footer>
66
+
</article>
67
+
{:else}
68
+
<p>No comments just yet 🐄</p>
69
+
{/each}
70
+
{:catch}
71
+
<div>
72
+
<p>There was an error getting the comments! ⚠️</p>
73
+
<p>
74
+
Please <a href="mailto:me@claycow.com">reach out</a> if this persists. ❤️
75
+
</p>
76
+
</div>
77
+
{/await}
94
78
</section>
95
79
96
80
<style>
97
-
.bluesky-comments {
98
-
display: flex;
99
-
flex-direction: column;
100
-
gap: 1rem;
101
-
}
81
+
.bluesky-comments {
82
+
display: flex;
83
+
flex-direction: column;
84
+
gap: 1rem;
85
+
}
102
86
103
-
.bluesky-comments > h2 {
104
-
margin-bottom: 0;
105
-
}
87
+
.bluesky-comments > h2 {
88
+
margin-bottom: 0;
89
+
}
106
90
107
-
.bluesky-comments > article {
108
-
background-color: var(--surface0);
109
-
padding: 1rem;
110
-
border-radius: 0.5rem;
111
-
}
91
+
.bluesky-comments > article {
92
+
background-color: var(--surface0);
93
+
padding: 1rem;
94
+
border-radius: 0.5rem;
95
+
}
112
96
113
-
.comment-author {
114
-
display: flex;
115
-
flex-direction: row;
116
-
font-size: medium;
117
-
margin: 0;
118
-
}
97
+
.comment-author {
98
+
display: flex;
99
+
flex-direction: row;
100
+
font-size: medium;
101
+
margin: 0;
102
+
}
119
103
120
-
.comment-author > a {
121
-
flex-grow: 1;
122
-
text-decoration: none;
123
-
color: var(--text);
124
-
}
104
+
.comment-author > a {
105
+
flex-grow: 1;
106
+
text-decoration: none;
107
+
color: var(--text);
108
+
}
125
109
126
-
.comment-author > a > .handle {
127
-
color: var(--subtext0);
128
-
}
110
+
.comment-author > a > .handle {
111
+
color: var(--subtext0);
112
+
}
129
113
130
-
.comment-author > .comment-time {
131
-
color: var(--subtext0);
132
-
font-size: x-small;
133
-
}
114
+
.comment-author > .comment-time {
115
+
color: var(--subtext0);
116
+
font-size: x-small;
117
+
}
134
118
135
-
.comment-body {
136
-
margin: 1rem 0 0;
137
-
}
119
+
.comment-body {
120
+
margin: 1rem 0 0;
121
+
}
138
122
139
-
.comment-counts > a {
140
-
display: flex;
141
-
flex-direction: row;
142
-
gap: 2rem;
143
-
text-decoration: none;
144
-
color: var(--text);
145
-
}
123
+
.comment-counts > a {
124
+
display: flex;
125
+
flex-direction: row;
126
+
gap: 2rem;
127
+
text-decoration: none;
128
+
color: var(--text);
129
+
}
146
130
147
-
.comment-counts > a > p {
148
-
display: flex;
149
-
flex-direction: row;
150
-
align-items: center;
151
-
gap: 0.5rem;
152
-
margin-bottom: 0;
153
-
}
131
+
.comment-counts > a > p {
132
+
display: flex;
133
+
flex-direction: row;
134
+
align-items: center;
135
+
gap: 0.5rem;
136
+
margin-bottom: 0;
137
+
}
154
138
</style>
+3
-3
src/utils/getBlogPostComments.ts
+3
-3
src/utils/getBlogPostComments.ts
···
5
5
6
6
async function getBlogPostComments(blogTitle: string) {
7
7
8
-
const agent = new AtpAgent({ service: new URL("https://public.api.bsky.app") })
8
+
const agent = new AtpAgent({ service: new URL("https://api.bsky.app") });
9
9
10
10
const post = await agent.app.bsky.feed.searchPosts({
11
-
q: `from:claycow.com #blog #${formatBlogTitleUrl(blogTitle)}`,
11
+
q: `#blog #${formatBlogTitleUrl(blogTitle)}`,
12
12
author: BLUESKY_DID,
13
13
limit: 1
14
14
}).then(({ data }) => {
···
48
48
return comments;
49
49
}
50
50
51
-
export default getBlogPostComments;
51
+
export default getBlogPostComments;