Allows you to use Mastodon and Bluesky comments on your Lustre blog
chilp.hexdocs.pm
lustre
indieweb
mastodon
bluesky
comments
blog
gleam
Example INSIDE the docs !!!
Signed-off-by: MLC Bloeiman <mar@strawmelonjuice.com>
MLC Bloeiman
(Apr 30, 2026, 4:19 PM +0200)
929e7568
210c18cf
+275
-2
+275
-2
src/chilp.gleam
+275
-2
src/chilp.gleam
···
1
+
//// <script src="https://site.strawmelonjuice.com/chilp-only.js" type="module"></script>
2
+
//// <style>
3
+
//// .comment-widget {
4
+
//// position: relative;
5
+
//// font-size: unset;
6
+
//// --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
7
+
//// border: solid 2px var(--hot-pink);
8
+
//// border-radius: 25px;
9
+
//// transition: 0.3s;
10
+
//// width: 100%;
11
+
//// margin: auto;
12
+
//// box-shadow: 0 8px 16px 0 var(--shadow);
13
+
//// padding: 10px;
14
+
//// background-color: var(--light-grey);
15
+
//// @media only screen and (max-width: 600px) { width: 98VW; position: absolute; left: 1VW; margin: 0; }
16
+
//// * {
17
+
//// box-sizing: unset;
18
+
//// }
19
+
//// .btn {
20
+
//// cursor: pointer;
21
+
//// }
22
+
//// .tabs-box {
23
+
//// color: var(--black);
24
+
//// text-size-adjust: 100%;
25
+
//// tab-size: 4;
26
+
//// line-height: 1.5;
27
+
//// -webkit-tap-highlight-color: transparent;
28
+
//// box-sizing: border-box;
29
+
//// border: 0px solid;
30
+
//// margin: 0px;
31
+
//// flex-wrap: wrap;
32
+
//// flex-direction: row;
33
+
//// display: flex;
34
+
//// background-color: var(--accent);
35
+
//// border-radius: 20px;
36
+
//// box-shadow: 0 -.5px oklch(100% 0 0 / .1) inset, 0 .5px oklch(0% 0 0 / .05) inset;
37
+
//// padding: 0.25rem;
38
+
//// height: 45px;
39
+
//// border-bottom-width: 2px;
40
+
//// border-color: var(--accent);
41
+
//// padding: 5.6px 0px 1.5px;
42
+
//// justify-content: center;
43
+
//// align-items: stretch;
44
+
//// gap: 0.5rem;
45
+
//// .tab {
46
+
//// /* margin: 5px; */
47
+
//// height: 30px;
48
+
//// width: 40%;
49
+
//// border-radius: 20px;
50
+
//// border: none;
51
+
//// order: 0;
52
+
//// background-color: var(--light-grey);
53
+
//// padding-inline: 3%;
54
+
//// :hover&:not(&.tab-active) {
55
+
//// background-color: var(--boi-blue)
56
+
//// }
57
+
//// &.tab-active {
58
+
//// background-color: var(--hot-pink);
59
+
//// color: var(--light-grey);
60
+
//// }
61
+
//// }
62
+
//// }
63
+
//// p.text-xs {
64
+
//// font-size: 12px;
65
+
//// }
66
+
//// .join.w-full.shadow-sm {
67
+
//// background-color: var(--pink);
68
+
//// border-radius: var(--gap);
69
+
//// width: 100%;
70
+
//// display: inline-flex;
71
+
//// align-items: stretch;
72
+
//// padding: 3px;
73
+
//// .flex-1 {
74
+
//// border-radius: var(--gap);
75
+
//// flex: 1 1 0%;
76
+
//// cursor: text;
77
+
//// background-color: var(--pink-white);
78
+
//// vertical-align: middle;
79
+
//// white-space: nowrap;
80
+
//// width: clamp(3rem, 20rem, 100%);
81
+
//// height: var(--gap);
82
+
//// touch-action: manipulation;
83
+
//// border: none;
84
+
//// flex-shrink: 1;
85
+
//// align-items: center;
86
+
//// gap: 0.5rem;
87
+
//// padding-inline: 0.75rem;
88
+
//// display: inline-flex;
89
+
//// position: relative;
90
+
//// }
91
+
//// }
92
+
//// .content {
93
+
//// margin-left: 0px;
94
+
//// margin-bottom: 0px;
95
+
//// padding: 0px;
96
+
//// }
97
+
//// .comment {
98
+
//// margin-top: 8px;
99
+
//// }
100
+
//// .card.card-dash.bg-base-200\/70.border-base-300 {
101
+
//// margin: 0px;
102
+
//// padding: 0px;
103
+
//// border-radius: var(--gap);
104
+
//// outline-offset: 2px;
105
+
//// outline: rgba(0, 0, 0, 0) solid 0px;
106
+
//// flex-direction: column;
107
+
//// transition: outline 0.2s ease-in-out;
108
+
//// display: flex;
109
+
//// position: relative;
110
+
//// border: 2px dashed var(--pink-white);
111
+
//// border-color: var(--pink);
112
+
//// background-color: color-mix(in oklab, var(--color-base-200) 70%, transparent);
113
+
//// }
114
+
////
115
+
//// footer > div > .btn.btn-sm.absolute.right-8 {
116
+
//// display: inline-block;
117
+
//// outline-offset: 2px;
118
+
//// vertical-align: middle;
119
+
//// position: absolute;
120
+
//// right: 28px;
121
+
//// }
122
+
////
123
+
////
124
+
//// .hidden {
125
+
//// display: none;
126
+
//// }
127
+
//// header {
128
+
//// display: flex;
129
+
//// figure {
130
+
//// margin: 0;
131
+
//// }
132
+
//// & .avatar {
133
+
//// mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e");
134
+
//// width: 45px;
135
+
//// height: 45px;
136
+
//// vertical-align: middle;
137
+
//// display: inline-block;
138
+
//// mask-position: 50% center;
139
+
//// mask-size: contain;
140
+
//// mask-repeat: no-repeat;
141
+
//// display: inline-block;
142
+
//// }
143
+
//// .meta {
144
+
////
145
+
//// padding-left: 16px;
146
+
//// max-height: 45px;
147
+
//// margin: 0;
148
+
//// max-height: 45px;
149
+
//// display: flex;
150
+
//// flex-direction: column;
151
+
//// justify-content: space-around;
152
+
//// align-items: flex-start;
153
+
//// * {
154
+
//// max-height: 22px;
155
+
//// padding: 0;
156
+
//// margin: 0;
157
+
//// line-height: 0.9;
158
+
//// }
159
+
//// p.text-xs {
160
+
//// font-size: 10px;
161
+
//// }
162
+
//// .badge {
163
+
//// border-radius: .5rem;
164
+
//// vertical-align: middle;
165
+
//// border: 2px solid;
166
+
//// background-size: auto, calc(var(--noise) * 100%);
167
+
//// background-image: none, var(--fx-noise);
168
+
//// height: 24px;
169
+
//// padding: 1px 3px 1.5px 3px;
170
+
//// justify-content: center;
171
+
//// align-items: center;
172
+
//// gap: 0.5rem;
173
+
//// font-size: 12px;
174
+
//// display: inline-flex;
175
+
//// margin-inline-start: calc(.25rem * 2);
176
+
//// &.bg-\[\#595aff\] {
177
+
//// --badge-bg: #595aff;
178
+
//// --badge-fg: white;
179
+
//// background-color: #595aff;
180
+
//// color: var(--white);
181
+
//// }
182
+
//// &.bg-\[\#006aff\] {
183
+
//// --badge-bg: #006aff;
184
+
//// --badge-fg: white;
185
+
//// background-color: #006aff;
186
+
//// color: var(--white);
187
+
//// }
188
+
//// &.badge-accent {
189
+
//// --badge-bg: var(--boi-blue);
190
+
//// --badge-fg: var(--black);
191
+
//// background-color: var(--boi-blue);
192
+
//// opacity: 70%;
193
+
//// color: var(--black);
194
+
//// }
195
+
//// }
196
+
//// }
197
+
////
198
+
//// }
199
+
////
200
+
//// .chilp-oat-enhance-inset-2em { padding-inline-start: 2em; }
201
+
//// .chilp-oat-enhance-inset-blueskyreply, .chilp-oat-enhance-inset-witchskyreply, .chilp-oat-enhance-inset-blackskyreply {
202
+
//// margin: 5px;
203
+
//// height: 30px;
204
+
//// width: fit-content;
205
+
//// border-radius: 20px;
206
+
//// border: none;
207
+
//// order: 0;
208
+
//// background-color: var(--light-grey);
209
+
//// padding-inline: 12px;
210
+
//// box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.75);
211
+
//// -webkit-box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.75);
212
+
//// -moz-box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.75);
213
+
//// }
214
+
//// .chilp-oat-enhance-inset-quoteblock { border-left: 1px solid; padding-inline-start: 1.5em; }
215
+
//// .chilp-oat-enhance-inset-blueskyreply { color: rgb(0, 106, 255); background-color: white; &::after { content: "luesky"; } }
216
+
//// .chilp-oat-enhance-inset-blackskyreply { color: white; background-color: black; &::after { content: "lacksky"; } }
217
+
//// .chilp-oat-enhance-inset-witchskyreply { color: white; background-color: rgb(237, 83, 69); &::after { content: "itchsky"; } }
218
+
//// }
219
+
////
220
+
////
221
+
////
222
+
//// </style>
223
+
////
224
+
////
225
+
////
226
+
//// # Chilp
227
+
////
228
+
229
+
// --black: #2a2020;
230
+
// --hard-black: #000;
231
+
// --pink: #ffaff3;
232
+
// --hot-pink: #d900b8;
233
+
// --white: #fff;
234
+
// --pink-white: #fff8fe;
235
+
// --mid-grey: #dfe2e5;
236
+
// --light-grey: #f5f5f5;
237
+
// --boi-blue: #a6f0fc;
238
+
// --text: var(--black);
239
+
// --background: var(--white);
240
+
// --accented-background: var(--pink-white);
241
+
// --code-border: var(--pink);
242
+
// --code-background: var(--light-grey);
243
+
// --table-border: var(--mid-grey);
244
+
// --table-background: var(--pink-white);
245
+
// --links: var(--hot-pink);
246
+
// --accent: var(--pink);
247
+
// --content-width: 772px;
248
+
// --header-height: 60px;
249
+
// --hash-offset: calc(var(--header-height) * 1.67);
250
+
// --sidebar-width: 240px;
251
+
// --gap: 24px;
252
+
// --small-gap: calc(var(--gap) / 2);
253
+
// --tiny-gap: calc(var(--small-gap) / 2);
254
+
// --large-gap: calc(var(--gap) * 2);
255
+
// --sidebar-toggle-size: 33px;
256
+
// --search-height: 4rem;
257
+
// --shadow: 0 0 0 1px rgba(50, 50, 93, 0.075), 0 0 1px #e9ecef,
258
+
// 0 2px 4px -2px rgba(138, 141, 151, 0.6);
259
+
// --nav-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
260
+
1
261
// IMPORTS ---------------------------------------------------------------------
2
262
import gleam/bool
3
263
import gleam/dynamic/decode
···
55
315
56
316
/// # The widget
57
317
///
58
-
/// Before adding this component make sure to call `chilp.register()` to register it!
318
+
/// Before adding this component make sure to call [`chilp.register()`](#register) to register it!
59
319
///
60
-
/// Little example:
320
+
/// After that, use it like this:
61
321
/// ```gleam
62
322
/// chilp.widget(
63
323
/// // We connect to Bluesky...
···
66
326
/// mastodon: option.None
67
327
/// )
68
328
/// ```
329
+
///
330
+
/// ## An example with real values:
331
+
/// ```gleam
332
+
/// html.text("I use a cool list of devices!")
333
+
/// chilp.widget(
334
+
/// bluesky: option.Some(chilp.bluesky(did: "did:plc:jgtfsmv25thfs4zmydtbccnn", post_id: "3mk5u4xwqus2i")),
335
+
/// mastodon: option.Some(chilp.mastodon(instance: "pony.social", post_id: "116453666510859359"))
336
+
/// )
337
+
/// ```
338
+
/// Yields you:
339
+
///
340
+
/// > I use a cool list of devices!
341
+
/// > <comment-widget bluesky-anchor="did:plc:jgtfsmv25thfs4zmydtbccnn\3mk5u4xwqus2i" mastodon-anchor="pony.social\116453666510859359"></comment-widget>
69
342
///
70
343
pub fn widget(
71
344
mastodon mastodon_anchor: Option(Mastodon),