this repo has no description
more slop
+1282
+118
webcomp/BUSHEL.md
+118
webcomp/BUSHEL.md
···
1
+
# Bushel Schemas
2
+
3
+
Bushel is a webring platform for collaborative online content sharing, described as "a reconstruction of LiveJournal for the 2020s." It enables open source communities to track information across multiple communication channels with privacy controls.
4
+
5
+
## Overview
6
+
7
+
Based on the repository structure and documentation, Bushel provides:
8
+
9
+
- **Collaborative Content Sharing**: Individuals can quickly write about their work
10
+
- **Bidirectional Linking**: Groups can share content with interconnected references
11
+
- **Version-Controlled Content**: Supports versioned data structures like blog posts, wiki entries, and social media feeds
12
+
- **Privacy Management**: GitHub OAuth integration for controlling access to private content
13
+
- **Resolvable Markdown**: Uses enhanced Markdown for sharing structured data
14
+
15
+
## Core Schema Modules
16
+
17
+
The library is organized into several key modules:
18
+
19
+
### Contact Schema
20
+
21
+
The `contact` module likely defines structures for:
22
+
23
+
```ocaml
24
+
(* Hypothetical contact schema based on social networking requirements *)
25
+
type contact = {
26
+
id: string;
27
+
name: string;
28
+
email: string option;
29
+
github_username: string option;
30
+
website: string option;
31
+
bio: string option;
32
+
avatar_url: string option;
33
+
public_key: string option;
34
+
}
35
+
36
+
type social_link = {
37
+
platform: string; (* github, mastodon, twitter, etc *)
38
+
handle: string;
39
+
url: string;
40
+
}
41
+
42
+
type contact_with_social = {
43
+
contact: contact;
44
+
social_links: social_link list;
45
+
trusted: bool; (* for privacy/trust relationships *)
46
+
}
47
+
```
48
+
49
+
### Entry Schema
50
+
51
+
The `entry` module represents content items:
52
+
- Blog posts
53
+
- Wiki entries
54
+
- Notes
55
+
- Ideas
56
+
- News items
57
+
58
+
### Project Schema
59
+
60
+
The `project` module handles:
61
+
- Open source project metadata
62
+
- Collaboration settings
63
+
- Privacy controls
64
+
- Version tracking
65
+
66
+
### Link Schema
67
+
68
+
The `link` module manages:
69
+
- Bidirectional references between content
70
+
- External links with metadata
71
+
- Cross-references between users and projects
72
+
73
+
## Contact-Focused Features
74
+
75
+
### Identity Management
76
+
- GitHub OAuth integration for authentication
77
+
- Support for multiple identity providers
78
+
- Public key infrastructure for secure communication
79
+
80
+
### Social Networking
81
+
- Contact discovery within communities
82
+
- Trust relationships for privacy
83
+
- Cross-platform identity linking
84
+
85
+
### Communication Channels
86
+
- Multi-channel content aggregation
87
+
- Private design discussions
88
+
- Public collaboration spaces
89
+
90
+
### Privacy Controls
91
+
- Individual privacy settings per contact
92
+
- Group-based access controls
93
+
- Selective content sharing
94
+
95
+
## Markdown Extensions
96
+
97
+
Bushel extends standard Markdown with special syntax:
98
+
- `@avsm/bushel` - Reference to users/projects
99
+
- Support for structured data embedding
100
+
- Version-controlled content references
101
+
102
+
## Technical Architecture
103
+
104
+
- **Language**: Primarily OCaml (77%) with Python utilities (22.5%)
105
+
- **Content Format**: Enhanced Markdown with structured data
106
+
- **Versioning**: Git-based version control for all content
107
+
- **Authentication**: GitHub OAuth with extensible identity providers
108
+
- **Privacy**: Granular access controls and trust relationships
109
+
110
+
## Use Cases
111
+
112
+
1. **Open Source Communities**: Track contributions across multiple channels
113
+
2. **Collaborative Writing**: Shared documentation with version control
114
+
3. **Social Networking**: Privacy-aware community building
115
+
4. **Content Aggregation**: Unified view of distributed content
116
+
5. **Project Management**: Cross-project collaboration and references
117
+
118
+
The contact schema is central to enabling these use cases by providing a foundation for identity, trust, and communication within the Bushel ecosystem.
+3
webcomp/CLAUDE.md
+3
webcomp/CLAUDE.md
···
1
+
I'd like to experiment with webcomponents and build up a website entirely composed around the principled use of them, with semantically meaningful tags and layout templates that are translated to appropriate html.
2
+
3
+
We'll start by building up a library of small components based on the bushel schemas in https://github.com/avsm/bushel
+478
webcomp/index.html
+478
webcomp/index.html
···
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>