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

[coderabbitai]

🎯 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:

<!-- Include dependencies -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.css">
<script src="https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<!-- Usage -->
<div
  x-data="{ shareBtn: null }"
  x-init="shareBtn = new SocialShareButton({
    container: $el,
    url: 'https://your-website.com',
    title: 'Check this out!',
    description: 'An amazing website',
    theme: 'dark',
    buttonText: 'Share'
  })"
  x-destroy="shareBtn && shareBtn.destroy()"
></div>

---

✅ 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.

[ryoari]

@kpj2006 I would like to work on this if it's available.

[lakshyasarve]

Hi @kpj2006, I would like to work on this issue

[ryoari]

Hi @lakshyasarve, I am currently working on this.