AOSSIE-Org / AOSSIE-Org/SocialShareButton

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

Đang mở
#49 4 bình luận 0 reaction 1 người được giao Được @hiranya25 nhận Xem trên GitHub
planned
Ngôn ngữ chính
TypeScript
Star
25
Fork
64
Merge trung bình
2 ngày 11 giờ
Pull request đã merge (30 ngày)
1

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.