commit b85b3ff1f9af8465ef9198a2e30138e1f900cfcb · anil.recoil.org/slop

+118

webcomp/BUSHEL.md

···

       1
       1
       +
       # Bushel Schemas

     

       2
       2
       +
       

     

       3
       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
       4
       +
       

     

       5
       5
       +
       ## Overview

     

       6
       6
       +
       

     

       7
       7
       +
       Based on the repository structure and documentation, Bushel provides:

     

       8
       8
       +
       

     

       9
       9
       +
       - **Collaborative Content Sharing**: Individuals can quickly write about their work

     

       10
       10
       +
       - **Bidirectional Linking**: Groups can share content with interconnected references

     

       11
       11
       +
       - **Version-Controlled Content**: Supports versioned data structures like blog posts, wiki entries, and social media feeds  

     

       12
       12
       +
       - **Privacy Management**: GitHub OAuth integration for controlling access to private content

     

       13
       13
       +
       - **Resolvable Markdown**: Uses enhanced Markdown for sharing structured data

     

       14
       14
       +
       

     

       15
       15
       +
       ## Core Schema Modules

     

       16
       16
       +
       

     

       17
       17
       +
       The library is organized into several key modules:

     

       18
       18
       +
       

     

       19
       19
       +
       ### Contact Schema

     

       20
       20
       +
       

     

       21
       21
       +
       The `contact` module likely defines structures for:

     

       22
       22
       +
       

     

       23
       23
       +
       ```ocaml

     

       24
       24
       +
       (* Hypothetical contact schema based on social networking requirements *)

     

       25
       25
       +
       type contact = {

     

       26
       26
       +
         id: string;

     

       27
       27
       +
         name: string;

     

       28
       28
       +
         email: string option;

     

       29
       29
       +
         github_username: string option;

     

       30
       30
       +
         website: string option;

     

       31
       31
       +
         bio: string option;

     

       32
       32
       +
         avatar_url: string option;

     

       33
       33
       +
         public_key: string option;

     

       34
       34
       +
       }

     

       35
       35
       +
       

     

       36
       36
       +
       type social_link = {

     

       37
       37
       +
         platform: string; (* github, mastodon, twitter, etc *)

     

       38
       38
       +
         handle: string;

     

       39
       39
       +
         url: string;

     

       40
       40
       +
       }

     

       41
       41
       +
       

     

       42
       42
       +
       type contact_with_social = {

     

       43
       43
       +
         contact: contact;

     

       44
       44
       +
         social_links: social_link list;

     

       45
       45
       +
         trusted: bool; (* for privacy/trust relationships *)

     

       46
       46
       +
       }

     

       47
       47
       +
       ```

     

       48
       48
       +
       

     

       49
       49
       +
       ### Entry Schema

     

       50
       50
       +
       

     

       51
       51
       +
       The `entry` module represents content items:

     

       52
       52
       +
       - Blog posts

     

       53
       53
       +
       - Wiki entries  

     

       54
       54
       +
       - Notes

     

       55
       55
       +
       - Ideas

     

       56
       56
       +
       - News items

     

       57
       57
       +
       

     

       58
       58
       +
       ### Project Schema

     

       59
       59
       +
       

     

       60
       60
       +
       The `project` module handles:

     

       61
       61
       +
       - Open source project metadata

     

       62
       62
       +
       - Collaboration settings

     

       63
       63
       +
       - Privacy controls

     

       64
       64
       +
       - Version tracking

     

       65
       65
       +
       

     

       66
       66
       +
       ### Link Schema  

     

       67
       67
       +
       

     

       68
       68
       +
       The `link` module manages:

     

       69
       69
       +
       - Bidirectional references between content

     

       70
       70
       +
       - External links with metadata

     

       71
       71
       +
       - Cross-references between users and projects

     

       72
       72
       +
       

     

       73
       73
       +
       ## Contact-Focused Features

     

       74
       74
       +
       

     

       75
       75
       +
       ### Identity Management

     

       76
       76
       +
       - GitHub OAuth integration for authentication

     

       77
       77
       +
       - Support for multiple identity providers

     

       78
       78
       +
       - Public key infrastructure for secure communication

     

       79
       79
       +
       

     

       80
       80
       +
       ### Social Networking

     

       81
       81
       +
       - Contact discovery within communities

     

       82
       82
       +
       - Trust relationships for privacy

     

       83
       83
       +
       - Cross-platform identity linking

     

       84
       84
       +
       

     

       85
       85
       +
       ### Communication Channels

     

       86
       86
       +
       - Multi-channel content aggregation

     

       87
       87
       +
       - Private design discussions

     

       88
       88
       +
       - Public collaboration spaces

     

       89
       89
       +
       

     

       90
       90
       +
       ### Privacy Controls

     

       91
       91
       +
       - Individual privacy settings per contact

     

       92
       92
       +
       - Group-based access controls

     

       93
       93
       +
       - Selective content sharing

     

       94
       94
       +
       

     

       95
       95
       +
       ## Markdown Extensions

     

       96
       96
       +
       

     

       97
       97
       +
       Bushel extends standard Markdown with special syntax:

     

       98
       98
       +
       - `@avsm/bushel` - Reference to users/projects

     

       99
       99
       +
       - Support for structured data embedding

     

       100
       100
       +
       - Version-controlled content references

     

       101
       101
       +
       

     

       102
       102
       +
       ## Technical Architecture

     

       103
       103
       +
       

     

       104
       104
       +
       - **Language**: Primarily OCaml (77%) with Python utilities (22.5%)

     

       105
       105
       +
       - **Content Format**: Enhanced Markdown with structured data

     

       106
       106
       +
       - **Versioning**: Git-based version control for all content

     

       107
       107
       +
       - **Authentication**: GitHub OAuth with extensible identity providers

     

       108
       108
       +
       - **Privacy**: Granular access controls and trust relationships

     

       109
       109
       +
       

     

       110
       110
       +
       ## Use Cases

     

       111
       111
       +
       

     

       112
       112
       +
       1. **Open Source Communities**: Track contributions across multiple channels

     

       113
       113
       +
       2. **Collaborative Writing**: Shared documentation with version control

     

       114
       114
       +
       3. **Social Networking**: Privacy-aware community building

     

       115
       115
       +
       4. **Content Aggregation**: Unified view of distributed content

     

       116
       116
       +
       5. **Project Management**: Cross-project collaboration and references

     

       117
       117
       +
       

     

       118
       118
       +
       The contact schema is central to enabling these use cases by providing a foundation for identity, trust, and communication within the Bushel ecosystem.

webcomp/CLAUDE.md

···

       1
       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
       2
       +
       

     

       3
       3
       +
       We'll start by building up a library of small components based on the bushel schemas in https://github.com/avsm/bushel

+356

webcomp/bushel-author-demo.html

