Allows you to use Mastodon and Bluesky comments on your Lustre blog hexdocs.pm/chilp/
blog gleam lustre indieweb mastodon bluesky comments
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Example INSIDE the docs !!!


Signed-off-by: MLC Bloeiman <mar@strawmelonjuice.com>

+275 -2
+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),