AOSSIE-Org / AOSSIE-Org/SocialShareButton

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

オープン
#49 コメント 4 件 リアクション 0 件 担当者 1 名 @hiranya25 が担当を希望しています GitHub で見る
planned
主要言語
TypeScript
スター
25
フォーク
64
平均マージ
2日 11時間
マージ済み PR(30日)
1

説明

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

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。