···

       1
       1
       +
       <!DOCTYPE html>

     

       2
       2
       +
       <html lang="en">

     

       3
       3
       +
       <head>

     

       4
       4
       +
           <meta charset="UTF-8">

     

       5
       5
       +
           <meta name="viewport" content="width=device-width, initial-scale=1.0">

     

       6
       6
       +
           <title>Bushel Author Component Demo</title>

     

       7
       7
       +
           <script src="bushel-author.js"></script>

     

       8
       8
       +
           <style>

     

       9
       9
       +
               body {

     

       10
       10
       +
                   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

     

       11
       11
       +
                   max-width: 1200px;

     

       12
       12
       +
                   margin: 0 auto;

     

       13
       13
       +
                   padding: 2rem;

     

       14
       14
       +
                   line-height: 1.6;

     

       15
       15
       +
               }

     

       16
       16
       +
               

     

       17
       17
       +
               .demo-section {

     

       18
       18
       +
                   margin: 3rem 0;

     

       19
       19
       +
                   padding: 2rem;

     

       20
       20
       +
                   border: 1px solid #e9ecef;

     

       21
       21
       +
                   border-radius: 0.5rem;

     

       22
       22
       +
                   background: #f8f9fa;

     

       23
       23
       +
               }

     

       24
       24
       +
               

     

       25
       25
       +
               .demo-section h2 {

     

       26
       26
       +
                   margin-top: 0;

     

       27
       27
       +
                   color: #495057;

     

       28
       28
       +
               }

     

       29
       29
       +
               

     

       30
       30
       +
               .demo-grid {

     

       31
       31
       +
                   display: grid;

     

       32
       32
       +
                   gap: 2rem;

     

       33
       33
       +
                   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

     

       34
       34
       +
                   margin-top: 1.5rem;

     

       35
       35
       +
               }

     

       36
       36
       +
               

     

       37
       37
       +
               .demo-item {

     

       38
       38
       +
                   padding: 1rem;

     

       39
       39
       +
                   background: white;

     

       40
       40
       +
                   border-radius: 0.25rem;

     

       41
       41
       +
                   border: 1px solid #dee2e6;

     

       42
       42
       +
               }

     

       43
       43
       +
               

     

       44
       44
       +
               .demo-item h3 {

     

       45
       45
       +
                   margin-top: 0;

     

       46
       46
       +
                   font-size: 1rem;

     

       47
       47
       +
                   color: #6c757d;

     

       48
       48
       +
               }

     

       49
       49
       +
               

     

       50
       50
       +
               pre {

     

       51
       51
       +
                   background: #f1f3f4;

     

       52
       52
       +
                   padding: 1rem;

     

       53
       53
       +
                   border-radius: 0.25rem;

     

       54
       54
       +
                   overflow-x: auto;

     

       55
       55
       +
                   font-size: 0.875rem;

     

       56
       56
       +
               }

     

       57
       57
       +
               

     

       58
       58
       +
               .custom-styles {

     

       59
       59
       +
                   --bushel-author-name-color: #d63384;

     

       60
       60
       +
                   --bushel-author-photo-radius: 0.25rem;

     

       61
       61
       +
                   --bushel-author-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

     

       62
       62
       +
                   --bushel-author-padding: 1rem;

     

       63
       63
       +
                   --bushel-author-border-radius: 0.5rem;

     

       64
       64
       +
                   color: white;

     

       65
       65
       +
               }

     

       66
       66
       +
           </style>

     

       67
       67
       +
       </head>

     

       68
       68
       +
       <body>

     

       69
       69
       +
           <h1>Bushel Author Web Component Demo</h1>

     

       70
       70
       +
           

     

       71
       71
       +
           <p>This component generates semantic HTML with h-card microformats for author information, 

     

       72
       72
       +
           automatically expanding simple attributes into rich, accessible markup.</p>

     

       73
       73
       +
       

     

       74
       74
       +
           <div class="demo-section">

     

       75
       75
       +
               <h2>Basic Usage</h2>

     

       76
       76
       +
               <div class="demo-grid">

     

       77
       77
       +
                   <div class="demo-item">

     

       78
       78
       +
                       <h3>Minimal Example</h3>

     

       79
       79
       +
                       <bushel-author 

     

       80
       80
       +
                           name="Jane Smith"

     

       81
       81
       +
                           github="janesmith">

     

       82
       82
       +
                       </bushel-author>

     

       83
       83
       +
                       

     

       84
       84
       +
                       <pre>&lt;bushel-author 

     

       85
       85
       +
           name="Jane Smith"

     

       86
       86
       +
           github="janesmith"&gt;

     

       87
       87
       +
       &lt;/bushel-author&gt;</pre>

     

       88
       88
       +
                   </div>

     

       89
       89
       +
                   

     

       90
       90
       +
                   <div class="demo-item">

     

       91
       91
       +
                       <h3>With Photo and Links</h3>

     

       92
       92
       +
                       <bushel-author 

     

       93
       93
       +
                           name="Alex Chen"

     

       94
       94
       +
                           photo="https://picsum.photos/200/200?random=1"

     

       95
       95
       +
                           website="https://alexchen.dev"

     

       96
       96
       +
                           github="alexchen"

     

       97
       97
       +
                           mastodon="https://mastodon.social/@alexchen"

     

       98
       98
       +
                           link-profile>

     

       99
       99
       +
                       </bushel-author>

     

       100
       100
       +
                       

     

       101
       101
       +
                       <pre>&lt;bushel-author 

     

       102
       102
       +
           name="Alex Chen"

     

       103
       103
       +
           photo="https://picsum.photos/200/200?random=1"

     

       104
       104
       +
           website="https://alexchen.dev"

     

       105
       105
       +
           github="alexchen"

     

       106
       106
       +
           mastodon="https://mastodon.social/@alexchen"

     

       107
       107
       +
           link-profile&gt;

     

       108
       108
       +
       &lt;/bushel-author&gt;</pre>

     

       109
       109
       +
                   </div>

     

       110
       110
       +
               </div>

     

       111
       111
       +
           </div>

     

       112
       112
       +
       

     

       113
       113
       +
           <div class="demo-section">

     

       114
       114
       +
               <h2>Display Modes</h2>

     

       115
       115
       +
               <div class="demo-grid">

     

       116
       116
       +
                   <div class="demo-item">

     

       117
       117
       +
                       <h3>Inline (Default)</h3>

     

       118
       118
       +
                       <bushel-author 

     

       119
       119
       +
                           name="Dr. Sarah Johnson"

     

       120
       120
       +
                           job-title="Senior Researcher"

     

       121
       121
       +
                           org="MIT"

     

       122
       122
       +
                           photo="https://picsum.photos/200/200?random=2"

     

       123
       123
       +
                           email="sarah@mit.edu">

     

       124
       124
       +
                       </bushel-author>

     

       125
       125
       +
                       

     

       126
       126
       +
                       <pre>&lt;bushel-author 

     

       127
       127
       +
           name="Dr. Sarah Johnson"

     

       128
       128
       +
           job-title="Senior Researcher"

     

       129
       129
       +
           org="MIT"

     

       130
       130
       +
           photo="https://picsum.photos/200/200?random=2"

     

       131
       131
       +
           email="sarah@mit.edu"&gt;

     

       132
       132
       +
       &lt;/bushel-author&gt;</pre>

     

       133
       133
       +
                   </div>

     

       134
       134
       +
                   

     

       135
       135
       +
                   <div class="demo-item">

     

       136
       136
       +
                       <h3>Card Mode</h3>

     

       137
       137
       +
                       <bushel-author 

     

       138
       138
       +
                           display-mode="card"

     

       139
       139
       +
                           name="Marcus Williams"

     

       140
       140
       +
                           job-title="Frontend Developer"

     

       141
       141
       +
                           org="TechCorp"

     

       142
       142
       +
                           photo="https://picsum.photos/200/200?random=3"

     

       143
       143
       +
                           bio="Building accessible web experiences with modern technologies."

     

       144
       144
       +
                           github="marcusw"

     

       145
       145
       +
                           twitter="marcusw_dev">

     

       146
       146
       +
                       </bushel-author>

     

       147
       147
       +
                       

     

       148
       148
       +
                       <pre>&lt;bushel-author 

     

       149
       149
       +
           display-mode="card"

     

       150
       150
       +
           name="Marcus Williams"

     

       151
       151
       +
           job-title="Frontend Developer"

     

       152
       152
       +
           org="TechCorp"

     

       153
       153
       +
           photo="https://picsum.photos/200/200?random=3"

     

       154
       154
       +
           bio="Building accessible web experiences."

     

       155
       155
       +
           github="marcusw"

     

       156
       156
       +
           twitter="marcusw_dev"&gt;

     

       157
       157
       +
       &lt;/bushel-author&gt;</pre>

     

       158
       158
       +
                   </div>

     

       159
       159
       +
                   

     

       160
       160
       +
                   <div class="demo-item">

     

       161
       161
       +
                       <h3>Compact Mode</h3>

     

       162
       162
       +
                       <bushel-author 

     

       163
       163
       +
                           display-mode="compact"

     

       164
       164
       +
                           name="Emma Rodriguez"

     

       165
       165
       +
                           photo="https://picsum.photos/200/200?random=4"

     

       166
       166
       +
                           github="emmarodriguez">

     

       167
       167
       +
                       </bushel-author>

     

       168
       168
       +
                       

     

       169
       169
       +
                       <pre>&lt;bushel-author 

     

       170
       170
       +
           display-mode="compact"

     

       171
       171
       +
           name="Emma Rodriguez"

     

       172
       172
       +
           photo="https://picsum.photos/200/200?random=4"

     

       173
       173
       +
           github="emmarodriguez"&gt;

     

       174
       174
       +
       &lt;/bushel-author&gt;</pre>

     

       175
       175
       +
                   </div>

     

       176
       176
       +
               </div>

     

       177
       177
       +
           </div>

     

       178
       178
       +
       

     

       179
       179
       +
           <div class="demo-section">

     

       180
       180
       +
               <h2>Structured Names</h2>

     

       181
       181
       +
               <div class="demo-grid">

     

       182
       182
       +
                   <div class="demo-item">

     

       183
       183
       +
                       <h3>Separate Name Parts</h3>

     

       184
       184
       +
                       <bushel-author 

     

       185
       185
       +
                           given-name="Robert"

     

       186
       186
       +
                           family-name="Taylor"

     

       187
       187
       +
                           nickname="Bob"

     

       188
       188
       +
                           photo="https://picsum.photos/200/200?random=5"

     

       189
       189
       +
                           job-title="UX Designer">

     

       190
       190
       +
                       </bushel-author>

     

       191
       191
       +
                       

     

       192
       192
       +
                       <pre>&lt;bushel-author 

     

       193
       193
       +
           given-name="Robert"

     

       194
       194
       +
           family-name="Taylor"

     

       195
       195
       +
           nickname="Bob"

     

       196
       196
       +
           photo="https://picsum.photos/200/200?random=5"

     

       197
       197
       +
           job-title="UX Designer"&gt;

     

       198
       198
       +
       &lt;/bushel-author&gt;</pre>

     

       199
       199
       +
                       

     

       200
       200
       +
                       <p><small>Note: Structured name parts are embedded as hidden microformat data while displaying the formatted name.</small></p>

     

       201
       201
       +
                   </div>

     

       202
       202
       +
               </div>

     

       203
       203
       +
           </div>

     

       204
       204
       +
       

     

       205
       205
       +
           <div class="demo-section">

     

       206
       206
       +
               <h2>Custom Styling</h2>

     

       207
       207
       +
               <div class="demo-grid">

     

       208
       208
       +
                   <div class="demo-item">

     

       209
       209
       +
                       <h3>CSS Custom Properties</h3>

     

       210
       210
       +
                       <bushel-author 

     

       211
       211
       +
                           class="custom-styles"

     

       212
       212
       +
                           name="Luna Zhang"

     

       213
       213
       +
                           job-title="Creative Director"

     

       214
       214
       +
                           photo="https://picsum.photos/200/200?random=6"

     

       215
       215
       +
                           website="https://lunazhang.com"

     

       216
       216
       +
                           link-profile>

     

       217
       217
       +
                       </bushel-author>

     

       218
       218
       +
                       

     

       219
       219
       +
                       <pre>&lt;bushel-author 

     

       220
       220
       +
           class="custom-styles"

     

       221
       221
       +
           name="Luna Zhang"

     

       222
       222
       +
           job-title="Creative Director"

     

       223
       223
       +
           photo="https://picsum.photos/200/200?random=6"

     

       224
       224
       +
           website="https://lunazhang.com"

     

       225
       225
       +
           link-profile&gt;

     

       226
       226
       +
       &lt;/bushel-author&gt;

     

       227
       227
       +
       

     

       228
       228
       +
       &lt;style&gt;

     

       229
       229
       +
       .custom-styles {

     

       230
       230
       +
           --bushel-author-name-color: #d63384;

     

       231
       231
       +
           --bushel-author-photo-radius: 0.25rem;

     

       232
       232
       +
           --bushel-author-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

     

       233
       233
       +
           --bushel-author-padding: 1rem;

     

       234
       234
       +
           --bushel-author-border-radius: 0.5rem;

     

       235
       235
       +
           color: white;

     

       236
       236
       +
       }

     

       237
       237
       +
       &lt;/style&gt;</pre>

     

       238
       238
       +
                   </div>

     

       239
       239
       +
               </div>

     

       240
       240
       +
           </div>

     

       241
       241
       +
       

     

       242
       242
       +
           <div class="demo-section">

     

       243
       243
       +
               <h2>Generated HTML Structure</h2>

     

       244
       244
       +
               <p>Each component generates semantic HTML with h-card microformats:</p>

     

       245
       245
       +
               <pre>&lt;div class="h-card bushel-author-card"&gt;

     

       246
       246
       +
           &lt;img class="u-photo author-photo" src="..." alt="Photo of John Doe"&gt;

     

       247
       247
       +
           &lt;div class="author-info"&gt;

     

       248
       248
       +
               &lt;a class="p-name author-name u-url" href="https://johndoe.com"&gt;

     

       249
       249
       +
                   John Doe

     

       250
       250
       +
                   &lt;span class="p-given-name visually-hidden"&gt;John&lt;/span&gt;

     

       251
       251
       +
                   &lt;span class="p-family-name visually-hidden"&gt;Doe&lt;/span&gt;

     

       252
       252
       +
               &lt;/a&gt;

     

       253
       253
       +
               &lt;div class="author-title"&gt;

     

       254
       254
       +
                   &lt;span class="p-job-title"&gt;Software Engineer&lt;/span&gt; at 

     

       255
       255
       +
                   &lt;span class="p-org"&gt;Acme Corp&lt;/span&gt;

     

       256
       256
       +
               &lt;/div&gt;

     

       257
       257
       +
               &lt;div class="p-note author-bio"&gt;Building great software.&lt;/div&gt;

     

       258
       258
       +
               &lt;div class="author-social"&gt;

     

       259
       259
       +
                   &lt;a class="u-email social-link" href="mailto:john@example.com"&gt;Email&lt;/a&gt;

     

       260
       260
       +
                   &lt;a class="u-url social-link" href="https://github.com/johndoe" rel="me"&gt;GitHub&lt;/a&gt;

     

       261
       261
       +
               &lt;/div&gt;

     

       262
       262
       +
           &lt;/div&gt;

     

       263
       263
       +
       &lt;/div&gt;</pre>

     

       264
       264
       +
           </div>

     

       265
       265
       +
       

     

       266
       266
       +
           <div class="demo-section">

     

       267
       267
       +
               <h2>Available Attributes</h2>

     

       268
       268
       +
               <table style="width: 100%; border-collapse: collapse; margin-top: 1rem;">

     

       269
       269
       +
                   <thead>

     

       270
       270
       +
                       <tr style="background: #e9ecef;">

     

       271
       271
       +
                           <th style="padding: 0.75rem; text-align: left; border: 1px solid #dee2e6;">Attribute</th>

     

       272
       272
       +
                           <th style="padding: 0.75rem; text-align: left; border: 1px solid #dee2e6;">Description</th>

     

       273
       273
       +
                           <th style="padding: 0.75rem; text-align: left; border: 1px solid #dee2e6;">Microformat Class</th>

     

       274
       274
       +
                       </tr>

     

       275
       275
       +
                   </thead>

     

       276
       276
       +
                   <tbody>

     

       277
       277
       +
                       <tr>

     

       278
       278
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>name</code></td>

     

       279
       279
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Full display name</td>

     

       280
       280
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>p-name</code></td>

     

       281
       281
       +
                       </tr>

     

       282
       282
       +
                       <tr style="background: #f8f9fa;">

     

       283
       283
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>given-name</code></td>

     

       284
       284
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;">First name</td>

     

       285
       285
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>p-given-name</code></td>

     

       286
       286
       +
                       </tr>

     

       287
       287
       +
                       <tr>

     

       288
       288
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>family-name</code></td>

     

       289
       289
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Last name</td>

     

       290
       290
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>p-family-name</code></td>

     

       291
       291
       +
                       </tr>

     

       292
       292
       +
                       <tr style="background: #f8f9fa;">

     

       293
       293
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>nickname</code></td>

     

       294
       294
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Alias or handle</td>

     

       295
       295
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>p-nickname</code></td>

     

       296
       296
       +
                       </tr>

     

       297
       297
       +
                       <tr>

     

       298
       298
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>email</code></td>

     

       299
       299
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Email address</td>

     

       300
       300
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>u-email</code></td>

     

       301
       301
       +
                       </tr>

     

       302
       302
       +
                       <tr style="background: #f8f9fa;">

     

       303
       303
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>website</code></td>

     

       304
       304
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Personal website URL</td>

     

       305
       305
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>u-url</code></td>

     

       306
       306
       +
                       </tr>

     

       307
       307
       +
                       <tr>

     

       308
       308
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>photo</code></td>

     

       309
       309
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Profile photo URL</td>

     

       310
       310
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>u-photo</code></td>

     

       311
       311
       +
                       </tr>

     

       312
       312
       +
                       <tr style="background: #f8f9fa;">

     

       313
       313
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>bio</code></td>

     

       314
       314
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Biography or description</td>

     

       315
       315
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>p-note</code></td>

     

       316
       316
       +
                       </tr>

     

       317
       317
       +
                       <tr>

     

       318
       318
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>org</code></td>

     

       319
       319
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Organization name</td>

     

       320
       320
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>p-org</code></td>

     

       321
       321
       +
                       </tr>

     

       322
       322
       +
                       <tr style="background: #f8f9fa;">

     

       323
       323
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>job-title</code></td>

     

       324
       324
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Job title or role</td>

     

       325
       325
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>p-job-title</code></td>

     

       326
       326
       +
                       </tr>

     

       327
       327
       +
                       <tr>

     

       328
       328
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>github</code></td>

     

       329
       329
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;">GitHub username</td>

     

       330
       330
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>u-url</code></td>

     

       331
       331
       +
                       </tr>

     

       332
       332
       +
                       <tr style="background: #f8f9fa;">

     

       333
       333
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>mastodon</code></td>

     

       334
       334
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Full Mastodon profile URL</td>

     

       335
       335
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>u-url</code></td>

     

       336
       336
       +
                       </tr>

     

       337
       337
       +
                       <tr>

     

       338
       338
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>twitter</code></td>

     

       339
       339
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Twitter username</td>

     

       340
       340
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>u-url</code></td>

     

       341
       341
       +
                       </tr>

     

       342
       342
       +
                       <tr style="background: #f8f9fa;">

     

       343
       343
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>display-mode</code></td>

     

       344
       344
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Layout: inline, card, compact</td>

     

       345
       345
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;">-</td>

     

       346
       346
       +
                       </tr>

     

       347
       347
       +
                       <tr>

     

       348
       348
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;"><code>link-profile</code></td>

     

       349
       349
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;">Make name clickable to website</td>

     

       350
       350
       +
                           <td style="padding: 0.75rem; border: 1px solid #dee2e6;">-</td>

     

       351
       351
       +
                       </tr>

     

       352
       352
       +
                   </tbody>

     

       353
       353
       +
               </table>

     

       354
       354
       +
           </div>

     

       355
       355
       +
       </body>

     

       356
       356
       +
       </html>

