docs: refactor/extract demo components to modules

.all-contributorsrc

@@ -0,0 +1,100 @@
+{
+  "projectName": "react-lite-youtube-embed",
+  "projectOwner": "ibrahimcesar",
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "files": ["README.md"],
+  "imageSize": 100,
+  "commit": false,
+  "commitConvention": "angular",
+  "contributors": [
+    {
+      "login": "natesct",
+      "name": "Nate",
+      "avatar_url": "https://avatars.githubusercontent.com/u/natesct",
+      "profile": "https://github.com/natesct",
+      "contributions": ["bug"]
+    },
+    {
+      "login": "tmcw",
+      "name": "Tom MacWright",
+      "avatar_url": "https://avatars.githubusercontent.com/u/32314?v=4",
+      "profile": "https://macwright.com/",
+      "contributions": ["code"]
+    },
+    {
+      "login": "avaleriani",
+      "name": "Agu Valeriani",
+      "avatar_url": "https://avatars.githubusercontent.com/u/11182223?v=4",
+      "profile": "https://agustinvaleriani.com/",
+      "contributions": ["code"]
+    },
+    {
+      "login": "ibrahimcesar",
+      "name": "Ibrahim Cesar",
+      "avatar_url": "https://avatars.githubusercontent.com/u/509054?v=4",
+      "profile": "https://ibrahimcesar.cloud/",
+      "contributions": ["code"]
+    },
+    {
+      "login": "lachlanjc",
+      "name": "Lachlan Campbell",
+      "avatar_url": "https://avatars.githubusercontent.com/u/5074763?v=4",
+      "profile": "https://lachlanjc.com/",
+      "contributions": ["code"]
+    },
+    {
+      "login": "perbergland",
+      "name": "Per Bergland",
+      "avatar_url": "https://avatars.githubusercontent.com/u/2690254?v=4",
+      "profile": "https://github.com/perbergland",
+      "contributions": ["code"]
+    },
+    {
+      "login": "humet",
+      "name": "Rob Humar",
+      "avatar_url": "https://avatars.githubusercontent.com/u/3963951?v=4",
+      "profile": "https://github.com/humet",
+      "contributions": ["code"]
+    },
+    {
+      "login": "afzalsayed96",
+      "name": "Afzal Sayed",
+      "avatar_url": "https://avatars.githubusercontent.com/u/14029371?v=4",
+      "profile": "https://github.com/afzalsayed96",
+      "contributions": ["code"]
+    },
+    {
+      "login": "LichLord91",
+      "name": "LichLord91",
+      "avatar_url": "https://avatars.githubusercontent.com/u/8435580?v=4",
+      "profile": "https://github.com/LichLord91",
+      "contributions": ["code"]
+    },
+    {
+      "login": "FunctionDJ",
+      "name": "FunctionDJ",
+      "avatar_url": "https://avatars.githubusercontent.com/u/34871211?v=4",
+      "profile": "https://github.com/FunctionDJ",
+      "contributions": ["code"]
+    },
+    {
+      "login": "theodorusclarence",
+      "name": "Theodorus Clarence",
+      "avatar_url": "https://avatars.githubusercontent.com/u/55318172?v=4",
+      "profile": "https://theodorusclarence.com/",
+      "contributions": ["code"]
+    },
+    {
+      "login": "elbotho",
+      "name": "Botho",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1258870?v=4",
+      "profile": "https://botho.cc/",
+      "contributions": ["code"]
+    }
+  ],
+  "contributorsPerLine": 7,
+  "skipCi": true,
+  "contributorsSortAlphabetically": true
+}
+

.github/CONTRIBUTORS.md

