Add Bluesky replies, quotes, and reposts to any web page. Handy for adding a comments section anywhere.
Consolidate demo to two examples with narrative header template
Merged the header template and custom theme demos into one.
Uses a more distinctive template style ("People are talking!
3 people have replied...") instead of mirroring the default format.
+3
-12
+3
-12
demo.html
+3
-12
demo.html
···
43
43
</section>
44
44
45
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>
46
+
<h2>Custom theme + header template</h2>
47
+
<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>
58
48
<bsky-conversation
59
49
class="themed"
60
50
uri="https://bsky.app/profile/atproto.com/post/3mgni4shwas2k"
61
51
show-original-post="true"
62
52
engage-text="Join the discussion on Bluesky"
53
+
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}}."
63
54
></bsky-conversation>
64
55
</section>
65
56