AOSSIE-Org / AOSSIE-Org/SocialShareButton

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

Open
#49 4 comments 0 reactions 1 assignee Claimed by @hiranya25 View on GitHub
planned
Dominant language
TypeScript
Stars
25
Forks
64
Avg merge
2d 11h
Merged PRs (30d)
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.**

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.