@@ -0,0 +1,202 @@
+# Contributors Guide
+
+This project recognizes **all types of contributions**, not just code! We follow the [all-contributors](https://allcontributors.org/) specification.
+
+## Quick Start: Add All Historical Contributors
+
+If you're setting this up for the first time and want to add everyone who has contributed code:
+
+```bash
+# Basic usage (detects GitHub usernames from commit emails)
+npm run contributors:add-historical
+
+# With GitHub API token for better detection
+GITHUB_TOKEN=ghp_your_token_here npm run contributors:add-historical
+```
+
+This script will:
+- ✅ Parse git history to find all committers
+- ✅ Extract GitHub usernames from email addresses
+- ✅ Add everyone as code contributors
+- ✅ Update README automatically
+- ℹ️ List contributors that need manual addition
+
+**Get a GitHub token:** [Create Personal Access Token](https://github.com/settings/tokens/new) (no scopes needed, just public access)
+
+---
+
+## How to Add Contributors
+
+### Option 1: GitHub Actions (Recommended)
+
+The easiest way to add contributors is through GitHub Actions:
+
+1. **Go to Actions tab** in the GitHub repository
+2. **Select "Add Contributor"** workflow from the left sidebar
+3. **Click "Run workflow"** button (top right)
+4. **Fill in the form:**
+   - **Username:** GitHub username (without @)
+   - **Contribution type:** Select from dropdown
+   - **PR/Issue number:** Optional, e.g., `222` for issue #222
+5. **Click "Run workflow"**
+
+The workflow will automatically:
+- Add the contributor to `.all-contributorsrc`
+- Update the README with the new contributor
+- Update the contributor count badge
+- Create a Pull Request for you to review and merge
+
+### Option 2: Command Line
+
+If you prefer using the command line:
+
+```bash
+# Add a contributor
+npm run contributors:add -- username contributionType
+
+# Examples:
+npm run contributors:add -- natesct bug
+npm run contributors:add -- octocat code
+npm run contributors:add -- alice doc
+
+# Then regenerate the README
+npm run contributors:generate
+
+# Commit and push
+git add .all-contributorsrc README.md
+git commit -m "docs: Add @username as contributor"
+git push
+```
+
+## Contribution Types
+
+Here are all the contribution types recognized:
+
+| Emoji | Type | Code | Description |
+|-------|------|------|-------------|
+| 🐛 | Bug reports | `bug` | Reported bugs/issues |
+| 💻 | Code | `code` | Wrote code |
+| 📖 | Documentation | `doc` | Wrote documentation |
+| 🎨 | Design | `design` | Design assets |
+| 🤔 | Ideas | `ideas` | Ideas and planning |
+| 🚇 | Infrastructure | `infra` | CI/CD, build tools |
+| 🚧 | Maintenance | `maintenance` | Repository maintenance |
+| 👀 | Review | `review` | Reviewed pull requests |
+| ⚠️ | Tests | `test` | Wrote tests |
+| 🌍 | Translation | `translation` | Translated content |
+| 💬 | Questions | `question` | Answered questions |
+| ✅ | Tutorials | `tutorial` | Created tutorials |
+| 📢 | Talks | `talk` | Gave talks |
+| 📹 | Videos | `video` | Created videos |
+| 💡 | Examples | `example` | Created examples |
+| 📝 | Blog | `blog` | Wrote blog posts |
+| 💵 | Financial | `financial` | Financial support |
+| 🔍 | Funding | `fundingFinding` | Found funding |
+| 🖋 | Content | `content` | Created content |
+| 🔣 | Data | `data` | Contributed data |
+| 📋 | Event Organizing | `eventOrganizing` | Organized events |
+| 📦 | Platform | `platform` | Platform support |
+| 🔌 | Plugin | `plugin` | Created plugins |
+| 📆 | Project Management | `projectManagement` | Project management |
+| 🔬 | Research | `research` | Research |
+| 🛡️ | Security | `security` | Security |
+| 🔧 | Tools | `tool` | Created tools |
+| 📓 | User Testing | `userTesting` | User testing |
+
+## Examples
+
+### Adding a Bug Reporter
+
+When someone reports a bug (like issue #222):
+
+```bash
+npm run contributors:add -- natesct bug
+npm run contributors:generate
+```
+
+Or use GitHub Actions and select:
+- Username: `natesct`
+- Contribution: `bug`
+- PR/Issue: `222`
+
+### Adding a Code Contributor
+
+When someone submits a PR:
+
+```bash
+npm run contributors:add -- octocat code
+npm run contributors:generate
+```
+
+### Adding Multiple Contribution Types
+
+A contributor can have multiple types! Just run the command multiple times:
+
+```bash
+npm run contributors:add -- alice code
+npm run contributors:add -- alice doc
+npm run contributors:add -- alice test
+npm run contributors:generate
+```
+
+They'll appear with multiple emoji badges: 💻📖⚠️
+
+## Best Practices
+
+### When to Add Contributors
+
+Add contributors immediately when:
+- ✅ Someone reports a valuable bug/issue
+- ✅ A PR is merged
+- ✅ Someone answers questions in issues/discussions
+- ✅ Someone writes documentation or tutorials
+- ✅ Someone helps with design, testing, or reviews
+
+Don't wait for releases - recognize contributions as they happen!
+
+### Adding Yourself
+
+It's okay to add yourself if you're a maintainer making significant changes. But it's better to have someone else add you.
+
+### Updating the Release Notes
+
+When creating releases, mention notable new contributors in the release notes:
+
+```markdown
+## 🎉 New Contributors
+
+- @natesct made their first contribution in #222 - Thanks for reporting the playlist icon bug! 🐛
+```
+
+## Troubleshooting
+
+### "User not found"
+
+The all-contributors CLI will fetch user info from GitHub. If it fails:
+- Check the username spelling
+- Ensure the user exists on GitHub
+- Check your internet connection
+
+### Changes Not Showing in README
+
+Make sure you ran both commands:
+```bash
+npm run contributors:add -- username type
+npm run contributors:generate  # Don't forget this!
+```
+
+### Contributor Count Not Updated
+
+The badge count in README is automatically updated when you run `npm run contributors:generate`.
+
+## Resources
+
+- [All Contributors Specification](https://allcontributors.org/)
+- [All Contributors CLI](https://allcontributors.org/docs/en/cli/overview)
+- [Emoji Key Reference](https://allcontributors.org/docs/en/emoji-key)
+
+---
+
+## Questions?
+
+If you have questions about adding contributors, open an issue or ask in discussions!