From 3c07e09b98f95d04b4fd3d157a4a907f50692455 Mon Sep 17 00:00:00 2001 From: Divine-77777 Date: Sun, 22 Mar 2026 01:22:11 +0530 Subject: [PATCH 1/2] feat: add SvelteKit wrapper and documentation --- README.md | 40 +++++++++++- index.html | 45 +++++++++++++ src/social-share-button-svelte.svelte | 91 +++++++++++++++++++++++++++ 3 files changed, 175 insertions(+), 1 deletion(-) create mode 100644 src/social-share-button-svelte.svelte diff --git a/README.md b/README.md index fa52fa6..a475028 100644 --- a/README.md +++ b/README.md @@ -72,7 +72,7 @@ Lightweight social sharing component for web applications. Zero dependencies, fr - 🌐 Multiple platforms: WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email, Pinterest - 🎯 Zero dependencies - pure vanilla JavaScript -- ⚛️ Framework support: React, Preact, Next.js, Vue, Angular, or plain HTML +- ⚛️ Framework support: React, Preact, SvelteKit, Next.js, Vue, Angular, or plain HTML - 🔄 Auto-detects current URL and page title - 📱 Fully responsive and mobile-ready - 🎨 Customizable themes (dark/light) @@ -486,6 +486,44 @@ export default function Header() { +
+🟠 SvelteKit + +### Step 1: Add CDN to `src/app.html` + +```html + + + + +
%sveltekit.body%
+ + +``` + +### Step 2: Use the Svelte wrapper in any `+page.svelte` + +```svelte + + + +``` + +The wrapper handles SSR guards, cleanup on destroy, and reactive prop updates on SvelteKit route transitions automatically. + +
+ --- ## Configuration diff --git a/index.html b/index.html index 6e58f73..31928b4 100644 --- a/index.html +++ b/index.html @@ -474,6 +474,51 @@

⚛️ Preact Integration

+ +
+

🟠 SvelteKit Integration

+

Step 1: Include CSS and JS via CDN in your app.html

+ +
+ + + + <link rel="stylesheet" + href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"> + <script + src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"></script> + +
+ +

Step 2: Import and use the component in a +page.svelte file

+ +
+ + + + <!-- +page.svelte --> + <script> + import SocialShareButton from 'social-share-button-aossie/src/social-share-button-svelte.svelte'; + </script> + + <SocialShareButton + url="https://your-website.com" + title="Check this out!" + description="An amazing website" + theme="dark" + buttonText="Share" + /> + +
+

Ready to Get Started?

diff --git a/src/social-share-button-svelte.svelte b/src/social-share-button-svelte.svelte new file mode 100644 index 0000000..71282ed --- /dev/null +++ b/src/social-share-button-svelte.svelte @@ -0,0 +1,91 @@ + + + + + +
From 1272b915a1c038c9991da347b93576ca23647633 Mon Sep 17 00:00:00 2001 From: Divine-77777 Date: Sun, 22 Mar 2026 02:01:17 +0530 Subject: [PATCH 2/2] fix: address coderabbit review: svelte wrapper to package.json files, add console.warn for missing CDN, update npm workflow in docs --- README.md | 10 ++++++++-- index.html | 6 ++++-- package.json | 1 + src/social-share-button-svelte.svelte | 10 +++++++++- 4 files changed, 22 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index a475028..a241a3c 100644 --- a/README.md +++ b/README.md @@ -489,7 +489,13 @@ export default function Header() {
🟠 SvelteKit -### Step 1: Add CDN to `src/app.html` +### Step 1: Install the npm package + +```bash +npm install social-share-button-aossie +``` + +### Step 2: Add the core library CDN to `src/app.html` ```html @@ -504,7 +510,7 @@ export default function Header() { ``` -### Step 2: Use the Svelte wrapper in any `+page.svelte` +### Step 3: Use the Svelte wrapper in any `+page.svelte` ```svelte