Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 45 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -487,6 +487,50 @@ export default function Header() {

</details>

<details>
<summary><b>🟠 SvelteKit</b></summary>

### 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
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"
/>
</head>
<body>
<div id="svelte">%sveltekit.body%</div>
<script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"></script>
</body>
```
Comment thread
Divine-P-77777 marked this conversation as resolved.

### Step 3: Use the Svelte wrapper in any `+page.svelte`

```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"
/>
```
Comment thread
coderabbitai[bot] marked this conversation as resolved.

The wrapper handles SSR guards, cleanup on destroy, and reactive prop updates on SvelteKit route transitions automatically.

</details>

---

## Configuration
Expand Down
47 changes: 47 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,53 @@ <h2>⚛️ Preact Integration</h2>
</code>
</div>
</div>
<!-- SvelteKit Integration -->
<div class="demo-section">
<h2>🟠 SvelteKit Integration</h2>
<p>Load the core library globally, then use the Svelte wrapper component in your pages.</p>
<p><strong>Step 1:</strong> Add CSS and JS to <code>src/app.html</code> (loads the core library)</p>

<div class="code-block">
<button type="button" class="copy-btn" aria-label="Copy code">Copy</button>
<span
class="copy-status"
aria-live="polite"
style="position: absolute; left: -9999px"
></span>
<code>
&lt;link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"&gt;
&lt;script
src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"&gt;&lt;/script&gt;
</code>
Comment thread
Divine-P-77777 marked this conversation as resolved.
</div>

<p><strong>Step 2:</strong> Install the package and use the wrapper in <code>+page.svelte</code></p>

<div class="code-block">
<button type="button" class="copy-btn" aria-label="Copy code">Copy</button>
<span
class="copy-status"
aria-live="polite"
style="position: absolute; left: -9999px"
></span>
<code>
&lt;!-- Install: npm install social-share-button-aossie --&gt;
&lt;!-- +page.svelte --&gt;
&lt;script&gt;
import SocialShareButton from 'social-share-button-aossie/src/social-share-button-svelte.svelte';
&lt;/script&gt;

&lt;SocialShareButton
url="https://your-website.com"
title="Check this out!"
description="An amazing website"
theme="dark"
buttonText="Share"
/&gt;
</code>
Comment thread
Divine-P-77777 marked this conversation as resolved.
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<h2 style="color: #fff; margin-bottom: 20px">Ready to Get Started?</h2>
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
99 changes: 99 additions & 0 deletions src/social-share-button-svelte.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!-- Svelte 4 + 5 compat: disable runes so export-let props work in both versions -->
<svelte:options runes={false} />

<script>
import { onMount, onDestroy } from 'svelte';

export let url = '';
export let title = '';
export let description = '';
export let hashtags = [];
export let via = '';
export let platforms = ['whatsapp', 'facebook', 'twitter', 'linkedin', 'telegram', 'reddit', 'pinterest'];
export let theme = 'dark';
export let buttonText = 'Share';
export let customClass = '';
export let onShare = null;
export let onCopy = null;
export let buttonStyle = 'default';
export let modalPosition = 'center';
// Analytics — the library itself never collects data.
// Provide any combination to connect your own analytics tools.
export let analytics = true; // set to false to disable all event emission
export let onAnalytics = null; // (payload) => void — direct callback hook
export let analyticsPlugins = []; // array of adapter instances (see social-share-analytics.js)
export let componentId = null; // optional string identifier for this instance
export let debug = false; // log events to console during development
Comment thread
Divine-P-77777 marked this conversation as resolved.

let container;
let shareButton = null;

onMount(() => {
// SSR guard — SvelteKit pre-renders on the server where window is undefined
if (typeof window === 'undefined') return;

if (!window.SocialShareButton) {
// CDN script may not have loaded yet (network error or ad blocker)
console.warn('[SocialShareButton] window.SocialShareButton not found. Ensure the CDN script is loaded in app.html before this component mounts.');
return;
Comment thread
Divine-P-77777 marked this conversation as resolved.
}

if (container) {
shareButton = new window.SocialShareButton({
container,
url: url || window.location.href,
title: title || document.title,
description,
hashtags,
via,
platforms,
theme,
buttonText,
customClass,
onShare,
onCopy,
buttonStyle,
modalPosition,
analytics,
onAnalytics,
analyticsPlugins,
componentId,
debug,
});
}
});
Comment thread
coderabbitai[bot] marked this conversation as resolved.

onDestroy(() => {
if (shareButton) {
shareButton.destroy();
shareButton = null;
}
});

// Reactive update — re-runs whenever any prop changes (e.g. SvelteKit route transitions).
// Without this, the share URL stays stale after client-side navigation.
$: if (shareButton) {
shareButton.updateOptions({
url: url || (typeof window !== 'undefined' ? window.location.href : ''),
title: title || (typeof document !== 'undefined' ? document.title : ''),
description,
hashtags,
via,
platforms,
theme,
buttonText,
customClass,
onShare,
onCopy,
buttonStyle,
modalPosition,
analytics,
onAnalytics,
analyticsPlugins,
componentId,
debug,
});
}
</script>

<div bind:this={container}></div>
Loading