Add Bluesky replies, quotes, and reposts to any web page. Handy for adding a comments section anywhere.
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 a { color: #374151; }
21 a:hover { color: #2564eb; }
22 code { background: #f3f4f6; padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; }
23 pre { background: #f3f4f6; padding: 1em; border-radius: 6px; overflow-x: auto; font-size: 0.8rem; line-height: 1.5; margin: 0.75rem 0 1.5rem; }
24 pre code { background: none; padding: 0; font-size: inherit; }
25 nav { display: flex; gap: 0.5rem; margin-bottom: 2rem; }
26 nav a {
27 display: inline-block;
28 padding: 0.5rem 1rem;
29 border-radius: 6px;
30 background: #f3f4f6;
31 color: #374151;
32 text-decoration: none;
33 font-size: 0.875rem;
34 font-weight: 500;
35 transition: background 150ms;
36 }
37 nav a:hover { background: #e5e7eb; }
38 section { border-top: 1px solid #e5e7eb; padding-top: 1rem; }
39 .bsky-conversation .timeline.timeline {
40 padding-left: 1em;
41 padding-right: 1em;
42 }
43 .bsky-conversation li.quote {
44 background: rgba(0, 0, 0, 0.03);
45 border-radius: 8px;
46 padding: 1em 1em;
47 margin: 0.75em -1em;
48 }
49 .bsky-conversation li.quote::before {
50 content: "Quoted by:";
51 display: block;
52 font-size: smaller;
53 color: var(--bsky-muted-color, #6b7280);
54 margin-bottom: 0.25em;
55 }
56 .themed {
57 --bsky-link-color: #7c3aed;
58 --bsky-link-hover: #6d28d9;
59 --bsky-link-underline: rgba(124, 58, 237, 0.3);
60 --bsky-link-underline-hover: rgba(109, 40, 217, 0.4);
61 --bsky-muted-color: #8b5cf6;
62 }
63 </style>
64 <script type="module" src="bsky-conversation.js"></script>
65</head>
66<body>
67
68 <h1><bsky-conversation></h1>
69 <p class="subtitle">A zero-dependency web component for Bluesky conversation threads.</p>
70 <p class="subtitle"><a href="https://tangled.org/jimray.bsky.team/bsky-conversation">Full source code available on tangled.org</a></p>
71
72 <nav>
73 <a href="#basic">Basic</a>
74 <a href="#themed">Themed</a>
75 </nav>
76
77 <section id="basic">
78 <h2>Basic usage</h2>
79 <p>Default settings with just a <code>uri</code> attribute and custom CSS styling.</p>
80 <pre><code><bsky-conversation
81 uri="https://bsky.app/profile/did:plc:ewvi7nxzyoun6zhxrhs64oiz/post/3mf2y35apvc2i" >
82</bsky-conversation></code></pre>
83 <bsky-conversation
84 uri="https://bsky.app/profile/did:plc:ewvi7nxzyoun6zhxrhs64oiz/post/3mf2y35apvc2i"
85 ></bsky-conversation>
86 </section>
87
88 <section id="themed">
89 <h2>Custom theme + header template</h2>
90 <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>
91 <pre><code><bsky-conversation
92 class="themed"
93 uri="https://bsky.app/profile/atproto.com/post/3mgni4shwas2k"
94 show-original-post="true"
95 engage-text="Join the discussion on Bluesky"
96 header-template="People are talking!{replies? {replies|person has|people have} replied}{quotes? and {quotes|person has|people have} quoted this post}{repostedBy? — shared by {repostedBy}}.">
97</bsky-conversation></code></pre>
98 <bsky-conversation
99 class="themed"
100 uri="https://bsky.app/profile/atproto.com/post/3mgni4shwas2k"
101 show-original-post="true"
102 engage-text="Join the discussion on Bluesky"
103 header-template="People are talking!{replies? {replies|person has|people have} replied}{quotes? and {quotes|person has|people have} quoted this post}{repostedBy? — shared by {repostedBy}}."
104 ></bsky-conversation>
105 </section>
106
107</body>
108</html>