+327

webcomp/bushel-author.js

···

       1
       1
       +
       class BushelAuthor extends HTMLElement {

     

       2
       2
       +
         constructor() {

     

       3
       3
       +
           super();

     

       4
       4
       +
           this.attachShadow({ mode: 'open' });

     

       5
       5
       +
         }

     

       6
       6
       +
       

     

       7
       7
       +
         static get observedAttributes() {

     

       8
       8
       +
           return [

     

       9
       9
       +
             'name', 'given-name', 'family-name', 'nickname',

     

       10
       10
       +
             'email', 'website', 'github', 'mastodon', 'twitter',

     

       11
       11
       +
             'photo', 'bio', 'org', 'job-title',

     

       12
       12
       +
             'display-mode', 'link-profile'

     

       13
       13
       +
           ];

     

       14
       14
       +
         }

     

       15
       15
       +
       

     

       16
       16
       +
         connectedCallback() {

     

       17
       17
       +
           this.render();

     

       18
       18
       +
         }

     

       19
       19
       +
       

     

       20
       20
       +
         attributeChangedCallback() {

     

       21
       21
       +
           this.render();

     

       22
       22
       +
         }

     

       23
       23
       +
       

     

       24
       24
       +
         get displayMode() {

     

       25
       25
       +
           return this.getAttribute('display-mode') || 'inline';

     

       26
       26
       +
         }

     

       27
       27
       +
       

     

       28
       28
       +
         get shouldLinkProfile() {

     

       29
       29
       +
           return this.hasAttribute('link-profile');

     

       30
       30
       +
         }

     

       31
       31
       +
       

     

       32
       32
       +
         buildHCard() {

     

       33
       33
       +
           const name = this.getAttribute('name');

     

       34
       34
       +
           const givenName = this.getAttribute('given-name');

     

       35
       35
       +
           const familyName = this.getAttribute('family-name');

     

       36
       36
       +
           const nickname = this.getAttribute('nickname');

     

       37
       37
       +
           const email = this.getAttribute('email');

     

       38
       38
       +
           const website = this.getAttribute('website');

     

       39
       39
       +
           const github = this.getAttribute('github');

     

       40
       40
       +
           const mastodon = this.getAttribute('mastodon');

     

       41
       41
       +
           const twitter = this.getAttribute('twitter');

     

       42
       42
       +
           const photo = this.getAttribute('photo');

     

       43
       43
       +
           const bio = this.getAttribute('bio');

     

       44
       44
       +
           const org = this.getAttribute('org');

     

       45
       45
       +
           const jobTitle = this.getAttribute('job-title');

     

       46
       46
       +
       

     

       47
       47
       +
           const displayName = name || `${givenName || ''} ${familyName || ''}`.trim() || nickname;

     

       48
       48
       +
           

     

       49
       49
       +
           const hcard = document.createElement('div');

     

       50
       50
       +
           hcard.className = 'h-card bushel-author-card';

     

       51
       51
       +
           

     

       52
       52
       +
           // Photo

     

       53
       53
       +
           if (photo) {

     

       54
       54
       +
             const img = document.createElement('img');

     

       55
       55
       +
             img.className = 'u-photo author-photo';

     

       56
       56
       +
             img.src = photo;

     

       57
       57
       +
             img.alt = `Photo of ${displayName}`;

     

       58
       58
       +
             img.loading = 'lazy';

     

       59
       59
       +
             hcard.appendChild(img);

     

       60
       60
       +
           }

     

       61
       61
       +
       

     

       62
       62
       +
           const infoContainer = document.createElement('div');

     

       63
       63
       +
           infoContainer.className = 'author-info';

     

       64
       64
       +
       

     

       65
       65
       +
           // Name (with optional link)

     

       66
       66
       +
           const nameElement = document.createElement(this.shouldLinkProfile && website ? 'a' : 'span');

     

       67
       67
       +
           nameElement.className = 'p-name author-name';

     

       68
       68
       +
           nameElement.textContent = displayName;

     

       69
       69
       +
           

     

       70
       70
       +
           if (this.shouldLinkProfile && website) {

     

       71
       71
       +
             nameElement.href = website;

     

       72
       72
       +
             nameElement.className += ' u-url';

     

       73
       73
       +
           }

     

       74
       74
       +
           

     

       75
       75
       +
           // Hidden structured name parts

     

       76
       76
       +
           if (givenName) {

     

       77
       77
       +
             const givenSpan = document.createElement('span');

     

       78
       78
       +
             givenSpan.className = 'p-given-name visually-hidden';

     

       79
       79
       +
             givenSpan.textContent = givenName;

     

       80
       80
       +
             nameElement.appendChild(givenSpan);

     

       81
       81
       +
           }

     

       82
       82
       +
           

     

       83
       83
       +
           if (familyName) {

     

       84
       84
       +
             const familySpan = document.createElement('span');

     

       85
       85
       +
             familySpan.className = 'p-family-name visually-hidden';

     

       86
       86
       +
             familySpan.textContent = familyName;

     

       87
       87
       +
             nameElement.appendChild(familySpan);

     

       88
       88
       +
           }

     

       89
       89
       +
       

     

       90
       90
       +
           if (nickname && nickname !== displayName) {

     

       91
       91
       +
             const nickSpan = document.createElement('span');

     

       92
       92
       +
             nickSpan.className = 'p-nickname visually-hidden';

     

       93
       93
       +
             nickSpan.textContent = nickname;

     

       94
       94
       +
             nameElement.appendChild(nickSpan);

     

       95
       95
       +
           }

     

       96
       96
       +
       

     

       97
       97
       +
           infoContainer.appendChild(nameElement);

     

       98
       98
       +
       

     

       99
       99
       +
           // Job title and organization

     

       100
       100
       +
           if (jobTitle || org) {

     

       101
       101
       +
             const titleElement = document.createElement('div');

     

       102
       102
       +
             titleElement.className = 'author-title';

     

       103
       103
       +
             

     

       104
       104
       +
             if (jobTitle) {

     

       105
       105
       +
               const jobSpan = document.createElement('span');

     

       106
       106
       +
               jobSpan.className = 'p-job-title';

     

       107
       107
       +
               jobSpan.textContent = jobTitle;

     

       108
       108
       +
               titleElement.appendChild(jobSpan);

     

       109
       109
       +
               

     

       110
       110
       +
               if (org) {

     

       111
       111
       +
                 titleElement.appendChild(document.createTextNode(' at '));

     

       112
       112
       +
               }

     

       113
       113
       +
             }

     

       114
       114
       +
             

     

       115
       115
       +
             if (org) {

     

       116
       116
       +
               const orgSpan = document.createElement('span');

     

       117
       117
       +
               orgSpan.className = 'p-org';

     

       118
       118
       +
               orgSpan.textContent = org;

     

       119
       119
       +
               titleElement.appendChild(orgSpan);

     

       120
       120
       +
             }

     

       121
       121
       +
             

     

       122
       122
       +
             infoContainer.appendChild(titleElement);

     

       123
       123
       +
           }

     

       124
       124
       +
       

     

       125
       125
       +
           // Bio/note

     

       126
       126
       +
           if (bio) {

     

       127
       127
       +
             const bioElement = document.createElement('div');

     

       128
       128
       +
             bioElement.className = 'p-note author-bio';

     

       129
       129
       +
             bioElement.textContent = bio;

     

       130
       130
       +
             infoContainer.appendChild(bioElement);

     

       131
       131
       +
           }

     

       132
       132
       +
       

     

       133
       133
       +
           // Social links

     

       134
       134
       +
           const socialContainer = document.createElement('div');

     

       135
       135
       +
           socialContainer.className = 'author-social';

     

       136
       136
       +
           let hasSocial = false;

     

       137
       137
       +
       

     

       138
       138
       +
           if (email) {

     

       139
       139
       +
             const emailLink = document.createElement('a');

     

       140
       140
       +
             emailLink.className = 'u-email social-link';

     

       141
       141
       +
             emailLink.href = `mailto:${email}`;

     

       142
       142
       +
             emailLink.textContent = 'Email';

     

       143
       143
       +
             emailLink.setAttribute('aria-label', `Email ${displayName}`);

     

       144
       144
       +
             socialContainer.appendChild(emailLink);

     

       145
       145
       +
             hasSocial = true;

     

       146
       146
       +
           }

     

       147
       147
       +
       

     

       148
       148
       +
           if (github) {

     

       149
       149
       +
             const githubLink = document.createElement('a');

     

       150
       150
       +
             githubLink.className = 'u-url social-link';

     

       151
       151
       +
             githubLink.href = `https://github.com/${github}`;

     

       152
       152
       +
             githubLink.textContent = 'GitHub';

     

       153
       153
       +
             githubLink.setAttribute('aria-label', `${displayName} on GitHub`);

     

       154
       154
       +
             githubLink.rel = 'me';

     

       155
       155
       +
             socialContainer.appendChild(githubLink);

     

       156
       156
       +
             hasSocial = true;

     

       157
       157
       +
           }

     

       158
       158
       +
       

     

       159
       159
       +
           if (mastodon) {

     

       160
       160
       +
             const mastodonLink = document.createElement('a');

     

       161
       161
       +
             mastodonLink.className = 'u-url social-link';

     

       162
       162
       +
             mastodonLink.href = mastodon;

     

       163
       163
       +
             mastodonLink.textContent = 'Mastodon';

     

       164
       164
       +
             mastodonLink.setAttribute('aria-label', `${displayName} on Mastodon`);

     

       165
       165
       +
             mastodonLink.rel = 'me';

     

       166
       166
       +
             socialContainer.appendChild(mastodonLink);

     

       167
       167
       +
             hasSocial = true;

     

       168
       168
       +
           }

     

       169
       169
       +
       

     

       170
       170
       +
           if (twitter) {

     

       171
       171
       +
             const twitterLink = document.createElement('a');

     

       172
       172
       +
             twitterLink.className = 'u-url social-link';

     

       173
       173
       +
             twitterLink.href = `https://twitter.com/${twitter}`;

     

       174
       174
       +
             twitterLink.textContent = 'Twitter';

     

       175
       175
       +
             twitterLink.setAttribute('aria-label', `${displayName} on Twitter`);

     

       176
       176
       +
             twitterLink.rel = 'me';

     

       177
       177
       +
             socialContainer.appendChild(twitterLink);

     

       178
       178
       +
             hasSocial = true;

     

       179
       179
       +
           }

     

       180
       180
       +
       

     

       181
       181
       +
           if (website && !this.shouldLinkProfile) {

     

       182
       182
       +
             const websiteLink = document.createElement('a');

     

       183
       183
       +
             websiteLink.className = 'u-url social-link';

     

       184
       184
       +
             websiteLink.href = website;

     

       185
       185
       +
             websiteLink.textContent = 'Website';

     

       186
       186
       +
             websiteLink.setAttribute('aria-label', `${displayName}'s website`);

     

       187
       187
       +
             socialContainer.appendChild(websiteLink);

     

       188
       188
       +
             hasSocial = true;

     

       189
       189
       +
           }

     

       190
       190
       +
       

     

       191
       191
       +
           if (hasSocial) {

     

       192
       192
       +
             infoContainer.appendChild(socialContainer);

     

       193
       193
       +
           }

     

       194
       194
       +
       

     

       195
       195
       +
           hcard.appendChild(infoContainer);

     

       196
       196
       +
           return hcard;

     

       197
       197
       +
         }

     

       198
       198
       +
       

     

       199
       199
       +
         render() {

     

       200
       200
       +
           const styles = `

     

       201
       201
       +
             <style>

     

       202
       202
       +
               :host {

     

       203
       203
       +
                 display: var(--bushel-author-display, inline-block);

     

       204
       204
       +
                 font-family: var(--bushel-author-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);

     

       205
       205
       +
               }

     

       206
       206
       +
               

     

       207
       207
       +
               .h-card {

     

       208
       208
       +
                 display: flex;

     

       209
       209
       +
                 align-items: var(--bushel-author-align, flex-start);

     

       210
       210
       +
                 gap: var(--bushel-author-gap, 0.75rem);

     

       211
       211
       +
                 padding: var(--bushel-author-padding, 0);

     

       212
       212
       +
                 background: var(--bushel-author-background, transparent);

     

       213
       213
       +
                 border: var(--bushel-author-border, none);

     

       214
       214
       +
                 border-radius: var(--bushel-author-border-radius, 0);

     

       215
       215
       +
               }

     

       216
       216
       +
               

     

       217
       217
       +
               :host([display-mode="card"]) .h-card {

     

       218
       218
       +
                 flex-direction: column;

     

       219
       219
       +
                 text-align: center;

     

       220
       220
       +
                 padding: var(--bushel-author-card-padding, 1rem);

     

       221
       221
       +
                 background: var(--bushel-author-card-background, #f8f9fa);

     

       222
       222
       +
                 border: var(--bushel-author-card-border, 1px solid #e9ecef);

     

       223
       223
       +
                 border-radius: var(--bushel-author-card-border-radius, 0.5rem);

     

       224
       224
       +
               }

     

       225
       225
       +
               

     

       226
       226
       +
               :host([display-mode="compact"]) .h-card {

     

       227
       227
       +
                 gap: var(--bushel-author-compact-gap, 0.5rem);

     

       228
       228
       +
               }

     

       229
       229
       +
               

     

       230
       230
       +
               .author-photo {

     

       231
       231
       +
                 width: var(--bushel-author-photo-size, 2.5rem);

     

       232
       232
       +
                 height: var(--bushel-author-photo-size, 2.5rem);

     

       233
       233
       +
                 border-radius: var(--bushel-author-photo-radius, 50%);

     

       234
       234
       +
                 object-fit: cover;

     

       235
       235
       +
                 flex-shrink: 0;

     

       236
       236
       +
               }

     

       237
       237
       +
               

     

       238
       238
       +
               :host([display-mode="card"]) .author-photo {

     

       239
       239
       +
                 width: var(--bushel-author-card-photo-size, 4rem);

     

       240
       240
       +
                 height: var(--bushel-author-card-photo-size, 4rem);

     

       241
       241
       +
               }

     

       242
       242
       +
               

     

       243
       243
       +
               .author-info {

     

       244
       244
       +
                 display: flex;

     

       245
       245
       +
                 flex-direction: column;

     

       246
       246
       +
                 gap: var(--bushel-author-info-gap, 0.25rem);

     

       247
       247
       +
                 min-width: 0;

     

       248
       248
       +
               }

     

       249
       249
       +
               

     

       250
       250
       +
               .author-name {

     

       251
       251
       +
                 font-weight: var(--bushel-author-name-weight, 600);

     

       252
       252
       +
                 color: var(--bushel-author-name-color, inherit);

     

       253
       253
       +
                 text-decoration: none;

     

       254
       254
       +
                 font-size: var(--bushel-author-name-size, 1rem);

     

       255
       255
       +
               }

     

       256
       256
       +
               

     

       257
       257
       +
               .author-name:hover {

     

       258
       258
       +
                 text-decoration: underline;

     

       259
       259
       +
               }

     

       260
       260
       +
               

     

       261
       261
       +
               .author-title {

     

       262
       262
       +
                 font-size: var(--bushel-author-title-size, 0.875rem);

     

       263
       263
       +
                 color: var(--bushel-author-title-color, #666);

     

       264
       264
       +
               }

     

       265
       265
       +
               

     

       266
       266
       +
               .author-bio {

     

       267
       267
       +
                 font-size: var(--bushel-author-bio-size, 0.875rem);

     

       268
       268
       +
                 color: var(--bushel-author-bio-color, #555);

     

       269
       269
       +
                 line-height: 1.4;

     

       270
       270
       +
               }

     

       271
       271
       +
               

     

       272
       272
       +
               .author-social {

     

       273
       273
       +
                 display: flex;

     

       274
       274
       +
                 gap: var(--bushel-author-social-gap, 0.75rem);

     

       275
       275
       +
                 margin-top: var(--bushel-author-social-margin, 0.25rem);

     

       276
       276
       +
               }

     

       277
       277
       +
               

     

       278
       278
       +
               :host([display-mode="card"]) .author-social {

     

       279
       279
       +
                 justify-content: center;

     

       280
       280
       +
               }

     

       281
       281
       +
               

     

       282
       282
       +
               :host([display-mode="compact"]) .author-social {

     

       283
       283
       +
                 gap: var(--bushel-author-compact-social-gap, 0.5rem);

     

       284
       284
       +
               }

     

       285
       285
       +
               

     

       286
       286
       +
               .social-link {

     

       287
       287
       +
                 font-size: var(--bushel-author-social-size, 0.8125rem);

     

       288
       288
       +
                 color: var(--bushel-author-social-color, #007bff);

     

       289
       289
       +
                 text-decoration: none;

     

       290
       290
       +
                 padding: var(--bushel-author-social-padding, 0.125rem 0.25rem);

     

       291
       291
       +
                 border-radius: var(--bushel-author-social-radius, 0.25rem);

     

       292
       292
       +
               }

     

       293
       293
       +
               

     

       294
       294
       +
               .social-link:hover {

     

       295
       295
       +
                 background: var(--bushel-author-social-hover-bg, rgba(0, 123, 255, 0.1));

     

       296
       296
       +
                 text-decoration: none;

     

       297
       297
       +
               }

     

       298
       298
       +
               

     

       299
       299
       +
               .visually-hidden {

     

       300
       300
       +
                 position: absolute !important;

     

       301
       301
       +
                 width: 1px !important;

     

       302
       302
       +
                 height: 1px !important;

     

       303
       303
       +
                 padding: 0 !important;

     

       304
       304
       +
                 margin: -1px !important;

     

       305
       305
       +
                 overflow: hidden !important;

     

       306
       306
       +
                 clip: rect(0, 0, 0, 0) !important;

     

       307
       307
       +
                 white-space: nowrap !important;

     

       308
       308
       +
                 border: 0 !important;

     

       309
       309
       +
               }

     

       310
       310
       +
               

     

       311
       311
       +
               @media (max-width: 600px) {

     

       312
       312
       +
                 :host([display-mode="card"]) .h-card {

     

       313
       313
       +
                   padding: var(--bushel-author-mobile-padding, 0.75rem);

     

       314
       314
       +
                 }

     

       315
       315
       +
                 

     

       316
       316
       +
                 .author-social {

     

       317
       317
       +
                   flex-wrap: wrap;

     

       318
       318
       +
                 }

     

       319
       319
       +
               }

     

       320
       320
       +
             </style>

     

       321
       321
       +
           `;

     

       322
       322
       +
       

     

       323
       323
       +
           this.shadowRoot.innerHTML = styles + this.buildHCard().outerHTML;

     

       324
       324
       +
         }

     

       325
       325
       +
       }

     

       326
       326
       +
       

     

       327
       327
       +
       customElements.define('bushel-author', BushelAuthor);

