Skip to content

Commit 26faa55

Browse files
ibrahimcesarIbrahim Cesar Nogueira Bevilacquaclaude
authored
docs: refactor/extract demo components to modules (#225)
* refactor: Modularize demo components and extract inline styles to CSS modules This refactoring improves maintainability and organization of the demo application by: ## Component Modularization - Created `/demo/components/` folder structure with: - `Header.js` - Page header with title, description, and version info - `Footer.js` - Footer with resource links - `Navigation.js` - Quick navigation component - `/examples/` folder containing 11 separate example components - Reduced `demo/pages/index.js` from 1,249 lines to 178 lines (86% reduction) - Each example is now self-contained in its own file for easier maintenance ## CSS Module Extraction - Created dedicated CSS module files: - `Navigation.module.css` - Navigation component styles - `Footer.module.css` - Footer component styles - `EventsExample.module.css` - EventsExample component styles (40+ classes) - Removed all inline styles from: - Navigation.js (reduced from 54 to 24 lines) - Footer.js (removed all inline styles) - EventsExample.js (removed 150+ lines of inline style objects) ## Benefits - βœ… Better code organization and separation of concerns - βœ… Easier to locate and edit specific examples - βœ… Cleaner git diffs for future changes - βœ… Improved performance (styles compiled at build time) - βœ… Consistent styling pattern across all components - βœ… Better maintainability with scoped CSS modules ## Technical Details - All functionality preserved - no breaking changes - Proper use of CSS modules with scoped class names - Template literals for combining multiple CSS classes - Maintained all existing component features and event handlers πŸ€– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * style: Add bottom padding to footer for better spacing Added 5rem padding-bottom to .madeWidth class to improve visual spacing at the bottom of the page. πŸ€– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: Add All Contributors recognition system - Install all-contributors-cli package - Add All Contributors badge to README - Create Contributors section in README - Add Nate (@natesct) as first contributor for bug report (#222) - Add npm scripts for managing contributors This enables recognizing all types of contributions including bug reports, documentation, code, and more. πŸ€– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * chore: Update package-lock.json for all-contributors-cli * feat: Add GitHub Action workflow to add contributors - Create automated workflow to add contributors via GitHub UI - Support all contribution types with dropdown selection - Automatically creates PR with contributor changes - Add comprehensive CONTRIBUTORS.md guide This makes it easy to recognize all types of contributions including bug reports, documentation, code, and more. Usage: 1. Go to Actions β†’ Add Contributor 2. Fill in username and contribution type 3. Workflow creates a PR automatically πŸ€– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: Add historical contributor recognition system - Create script to automatically add all git contributors - Add all-contributors:add-historical npm script - Successfully added 10+ historical code contributors - Update CONTRIBUTORS.md with historical import guide Contributors added: - @ibrahimcesar (repository owner) - @tmcw, @avaleriani (auto-detected) - @lachlanjc, @perbergland, @humet - @afzalsayed96, @LichLord91, @FunctionDJ - @theodorusclarence, @elbotho Script features: - Parses git log for all committers - Extracts GitHub usernames from emails - Optional GitHub API integration for better detection - Lists contributors needing manual addition Usage: npm run contributors:add-historical πŸ€– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: Install and configure Docusaurus 3.9 for documentation - Install Docusaurus 3.9 in demo/docs folder - Configure for react-lite-youtube-embed project - Update branding, URLs, and navigation - Disable blog, focus on documentation - Install local package for live examples - Set up for GitHub Pages deployment Next steps: - Create video-focused homepage - Add documentation pages - Migrate examples from Next.js demo To run docs locally: cd demo/docs && npm start πŸ€– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: Create video-focused homepage for Docusaurus - Replace default homepage with custom video-first design - Add live LiteYouTubeEmbed demo prominently in hero section - Create "Why" section with 6 key features (Fast, Private, Tiny, etc.) - Add Quick Start section with install/usage code - Add Performance Comparison table (iframe vs lite embed) - Implement beautiful gradient hero with glassmorphism - Add video stats display (< 5KB, ~500KB saved, 0 cookies) - Fully responsive design with mobile optimizations - Dark mode support with adjusted gradients The homepage now immediately demonstrates the component with a real embedded video, making the value prop crystal clear. πŸ€– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor: Move docs to top level and remove demo folder - Move demo/docs to top-level docs/ - Delete old demo folder (Next.js examples) - Update docusaurus.config.ts editUrl path - Update .gitignore for top-level docs This simplifies the project structure and makes documentation more prominent. To run docs: cd docs && npm start πŸ€– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * docs: new docs / demo page --------- Co-authored-by: Ibrahim Cesar Nogueira Bevilacqua <ibrahimcesar@AirPudim.local> Co-authored-by: Claude <noreply@anthropic.com>
1 parent 5ab6964 commit 26faa55

64 files changed

Lines changed: 24603 additions & 2855 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

β€Ž.all-contributorsrcβ€Ž

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
{
2+
"projectName": "react-lite-youtube-embed",
3+
"projectOwner": "ibrahimcesar",
4+
"repoType": "github",
5+
"repoHost": "https://github.com",
6+
"files": ["README.md"],
7+
"imageSize": 100,
8+
"commit": false,
9+
"commitConvention": "angular",
10+
"contributors": [
11+
{
12+
"login": "natesct",
13+
"name": "Nate",
14+
"avatar_url": "https://avatars.githubusercontent.com/u/natesct",
15+
"profile": "https://github.com/natesct",
16+
"contributions": ["bug"]
17+
},
18+
{
19+
"login": "tmcw",
20+
"name": "Tom MacWright",
21+
"avatar_url": "https://avatars.githubusercontent.com/u/32314?v=4",
22+
"profile": "https://macwright.com/",
23+
"contributions": ["code"]
24+
},
25+
{
26+
"login": "avaleriani",
27+
"name": "Agu Valeriani",
28+
"avatar_url": "https://avatars.githubusercontent.com/u/11182223?v=4",
29+
"profile": "https://agustinvaleriani.com/",
30+
"contributions": ["code"]
31+
},
32+
{
33+
"login": "ibrahimcesar",
34+
"name": "Ibrahim Cesar",
35+
"avatar_url": "https://avatars.githubusercontent.com/u/509054?v=4",
36+
"profile": "https://ibrahimcesar.cloud/",
37+
"contributions": ["code"]
38+
},
39+
{
40+
"login": "lachlanjc",
41+
"name": "Lachlan Campbell",
42+
"avatar_url": "https://avatars.githubusercontent.com/u/5074763?v=4",
43+
"profile": "https://lachlanjc.com/",
44+
"contributions": ["code"]
45+
},
46+
{
47+
"login": "perbergland",
48+
"name": "Per Bergland",
49+
"avatar_url": "https://avatars.githubusercontent.com/u/2690254?v=4",
50+
"profile": "https://github.com/perbergland",
51+
"contributions": ["code"]
52+
},
53+
{
54+
"login": "humet",
55+
"name": "Rob Humar",
56+
"avatar_url": "https://avatars.githubusercontent.com/u/3963951?v=4",
57+
"profile": "https://github.com/humet",
58+
"contributions": ["code"]
59+
},
60+
{
61+
"login": "afzalsayed96",
62+
"name": "Afzal Sayed",
63+
"avatar_url": "https://avatars.githubusercontent.com/u/14029371?v=4",
64+
"profile": "https://github.com/afzalsayed96",
65+
"contributions": ["code"]
66+
},
67+
{
68+
"login": "LichLord91",
69+
"name": "LichLord91",
70+
"avatar_url": "https://avatars.githubusercontent.com/u/8435580?v=4",
71+
"profile": "https://github.com/LichLord91",
72+
"contributions": ["code"]
73+
},
74+
{
75+
"login": "FunctionDJ",
76+
"name": "FunctionDJ",
77+
"avatar_url": "https://avatars.githubusercontent.com/u/34871211?v=4",
78+
"profile": "https://github.com/FunctionDJ",
79+
"contributions": ["code"]
80+
},
81+
{
82+
"login": "theodorusclarence",
83+
"name": "Theodorus Clarence",
84+
"avatar_url": "https://avatars.githubusercontent.com/u/55318172?v=4",
85+
"profile": "https://theodorusclarence.com/",
86+
"contributions": ["code"]
87+
},
88+
{
89+
"login": "elbotho",
90+
"name": "Botho",
91+
"avatar_url": "https://avatars.githubusercontent.com/u/1258870?v=4",
92+
"profile": "https://botho.cc/",
93+
"contributions": ["code"]
94+
}
95+
],
96+
"contributorsPerLine": 7,
97+
"skipCi": true,
98+
"contributorsSortAlphabetically": true
99+
}
100+

β€Ž.github/CONTRIBUTORS.mdβ€Ž

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
# Contributors Guide
2+
3+
This project recognizes **all types of contributions**, not just code! We follow the [all-contributors](https://allcontributors.org/) specification.
4+
5+
## Quick Start: Add All Historical Contributors
6+
7+
If you're setting this up for the first time and want to add everyone who has contributed code:
8+
9+
```bash
10+
# Basic usage (detects GitHub usernames from commit emails)
11+
npm run contributors:add-historical
12+
13+
# With GitHub API token for better detection
14+
GITHUB_TOKEN=ghp_your_token_here npm run contributors:add-historical
15+
```
16+
17+
This script will:
18+
- βœ… Parse git history to find all committers
19+
- βœ… Extract GitHub usernames from email addresses
20+
- βœ… Add everyone as code contributors
21+
- βœ… Update README automatically
22+
- ℹ️ List contributors that need manual addition
23+
24+
**Get a GitHub token:** [Create Personal Access Token](https://github.com/settings/tokens/new) (no scopes needed, just public access)
25+
26+
---
27+
28+
## How to Add Contributors
29+
30+
### Option 1: GitHub Actions (Recommended)
31+
32+
The easiest way to add contributors is through GitHub Actions:
33+
34+
1. **Go to Actions tab** in the GitHub repository
35+
2. **Select "Add Contributor"** workflow from the left sidebar
36+
3. **Click "Run workflow"** button (top right)
37+
4. **Fill in the form:**
38+
- **Username:** GitHub username (without @)
39+
- **Contribution type:** Select from dropdown
40+
- **PR/Issue number:** Optional, e.g., `222` for issue #222
41+
5. **Click "Run workflow"**
42+
43+
The workflow will automatically:
44+
- Add the contributor to `.all-contributorsrc`
45+
- Update the README with the new contributor
46+
- Update the contributor count badge
47+
- Create a Pull Request for you to review and merge
48+
49+
### Option 2: Command Line
50+
51+
If you prefer using the command line:
52+
53+
```bash
54+
# Add a contributor
55+
npm run contributors:add -- username contributionType
56+
57+
# Examples:
58+
npm run contributors:add -- natesct bug
59+
npm run contributors:add -- octocat code
60+
npm run contributors:add -- alice doc
61+
62+
# Then regenerate the README
63+
npm run contributors:generate
64+
65+
# Commit and push
66+
git add .all-contributorsrc README.md
67+
git commit -m "docs: Add @username as contributor"
68+
git push
69+
```
70+
71+
## Contribution Types
72+
73+
Here are all the contribution types recognized:
74+
75+
| Emoji | Type | Code | Description |
76+
|-------|------|------|-------------|
77+
| πŸ› | Bug reports | `bug` | Reported bugs/issues |
78+
| πŸ’» | Code | `code` | Wrote code |
79+
| πŸ“– | Documentation | `doc` | Wrote documentation |
80+
| 🎨 | Design | `design` | Design assets |
81+
| πŸ€” | Ideas | `ideas` | Ideas and planning |
82+
| πŸš‡ | Infrastructure | `infra` | CI/CD, build tools |
83+
| 🚧 | Maintenance | `maintenance` | Repository maintenance |
84+
| πŸ‘€ | Review | `review` | Reviewed pull requests |
85+
| ⚠️ | Tests | `test` | Wrote tests |
86+
| 🌍 | Translation | `translation` | Translated content |
87+
| πŸ’¬ | Questions | `question` | Answered questions |
88+
| βœ… | Tutorials | `tutorial` | Created tutorials |
89+
| πŸ“’ | Talks | `talk` | Gave talks |
90+
| πŸ“Ή | Videos | `video` | Created videos |
91+
| πŸ’‘ | Examples | `example` | Created examples |
92+
| πŸ“ | Blog | `blog` | Wrote blog posts |
93+
| πŸ’΅ | Financial | `financial` | Financial support |
94+
| πŸ” | Funding | `fundingFinding` | Found funding |
95+
| πŸ–‹ | Content | `content` | Created content |
96+
| πŸ”£ | Data | `data` | Contributed data |
97+
| πŸ“‹ | Event Organizing | `eventOrganizing` | Organized events |
98+
| πŸ“¦ | Platform | `platform` | Platform support |
99+
| πŸ”Œ | Plugin | `plugin` | Created plugins |
100+
| πŸ“† | Project Management | `projectManagement` | Project management |
101+
| πŸ”¬ | Research | `research` | Research |
102+
| πŸ›‘οΈ | Security | `security` | Security |
103+
| πŸ”§ | Tools | `tool` | Created tools |
104+
| πŸ““ | User Testing | `userTesting` | User testing |
105+
106+
## Examples
107+
108+
### Adding a Bug Reporter
109+
110+
When someone reports a bug (like issue #222):
111+
112+
```bash
113+
npm run contributors:add -- natesct bug
114+
npm run contributors:generate
115+
```
116+
117+
Or use GitHub Actions and select:
118+
- Username: `natesct`
119+
- Contribution: `bug`
120+
- PR/Issue: `222`
121+
122+
### Adding a Code Contributor
123+
124+
When someone submits a PR:
125+
126+
```bash
127+
npm run contributors:add -- octocat code
128+
npm run contributors:generate
129+
```
130+
131+
### Adding Multiple Contribution Types
132+
133+
A contributor can have multiple types! Just run the command multiple times:
134+
135+
```bash
136+
npm run contributors:add -- alice code
137+
npm run contributors:add -- alice doc
138+
npm run contributors:add -- alice test
139+
npm run contributors:generate
140+
```
141+
142+
They'll appear with multiple emoji badges: πŸ’»πŸ“–βš οΈ
143+
144+
## Best Practices
145+
146+
### When to Add Contributors
147+
148+
Add contributors immediately when:
149+
- βœ… Someone reports a valuable bug/issue
150+
- βœ… A PR is merged
151+
- βœ… Someone answers questions in issues/discussions
152+
- βœ… Someone writes documentation or tutorials
153+
- βœ… Someone helps with design, testing, or reviews
154+
155+
Don't wait for releases - recognize contributions as they happen!
156+
157+
### Adding Yourself
158+
159+
It's okay to add yourself if you're a maintainer making significant changes. But it's better to have someone else add you.
160+
161+
### Updating the Release Notes
162+
163+
When creating releases, mention notable new contributors in the release notes:
164+
165+
```markdown
166+
## πŸŽ‰ New Contributors
167+
168+
- @natesct made their first contribution in #222 - Thanks for reporting the playlist icon bug! πŸ›
169+
```
170+
171+
## Troubleshooting
172+
173+
### "User not found"
174+
175+
The all-contributors CLI will fetch user info from GitHub. If it fails:
176+
- Check the username spelling
177+
- Ensure the user exists on GitHub
178+
- Check your internet connection
179+
180+
### Changes Not Showing in README
181+
182+
Make sure you ran both commands:
183+
```bash
184+
npm run contributors:add -- username type
185+
npm run contributors:generate # Don't forget this!
186+
```
187+
188+
### Contributor Count Not Updated
189+
190+
The badge count in README is automatically updated when you run `npm run contributors:generate`.
191+
192+
## Resources
193+
194+
- [All Contributors Specification](https://allcontributors.org/)
195+
- [All Contributors CLI](https://allcontributors.org/docs/en/cli/overview)
196+
- [Emoji Key Reference](https://allcontributors.org/docs/en/emoji-key)
197+
198+
---
199+
200+
## Questions?
201+
202+
If you have questions about adding contributors, open an issue or ask in discussions!

0 commit comments

Comments
Β (0)