AOSSIE-Org / AOSSIE-Org/SocialShareButton
Enhancement: Add Alpine.js Integration — demo page section and usage guide
- Langage dominant
- TypeScript
- Étoiles
- 25
- Forks
- 64
- Merge moyen
- 2 j 11 h
- PR mergées (30 j)
- 1
Description
## 🎯 Direction
SocialShareButton is a **lightweight, zero-dependency, framework-agnostic** social sharing component. Alpine.js is a minimal JavaScript framework used for behavior-sprinkling in server-rendered pages (e.g., Laravel Blade, Django templates, Rails ERB) — it shares the zero-dependency, no-build-step philosophy perfectly. No separate wrapper file is needed; integration is achieved purely through Alpine's `x-init` and `x-data` directives in HTML.
📹 **See the button in action**: https://youtu.be/cLJaT-8rEvQ?si=CLipA0Db4WL0EqKM
---
## 📁 Files to Create / Modify
### ℹ️ No New Wrapper File Needed
Alpine.js integrates directly in HTML via CDN — no separate `.js` wrapper component is required. The integration snippet is self-contained.
---
### ✅ Existing File: `index.html` — Add Alpine.js Integration Section
Add a new section with:
- Section heading: `🏔️ Alpine.js Integration`
- Step 1: Include SocialShareButton CSS and JS via CDN
- Step 2: Include Alpine.js via CDN
- Step 3: Initialize via `x-data` and `x-init` directives
Example code snippet to display:
```html
```
---
## ✅ Acceptance Criteria
- [ ] No new wrapper file required — integration is HTML-only via CDN
- [ ] `index.html` updated with an Alpine.js section containing install + usage code snippets
- [ ] Copy-to-clipboard button present on new code blocks in `index.html`
- [ ] README updated to list Alpine.js as a supported integration pattern
---
> ⚠️ **Planned — Not Final**
> This issue represents a planned enhancement and is **not guaranteed to be implemented**. It may be dropped if it does not align with the repository's direction. **Before opening a pull request, please discuss with the maintainers in this issue thread.**
Guide de contribution
Ouvrir le guide de contribution
Évaluation
Cette issue n'a pas encore été évaluée.