Add Bluesky replies, quotes, and reposts to any web page. Handy for adding a comments section anywhere.
Add button nav to demo page
+20
-2
+20
-2
demo.html
+20
-2
demo.html
···
18
18
h2 { font-size: 1.1rem; margin-top: 2.5rem; margin-bottom: 0.5rem; color: #374151; }
19
19
p.subtitle { color: #6b7280; margin-bottom: 2rem; }
20
20
code { background: #f3f4f6; padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; }
21
+
nav { display: flex; gap: 0.5rem; margin-bottom: 2rem; }
22
+
nav a {
23
+
display: inline-block;
24
+
padding: 0.5rem 1rem;
25
+
border-radius: 6px;
26
+
background: #f3f4f6;
27
+
color: #374151;
28
+
text-decoration: none;
29
+
font-size: 0.875rem;
30
+
font-weight: 500;
31
+
transition: background 150ms;
32
+
}
33
+
nav a:hover { background: #e5e7eb; }
21
34
section { border-top: 1px solid #e5e7eb; padding-top: 1rem; }
22
35
.themed {
23
36
--bsky-link-color: #7c3aed;
···
34
47
<h1><bsky-conversation></h1>
35
48
<p class="subtitle">A zero-dependency web component for Bluesky conversation threads.</p>
36
49
37
-
<section>
50
+
<nav>
51
+
<a href="#basic">Basic</a>
52
+
<a href="#custom">Custom theme</a>
53
+
</nav>
54
+
55
+
<section id="basic">
38
56
<h2>Basic usage</h2>
39
57
<p>Just a <code>uri</code> attribute — default settings for everything else.</p>
40
58
<bsky-conversation
···
42
60
></bsky-conversation>
43
61
</section>
44
62
45
-
<section>
63
+
<section id="custom">
46
64
<h2>Custom theme + header template</h2>
47
65
<p>Purple CSS overrides, <code>show-original-post="true"</code>, and a narrative <code>header-template</code> that uses conditionals to build a sentence.</p>
48
66
<bsky-conversation