+478

webcomp/index.html

···

       1
       1
       +
       <!DOCTYPE html>

     

       2
       2
       +
       <html lang="en">

     

       3
       3
       +
       <head>

     

       4
       4
       +
           <meta charset="UTF-8">

     

       5
       5
       +
           <meta name="viewport" content="width=device-width, initial-scale=1.0">

     

       6
       6
       +
           <title>Bushel Author Components - Real World Examples</title>

     

       7
       7
       +
           <script src="bushel-author.js"></script>

     

       8
       8
       +
           <style>

     

       9
       9
       +
               * {

     

       10
       10
       +
                   margin: 0;

     

       11
       11
       +
                   padding: 0;

     

       12
       12
       +
                   box-sizing: border-box;

     

       13
       13
       +
               }

     

       14
       14
       +
               

     

       15
       15
       +
               body {

     

       16
       16
       +
                   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

     

       17
       17
       +
                   line-height: 1.6;

     

       18
       18
       +
                   color: #333;

     

       19
       19
       +
                   background: #fafafa;

     

       20
       20
       +
               }

     

       21
       21
       +
               

     

       22
       22
       +
               header {

     

       23
       23
       +
                   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

     

       24
       24
       +
                   color: white;

     

       25
       25
       +
                   padding: 3rem 1rem;

     

       26
       26
       +
                   text-align: center;

     

       27
       27
       +
               }

     

       28
       28
       +
               

     

       29
       29
       +
               header h1 {

     

       30
       30
       +
                   font-size: 2.5rem;

     

       31
       31
       +
                   margin-bottom: 0.5rem;

     

       32
       32
       +
               }

     

       33
       33
       +
               

     

       34
       34
       +
               header p {

     

       35
       35
       +
                   font-size: 1.1rem;

     

       36
       36
       +
                   opacity: 0.9;

     

       37
       37
       +
                   max-width: 600px;

     

       38
       38
       +
                   margin: 0 auto;

     

       39
       39
       +
               }

     

       40
       40
       +
               

     

       41
       41
       +
               main {

     

       42
       42
       +
                   max-width: 1200px;

     

       43
       43
       +
                   margin: 0 auto;

     

       44
       44
       +
                   padding: 0 1rem;

     

       45
       45
       +
               }

     

       46
       46
       +
               

     

       47
       47
       +
               .section {

     

       48
       48
       +
                   background: white;

     

       49
       49
       +
                   margin: 3rem 0;

     

       50
       50
       +
                   padding: 2.5rem;

     

       51
       51
       +
                   border-radius: 0.75rem;

     

       52
       52
       +
                   box-shadow: 0 2px 8px rgba(0,0,0,0.1);

     

       53
       53
       +
               }

     

       54
       54
       +
               

     

       55
       55
       +
               .section h2 {

     

       56
       56
       +
                   color: #495057;

     

       57
       57
       +
                   margin-bottom: 1.5rem;

     

       58
       58
       +
                   font-size: 1.75rem;

     

       59
       59
       +
               }

     

       60
       60
       +
               

     

       61
       61
       +
               .section p {

     

       62
       62
       +
                   margin-bottom: 1.5rem;

     

       63
       63
       +
                   color: #666;

     

       64
       64
       +
               }

     

       65
       65
       +
               

     

       66
       66
       +
               /* Blog post layout */

     

       67
       67
       +
               .blog-post {

     

       68
       68
       +
                   border-left: 4px solid #667eea;

     

       69
       69
       +
                   padding-left: 1.5rem;

     

       70
       70
       +
                   margin: 2rem 0;

     

       71
       71
       +
               }

     

       72
       72
       +
               

     

       73
       73
       +
               .blog-post h3 {

     

       74
       74
       +
                   color: #495057;

     

       75
       75
       +
                   margin-bottom: 0.5rem;

     

       76
       76
       +
               }

     

       77
       77
       +
               

     

       78
       78
       +
               .blog-post .meta {

     

       79
       79
       +
                   display: flex;

     

       80
       80
       +
                   align-items: center;

     

       81
       81
       +
                   gap: 1rem;

     

       82
       82
       +
                   margin: 1rem 0;

     

       83
       83
       +
                   padding: 1rem 0;

     

       84
       84
       +
                   border-top: 1px solid #e9ecef;

     

       85
       85
       +
                   border-bottom: 1px solid #e9ecef;

     

       86
       86
       +
               }

     

       87
       87
       +
               

     

       88
       88
       +
               .blog-post .content {

     

       89
       89
       +
                   color: #555;

     

       90
       90
       +
                   font-size: 1.1rem;

     

       91
       91
       +
               }

     

       92
       92
       +
               

     

       93
       93
       +
               /* Team grid */

     

       94
       94
       +
               .team-grid {

     

       95
       95
       +
                   display: grid;

     

       96
       96
       +
                   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

     

       97
       97
       +
                   gap: 2rem;

     

       98
       98
       +
                   margin-top: 2rem;

     

       99
       99
       +
               }

     

       100
       100
       +
               

     

       101
       101
       +
               .team-member {

     

       102
       102
       +
                   background: #f8f9fa;

     

       103
       103
       +
                   padding: 1.5rem;

     

       104
       104
       +
                   border-radius: 0.5rem;

     

       105
       105
       +
                   text-align: center;

     

       106
       106
       +
               }

     

       107
       107
       +
               

     

       108
       108
       +
               /* Author bylines */

     

       109
       109
       +
               .article-byline {

     

       110
       110
       +
                   display: flex;

     

       111
       111
       +
                   align-items: center;

     

       112
       112
       +
                   gap: 1rem;

     

       113
       113
       +
                   padding: 1rem;

     

       114
       114
       +
                   background: #f8f9fa;

     

       115
       115
       +
                   border-radius: 0.5rem;

     

       116
       116
       +
                   margin: 1rem 0;

     

       117
       117
       +
               }

     

       118
       118
       +
               

     

       119
       119
       +
               .article-content {

     

       120
       120
       +
                   background: white;

     

       121
       121
       +
                   padding: 2rem;

     

       122
       122
       +
                   border-radius: 0.5rem;

     

       123
       123
       +
                   border: 1px solid #e9ecef;

     

       124
       124
       +
                   margin-top: 1rem;

     

       125
       125
       +
               }

     

       126
       126
       +
               

     

       127
       127
       +
               /* Comment thread */

     

       128
       128
       +
               .comment-thread {

     

       129
       129
       +
                   background: #f8f9fa;

     

       130
       130
       +
                   border-radius: 0.5rem;

     

       131
       131
       +
                   padding: 1.5rem;

     

       132
       132
       +
                   margin: 1rem 0;

     

       133
       133
       +
               }

     

       134
       134
       +
               

     

       135
       135
       +
               .comment {

     

       136
       136
       +
                   background: white;

     

       137
       137
       +
                   border-radius: 0.5rem;

     

       138
       138
       +
                   padding: 1rem;

     

       139
       139
       +
                   margin: 1rem 0;

     

       140
       140
       +
                   border-left: 3px solid #667eea;

     

       141
       141
       +
               }

     

       142
       142
       +
               

     

       143
       143
       +
               .comment-header {

     

       144
       144
       +
                   display: flex;

     

       145
       145
       +
                   align-items: center;

     

       146
       146
       +
                   gap: 1rem;

     

       147
       147
       +
                   margin-bottom: 0.75rem;

     

       148
       148
       +
               }

     

       149
       149
       +
               

     

       150
       150
       +
               .comment-body {

     

       151
       151
       +
                   color: #555;

     

       152
       152
       +
               }

     

       153
       153
       +
               

     

       154
       154
       +
               /* Footer */

     

       155
       155
       +
               footer {

     

       156
       156
       +
                   background: #343a40;

     

       157
       157
       +
                   color: white;

     

       158
       158
       +
                   text-align: center;

     

       159
       159
       +
                   padding: 2rem 1rem;

     

       160
       160
       +
                   margin-top: 4rem;

     

       161
       161
       +
               }

     

       162
       162
       +
               

     

       163
       163
       +
               /* Custom theme examples */

     

       164
       164
       +
               .theme-dark {

     

       165
       165
       +
                   --bushel-author-background: #2d3748;

     

       166
       166
       +
                   --bushel-author-name-color: #e2e8f0;

     

       167
       167
       +
                   --bushel-author-title-color: #a0aec0;

     

       168
       168
       +
                   --bushel-author-social-color: #4299e1;

     

       169
       169
       +
                   --bushel-author-padding: 1rem;

     

       170
       170
       +
                   --bushel-author-border-radius: 0.5rem;

     

       171
       171
       +
               }

     

       172
       172
       +
               

     

       173
       173
       +
               .theme-minimal {

     

       174
       174
       +
                   --bushel-author-photo-size: 1.5rem;

     

       175
       175
       +
                   --bushel-author-gap: 0.5rem;

     

       176
       176
       +
                   --bushel-author-name-size: 0.875rem;

     

       177
       177
       +
                   --bushel-author-social-size: 0.75rem;

     

       178
       178
       +
               }

     

       179
       179
       +
               

     

       180
       180
       +
               .theme-colorful {

     

       181
       181
       +
                   --bushel-author-background: linear-gradient(45deg, #ff6b6b, #4ecdc4);

     

       182
       182
       +
                   --bushel-author-name-color: white;

     

       183
       183
       +
                   --bushel-author-title-color: rgba(255,255,255,0.8);

     

       184
       184
       +
                   --bushel-author-social-color: white;

     

       185
       185
       +
                   --bushel-author-padding: 1rem;

     

       186
       186
       +
                   --bushel-author-border-radius: 1rem;

     

       187
       187
       +
               }

     

       188
       188
       +
               

     

       189
       189
       +
               @media (max-width: 768px) {

     

       190
       190
       +
                   header h1 {

     

       191
       191
       +
                       font-size: 2rem;

     

       192
       192
       +
                   }

     

       193
       193
       +
                   

     

       194
       194
       +
                   .section {

     

       195
       195
       +
                       margin: 2rem 0;

     

       196
       196
       +
                       padding: 1.5rem;

     

       197
       197
       +
                   }

     

       198
       198
       +
                   

     

       199
       199
       +
                   .blog-post .meta {

     

       200
       200
       +
                       flex-direction: column;

     

       201
       201
       +
                       align-items: flex-start;

     

       202
       202
       +
                       gap: 0.5rem;

     

       203
       203
       +
                   }

     

       204
       204
       +
                   

     

       205
       205
       +
                   .article-byline {

     

       206
       206
       +
                       flex-direction: column;

     

       207
       207
       +
                       align-items: flex-start;

     

       208
       208
       +
                       text-align: left;

     

       209
       209
       +
                   }

     

       210
       210
       +
               }

     

       211
       211
       +
           </style>

     

       212
       212
       +
       </head>

     

       213
       213
       +
       <body>

     

       214
       214
       +
           <header>

     

       215
       215
       +
               <h1>Bushel Author Components</h1>

     

       216
       216
       +
               <p>Semantic, accessible author information with microformat support for the modern web</p>

     

       217
       217
       +
           </header>

     

       218
       218
       +
       

     

       219
       219
       +
           <main>

     

       220
       220
       +
               <section class="section">

     

       221
       221
       +
                   <h2>Blog Post Authors</h2>

     

       222
       222
       +
                   <p>Perfect for article bylines and author attribution in blog posts and news articles.</p>

     

       223
       223
       +
                   

     

       224
       224
       +
                   <article class="blog-post">

     

       225
       225
       +
                       <h3>Building Accessible Web Components in 2025</h3>

     

       226
       226
       +
                       <div class="meta">

     

       227
       227
       +
                           <bushel-author 

     

       228
       228
       +
                               name="Sarah Chen"

     

       229
       229
       +
                               job-title="Senior Frontend Developer"

     

       230
       230
       +
                               org="Mozilla"

     

       231
       231
       +
                               photo="https://picsum.photos/200/200?random=1"

     

       232
       232
       +
                               github="sarahc"

     

       233
       233
       +
                               mastodon="https://mastodon.social/@sarahc"

     

       234
       234
       +
                               website="https://sarahchen.dev"

     

       235
       235
       +
                               link-profile>

     

       236
       236
       +
                           </bushel-author>

     

       237
       237
       +
                           <span style="color: #666;">Published March 15, 2025</span>

     

       238
       238
       +
                       </div>

     

       239
       239
       +
                       <div class="content">

     

       240
       240
       +
                           <p>Web components have revolutionized how we build reusable UI elements, but accessibility 

     

       241
       241
       +
                           often gets overlooked. This comprehensive guide covers everything you need to know about 

     

       242
       242
       +
                           creating web components that work for everyone...</p>

     

       243
       243
       +
                       </div>

     

       244
       244
       +
                   </article>

     

       245
       245
       +
       

     

       246
       246
       +
                   <article class="blog-post">

     

       247
       247
       +
                       <h3>The Future of Distributed Social Networks</h3>

     

       248
       248
       +
                       <div class="meta">

     

       249
       249
       +
                           <bushel-author 

     

       250
       250
       +
                               name="Dr. Marcus Thompson"

     

       251
       251
       +
                               job-title="Research Scientist"

     

       252
       252
       +
                               org="Decentralized Web Foundation"

     

       253
       253
       +
                               photo="https://picsum.photos/200/200?random=2"

     

       254
       254
       +
                               email="marcus@dwf.org"

     

       255
       255
       +
                               github="marcust"

     

       256
       256
       +
                               bio="Researcher focused on decentralized protocols and social networks">

     

       257
       257
       +
                           </bushel-author>

     

       258
       258
       +
                           <span style="color: #666;">Published March 12, 2025</span>

     

       259
       259
       +
                       </div>

     

       260
       260
       +
                       <div class="content">

     

       261
       261
       +
                           <p>As we move beyond centralized social media platforms, new protocols and technologies 

     

       262
       262
       +
                           are emerging that put users back in control of their data and social connections...</p>

     

       263
       263
       +
                       </div>

     

       264
       264
       +
                   </article>

     

       265
       265
       +
               </section>

     

       266
       266
       +
       

     

       267
       267
       +
               <section class="section">

     

       268
       268
       +
                   <h2>Team Pages</h2>

     

       269
       269
       +
                   <p>Showcase your team members with rich profile cards that include all their professional information.</p>

     

       270
       270
       +
                   

     

       271
       271
       +
                   <div class="team-grid">

     

       272
       272
       +
                       <div class="team-member">

     

       273
       273
       +
                           <bushel-author 

     

       274
       274
       +
                               display-mode="card"

     

       275
       275
       +
                               name="Emily Rodriguez"

     

       276
       276
       +
                               job-title="Lead UX Designer"

     

       277
       277
       +
                               org="DesignCorp"

     

       278
       278
       +
                               photo="https://picsum.photos/300/300?random=3"

     

       279
       279
       +
                               bio="Creating intuitive experiences that delight users and drive business results."

     

       280
       280
       +
                               website="https://emilyrodriguez.design"

     

       281
       281
       +
                               github="emilyux"

     

       282
       282
       +
                               twitter="emilyux_design"

     

       283
       283
       +
                               link-profile>

     

       284
       284
       +
                           </bushel-author>

     

       285
       285
       +
                       </div>

     

       286
       286
       +
                       

     

       287
       287
       +
                       <div class="team-member">

     

       288
       288
       +
                           <bushel-author 

     

       289
       289
       +
                               display-mode="card"

     

       290
       290
       +
                               name="Alex Kim"

     

       291
       291
       +
                               job-title="DevOps Engineer"

     

       292
       292
       +
                               org="DesignCorp"

     

       293
       293
       +
                               photo="https://picsum.photos/300/300?random=4"

     

       294
       294
       +
                               bio="Building reliable infrastructure and deployment pipelines for modern applications."

     

       295
       295
       +
                               github="alexkimops"

     

       296
       296
       +
                               mastodon="https://fosstodon.org/@alexkim"

     

       297
       297
       +
                               website="https://alexkim.dev">

     

       298
       298
       +
                           </bushel-author>

     

       299
       299
       +
                       </div>

     

       300
       300
       +
                       

     

       301
       301
       +
                       <div class="team-member">

     

       302
       302
       +
                           <bushel-author 

     

       303
       303
       +
                               display-mode="card"

     

       304
       304
       +
                               given-name="Isabella"

     

       305
       305
       +
                               family-name="Martinez"

     

       306
       306
       +
                               nickname="Izzy"

     

       307
       307
       +
                               job-title="Product Manager"

     

       308
       308
       +
                               org="DesignCorp"

     

       309
       309
       +
                               photo="https://picsum.photos/300/300?random=5"

     

       310
       310
       +
                               bio="Bridging the gap between user needs and technical possibilities."

     

       311
       311
       +
                               email="izzy@designcorp.com"

     

       312
       312
       +
                               github="izzymartinez"

     

       313
       313
       +
                               website="https://izzy.pm">

     

       314
       314
       +
                           </bushel-author>

     

       315
       315
       +
                       </div>

     

       316
       316
       +
                   </div>

     

       317
       317
       +
               </section>

     

       318
       318
       +
       

     

       319
       319
       +
               <section class="section">

     

       320
       320
       +
                   <h2>Article Collaboration</h2>

     

       321
       321
       +
                   <p>Show multiple authors and contributors for collaborative content.</p>

     

       322
       322
       +
                   

     

       323
       323
       +
                   <div class="article-byline">

     

       324
       324
       +
                       <strong>Authors:</strong>

     

       325
       325
       +
                       <bushel-author 

     

       326
       326
       +
                           display-mode="compact"

     

       327
       327
       +
                           name="David Park"

     

       328
       328
       +
                           job-title="Security Researcher"

     

       329
       329
       +
                           photo="https://picsum.photos/200/200?random=6"

     

       330
       330
       +
                           github="davidpark">

     

       331
       331
       +
                       </bushel-author>

     

       332
       332
       +
                       <bushel-author 

     

       333
       333
       +
                           display-mode="compact"

     

       334
       334
       +
                           name="Lisa Wang"

     

       335
       335
       +
                           job-title="Cryptography Expert"

     

       336
       336
       +
                           photo="https://picsum.photos/200/200?random=7"

     

       337
       337
       +
                           github="lisawang">

     

       338
       338
       +
                       </bushel-author>

     

       339
       339
       +
                   </div>

     

       340
       340
       +
                   

     

       341
       341
       +
                   <div class="article-content">

     

       342
       342
       +
                       <h3>Zero-Knowledge Proofs in Web Applications</h3>

     

       343
       343
       +
                       <p>This collaborative research paper explores the practical implementation of zero-knowledge 

     

       344
       344
       +
                       proofs in modern web applications, covering both theoretical foundations and real-world use cases...</p>

     

       345
       345
       +
                   </div>

     

       346
       346
       +
               </section>

     

       347
       347
       +
       

     

       348
       348
       +
               <section class="section">

     

       349
       349
       +
                   <h2>Comment Threads</h2>

     

       350
       350
       +
                   <p>Perfect for showing comment authors in discussion threads and forums.</p>

     

       351
       351
       +
                   

     

       352
       352
       +
                   <div class="comment-thread">

     

       353
       353
       +
                       <h3>Discussion: "Best Practices for Web Component Testing"</h3>

     

       354
       354
       +
                       

     

       355
       355
       +
                       <div class="comment">

     

       356
       356
       +
                           <div class="comment-header">

     

       357
       357
       +
                               <bushel-author 

     

       358
       358
       +
                                   display-mode="compact"

     

       359
       359
       +
                                   name="Rachel Green"

     

       360
       360
       +
                                   photo="https://picsum.photos/200/200?random=8"

     

       361
       361
       +
                                   github="rachelgreen">

     

       362
       362
       +
                               </bushel-author>

     

       363
       363
       +
                               <span style="color: #666; font-size: 0.875rem;">2 hours ago</span>

     

       364
       364
       +
                           </div>

     

       365
       365
       +
                           <div class="comment-body">

     

       366
       366
       +
                               Great article! I've been struggling with testing shadow DOM interactions. 

     

       367
       367
       +
                               The approach you outlined for using testing-library with web components is exactly what I needed.

     

       368
       368
       +
                           </div>

     

       369
       369
       +
                       </div>

     

       370
       370
       +
                       

     

       371
       371
       +
                       <div class="comment">

     

       372
       372
       +
                           <div class="comment-header">

     

       373
       373
       +
                               <bushel-author 

     

       374
       374
       +
                                   display-mode="compact"

     

       375
       375
       +
                                   name="James Wilson"

     

       376
       376
       +
                                   job-title="Test Automation Engineer"

     

       377
       377
       +
                                   photo="https://picsum.photos/200/200?random=9"

     

       378
       378
       +
                                   github="jameswilson">

     

       379
       379
       +
                               </bushel-author>

     

       380
       380
       +
                               <span style="color: #666; font-size: 0.875rem;">1 hour ago</span>

     

       381
       381
       +
                           </div>

     

       382
       382
       +
                           <div class="comment-body">

     

       383
       383
       +
                               @rachelgreen Have you tried the new Web Component Testing utilities in Playwright? 

     

       384
       384
       +
                               They've made shadow DOM testing much more straightforward.

     

       385
       385
       +
                           </div>

     

       386
       386
       +
                       </div>

     

       387
       387
       +
                       

     

       388
       388
       +
                       <div class="comment">

     

       389
       389
       +
                           <div class="comment-header">

     

       390
       390
       +
                               <bushel-author 

     

       391
       391
       +
                                   display-mode="compact"

     

       392
       392
       +
                                   name="Priya Patel"

     

       393
       393
       +
                                   photo="https://picsum.photos/200/200?random=10"

     

       394
       394
       +
                                   mastodon="https://mastodon.social/@priya"

     

       395
       395
       +
                                   github="priyapatel">

     

       396
       396
       +
                               </bushel-author>

     

       397
       397
       +
                               <span style="color: #666; font-size: 0.875rem;">30 minutes ago</span>

     

       398
       398
       +
                           </div>

     

       399
       399
       +
                           <div class="comment-body">

     

       400
       400
       +
                               Thanks for mentioning Playwright! I'll definitely check that out. 

     

       401
       401
       +
                               We've been using Cypress but shadow DOM support has been limited.

     

       402
       402
       +
                           </div>

     

       403
       403
       +
                       </div>

     

       404
       404
       +
                   </div>

     

       405
       405
       +
               </section>

     

       406
       406
       +
       

     

       407
       407
       +
               <section class="section">

     

       408
       408
       +
                   <h2>Themed Variants</h2>

     

       409
       409
       +
                   <p>Customize the appearance using CSS custom properties to match your brand.</p>

     

       410
       410
       +
                   

     

       411
       411
       +
                   <div style="display: grid; gap: 2rem; margin-top: 2rem;">

     

       412
       412
       +
                       <div style="background: #1a202c; padding: 2rem; border-radius: 0.5rem;">

     

       413
       413
       +
                           <h3 style="color: white; margin-bottom: 1rem;">Dark Theme</h3>

     

       414
       414
       +
                           <bushel-author 

     

       415
       415
       +
                               class="theme-dark"

     

       416
       416
       +
                               name="Morgan Foster"

     

       417
       417
       +
                               job-title="Night Shift Developer"

     

       418
       418
       +
                               photo="https://picsum.photos/200/200?random=11"

     

       419
       419
       +
                               github="morganf"

     

       420
       420
       +
                               website="https://morganfoster.dev"

     

       421
       421
       +
                               link-profile>

     

       422
       422
       +
                           </bushel-author>

     

       423
       423
       +
                       </div>

     

       424
       424
       +
                       

     

       425
       425
       +
                       <div style="padding: 1rem; border: 2px dashed #ddd; border-radius: 0.5rem;">

     

       426
       426
       +
                           <h3 style="margin-bottom: 1rem;">Minimal Theme</h3>

     

       427
       427
       +
                           <bushel-author 

     

       428
       428
       +
                               class="theme-minimal"

     

       429
       429
       +
                               name="Taylor Swift"

     

       430
       430
       +
                               job-title="Minimalist Designer"

     

       431
       431
       +
                               photo="https://picsum.photos/200/200?random=12"

     

       432
       432
       +
                               github="taylorswift">

     

       433
       433
       +
                           </bushel-author>

     

       434
       434
       +
                       </div>

     

       435
       435
       +
                       

     

       436
       436
       +
                       <div style="padding: 2rem; background: #f0f8ff; border-radius: 0.5rem;">

     

       437
       437
       +
                           <h3 style="margin-bottom: 1rem;">Colorful Theme</h3>

     

       438
       438
       +
                           <bushel-author 

     

       439
       439
       +
                               class="theme-colorful"

     

       440
       440
       +
                               name="Jordan Rivers"

     

       441
       441
       +
                               job-title="Creative Developer"

     

       442
       442
       +
                               photo="https://picsum.photos/200/200?random=13"

     

       443
       443
       +
                               github="jordanrivers"

     

       444
       444
       +
                               mastodon="https://mastodon.art/@jordan"

     

       445
       445
       +
                               website="https://jordanrivers.art"

     

       446
       446
       +
                               link-profile>

     

       447
       447
       +
                           </bushel-author>

     

       448
       448
       +
                       </div>

     

       449
       449
       +
                   </div>

     

       450
       450
       +
               </section>

     

       451
       451
       +
       

     

       452
       452
       +
               <section class="section">

     

       453
       453
       +
                   <h2>Technical Implementation</h2>

     

       454
       454
       +
                   <p>Each component automatically generates semantic HTML with proper microformat markup:</p>

     

       455
       455
       +
                   <ul style="list-style: disc; padding-left: 2rem; color: #666;">

     

       456
       456
       +
                       <li><strong>h-card microformat</strong> - Machine-readable contact information</li>

     

       457
       457
       +
                       <li><strong>Semantic HTML</strong> - Proper heading hierarchy and landmark elements</li>

     

       458
       458
       +
                       <li><strong>Accessibility</strong> - ARIA labels, keyboard navigation, screen reader support</li>

     

       459
       459
       +
                       <li><strong>Progressive Enhancement</strong> - Works without JavaScript, enhanced with it</li>

     

       460
       460
       +
                       <li><strong>Responsive Design</strong> - Adapts to all screen sizes and devices</li>

     

       461
       461
       +
                       <li><strong>Social Verification</strong> - Includes rel="me" links for identity verification</li>

     

       462
       462
       +
                   </ul>

     

       463
       463
       +
               </section>

     

       464
       464
       +
           </main>

     

       465
       465
       +
       

     

       466
       466
       +
           <footer>

     

       467
       467
       +
               <p>Built with ❤️ using Bushel Web Components</p>

     

       468
       468
       +
               <div style="margin-top: 1rem;">

     

       469
       469
       +
                   <bushel-author 

     

       470
       470
       +
                       display-mode="compact"

     

       471
       471
       +
                       name="Bushel Team"

     

       472
       472
       +
                       website="https://github.com/avsm/bushel"

     

       473
       473
       +
                       github="avsm/bushel">

     

       474
       474
       +
                   </bushel-author>

     

       475
       475
       +
               </div>

     

       476
       476
       +
           </footer>

     

       477
       477
       +
       </body>

     

       478
       478
       +
       </html>