Add Bluesky replies, quotes, and reposts to any web page. Handy for adding a comments section anywhere.
Add demo page with three usage examples
Shows basic usage, custom header template with shallow depth,
and original post display with purple CSS theme overrides.
+67
+67
demo.html
+67
demo.html
···
1
+
<!DOCTYPE html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="UTF-8">
5
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+
<title><bsky-conversation> demo</title>
7
+
<style>
8
+
* { box-sizing: border-box; margin: 0; }
9
+
body {
10
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
11
+
line-height: 1.6;
12
+
color: #1a1a1a;
13
+
max-width: 640px;
14
+
margin: 0 auto;
15
+
padding: 2rem 1rem;
16
+
}
17
+
h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }
18
+
h2 { font-size: 1.1rem; margin-top: 2.5rem; margin-bottom: 0.5rem; color: #374151; }
19
+
p.subtitle { color: #6b7280; margin-bottom: 2rem; }
20
+
code { background: #f3f4f6; padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; }
21
+
section { border-top: 1px solid #e5e7eb; padding-top: 1rem; }
22
+
.themed {
23
+
--bsky-link-color: #7c3aed;
24
+
--bsky-link-hover: #6d28d9;
25
+
--bsky-link-underline: rgba(124, 58, 237, 0.3);
26
+
--bsky-link-underline-hover: rgba(109, 40, 217, 0.4);
27
+
--bsky-muted-color: #8b5cf6;
28
+
}
29
+
</style>
30
+
<script type="module" src="bsky-conversation.js"></script>
31
+
</head>
32
+
<body>
33
+
34
+
<h1><bsky-conversation></h1>
35
+
<p class="subtitle">A zero-dependency web component for Bluesky conversation threads.</p>
36
+
37
+
<section>
38
+
<h2>Basic usage</h2>
39
+
<p>Just a <code>uri</code> attribute — default settings for everything else.</p>
40
+
<bsky-conversation
41
+
uri="https://bsky.app/profile/did:plc:ewvi7nxzyoun6zhxrhs64oiz/post/3mf2y35apvc2i"
42
+
></bsky-conversation>
43
+
</section>
44
+
45
+
<section>
46
+
<h2>Custom header template + shallow depth</h2>
47
+
<p>Using <code>header-template</code> with pluralization and conditional blocks, <code>max-depth="1"</code>.</p>
48
+
<bsky-conversation
49
+
uri="https://bsky.app/profile/did:plc:ewvi7nxzyoun6zhxrhs64oiz/post/3mg6cliy3lc26"
50
+
max-depth="1"
51
+
header-template="This post has {replies?{replies|reply|replies}}{quotes?, {quotes|quote|quotes}}{repostedBy?, and was reposted by {repostedBy}}."
52
+
></bsky-conversation>
53
+
</section>
54
+
55
+
<section>
56
+
<h2>Show original post + custom theme</h2>
57
+
<p>With <code>show-original-post="true"</code>, custom <code>engage-text</code>, and purple CSS overrides.</p>
58
+
<bsky-conversation
59
+
class="themed"
60
+
uri="https://bsky.app/profile/atproto.com/post/3mgni4shwas2k"
61
+
show-original-post="true"
62
+
engage-text="Join the discussion on Bluesky"
63
+
></bsky-conversation>
64
+
</section>
65
+
66
+
</body>
67
+
</html>