feat: add Alpine.js integration

[hiranya25]

Addressed Issues:

Fixes #49

Screenshots/Recordings:

N/A - No visual changes to the button itself, but added an Alpine.js demo section to index.html.

Additional Notes:

This PR introduces the official integration guide and demo for Alpine.js. Since Alpine.js shares the same zero-dependency, no-build-step philosophy as SocialShareButton, it perfectly aligns with the project.

Key changes include:

• Added a dedicated "🏔️ Alpine.js Integration" section to index.html featuring copy-to-clipboard code snippets showing how to initialize via x-data and x-init.
• Updated the README.md Quick Start Guide with a collapsible Alpine.js details block.
• Standardized framework mentions across package.json (keywords), landing-page/src/components/Features.tsx, and index.html to include Alpine.js alongside React, Vue, Angular, etc.
• No separate wrapper file was required, as integration is natively supported through HTML directives.

Checklist

• My code follows the project's code style and conventions
• I have made corresponding changes to the documentation
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contributing Guidelines

Summary by CodeRabbit

Release Notes

• New Features

  • Added Alpine.js framework support to SocialShareButton.

• Documentation

  • Updated README with Alpine.js Quick Start Guide including CDN setup and initialization examples.
  • Added Alpine.js Integration demo section with code example showing usage patterns.
  • Updated framework support descriptions to include Alpine.js.

[coderabbitai]

Warning

Review limit reached

@hiranya25, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 44 minutes and 59 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: e3df061c-afb4-4154-a525-06c17b34c1ea

📥 Commits

Reviewing files that changed from the base of the PR and between a8f42f0 and 0b22d50.

📒 Files selected for processing (2)

• README.md
• index.html

Walkthrough

Adds Alpine.js as a documented supported integration for SocialShareButton. The README gains a new Alpine.js Quick Start section with CDN dependencies and x-data/x-init/x-destroy usage. The demo page (index.html) gets a matching Alpine.js demo section. The landing page feature card and package.json keywords are also updated.

Changes

Alpine.js Integration Documentation

Layer / File(s)	Summary
Alpine.js added to framework support mentions README.md, index.html, landing-page/src/components/Features.tsx, package.json	Alpine.js is added to the supported frameworks list in the README features bullet, the demo page feature paragraph, the landing page feature card description, and the package.json keywords array.
Alpine.js CDN setup and usage examples README.md, index.html	A new Alpine.js integration block is added to the README with a CDN setup snippet and an x-data/x-init/x-destroy example. A matching demo section with a copy-to-clipboard code block is inserted in index.html.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• AOSSIE-Org/SocialShareButton#63: Also modifies README.md to document framework integration and lifecycle initialization steps for SocialShareButton.

Suggested labels

Documentation, Typescript Lang

Suggested reviewers

• kpj2006

Poem

🐰 Hop, hop, hooray for Alpine today!
The README now shows the x-init way,
x-data, x-destroy — clean as can be,
A CDN snippet for all to see.
This bunny loves docs that are crisp and bright,
SocialShareButton shines in Alpine's light! 🏔️

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: add Alpine.js integration' clearly and concisely describes the main change—adding Alpine.js support to the project, which aligns with the primary objectives of the PR.
Linked Issues check	✅ Passed	All coding requirements from issue #49 are met: index.html includes Alpine.js integration section with step-by-step instructions and code snippets; README.md documents Alpine.js support; copy-to-clipboard functionality is present; framework mentions standardized across files; no wrapper file created as specified.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with issue #49 objectives—updating documentation, adding Alpine.js references to features, and including integration examples. No unrelated modifications were introduced.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[hiranya25]

@kpj2006 Note for Maintainers: I think the Dependency & License Review check failed because the Dependency Graph feature is not enabled on this repository's security settings (Error: Dependency review is not supported on this repository). This is a repository configuration issue, not an issue with the code in this PR.

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@index.html`:
- Around line 604-605: The `x-destroy` directive used on the div element is not
supported in Alpine.js v3 and the cleanup code for shareBtn will never execute.
Replace the `x-destroy` attribute with Alpine.js v3's official lifecycle
approach by either creating a custom init function with Alpine.data that
properly handles the destroy() method for shareBtn, or register a custom Alpine
directive that properly implements cleanup using Alpine's onCleanup or destroy
hooks. Remove the unsupported `x-destroy="shareBtn && shareBtn.destroy()"`
attribute and ensure the shareBtn cleanup logic is moved to the appropriate
Alpine.js v3 lifecycle method.
- Around line 589-591: The CDN URLs for the stylesheet and script tags
referencing social-share-button package are incorrect and should use the AOSSIE
package GitHub CDN URLs instead as documented in the project's README. Replace
the href attribute in the link tag and src attributes in both script tags (lines
589-591 in index.html) with the correct GitHub CDN URLs from the README's "Via
CDN (Recommended)" section. Additionally, update the same incorrect CDN URLs in
the README documentation (lines 499-503) to maintain consistency across the
project documentation.

In `@README.md`:
- Around line 516-525: The documentation example uses the unsupported x-destroy
directive instead of Alpine's standard lifecycle pattern. Replace the current
x-init and x-destroy directives with an x-data object that includes a shareBtn
property initialized to null, an init() method containing the SocialShareButton
instantiation logic, and a destroy() method containing the cleanup logic that
calls shareBtn.destroy(). Alpine will automatically invoke the destroy() method
when the component is removed from the DOM.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: c607fdad-5daf-4cef-8eca-3e9956970078

📥 Commits

Reviewing files that changed from the base of the PR and between 6895348 and a8f42f0.

📒 Files selected for processing (4)

• README.md
• index.html
• landing-page/src/components/Features.tsx
• package.json

[hiranya25]

@kpj2006 could you please look into this why this [Dependency Review / Dependency & License Review is failing.

[hiranya25]

@kpj2006 Please check and let me know about this issue!

[github-actions]

⚠️ This PR has merge conflicts.

Please resolve the merge conflicts before review.

Your PR will only be reviewed by a maintainer after all conflicts have been resolved.

📺 Watch this video to understand why conflicts occur and how to resolve them:
https://www.youtube.com/watch?v=Sqsz1-o7nXk