diff --git a/README.md b/README.md index 34933c9..e7ee8d2 100644 --- a/README.md +++ b/README.md @@ -73,7 +73,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, Qwik, Vue, Angular, or plain HTML +- ⚛️ Framework support: React, Preact, SvelteKit, Qwik, Next.js, Vue, Angular, or plain HTML - 🔄 Auto-detects current URL and page title - 📱 Fully responsive and mobile-ready - 🎨 Customizable themes (dark/light) @@ -487,6 +487,50 @@ export default function Header() { +
+🟠 SvelteKit + +### 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 + + + + +
%sveltekit.body%
+ + +``` + +### Step 3: 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 769407b..1a7d7ab 100644 --- a/index.html +++ b/index.html @@ -474,6 +474,53 @@

⚛️ Preact Integration

+ +
+

🟠 SvelteKit Integration

+

Load the core library globally, then use the Svelte wrapper component in your pages.

+

Step 1: Add CSS and JS to src/app.html (loads the core library)

+ +
+ + + + <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: Install the package and use the wrapper in +page.svelte

+ +
+ + + + <!-- Install: npm install social-share-button-aossie --> + <!-- +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/package.json b/package.json index 403d4e5..eaeb86b 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "src/social-share-button.js", "src/social-share-button.css", "src/social-share-button-react.jsx", + "src/social-share-button-svelte.svelte", "src/social-share-analytics.js", "README.md", "LICENSE" diff --git a/src/social-share-button-svelte.svelte b/src/social-share-button-svelte.svelte new file mode 100644 index 0000000..117c3a1 --- /dev/null +++ b/src/social-share-button-svelte.svelte @@ -0,0 +1,99 @@ + + + + + +