generated from 11ty/eleventy-base-blog
-
-
Notifications
You must be signed in to change notification settings - Fork 5
/
features.njk
338 lines (291 loc) · 21.5 KB
/
features.njk
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
<div
class="max-w-screen-xl my-24 px-4 lg:mx-auto">
<div class="text-3xl lg:text-5xl font-black lg:leading-[60px] text-base-content text-center mt-4 mx-auto">Digital spaces where you can <br /> <span> feel at home</span></div>
<div class="flex gap-2 flex-col" role="tabpanels">
{# x-show="isSelected($id('tab', whichChild($el, $el.parentElement)))"
:aria-labelledby="$id('tab', whichChild($el, $el.parentElement))" #}
<section
role="tabpanel"
class="grid border border-base-content/20 rounded-2xl h-full p-2 lg:p-12 grid-cols-4 items-center mt-16">
<div class="lg:col-span-2 col-span-4 lg:p-12 lg:pb-6 pb-2">
<div class="text-primary font-semibold font-mono uppercase mb-3">Configure</div>
<div class="font-bold max-w-screen-sm lg:leading-[40px] text-2xl lg:text-3xl">Effortlessly configure your favourite features, settings, and theme.</div>
<div class="mt-3 prose prose-lg">With Bonfire, you can shape a space that truly reflects your community's needs and aesthetic.</div>
</div>
<div class="lg:col-span-2 col-span-4">
<div style="background-image: url(/img/4.png)" class="bg-cover rounded-2xl lg:h-[400px] h-[200px] w-full"></div>
</div>
</section>
{# x-show="isSelected($id('tab', whichChild($el, $el.parentElement)))"
:aria-labelledby="$id('tab', whichChild($el, $el.parentElement))" #}
<section
role="tabpanel"
class="grid border border-base-content/20 rounded-2xl h-full p-2 lg:p-12 grid-cols-4 items-center">
<div class="lg:col-span-2 col-span-4">
<div style="background-image: url(/img/conn.png)" class="bg-cover lg:h-[405px] h-[200px] w-full rounded-2xl"></div>
</div>
<div class="lg:col-span-2 col-span-4 lg:p-12 lg:pb-6 pb-2">
<div class="text-primary font-semibold font-mono uppercase mb-3">Interact</div>
<div class="font-bold max-w-screen-sm lg:leading-[40px] text-2xl lg:text-3xl">Connect, share, and engage with purpose.</div>
<div class="mt-3 prose prose-lg">
Determine who sees your publications and activities and how your audience can interact with you for relevant and meaningful interactions.</div>
</div>
</section>
{# x-show="isSelected($id('tab', whichChild($el, $el.parentElement)))"
:aria-labelledby="$id('tab', whichChild($el, $el.parentElement))" #}
<section
role="tabpanel"
class="grid border border-base-content/20 rounded-2xl h-full p-2 lg:p-12 grid-cols-4 items-center">
<div class="lg:col-span-2 col-span-4 lg:p-12 lg:pb-6 pb-2">
<div class="text-primary font-semibold font-mono uppercase mb-3">Moderate</div>
<div class="font-bold max-w-screen-sm lg:leading-[40px] text-2xl lg:text-3xl">Moderate your network: safe, empowered, and inclusive</div>
<div class="mt-3 prose prose-lg">
Foster a safe community environment with tools for users and moderators to flag or remove problematic content, and to silence, ghost, or block users or instances, fostering a harmonious community. Utilise custom roles to decentralize power, moving away from traditional admin-centered models.</div>
</div>
<div class="lg:col-span-2 col-span-4">
<div style="background-image: url(/img/mod.png)" class="bg-cover rounded-2xl lg:h-[400px] h-[200px] w-full"></div>
</div>
</section>
{# x-show="isSelected($id('tab', whichChild($el, $el.parentElement)))"
:aria-labelledby="$id('tab', whichChild($el, $el.parentElement))" #}
<section
role="tabpanel"
class="grid border border-base-content/20 rounded-2xl h-full p-2 lg:p-12 grid-cols-4 items-center">
<div class="lg:col-span-2 col-span-4">
<div style="background-image: url(/img/fed.png)" class="bg-cover rounded-2xl lg:h-[400px] h-[200px] w-full"></div>
</div>
<div class="lg:col-span-2 col-span-4 lg:p-12 lg:pb-6 pb-2">
<div class="text-primary font-semibold font-mono uppercase mb-3">Federate</div>
<div class="font-bold max-w-screen-sm lg:leading-[40px] text-2xl lg:text-3xl">Global reach: connect with communities far and wide</div>
<div class="mt-3 prose prose-lg">
Embrace federation to interconnect with users on the wider <em>fediverse</em>, broadening your network and breaking down barriers. </div>
</div>
</section>
</div>
<div class="flex mt-8 items-center place-content-center">
<a class="btn btn-primary btn-wide" href="/start">
<span>Get Bonfire </span>
<span><svg class="w-6 h-6 ml-3" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="currentColor" d="m359.873 121.377l-22.627 22.627l95.997 95.997H16v32.001h417.24l-95.994 95.994l22.627 22.627L494.498 256z"/></svg></span></a>
</div>
<div class="max-w-screen-xl my-24 mx-4 lg:mx-auto">
<div class="text-5xl font-black leading-[60px] text-base-content text-center mt-4 mx-auto">Build social apps with ease</div>
<div class="text-2xl font-normal text-base-content/80 mx-auto text-center max-w-screen-md mt-4">The Bonfire toolkit provides essential modules for crafting complex social networking apps, tailored to communities' needs – all with significantly less time and resources.</div>
<div class="grid mt-12 md:grid-cols-2 gap-4 grid-cols-1 lg:grid-cols-4 ">
<div class="border flex flex-col border-base-content/20 rounded-2xl h-full p-12">
<div class="flex-1">
<div class="p-4 flex items-center place-content-center bg-base-content/10 shrink-0 rounded-box w-16 h-16">
<svg class="w-6 h-6 text-base-content" xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" viewBox="0 0 1200 1200"><path fill="currentColor" d="M328.261 271.758C146.977 271.758 0 418.697 0 599.981c0 181.283 146.977 328.261 328.261 328.261c161.72 0 296.083-116.959 323.206-270.903c.306.017.605.064.912.076h126.386v182.46h139.538v-182.46h65.796v264.068h139.538V657.414H1200V517.878H647.095c-.322.026-.63.048-.95.076c-36.424-141.583-164.926-246.196-317.884-246.196m0 151.853c97.415 0 176.37 78.955 176.37 176.37c0 97.414-78.955 176.407-176.37 176.407s-176.408-78.993-176.408-176.407c0-97.415 78.994-176.37 176.408-176.37"/></svg>
</div>
</div>
<div class="mt-6">
<div class="font-bold text-lg ">Authentication</div>
</div>
</div>
<div class="border flex flex-col border-base-content/20 rounded-2xl h-full p-12 ">
<div class="flex-1">
<div class="p-4 flex items-center place-content-center bg-base-content/10 shrink-0 rounded-box w-16 h-16">
<svg class="w-6 h-6 text-base-content" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-26.37 144h52.74C149 186.34 140 202.87 128 215.89c-12-13.02-21-29.55-26.37-47.89M98 152a145.72 145.72 0 0 1 0-48h60a145.72 145.72 0 0 1 0 48Zm-58-24a87.61 87.61 0 0 1 3.33-24h38.46a161.79 161.79 0 0 0 0 48H43.33A87.61 87.61 0 0 1 40 128m114.37-40h-52.74C107 69.66 116 53.13 128 40.11c12 13.02 21 29.55 26.37 47.89m19.84 16h38.46a88.15 88.15 0 0 1 0 48h-38.46a161.79 161.79 0 0 0 0-48m32.16-16h-35.43a142.39 142.39 0 0 0-20.26-45a88.37 88.37 0 0 1 55.69 45M105.32 43a142.39 142.39 0 0 0-20.26 45H49.63a88.37 88.37 0 0 1 55.69-45M49.63 168h35.43a142.39 142.39 0 0 0 20.26 45a88.37 88.37 0 0 1-55.69-45m101.05 45a142.39 142.39 0 0 0 20.26-45h35.43a88.37 88.37 0 0 1-55.69 45"/></svg>
</div>
</div>
<div class="mt-6">
<div class="font-bold text-lg ">Federation</div>
</div>
</div>
<div class="border flex flex-col border-base-content/20 rounded-2xl h-full p-12 ">
<div class="flex-1">
<div class="p-4 flex items-center place-content-center bg-base-content/10 shrink-0 rounded-box w-16 h-16">
<svg class="w-6 h-6 text-base-content" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><path fill="currentColor" d="M216 64v90.93c0 46.2-36.85 84.55-83 85.06a83.71 83.71 0 0 1-60.4-24.59C50.79 192.33 26.15 136 26.15 136a16 16 0 0 1 6.53-22.23c7.66-4 17.1-.84 21.4 6.62l21 36.44a6.09 6.09 0 0 0 6 3.09h.12a8.19 8.19 0 0 0 6.8-8.18V48a16 16 0 0 1 16.77-16c8.61.4 15.23 7.82 15.23 16.43V112a8 8 0 0 0 8.53 8a8.17 8.17 0 0 0 7.47-8.25V32a16 16 0 0 1 16.77-16c8.61.4 15.23 7.82 15.23 16.43V120a8 8 0 0 0 8.53 8a8.17 8.17 0 0 0 7.47-8.25v-55.3c0-8.61 6.62-16 15.23-16.43A16 16 0 0 1 216 64"/></svg>
</div>
</div>
<div class="mt-6">
<div class="font-bold text-lg ">Moderation</div>
</div>
</div>
{# <div class="border flex flex-col border-base-content/20 rounded-2xl h-full p-12 ">
<div class="flex-1">
<div class="p-4 flex items-center place-content-center bg-base-content/10 shrink-0 rounded-box w-16 h-16">
<svg class="w-6 h-6 text-base-content" xmlns="http://www.w3.org/2000/svg" width="640" height="512" viewBox="0 0 640 512"><path fill="currentColor" d="M320 96v320a160.019 160.019 0 0 0 113.138-46.862a160.019 160.019 0 0 0 34.683-174.367a160.006 160.006 0 0 0-86.591-86.592A160.019 160.019 0 0 0 320 96M0 256l160.002 160l160.001-160L160.002 96zm480 0a160 160 0 0 0 160 160V96a160.002 160.002 0 0 0-160 160"/></svg>
</div>
</div>
<div class="mt-6">
<div class="font-bold text-lg ">Topics & Groups</div>
</div>
</div> #}
<div class="border flex flex-col border-base-content/20 rounded-2xl h-full p-12 ">
<div class="flex-1">
<div class="p-4 flex items-center place-content-center bg-base-content/10 shrink-0 rounded-box w-16 h-16">
<svg class="w-6 h-6 text-base-content" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="currentColor"><path fill-opacity=".5" d="M12.552 8a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2zm0 9a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2z"/><path fill-opacity=".8" d="M12.552 5a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2zm0 9a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2z"/><path d="M3.448 4.002a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1zm0 8.996a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1z"/></g></svg>
</div>
</div>
<div class="mt-6">
<div class="font-bold text-lg ">Feeds & Activities</div>
</div>
</div>
<div class="border flex flex-col border-base-content/20 rounded-2xl h-full p-12 ">
<div class="flex-1">
<div class="p-4 flex items-center place-content-center bg-base-content/10 shrink-0 rounded-box w-16 h-16">
<svg class="w-6 h-6 text-base-content" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="currentColor" d="M10 4.499v-2.5H5.5a.5.5 0 0 0-.5.5v6.5h10V2.5a.5.5 0 0 0-.5-.5H13v3.502a.5.5 0 0 1-1 0V2h-1v2.5a.5.5 0 0 1-1 0m5 5.5H5v1.004a2 2 0 0 0 2 2h1.5v3.498a1.5 1.5 0 1 0 3 0v-3.498H13a2 2 0 0 0 2-2z"/></svg>
</div>
</div>
<div class="mt-6">
<div class="font-bold text-lg ">Themes</div>
</div>
</div>
<div class="border flex flex-col border-base-content/20 rounded-2xl h-full p-12 ">
<div class="flex-1">
<div class="p-4 flex items-center place-content-center bg-base-content/10 shrink-0 rounded-box w-16 h-16">
<svg class="w-6 h-6 text-base-content" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="currentColor" d="M10 4.499v-2.5H5.5a.5.5 0 0 0-.5.5v6.5h10V2.5a.5.5 0 0 0-.5-.5H13v3.502a.5.5 0 0 1-1 0V2h-1v2.5a.5.5 0 0 1-1 0m5 5.5H5v1.004a2 2 0 0 0 2 2h1.5v3.498a1.5 1.5 0 1 0 3 0v-3.498H13a2 2 0 0 0 2-2z"/></svg>
</div>
</div>
<div class="mt-6">
<div class="font-bold text-lg ">Boundaries</div>
</div>
</div>
<div class="border flex flex-col border-base-content/20 rounded-2xl h-full p-12 ">
<div class="flex-1">
<div class="p-4 flex items-center place-content-center bg-base-content/10 shrink-0 rounded-box w-16 h-16">
<svg class="w-6 h-6 text-base-content" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="currentColor" d="M10 4.499v-2.5H5.5a.5.5 0 0 0-.5.5v6.5h10V2.5a.5.5 0 0 0-.5-.5H13v3.502a.5.5 0 0 1-1 0V2h-1v2.5a.5.5 0 0 1-1 0m5 5.5H5v1.004a2 2 0 0 0 2 2h1.5v3.498a1.5 1.5 0 1 0 3 0v-3.498H13a2 2 0 0 0 2-2z"/></svg>
</div>
</div>
<div class="mt-6">
<div class="font-bold text-lg ">Circles</div>
</div>
</div>
<div class="border flex flex-col border-base-content/20 rounded-2xl h-full p-12 ">
<div class="flex-1">
<div class="p-4 flex items-center place-content-center bg-base-content/10 shrink-0 rounded-box w-16 h-16">
<svg class="w-6 h-6 text-base-content" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="currentColor" d="M10 4.499v-2.5H5.5a.5.5 0 0 0-.5.5v6.5h10V2.5a.5.5 0 0 0-.5-.5H13v3.502a.5.5 0 0 1-1 0V2h-1v2.5a.5.5 0 0 1-1 0m5 5.5H5v1.004a2 2 0 0 0 2 2h1.5v3.498a1.5 1.5 0 1 0 3 0v-3.498H13a2 2 0 0 0 2-2z"/></svg>
</div>
</div>
<div class="mt-6">
<div class="font-bold text-lg ">OpenId</div>
</div>
</div>
</div>
<div class="flex mt-12 items-center place-content-center">
<a class="btn btn-primary btn-wide" href="https://docs.bonfirenetworks.org">
<span>Build with Bonfire </span>
<span><svg class="w-6 h-6 ml-3" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="currentColor" d="m359.873 121.377l-22.627 22.627l95.997 95.997H16v32.001h417.24l-95.994 95.994l22.627 22.627L494.498 256z"/></svg></span></a>
</div>
</div>
</div>
<div class="max-w-screen-xl my-40 px-4 lg:mx-auto">
{# <div class="h-[1px] my-12 bg-base-content/30 mx-auto"></div> #}
<div class="text-5xl leading-[70px] text-center font-semibold mt-4">For communities, by communities</div>
<div class="items-center flex place-content-center"><a href="https://indieweb.social/@bonfire" class="btn mt-4 btn-outline !border !border-base-content/30 rounded-full normal-case">Follow @bonfire</a></div>
<div class="mx-auto grid max-w-screen-xl mt-24 grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
<div class="card border-base-content/10 card-compact border text-left">
<div class="card-body">
<div class="flex items-center gap-2">
<div class="avatar" data-svelte-h="svelte-1cw9wf0">
<a href="https://social.coop/@lynnfoster" target="_blank" rel="noopener, noreferrer" class="w-12">
<img loading="lazy" src="./img/lynn.png" alt="Dev Ed" width="48" height="48" class="pointer-events-none rounded-full">
</a>
</div>
<div class="flex flex-col items-start text-xs">
<div class="text-base-content font-bold">Lynn Foster</div>
<div class="text-base-content/60">[email protected]</div>
</div>
</div>
<p class="text-base-content">The most exciting thing about Bonfire to me is that they have set the stage to add all kinds of features integrated with the social networking core. Circles and groups to start, offers/wants... some day whole social/economic networks and ecosystems. Looking into the campfire, I can see a bright future for the fediverse.</p>
</div>
</div>
<div class="card lg:translate-y-16 border-base-content/10 card-compact border text-left">
<div class="card-body">
<div class="flex items-center gap-2">
<div class="avatar" data-svelte-h="svelte-1cw9wf0">
<a href="https://red.niboe.info/@jorge" target="_blank" rel="noopener, noreferrer" class="w-12">
<img loading="lazy" src="./img/jorge.jpeg" alt="Dev Ed" width="48" height="48" class="pointer-events-none rounded-full">
</a>
</div>
<div class="flex flex-col items-start text-xs">
<div class="text-base-content font-bold">Jorge Saturno</div>
<div class="text-base-content/60">@[email protected]</div>
</div>
</div>
<p class="text-base-content">Bonfire has the potential to bring federated social media to a new level. Its modular design will facilitate the creation of applications for all kind of purposes. We believe Bonfire will become the backbone of our future developments in the fields of open knowledge and science communication.</p>
</div>
</div>
<div class="card border-base-content/10 card-compact border text-left">
<div class="card-body">
<div class="flex items-center gap-2">
<div class="avatar" data-svelte-h="svelte-1cw9wf0">
<a href="https://social.coop/@bhaugen" target="_blank" rel="noopener, noreferrer" class="w-12">
<img loading="lazy" src="./img/bob.jpeg" alt="Dev Ed" width="48" height="48" class="pointer-events-none rounded-full">
</a>
</div>
<div class="flex flex-col items-start text-xs">
<div class="text-base-content font-bold">Bob Haugen</div>
<div class="text-base-content/60">@[email protected]</div>
</div>
</div>
<p class="text-base-content">While I like Bonfire already, and love their care at making everything work smoothly, I am most excited by their future plans. I am working on community economic systems where the future Bonfire could be the main coordination medium.</p>
</div>
</div>
<div class="card border-base-content/10 card-compact border text-left">
<div class="card-body">
<div class="flex items-center gap-2">
<div class="avatar" data-svelte-h="svelte-1cw9wf0">
<a href="https://mastodon.social/@samliebeskind" target="_blank" rel="noopener, noreferrer" class="w-12">
<img loading="lazy" src="https://files.mastodon.social/accounts/avatars/109/835/761/886/292/674/original/f19966c1f1fdfa7d.jpeg" alt="Dev Ed" width="48" height="48" class="pointer-events-none rounded-full">
</a>
</div>
<div class="flex flex-col items-start text-xs">
<div class="text-base-content font-bold">Sam Liebeskind</div>
<div class="text-base-content/60">@[email protected]</div>
</div>
</div>
<p class="text-base-content">Really excited about the approach the @bonfire team is taking - building a modular toolkit that'll make it easier for community leaders to create their own federated social networks. It's sort of like "wordpress for the fediverse". Still early days, but definitely onto something 👀</p>
</div>
</div>
<div class="card lg:translate-y-16 border-base-content/10 card-compact border text-left">
<div class="card-body">
<div class="flex items-center gap-2">
<div class="avatar" data-svelte-h="svelte-1cw9wf0">
<a href="https://theweathermakers.nl/" target="_blank" rel="noopener, noreferrer" class="w-12">
<img loading="lazy" src="https://theweathermakers.nl/wp-content/uploads/Angel-Imaz.png" alt="Dev Ed" width="48" height="48" class="pointer-events-none rounded-full">
</a>
</div>
<div class="flex flex-col items-start text-xs">
<div class="text-base-content font-bold">Angel</div>
<div class="text-base-content/60">The Weather Makers</div>
</div>
</div>
<p class="text-base-content">We are loving Bonfire. We are actively exploring it to move our tools into Bonfire. Getting access to the Fediverse and to all the blocks looks really promising, to quickly develop community driven processes.</p>
</div>
</div>
<div class="card border-base-content/10 card-compact border text-left">
<div class="card-body">
<div class="flex items-center gap-2">
<div class="avatar" data-svelte-h="svelte-1cw9wf0">
<a href="https://mastodon.tedomum.net/@lebout2canap" target="_blank" rel="noopener, noreferrer" class="w-12">
<img loading="lazy" src="https://cdn.masto.host/indiewebsocial/cache/accounts/avatars/109/171/857/228/733/355/original/04f502f3a41a8b3e.jpg" alt="Dev Ed" width="48" height="48" class="pointer-events-none rounded-full">
</a>
</div>
<div class="flex flex-col items-start text-xs">
<div class="text-base-content font-bold">lebout2canap ⏚</div>
<div class="text-base-content/60">@[email protected]</div>
</div>
</div>
<p class="text-base-content">Le projet @bonfire a mis à jour la page d'accueil de son site web. L'occasion de découvrir ou redécouvrir ce à quoi on doit s'attendre pour la future version 1. Je suis convaincu que #Bonfire aura un important rôle à jouer dans l'avenir du #Fediverse.</p>
</div>
</div>
<div class="card border-base-content/10 card-compact border text-left">
<div class="card-body">
<div class="flex items-center gap-2">
<div class="avatar" data-svelte-h="svelte-1cw9wf0">
<a href="https://mastodon.social/@LibertyBeta" target="_blank" rel="noopener, noreferrer" class="w-12">
<img loading="lazy" src="https://files.mastodon.social/accounts/avatars/000/223/823/original/8354999666f32c7d.jpg" alt="Dev Ed" width="48" height="48" class="pointer-events-none rounded-full">
</a>
</div>
<div class="flex flex-col items-start text-xs">
<div class="text-base-content font-bold">Mecha Code</div>
<div class="text-base-content/60">@[email protected]</div>
</div>
</div>
<p class="text-base-content">Why see some #bluesky when you could all gather around the @bonfire</p>
</div>
</div>
</div>
</div>
{# </div> #}