My agentic slop goes here. Not intended for anyone else!
anil.recoil.org
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>Bushel Author Components - Real World Examples</title>
7 <script src="bushel-author.js"></script>
8 <style>
9 * {
10 margin: 0;
11 padding: 0;
12 box-sizing: border-box;
13 }
14
15 body {
16 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
17 line-height: 1.6;
18 color: #333;
19 background: #fafafa;
20 }
21
22 header {
23 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
24 color: white;
25 padding: 3rem 1rem;
26 text-align: center;
27 }
28
29 header h1 {
30 font-size: 2.5rem;
31 margin-bottom: 0.5rem;
32 }
33
34 header p {
35 font-size: 1.1rem;
36 opacity: 0.9;
37 max-width: 600px;
38 margin: 0 auto;
39 }
40
41 main {
42 max-width: 1200px;
43 margin: 0 auto;
44 padding: 0 1rem;
45 }
46
47 .section {
48 background: white;
49 margin: 3rem 0;
50 padding: 2.5rem;
51 border-radius: 0.75rem;
52 box-shadow: 0 2px 8px rgba(0,0,0,0.1);
53 }
54
55 .section h2 {
56 color: #495057;
57 margin-bottom: 1.5rem;
58 font-size: 1.75rem;
59 }
60
61 .section p {
62 margin-bottom: 1.5rem;
63 color: #666;
64 }
65
66 /* Blog post layout */
67 .blog-post {
68 border-left: 4px solid #667eea;
69 padding-left: 1.5rem;
70 margin: 2rem 0;
71 }
72
73 .blog-post h3 {
74 color: #495057;
75 margin-bottom: 0.5rem;
76 }
77
78 .blog-post .meta {
79 display: flex;
80 align-items: center;
81 gap: 1rem;
82 margin: 1rem 0;
83 padding: 1rem 0;
84 border-top: 1px solid #e9ecef;
85 border-bottom: 1px solid #e9ecef;
86 }
87
88 .blog-post .content {
89 color: #555;
90 font-size: 1.1rem;
91 }
92
93 /* Team grid */
94 .team-grid {
95 display: grid;
96 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
97 gap: 2rem;
98 margin-top: 2rem;
99 }
100
101 .team-member {
102 background: #f8f9fa;
103 padding: 1.5rem;
104 border-radius: 0.5rem;
105 text-align: center;
106 }
107
108 /* Author bylines */
109 .article-byline {
110 display: flex;
111 align-items: center;
112 gap: 1rem;
113 padding: 1rem;
114 background: #f8f9fa;
115 border-radius: 0.5rem;
116 margin: 1rem 0;
117 }
118
119 .article-content {
120 background: white;
121 padding: 2rem;
122 border-radius: 0.5rem;
123 border: 1px solid #e9ecef;
124 margin-top: 1rem;
125 }
126
127 /* Comment thread */
128 .comment-thread {
129 background: #f8f9fa;
130 border-radius: 0.5rem;
131 padding: 1.5rem;
132 margin: 1rem 0;
133 }
134
135 .comment {
136 background: white;
137 border-radius: 0.5rem;
138 padding: 1rem;
139 margin: 1rem 0;
140 border-left: 3px solid #667eea;
141 }
142
143 .comment-header {
144 display: flex;
145 align-items: center;
146 gap: 1rem;
147 margin-bottom: 0.75rem;
148 }
149
150 .comment-body {
151 color: #555;
152 }
153
154 /* Footer */
155 footer {
156 background: #343a40;
157 color: white;
158 text-align: center;
159 padding: 2rem 1rem;
160 margin-top: 4rem;
161 }
162
163 /* Custom theme examples */
164 .theme-dark {
165 --bushel-author-background: #2d3748;
166 --bushel-author-name-color: #e2e8f0;
167 --bushel-author-title-color: #a0aec0;
168 --bushel-author-social-color: #4299e1;
169 --bushel-author-padding: 1rem;
170 --bushel-author-border-radius: 0.5rem;
171 }
172
173 .theme-minimal {
174 --bushel-author-photo-size: 1.5rem;
175 --bushel-author-gap: 0.5rem;
176 --bushel-author-name-size: 0.875rem;
177 --bushel-author-social-size: 0.75rem;
178 }
179
180 .theme-colorful {
181 --bushel-author-background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
182 --bushel-author-name-color: white;
183 --bushel-author-title-color: rgba(255,255,255,0.8);
184 --bushel-author-social-color: white;
185 --bushel-author-padding: 1rem;
186 --bushel-author-border-radius: 1rem;
187 }
188
189 @media (max-width: 768px) {
190 header h1 {
191 font-size: 2rem;
192 }
193
194 .section {
195 margin: 2rem 0;
196 padding: 1.5rem;
197 }
198
199 .blog-post .meta {
200 flex-direction: column;
201 align-items: flex-start;
202 gap: 0.5rem;
203 }
204
205 .article-byline {
206 flex-direction: column;
207 align-items: flex-start;
208 text-align: left;
209 }
210 }
211 </style>
212</head>
213<body>
214 <header>
215 <h1>Bushel Author Components</h1>
216 <p>Semantic, accessible author information with microformat support for the modern web</p>
217 </header>
218
219 <main>
220 <section class="section">
221 <h2>Blog Post Authors</h2>
222 <p>Perfect for article bylines and author attribution in blog posts and news articles.</p>
223
224 <article class="blog-post">
225 <h3>Building Accessible Web Components in 2025</h3>
226 <div class="meta">
227 <bushel-author
228 name="Sarah Chen"
229 job-title="Senior Frontend Developer"
230 org="Mozilla"
231 photo="https://picsum.photos/200/200?random=1"
232 github="sarahc"
233 mastodon="https://mastodon.social/@sarahc"
234 website="https://sarahchen.dev"
235 link-profile>
236 </bushel-author>
237 <span style="color: #666;">Published March 15, 2025</span>
238 </div>
239 <div class="content">
240 <p>Web components have revolutionized how we build reusable UI elements, but accessibility
241 often gets overlooked. This comprehensive guide covers everything you need to know about
242 creating web components that work for everyone...</p>
243 </div>
244 </article>
245
246 <article class="blog-post">
247 <h3>The Future of Distributed Social Networks</h3>
248 <div class="meta">
249 <bushel-author
250 name="Dr. Marcus Thompson"
251 job-title="Research Scientist"
252 org="Decentralized Web Foundation"
253 photo="https://picsum.photos/200/200?random=2"
254 email="marcus@dwf.org"
255 github="marcust"
256 bio="Researcher focused on decentralized protocols and social networks">
257 </bushel-author>
258 <span style="color: #666;">Published March 12, 2025</span>
259 </div>
260 <div class="content">
261 <p>As we move beyond centralized social media platforms, new protocols and technologies
262 are emerging that put users back in control of their data and social connections...</p>
263 </div>
264 </article>
265 </section>
266
267 <section class="section">
268 <h2>Team Pages</h2>
269 <p>Showcase your team members with rich profile cards that include all their professional information.</p>
270
271 <div class="team-grid">
272 <div class="team-member">
273 <bushel-author
274 display-mode="card"
275 name="Emily Rodriguez"
276 job-title="Lead UX Designer"
277 org="DesignCorp"
278 photo="https://picsum.photos/300/300?random=3"
279 bio="Creating intuitive experiences that delight users and drive business results."
280 website="https://emilyrodriguez.design"
281 github="emilyux"
282 twitter="emilyux_design"
283 link-profile>
284 </bushel-author>
285 </div>
286
287 <div class="team-member">
288 <bushel-author
289 display-mode="card"
290 name="Alex Kim"
291 job-title="DevOps Engineer"
292 org="DesignCorp"
293 photo="https://picsum.photos/300/300?random=4"
294 bio="Building reliable infrastructure and deployment pipelines for modern applications."
295 github="alexkimops"
296 mastodon="https://fosstodon.org/@alexkim"
297 website="https://alexkim.dev">
298 </bushel-author>
299 </div>
300
301 <div class="team-member">
302 <bushel-author
303 display-mode="card"
304 given-name="Isabella"
305 family-name="Martinez"
306 nickname="Izzy"
307 job-title="Product Manager"
308 org="DesignCorp"
309 photo="https://picsum.photos/300/300?random=5"
310 bio="Bridging the gap between user needs and technical possibilities."
311 email="izzy@designcorp.com"
312 github="izzymartinez"
313 website="https://izzy.pm">
314 </bushel-author>
315 </div>
316 </div>
317 </section>
318
319 <section class="section">
320 <h2>Article Collaboration</h2>
321 <p>Show multiple authors and contributors for collaborative content.</p>
322
323 <div class="article-byline">
324 <strong>Authors:</strong>
325 <bushel-author
326 display-mode="compact"
327 name="David Park"
328 job-title="Security Researcher"
329 photo="https://picsum.photos/200/200?random=6"
330 github="davidpark">
331 </bushel-author>
332 <bushel-author
333 display-mode="compact"
334 name="Lisa Wang"
335 job-title="Cryptography Expert"
336 photo="https://picsum.photos/200/200?random=7"
337 github="lisawang">
338 </bushel-author>
339 </div>
340
341 <div class="article-content">
342 <h3>Zero-Knowledge Proofs in Web Applications</h3>
343 <p>This collaborative research paper explores the practical implementation of zero-knowledge
344 proofs in modern web applications, covering both theoretical foundations and real-world use cases...</p>
345 </div>
346 </section>
347
348 <section class="section">
349 <h2>Comment Threads</h2>
350 <p>Perfect for showing comment authors in discussion threads and forums.</p>
351
352 <div class="comment-thread">
353 <h3>Discussion: "Best Practices for Web Component Testing"</h3>
354
355 <div class="comment">
356 <div class="comment-header">
357 <bushel-author
358 display-mode="compact"
359 name="Rachel Green"
360 photo="https://picsum.photos/200/200?random=8"
361 github="rachelgreen">
362 </bushel-author>
363 <span style="color: #666; font-size: 0.875rem;">2 hours ago</span>
364 </div>
365 <div class="comment-body">
366 Great article! I've been struggling with testing shadow DOM interactions.
367 The approach you outlined for using testing-library with web components is exactly what I needed.
368 </div>
369 </div>
370
371 <div class="comment">
372 <div class="comment-header">
373 <bushel-author
374 display-mode="compact"
375 name="James Wilson"
376 job-title="Test Automation Engineer"
377 photo="https://picsum.photos/200/200?random=9"
378 github="jameswilson">
379 </bushel-author>
380 <span style="color: #666; font-size: 0.875rem;">1 hour ago</span>
381 </div>
382 <div class="comment-body">
383 @rachelgreen Have you tried the new Web Component Testing utilities in Playwright?
384 They've made shadow DOM testing much more straightforward.
385 </div>
386 </div>
387
388 <div class="comment">
389 <div class="comment-header">
390 <bushel-author
391 display-mode="compact"
392 name="Priya Patel"
393 photo="https://picsum.photos/200/200?random=10"
394 mastodon="https://mastodon.social/@priya"
395 github="priyapatel">
396 </bushel-author>
397 <span style="color: #666; font-size: 0.875rem;">30 minutes ago</span>
398 </div>
399 <div class="comment-body">
400 Thanks for mentioning Playwright! I'll definitely check that out.
401 We've been using Cypress but shadow DOM support has been limited.
402 </div>
403 </div>
404 </div>
405 </section>
406
407 <section class="section">
408 <h2>Themed Variants</h2>
409 <p>Customize the appearance using CSS custom properties to match your brand.</p>
410
411 <div style="display: grid; gap: 2rem; margin-top: 2rem;">
412 <div style="background: #1a202c; padding: 2rem; border-radius: 0.5rem;">
413 <h3 style="color: white; margin-bottom: 1rem;">Dark Theme</h3>
414 <bushel-author
415 class="theme-dark"
416 name="Morgan Foster"
417 job-title="Night Shift Developer"
418 photo="https://picsum.photos/200/200?random=11"
419 github="morganf"
420 website="https://morganfoster.dev"
421 link-profile>
422 </bushel-author>
423 </div>
424
425 <div style="padding: 1rem; border: 2px dashed #ddd; border-radius: 0.5rem;">
426 <h3 style="margin-bottom: 1rem;">Minimal Theme</h3>
427 <bushel-author
428 class="theme-minimal"
429 name="Taylor Swift"
430 job-title="Minimalist Designer"
431 photo="https://picsum.photos/200/200?random=12"
432 github="taylorswift">
433 </bushel-author>
434 </div>
435
436 <div style="padding: 2rem; background: #f0f8ff; border-radius: 0.5rem;">
437 <h3 style="margin-bottom: 1rem;">Colorful Theme</h3>
438 <bushel-author
439 class="theme-colorful"
440 name="Jordan Rivers"
441 job-title="Creative Developer"
442 photo="https://picsum.photos/200/200?random=13"
443 github="jordanrivers"
444 mastodon="https://mastodon.art/@jordan"
445 website="https://jordanrivers.art"
446 link-profile>
447 </bushel-author>
448 </div>
449 </div>
450 </section>
451
452 <section class="section">
453 <h2>Technical Implementation</h2>
454 <p>Each component automatically generates semantic HTML with proper microformat markup:</p>
455 <ul style="list-style: disc; padding-left: 2rem; color: #666;">
456 <li><strong>h-card microformat</strong> - Machine-readable contact information</li>
457 <li><strong>Semantic HTML</strong> - Proper heading hierarchy and landmark elements</li>
458 <li><strong>Accessibility</strong> - ARIA labels, keyboard navigation, screen reader support</li>
459 <li><strong>Progressive Enhancement</strong> - Works without JavaScript, enhanced with it</li>
460 <li><strong>Responsive Design</strong> - Adapts to all screen sizes and devices</li>
461 <li><strong>Social Verification</strong> - Includes rel="me" links for identity verification</li>
462 </ul>
463 </section>
464 </main>
465
466 <footer>
467 <p>Built with ❤️ using Bushel Web Components</p>
468 <div style="margin-top: 1rem;">
469 <bushel-author
470 display-mode="compact"
471 name="Bushel Team"
472 website="https://github.com/avsm/bushel"
473 github="avsm/bushel">
474 </bushel-author>
475 </div>
476 </footer>
477</body>
478</html>