AOSSIE-Org / AOSSIE-Org/SocialShareButton

Enhancement: Add Alpine.js Integration — demo page section and usage guide

Abierto
#49 4 comentarios 0 reacciones 1 asignado Reclamado por @hiranya25 Ver en GitHub
planned
Lenguaje dominante
TypeScript
Estrellas
25
Forks
64
Merge medio
2 d 11 h
PR fusionados (30 d)
1

Descripción

## 🎯 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.**

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.