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 Component Demo</title>
7 <script src="bushel-author.js"></script>
8 <style>
9 body {
10 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
11 max-width: 1200px;
12 margin: 0 auto;
13 padding: 2rem;
14 line-height: 1.6;
15 }
16
17 .demo-section {
18 margin: 3rem 0;
19 padding: 2rem;
20 border: 1px solid #e9ecef;
21 border-radius: 0.5rem;
22 background: #f8f9fa;
23 }
24
25 .demo-section h2 {
26 margin-top: 0;
27 color: #495057;
28 }
29
30 .demo-grid {
31 display: grid;
32 gap: 2rem;
33 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
34 margin-top: 1.5rem;
35 }
36
37 .demo-item {
38 padding: 1rem;
39 background: white;
40 border-radius: 0.25rem;
41 border: 1px solid #dee2e6;
42 }
43
44 .demo-item h3 {
45 margin-top: 0;
46 font-size: 1rem;
47 color: #6c757d;
48 }
49
50 pre {
51 background: #f1f3f4;
52 padding: 1rem;
53 border-radius: 0.25rem;
54 overflow-x: auto;
55 font-size: 0.875rem;
56 }
57
58 .custom-styles {
59 --bushel-author-name-color: #d63384;
60 --bushel-author-photo-radius: 0.25rem;
61 --bushel-author-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
62 --bushel-author-padding: 1rem;
63 --bushel-author-border-radius: 0.5rem;
64 color: white;
65 }
66 </style>
67</head>
68<body>
69 <h1>Bushel Author Web Component Demo</h1>
70
71 <p>This component generates semantic HTML with h-card microformats for author information,
72 automatically expanding simple attributes into rich, accessible markup.</p>
73
74 <div class="demo-section">
75 <h2>Basic Usage</h2>
76 <div class="demo-grid">
77 <div class="demo-item">
78 <h3>Minimal Example</h3>
79 <bushel-author
80 name="Jane Smith"
81 github="janesmith">
82 </bushel-author>
83
84 <pre><bushel-author
85 name="Jane Smith"
86 github="janesmith">
87</bushel-author></pre>
88 </div>
89
90 <div class="demo-item">
91 <h3>With Photo and Links</h3>
92 <bushel-author
93 name="Alex Chen"
94 photo="https://picsum.photos/200/200?random=1"
95 website="https://alexchen.dev"
96 github="alexchen"
97 mastodon="https://mastodon.social/@alexchen"
98 link-profile>
99 </bushel-author>
100
101 <pre><bushel-author
102 name="Alex Chen"
103 photo="https://picsum.photos/200/200?random=1"
104 website="https://alexchen.dev"
105 github="alexchen"
106 mastodon="https://mastodon.social/@alexchen"
107 link-profile>
108</bushel-author></pre>
109 </div>
110 </div>
111 </div>
112
113 <div class="demo-section">
114 <h2>Display Modes</h2>
115 <div class="demo-grid">
116 <div class="demo-item">
117 <h3>Inline (Default)</h3>
118 <bushel-author
119 name="Dr. Sarah Johnson"
120 job-title="Senior Researcher"
121 org="MIT"
122 photo="https://picsum.photos/200/200?random=2"
123 email="sarah@mit.edu">
124 </bushel-author>
125
126 <pre><bushel-author
127 name="Dr. Sarah Johnson"
128 job-title="Senior Researcher"
129 org="MIT"
130 photo="https://picsum.photos/200/200?random=2"
131 email="sarah@mit.edu">
132</bushel-author></pre>
133 </div>
134
135 <div class="demo-item">
136 <h3>Card Mode</h3>
137 <bushel-author
138 display-mode="card"
139 name="Marcus Williams"
140 job-title="Frontend Developer"
141 org="TechCorp"
142 photo="https://picsum.photos/200/200?random=3"
143 bio="Building accessible web experiences with modern technologies."
144 github="marcusw"
145 twitter="marcusw_dev">
146 </bushel-author>
147
148 <pre><bushel-author
149 display-mode="card"
150 name="Marcus Williams"
151 job-title="Frontend Developer"
152 org="TechCorp"
153 photo="https://picsum.photos/200/200?random=3"
154 bio="Building accessible web experiences."
155 github="marcusw"
156 twitter="marcusw_dev">
157</bushel-author></pre>
158 </div>
159
160 <div class="demo-item">
161 <h3>Compact Mode</h3>
162 <bushel-author
163 display-mode="compact"
164 name="Emma Rodriguez"
165 photo="https://picsum.photos/200/200?random=4"
166 github="emmarodriguez">
167 </bushel-author>
168
169 <pre><bushel-author
170 display-mode="compact"
171 name="Emma Rodriguez"
172 photo="https://picsum.photos/200/200?random=4"
173 github="emmarodriguez">
174</bushel-author></pre>
175 </div>
176 </div>
177 </div>
178
179 <div class="demo-section">
180 <h2>Structured Names</h2>
181 <div class="demo-grid">
182 <div class="demo-item">
183 <h3>Separate Name Parts</h3>
184 <bushel-author
185 given-name="Robert"
186 family-name="Taylor"
187 nickname="Bob"
188 photo="https://picsum.photos/200/200?random=5"
189 job-title="UX Designer">
190 </bushel-author>
191
192 <pre><bushel-author
193 given-name="Robert"
194 family-name="Taylor"
195 nickname="Bob"
196 photo="https://picsum.photos/200/200?random=5"
197 job-title="UX Designer">
198</bushel-author></pre>
199
200 <p><small>Note: Structured name parts are embedded as hidden microformat data while displaying the formatted name.</small></p>
201 </div>
202 </div>
203 </div>
204
205 <div class="demo-section">
206 <h2>Custom Styling</h2>
207 <div class="demo-grid">
208 <div class="demo-item">
209 <h3>CSS Custom Properties</h3>
210 <bushel-author
211 class="custom-styles"
212 name="Luna Zhang"
213 job-title="Creative Director"
214 photo="https://picsum.photos/200/200?random=6"
215 website="https://lunazhang.com"
216 link-profile>
217 </bushel-author>
218
219 <pre><bushel-author
220 class="custom-styles"
221 name="Luna Zhang"
222 job-title="Creative Director"
223 photo="https://picsum.photos/200/200?random=6"
224 website="https://lunazhang.com"
225 link-profile>
226</bushel-author>
227
228<style>
229.custom-styles {
230 --bushel-author-name-color: #d63384;
231 --bushel-author-photo-radius: 0.25rem;
232 --bushel-author-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
233 --bushel-author-padding: 1rem;
234 --bushel-author-border-radius: 0.5rem;
235 color: white;
236}
237</style></pre>
238 </div>
239 </div>
240 </div>
241
242 <div class="demo-section">
243 <h2>Generated HTML Structure</h2>
244 <p>Each component generates semantic HTML with h-card microformats:</p>
245 <pre><div class="h-card bushel-author-card">
246 <img class="u-photo author-photo" src="..." alt="Photo of John Doe">
247 <div class="author-info">
248 <a class="p-name author-name u-url" href="https://johndoe.com">
249 John Doe
250 <span class="p-given-name visually-hidden">John</span>
251 <span class="p-family-name visually-hidden">Doe</span>
252 </a>
253 <div class="author-title">
254 <span class="p-job-title">Software Engineer</span> at
255 <span class="p-org">Acme Corp</span>
256 </div>
257 <div class="p-note author-bio">Building great software.</div>
258 <div class="author-social">
259 <a class="u-email social-link" href="mailto:john@example.com">Email</a>
260 <a class="u-url social-link" href="https://github.com/johndoe" rel="me">GitHub</a>
261 </div>
262 </div>
263</div></pre>
264 </div>
265
266 <div class="demo-section">
267 <h2>Available Attributes</h2>
268 <table style="width: 100%; border-collapse: collapse; margin-top: 1rem;">
269 <thead>
270 <tr style="background: #e9ecef;">
271 <th style="padding: 0.75rem; text-align: left; border: 1px solid #dee2e6;">Attribute</th>
272 <th style="padding: 0.75rem; text-align: left; border: 1px solid #dee2e6;">Description</th>
273 <th style="padding: 0.75rem; text-align: left; border: 1px solid #dee2e6;">Microformat Class</th>
274 </tr>
275 </thead>
276 <tbody>
277 <tr>
278 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>name</code></td>
279 <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Full display name</td>
280 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>p-name</code></td>
281 </tr>
282 <tr style="background: #f8f9fa;">
283 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>given-name</code></td>
284 <td style="padding: 0.75rem; border: 1px solid #dee2e6;">First name</td>
285 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>p-given-name</code></td>
286 </tr>
287 <tr>
288 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>family-name</code></td>
289 <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Last name</td>
290 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>p-family-name</code></td>
291 </tr>
292 <tr style="background: #f8f9fa;">
293 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>nickname</code></td>
294 <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Alias or handle</td>
295 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>p-nickname</code></td>
296 </tr>
297 <tr>
298 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>email</code></td>
299 <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Email address</td>
300 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>u-email</code></td>
301 </tr>
302 <tr style="background: #f8f9fa;">
303 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>website</code></td>
304 <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Personal website URL</td>
305 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>u-url</code></td>
306 </tr>
307 <tr>
308 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>photo</code></td>
309 <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Profile photo URL</td>
310 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>u-photo</code></td>
311 </tr>
312 <tr style="background: #f8f9fa;">
313 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>bio</code></td>
314 <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Biography or description</td>
315 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>p-note</code></td>
316 </tr>
317 <tr>
318 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>org</code></td>
319 <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Organization name</td>
320 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>p-org</code></td>
321 </tr>
322 <tr style="background: #f8f9fa;">
323 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>job-title</code></td>
324 <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Job title or role</td>
325 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>p-job-title</code></td>
326 </tr>
327 <tr>
328 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>github</code></td>
329 <td style="padding: 0.75rem; border: 1px solid #dee2e6;">GitHub username</td>
330 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>u-url</code></td>
331 </tr>
332 <tr style="background: #f8f9fa;">
333 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>mastodon</code></td>
334 <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Full Mastodon profile URL</td>
335 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>u-url</code></td>
336 </tr>
337 <tr>
338 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>twitter</code></td>
339 <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Twitter username</td>
340 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>u-url</code></td>
341 </tr>
342 <tr style="background: #f8f9fa;">
343 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>display-mode</code></td>
344 <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Layout: inline, card, compact</td>
345 <td style="padding: 0.75rem; border: 1px solid #dee2e6;">-</td>
346 </tr>
347 <tr>
348 <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>link-profile</code></td>
349 <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Make name clickable to website</td>
350 <td style="padding: 0.75rem; border: 1px solid #dee2e6;">-</td>
351 </tr>
352 </tbody>
353 </table>
354 </div>
355</body>
356</html>