the home site for me: also iteration 3 or 4 of my site
feat: add bluesky shortcode
+79
+28
sass/css/mods.css
+28
sass/css/mods.css
···
179
179
border-style: dashed;
180
180
}
181
181
182
+
img.avatar {
183
+
width: 24px;
184
+
height: 24px;
185
+
aspect-ratio: 1 / 1;
186
+
border-radius: 50%;
187
+
vertical-align: middle;
188
+
display: inline-block;
189
+
border: none;
190
+
padding: 0;
191
+
margin: 0;
192
+
}
193
+
194
+
cite {
195
+
display: inline-flex;
196
+
align-items: center;
197
+
vertical-align: middle;
198
+
gap: 0.5rem;
199
+
}
200
+
201
+
cite a {
202
+
display: inline-flex;
203
+
align-items: center;
204
+
}
205
+
206
+
cite a img.avatar {
207
+
margin-right: 5px;
208
+
}
209
+
182
210
:root {
183
211
--nightshade-violet: oklch(0.27 0.0242 287.67);
184
212
--purple-night: oklch(27.58% 0.0203 289.13);
+51
templates/shortcodes/bluesky.html
+51
templates/shortcodes/bluesky.html
···
1
+
{% set profile_part = post | split(pat="profile/") | last %} {% set parts =
2
+
profile_part | split(pat="/") %} {% set handle = parts[0] %} {% set post_id =
3
+
parts[2] %} {% set api_url =
4
+
"https://public.api.bsky.app/xrpc/app.bsky.feed.getPostThread?uri=at://" ~
5
+
handle ~ "/app.bsky.feed.post/" ~ post_id %} {% set response =
6
+
load_data(url=api_url, format="json") %} {% if response.thread and
7
+
response.thread.post %} {% set post_data = response.thread.post %} {% set author
8
+
= post_data.author.displayName %} {% set handle = post_data.author.handle %} {%
9
+
set content = post_data.record.text %} {% set has_embed = post_data.embed is
10
+
defined and post_data.embed %}
11
+
<blockquote>
12
+
{{ content }} {% if has_embed and post_data.embed["$type"] ==
13
+
"app.bsky.embed.video#view" %}
14
+
<video controls poster="{{ post_data.embed.thumbnail }}">
15
+
<source
16
+
src="{{ post_data.embed.playlist }}"
17
+
type="application/x-mpegURL"
18
+
/>
19
+
</video>
20
+
{% endif %}
21
+
<p>
22
+
<cite>
23
+
<a href="{{ post }}" target="_blank" rel="noopener"
24
+
><img
25
+
src="{{ post_data.author.avatar }}"
26
+
alt="{{ author }}'s avatar"
27
+
class="avatar"
28
+
/>@{{ handle }}</a
29
+
></cite
30
+
>
31
+
</p>
32
+
</blockquote>
33
+
{% else %}
34
+
<blockquote>
35
+
<div class="bsky-post">
36
+
<div class="bsky-post-content">"Failed to render Bluesky post"</div>
37
+
<div class="bsky-post-footer">
38
+
<cite
39
+
><img
40
+
src="/img/bluesky-logo.png"
41
+
alt="Bluesky logo"
42
+
class="avatar"
43
+
/>
44
+
<a href="{{ post }}" target="_blank" rel="noopener"
45
+
>View on Bluesky</a
46
+
></cite
47
+
>
48
+
</div>
49
+
</div>
50
+
</blockquote>
51
+
{% endif %}