├── tsconfig.json
├── docs
    ├── tsconfig.json
    ├── src
    │   ├── env.d.ts
    │   ├── assets
    │   │   ├── logo.png
    │   │   └── houston.webp
    │   └── content
    │   │   ├── docs
    │   │       ├── configuration
    │   │       │   ├── slots.mdx
    │   │       │   └── properties.mdx
    │   │       ├── start-here
    │   │       │   ├── demo.mdx
    │   │       │   ├── getting-started.mdx
    │   │       │   └── advanced-usage.mdx
    │   │       └── index.mdx
    │   │   └── config.ts
    ├── .vscode
    │   ├── extensions.json
    │   └── launch.json
    ├── .gitignore
    ├── package.json
    ├── public
    │   └── favicon.svg
    ├── astro.config.mjs
    └── README.md
├── src
    ├── types.ts
    ├── HackerNews.astro
    ├── Twitter.astro
    ├── Email.astro
    ├── Facebook.astro
    ├── LinkedIn.astro
    ├── Medium.astro
    ├── Bluesky.astro
    ├── SocialShare.astro
    ├── Reddit.astro
    ├── Whatsapp.astro
    └── Threads.astro
├── vitest.config.ts
├── .gitignore
├── index.ts
├── README.md
├── LICENSE
├── package.json
└── tests
    ├── share.test.ts
    └── button.test.ts


/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "astro/tsconfigs/strict"
3 | }


--------------------------------------------------------------------------------
/docs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "astro/tsconfigs/strict"
3 | }


--------------------------------------------------------------------------------
/docs/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference path="../.astro/types.d.ts" />
2 | /// <reference types="astro/client" />
3 | 


--------------------------------------------------------------------------------
/docs/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silent1mezzo/astro-social-share/HEAD/docs/src/assets/logo.png


--------------------------------------------------------------------------------
/docs/src/assets/houston.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silent1mezzo/astro-social-share/HEAD/docs/src/assets/houston.webp


--------------------------------------------------------------------------------
/docs/src/content/docs/configuration/slots.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Slots"
3 | description: "How to install Astro Social Share"
4 | ---


--------------------------------------------------------------------------------
/docs/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["astro-build.astro-vscode"],
3 |   "unwantedRecommendations": []
4 | }
5 | 


--------------------------------------------------------------------------------
/docs/src/content/docs/configuration/properties.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Properties"
3 | description: "How to install Astro Social Share"
4 | ---


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | export default interface Props {
2 |   url?: string;
3 |   title?: string;
4 |   description?: string;
5 |   via?: string;
6 | }


--------------------------------------------------------------------------------
/docs/src/content/config.ts:
--------------------------------------------------------------------------------
1 | import { defineCollection } from 'astro:content';
2 | import { docsSchema } from '@astrojs/starlight/schema';
3 | 
4 | export const collections = {
5 | 	docs: defineCollection({ schema: docsSchema() }),
6 | };
7 | 


--------------------------------------------------------------------------------
/docs/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "command": "./node_modules/.bin/astro dev",
 6 |       "name": "Development server",
 7 |       "request": "launch",
 8 |       "type": "node-terminal"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/docs/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist/
 3 | # generated types
 4 | .astro/
 5 | 
 6 | # dependencies
 7 | node_modules/
 8 | 
 9 | # logs
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | 
16 | # environment variables
17 | .env
18 | .env.production
19 | 
20 | # macOS-specific files
21 | .DS_Store
22 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="vitest" />
 2 | import { getViteConfig } from 'astro/config';
 3 | import svgr from "vite-plugin-svgr";
 4 | 
 5 | export default getViteConfig({
 6 | 	plugins: [svgr()],
 7 | 	test: {
 8 | 		/* for example, use global to avoid globals imports (describe, test, expect): */
 9 | 		// globals: true,
10 | 	},
11 | });


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | node_modules/
 3 | package-lock.json
 4 | 
 5 | # logs
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | pnpm-debug.log*
10 | 
11 | 
12 | # environment variables
13 | .env
14 | .env.production
15 | 
16 | # macOS-specific files
17 | .DS_Store
18 | 
19 | # ignore .astro directory
20 | .astro
21 | 
22 | # ignore Jampack cache files
23 | .jampack/
24 | 
25 | # yarn
26 | .yarn/*
27 | !.yarn/patches
28 | !.yarn/plugins
29 | !.yarn/releases
30 | !.yarn/sdks
31 | !.yarn/versions
32 | .pnp.*
33 | 
34 | 
35 | 


--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "docs",
 3 |   "type": "module",
 4 |   "version": "0.0.1",
 5 |   "scripts": {
 6 |     "dev": "astro dev",
 7 |     "start": "astro dev",
 8 |     "build": "astro check && astro build",
 9 |     "preview": "astro preview",
10 |     "astro": "astro"
11 |   },
12 |   "dependencies": {
13 |     "@astrojs/check": "^0.8.1",
14 |     "@astrojs/starlight": "^0.25.1",
15 |     "astro": "^4.10.2",
16 |     "astro-social-share": "^2.0.1",
17 |     "sharp": "^0.32.5",
18 |     "typescript": "^5.5.3"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/docs/src/content/docs/start-here/demo.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Demo"
 3 | description: "How to use Astro Social Share"
 4 | ---
 5 | 
 6 | import { SocialShare } from "astro-social-share";
 7 | 
 8 | <SocialShare
 9 |     description="Learn how to use Astro Social Share"
10 |     title="Astro Social Share docs"
11 | />
12 | 
13 | ```astro
14 | ---
15 | # Code used
16 | import { SocialShare } from "astro-social-share";
17 | ---
18 | 
19 | <SocialShare
20 |     description="Learn how to use Astro Social Share"
21 |     title="Astro Social Share docs"
22 | />
23 | ```
24 | 
25 | ## Astro Social Share in production
26 | * [https://mckerlie.com](https://mckerlie.com)


--------------------------------------------------------------------------------
/docs/public/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill-rule="evenodd" d="M81 36 64 0 47 36l-1 2-9-10a6 6 0 0 0-9 9l10 10h-2L0 64l36 17h2L28 91a6 6 0 1 0 9 9l9-10 1 2 17 36 17-36v-2l9 10a6 6 0 1 0 9-9l-9-9 2-1 36-17-36-17-2-1 9-9a6 6 0 1 0-9-9l-9 10v-2Zm-17 2-2 5c-4 8-11 15-19 19l-5 2 5 2c8 4 15 11 19 19l2 5 2-5c4-8 11-15 19-19l5-2-5-2c-8-4-15-11-19-19l-2-5Z" clip-rule="evenodd"/><path d="M118 19a6 6 0 0 0-9-9l-3 3a6 6 0 1 0 9 9l3-3Zm-96 4c-2 2-6 2-9 0l-3-3a6 6 0 1 1 9-9l3 3c3 2 3 6 0 9Zm0 82c-2-2-6-2-9 0l-3 3a6 6 0 1 0 9 9l3-3c3-2 3-6 0-9Zm96 4a6 6 0 0 1-9 9l-3-3a6 6 0 1 1 9-9l3 3Z"/><style>path{fill:#000}@media (prefers-color-scheme:dark){path{fill:#fff}}</style></svg>


--------------------------------------------------------------------------------
/src/HackerNews.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import type ButtonProps  from './types';
 3 | 
 4 | type Props = ButtonProps;
 5 | 
 6 | const { url=Astro.request.url, title } = Astro.props;
 7 | 
 8 | let URL = `http://news.ycombinator.com/submitlink?u=${url}&t=${title}`
 9 | 
10 | ---
11 | <a class="social-share-btn" target="_blank" href={URL} rel="noopener noreferrer nofollow">
12 |   <slot>
13 |     <style>
14 |       svg:hover {
15 |         fill:#F0652F;
16 |       }
17 |     </style>
18 |     <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Y Combinator</title><path d="M0 24V0h24v24H0zM6.951 5.896l4.112 7.708v5.064h1.583v-4.972l4.148-7.799h-1.749l-2.457 4.875c-.372.745-.688 1.434-.688 1.434s-.297-.708-.651-1.434L8.831 5.896h-1.88z"/></svg>
19 |   </slot>
20 | </a>


--------------------------------------------------------------------------------
/index.ts:
--------------------------------------------------------------------------------
 1 | export { default as EmailShareButton } from './src/Email.astro';
 2 | export { default as FacebookShareButton } from './src/Facebook.astro';
 3 | export { default as HackerNewsShareButton } from './src/HackerNews.astro';
 4 | export { default as LinkedInShareButton } from './src/LinkedIn.astro';
 5 | export { default as RedditShareButton } from './src/Reddit.astro';
 6 | export { default as ThreadsShareButton } from './src/Threads.astro';
 7 | export { default as TwitterShareButton } from './src/Twitter.astro';
 8 | export { default as WhatsAppShareButton } from './src/Whatsapp.astro';
 9 | export { default as MediumShareButton } from './src/Medium.astro';
10 | export { default as SocialShare } from './src/SocialShare.astro';
11 | export { default as BlueskyShareButton } from './src/Bluesky.astro';


--------------------------------------------------------------------------------
/src/Twitter.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import type ButtonProps  from './types';
 3 | 
 4 | type Props = ButtonProps;
 5 | 
 6 | const { url=Astro.request.url, description, via} = Astro.props;
 7 | 
 8 | let URL = `https://x.com/intent/tweet?url=${url}`
 9 | 
10 | if (description) URL += `&text=${description}`
11 | if (via) URL += `&via=${via}`
12 | 
13 | ---
14 | <a class="social-share-btn" target="_blank" href={URL} rel="noopener noreferrer nofollow">
15 |   <slot>
16 |     <style>
17 |       svg:hover {
18 |         fill:#000000;
19 |       }
20 |     </style>
21 |     <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>X</title><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>
22 |   </slot>
23 | </a>


--------------------------------------------------------------------------------
/src/Email.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import type ButtonProps  from './types';
 3 | 
 4 | type Props = ButtonProps;
 5 | 
 6 | const { url=Astro.request.url, title, description} = Astro.props;
 7 | let URL = `mailto:?subject=${title}&body=${description}%0A${url}`
 8 | 
 9 | ---
10 | <a class="social-share-btn" target="_blank" href={URL} rel="noopener noreferrer nofollow">
11 |   <slot>
12 |     <style>
13 |       svg:hover {
14 |         fill:#EA4335;
15 |       }
16 |     </style>
17 |     <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Email</title><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"/></svg>
18 |   </slot>
19 | </a>


--------------------------------------------------------------------------------
/src/Facebook.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import type ButtonProps  from './types';
 3 | 
 4 | type Props = ButtonProps;
 5 | 
 6 | const { url=Astro.request.url} = Astro.props;
 7 | 
 8 | let URL = `https://www.facebook.com/sharer/sharer.php?u=${url}`
 9 | 
10 | ---
11 | <a class="social-share-btn" target="_blank" href={URL} rel="noopener noreferrer nofollow">
12 |   <slot>
13 |     <style>
14 |       svg:hover {
15 |         fill:#1877F2;
16 |       }
17 |     </style>
18 |     <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
19 |   </slot>
20 | </a>


--------------------------------------------------------------------------------
/docs/src/content/docs/start-here/getting-started.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Installation"
 3 | description: "How to install Astro Social Share"
 4 | ---
 5 | 
 6 | import { Tabs, TabItem } from "@astrojs/starlight/components";
 7 | 
 8 | ## Install
 9 | 
10 | <Tabs>
11 |   <TabItem label="npm">
12 |     ```bash
13 |       # Using NPM
14 |       npm install astro-social-share
15 |     ```
16 | 
17 |   </TabItem>
18 |   <TabItem label="pnpm">
19 |     ```bash
20 |       # Using PNPM
21 |       pnpm add astro-social-share
22 |     ```
23 | 
24 |   </TabItem>
25 |   <TabItem label="yarn">
26 |     ```bash
27 |       # Using Yarn
28 |       yarn add astro-social-share
29 |     ```
30 |   </TabItem>
31 | </Tabs>
32 | 
33 | ## Usage
34 | 
35 | ```astro
36 | ---
37 | import { SocialShare } from "astro-social-share";
38 | ---
39 | 
40 | <SocialShare
41 |     description="Description of the page/post"
42 |     title="Page Title"
43 | />
44 | ```


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Astro Social Share
 2 | 
 3 | Social media share buttons for your Astro site 
 4 | 
 5 | ![npm](https://img.shields.io/npm/v/astro-social-share)
 6 | 
 7 | ## ⭐ Features
 8 | * ✅ Zero dependencies
 9 | * ✅ Fully customizable
10 | * ✅ Share buttons for:
11 |   * Facebook
12 |   * Hacker News
13 |   * LinkedIn
14 |   * Reddit
15 |   * X
16 |   * Threads
17 |   * WhatsApp
18 |   * Medium
19 |   * Threads
20 |   * Bluesky
21 | * ✅ Small size
22 | * ✅ Included icons from https://simpleicons.org/
23 | 
24 | ## 📦 Installation
25 | 
26 | ```bash
27 | # Using NPM
28 | npm install astro-social-share
29 | 
30 | # Using Yarn
31 | yarn add astro-social-share
32 | 
33 | # Using PNPM
34 | pnpm add astro-social-share
35 | ```
36 | 
37 | ## 📖 Documentation
38 | 
39 | Please visit the [documentation](https://astro-social-share.mckerlie.com) for advanced usage.
40 | 
41 | ## ⚡ Usage
42 | 
43 | ```astro
44 | ---
45 | import { SocialShare } from "astro-social-share";
46 | ---
47 | 
48 | <SocialShare
49 |     description="Description of the page/post"
50 |     title="Page Title"
51 | />
52 | ```
53 | 


--------------------------------------------------------------------------------
/src/LinkedIn.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import type ButtonProps  from './types';
 3 | 
 4 | type Props = ButtonProps;
 5 | 
 6 | const { url=Astro.request.url} = Astro.props;
 7 | 
 8 | let URL = `https://www.linkedin.com/sharing/share-offsite/?url=${url}`
 9 | 
10 | ---
11 | <a class="social-share-btn" target="_blank" href={URL} rel="noopener noreferrer nofollow">
12 |   <slot>
13 |     <style>
14 |       svg:hover {
15 |         fill:#0A66C2;
16 |       }
17 |     </style>
18 |     <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
19 |   </slot>
20 | </a>


--------------------------------------------------------------------------------
/docs/src/content/docs/index.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Astro Social Share Documentation
 3 | description: Quickly add social share buttons to your Astro site
 4 | template: splash
 5 | hero:
 6 |   tagline: Zero-config social share buttons
 7 |   image:
 8 |     file: ../../assets/logo.png
 9 |   actions:
10 |     - text: Example Guide
11 |       link: /start-here/getting-started
12 |       icon: right-arrow
13 |       variant: primary
14 |     - text: View on GitHub
15 |       link: https://github.com/silent1mezzo/astro-social-share
16 |       icon: external
17 | ---
18 | 
19 | import { Card, CardGrid } from '@astrojs/starlight/components';
20 | 
21 | ## Next steps
22 | 
23 | <CardGrid stagger>
24 | 	<Card title="Zero Config Mode" icon="pencil">
25 | 		Just install and use!
26 | 	</Card>
27 | 	<Card title="Fully customizable" icon="open-book">
28 | 		Learn more in [the Docs](https://starlight.astro.build/).
29 | 	</Card>
30 | 	<Card title="Zero dependencies" icon="setting">
31 | 		Its true! Here is the [proof](https://www.npmjs.com/package/astro-social-share?activeTab=dependencies).
32 | 	</Card>
33 | </CardGrid>
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Adam McKerlie
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/docs/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'astro/config';
 2 | import starlight from '@astrojs/starlight';
 3 | 
 4 | // https://astro.build/config
 5 | export default defineConfig({
 6 | 	integrations: [
 7 | 		starlight({
 8 | 			title: 'Astro Social Share',
 9 | 			social: {
10 | 				github: 'https://github.com/silent1mezzo/astro-social-share',
11 | 			},
12 | 			sidebar: [
13 | 				{
14 | 					label: 'Start Here',
15 | 					items: [
16 | 						// Each item here is one entry in the navigation menu.
17 | 						{ label: 'Installation', slug: 'start-here/getting-started' },
18 | 						{ label: 'Advanced Usage', slug: 'start-here/advanced-usage' },
19 | 						{ label: 'Demo', slug: 'start-here/demo' },
20 | 					],
21 | 				},
22 | 				{
23 | 					label: 'Configuration',
24 | 					items: [
25 | 						// Each item here is one entry in the navigation menu.
26 | 						{ label: 'Properties', slug: 'configuration/properties' },
27 | 						{ label: 'Slots', slug: 'configuration/slots' },
28 | 					],
29 | 				},
30 | 				{
31 | 					label: 'Reference',
32 | 					autogenerate: { directory: 'reference' },
33 | 				},
34 | 			],
35 | 		}),
36 | 	],
37 | });
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "astro-social-share",
 3 |   "description": "Social media share buttons for your Astro site",
 4 |   "version": "2.2.0",
 5 |   "type": "module",
 6 |   "homepage": "https://github.com/silent1mezzo/astro-social-share#readme",
 7 |   "exports": {
 8 |     ".": "./index.ts"
 9 |   },
10 |   "files": [
11 |     "src",
12 |     "index.ts"
13 |   ],
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "https://github.com/silent1mezzo/astro-social-share"
17 |   },
18 |   "bugs": "https://github.com/silent1mezzo/astro-social-share/issues",
19 |   "keywords": [
20 |     "astro-component",
21 |     "astro",
22 |     "withastro",
23 |     "astro-integration",
24 |     "social-media",
25 |     "social-share",
26 |     "share",
27 |     "icons"
28 |   ],
29 |   "license": "MIT",
30 |   "scripts": {
31 |     "postpublish": "PACKAGE_VERSION=$(cat package.json | grep \\\"version\\\" | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags",
32 |     "test": "vitest"
33 |   },
34 |   "devDependencies": {
35 |     "astro": "^4.11.3",
36 |     "vite-plugin-svgr": "^4.3.0",
37 |     "vitest": "^1.6.1"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/tests/share.test.ts:
--------------------------------------------------------------------------------
 1 | import { experimental_AstroContainer as AstroContainer } from 'astro/container';
 2 | import { expect, test } from 'vitest';
 3 | 
 4 | import SocialShare from "../src/SocialShare.astro";
 5 | import FacebookShareButton from "../src/Facebook.astro";
 6 | 
 7 | test('Basic Share Bar', async () => {
 8 |     const container = await AstroContainer.create();
 9 |     const result = await container.renderToString(SocialShare, {
10 |         props: {
11 |             url: 'https://example.com',
12 |             title: 'Example Subject',
13 |             description: 'Example Description'
14 |         }
15 |     });
16 |     expect(result).toContain('class="astro-social-share"');
17 | 
18 |     // Currently there's 10 buttons, splitting on this gives us 11 parts.
19 |     expect(result.split('social-share-btn').length).toBe(11);
20 | });
21 | 
22 | test('Custom Share Bar', async () => {
23 |     const container = await AstroContainer.create();
24 |     const result = await container.renderToString(SocialShare, {
25 |         props: {
26 |             buttons: [FacebookShareButton],
27 |             url: 'https://example.com',
28 |             title: 'Example Subject',
29 |             description: 'Example Description'
30 |         }
31 |     });
32 |     expect(result).toContain('class="astro-social-share"');
33 | 
34 |     // We only pass in a single button, so we should only have 2 parts.
35 |     expect(result.split('social-share-btn').length).toBe(2);
36 | });


--------------------------------------------------------------------------------
/src/Medium.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import type ButtonProps  from './types';
 3 | 
 4 | type Props = ButtonProps;
 5 | 
 6 | const { url = Astro.request.url, title } = Astro.props;
 7 | 
 8 | let URL = `https://medium.com/new-story?url=${encodeURIComponent(url)}&title=${title}`
 9 | 
10 | ---
11 | <a class="social-share-btn" target="_blank" href={URL} rel="noopener noreferrer nofollow">
12 |   <slot>
13 |     <style>
14 |       svg:hover {
15 |         fill: #00AB6C;
16 |       }
17 |     </style>
18 |     <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Medium</title><path d="M4.21 0A4.201 4.201 0 0 0 0 4.21v15.58A4.201 4.201 0 0 0 4.21 24h15.58A4.201 4.201 0 0 0 24 19.79v-1.093c-.137.013-.278.02-.422.02-2.577 0-4.027-2.146-4.09-4.832a7.592 7.592 0 0 1 .022-.708c.093-1.186.475-2.241 1.105-3.022a3.885 3.885 0 0 1 1.395-1.1c.468-.237 1.127-.367 1.664-.367h.023c.101 0 .202.004.303.01V4.211A4.201 4.201 0 0 0 19.79 0Zm.198 5.583h4.165l3.588 8.435 3.59-8.435h3.864v.146l-.019.004c-.705.16-1.063.397-1.063 1.254h-.003l.003 10.274c.06.676.424.885 1.063 1.03l.02.004v.145h-4.923v-.145l.019-.005c.639-.144.994-.353 1.054-1.03V7.267l-4.745 11.15h-.261L6.15 7.569v9.445c0 .857.358 1.094 1.063 1.253l.02.004v.147H4.405v-.147l.019-.004c.705-.16 1.065-.397 1.065-1.253V6.987c0-.857-.358-1.094-1.064-1.254l-.018-.004zm19.25 3.668c-1.086.023-1.733 1.323-1.813 3.124H24V9.298a1.378 1.378 0 0 0-.342-.047Zm-1.862 3.632c-.1 1.756.86 3.239 2.204 3.634v-3.634z"/></svg>
19 |   </slot>
20 | </a>


--------------------------------------------------------------------------------
/src/Bluesky.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import type ButtonProps  from './types';
 3 | 
 4 | type Props = ButtonProps;
 5 | 
 6 | const { url=Astro.request.url, title } = Astro.props;
 7 | let text = ''
 8 | 
 9 | if (title) text = encodeURIComponent(title)
10 | if (url) text += ` ${encodeURIComponent(url)}`
11 | 
12 | let URL = `https://bsky.app/intent/compose`
13 | 
14 | if (text) URL += `?text=${text}`
15 | 
16 | ---
17 | <a class="social-share-btn" target="_blank" href={URL} rel="noopener noreferrer nofollow">
18 |   <slot>
19 |     <style>
20 |       svg:hover {
21 |         fill:#0085ff;
22 |       }
23 |     </style>
24 |     <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Bluesky</title><path  d="M 5.2023734,1.6152412 C 7.9537499,3.9616152 10.913635,8.7184672 12,11.271162 v 6.742376 c 0,-0.14349 -0.04877,0.01868 -0.153745,0.368067 -0.567006,1.891703 -2.7817555,9.274694 -7.8461296,3.372462 C 1.3335,18.646512 2.568,15.538957 7.422,14.600747 4.6451256,15.137352 1.52325,14.25051 0.66675,10.773614 0.42,9.7734228 0,3.6126521 0,2.7805744 0,-1.3874552 3.2171249,-0.0773575 5.2023734,1.6152412 Z m 13.5952616,0 C 16.046255,3.9616152 13.086365,8.7184672 12,11.271162 v 6.742376 c 0,-0.14349 0.04877,0.01868 0.153745,0.368067 0.567006,1.891703 2.781755,9.274694 7.846125,3.372462 2.66663,-3.107555 1.43213,-6.21511 -3.42187,-7.15332 2.776876,0.536605 5.898751,-0.350237 6.755249,-3.827133 C 23.58,9.7734228 24,3.6126521 24,2.7805744 24,-1.3874552 20.783249,-0.0773575 18.797635,1.6152412 Z"></path>    </svg> 
25 |   </slot>
26 | </a>


--------------------------------------------------------------------------------
/src/SocialShare.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import BlueskyShareButton from "./Bluesky.astro";
 3 | import EmailShareButton from "./Email.astro";
 4 | import FacebookShareButton from "./Facebook.astro";
 5 | import HackerNewsShareButton from "./HackerNews.astro";
 6 | import LinkedInShareButton from "./LinkedIn.astro";
 7 | import MediumShareButton from "./Medium.astro";
 8 | import RedditShareButton from "./Reddit.astro";
 9 | import ThreadsShareButton from './Threads.astro';
10 | import TwitterShareButton from './Twitter.astro';
11 | import WhatsAppShareButton from './Whatsapp.astro';
12 | import type ButtonProps  from './types';
13 | 
14 | interface Props extends ButtonProps {
15 |   buttons?: Object[];
16 | }
17 | 
18 | const DEFAULT_COMPONENTS = [TwitterShareButton, FacebookShareButton, HackerNewsShareButton, LinkedInShareButton, RedditShareButton, EmailShareButton, WhatsAppShareButton, MediumShareButton, ThreadsShareButton, BlueskyShareButton];
19 | 
20 | const { buttons=DEFAULT_COMPONENTS, url=Astro.request.url, title, description, via} = Astro.props;
21 | 
22 | ---
23 | <slot name='astro-social-share-css'>
24 |     <style is:global>
25 |         .astro-social-share {
26 |             margin: 20px 0px;
27 |             height: 24px;
28 |             display: inline-flex;
29 |         } 
30 |         .astro-social-share a {
31 |             text-decoration: none;
32 |             margin-right: 10px;
33 |         }
34 |         .astro-social-share svg {
35 |             height: 24px;
36 |         }
37 |     </style>
38 | </slot>
39 | <div class="astro-social-share">
40 |     {buttons.map((Button) => <Button url={url} description={description} via={via} title={title} />)}
41 | </div>
42 | 


--------------------------------------------------------------------------------
/src/Reddit.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import type ButtonProps  from './types';
 3 | 
 4 | type Props = ButtonProps;
 5 | 
 6 | const { url=Astro.request.url, title } = Astro.props;
 7 | 
 8 | const encoded_url = encodeURIComponent(url);
 9 | let URL = `https://www.reddit.com/submit?url=${encoded_url}&title=${title}`
10 | 
11 | ---
12 | <a class="social-share-btn" target="_blank" href={URL} rel="noopener noreferrer nofollow">
13 |   <slot>
14 |     <style>
15 |       svg:hover {
16 |         fill:#FF4500;
17 |       }
18 |     </style>
19 |     <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Reddit</title><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/></svg>
20 |   </slot>
21 | </a>


--------------------------------------------------------------------------------
/src/Whatsapp.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import type ButtonProps from "./types";
 3 | 
 4 | type Props = ButtonProps;
 5 | const { url=Astro.request.url, description, style} = Astro.props;
 6 | 
 7 | let URL = `whatsapp://send?text=`;
 8 | 
 9 | if (description) URL += `${description} `;
10 | URL += `${url}`;
11 | ---
12 | 
13 | <a
14 |   class="social-share-btn"
15 |   target="_blank"
16 |   href={encodeURI(URL)}
17 |   rel="noopener noreferrer nofollow"
18 |   data-action="share/whatsapp/share"
19 | >
20 |   <slot>
21 |     <style>
22 |       svg:hover {
23 |         fill: #25D366;
24 |       }
25 |     </style>
26 |    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>WhatsApp</title><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
27 |   </slot>
28 | </a>
29 | 


--------------------------------------------------------------------------------
/src/Threads.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import type ButtonProps  from './types';
 3 | 
 4 | type Props = ButtonProps;
 5 | 
 6 | const { url=Astro.request.url, description, via} = Astro.props;
 7 | 
 8 | let URL = `https://threads.net/intent/post?url=${url}`
 9 | 
10 | if (description) URL += `&text=${description}`
11 | 
12 | ---
13 | <a class="social-share-btn" target="_blank" href={URL} rel="noopener noreferrer nofollow">
14 |   <slot>
15 |     <style>
16 |       svg:hover {
17 |         fill: #000000;
18 |       }
19 |     </style>
20 |     <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Threads</title><path d="m17.692 11.124a8.3334 8.3334 0 0 0-0.31475-0.14288c-0.18525-3.4134-2.0504-5.3675-5.1821-5.3875h-0.0425c-1.8732 0-3.4311 0.7995-4.39 2.2545l1.7224 1.1815c0.71625-1.0869 1.8405-1.3185 2.6685-1.3185h0.02862c1.0311 0.00662 1.8092 0.3065 2.3129 0.89112 0.3665 0.42562 0.61162 1.0139 0.733 1.7562-0.91425-0.15538-1.903-0.20325-2.96-0.1425-2.9775 0.17138-4.8918 1.908-4.7631 4.321 0.06525 1.224 0.675 2.277 1.7169 2.9649 0.88088 0.5815 2.0155 0.86588 3.1946 0.8015 1.5572-0.08537 2.7789-0.6795 3.6311-1.7659 0.64725-0.825 1.0566-1.8941 1.2374-3.2412 0.74212 0.44788 1.2921 1.0372 1.5959 1.7458 0.5165 1.2044 0.54662 3.1835-1.0682 4.797-1.4149 1.4135-3.1156 2.025-5.686 2.0439-2.8511-0.02113-5.0075-0.9355-6.4094-2.7178-1.3127-1.6689-1.9912-4.0794-2.0166-7.1646 0.025375-3.0852 0.70375-5.4958 2.0166-7.1646 1.402-1.7822 3.5582-2.6966 6.4094-2.7179 2.8719 0.02125 5.0658 0.94 6.5214 2.7309 0.71375 0.87825 1.2519 1.9825 1.6066 3.2702l2.0184-0.5385c-0.43-1.585-1.1066-2.9508-2.0274-4.0835-1.8661-2.2958-4.5954-3.4722-8.1119-3.4966h-0.01412c-3.5094 0.02425-6.2081 1.2052-8.0211 3.51-1.6132 2.0506-2.4455 4.9044-2.4734 8.4815l-1.25e-4 0.0085v0.0084c0.028 3.5771 0.86025 6.4309 2.4735 8.4818 1.813 2.3046 4.5118 3.4856 8.0211 3.5099h0.01412c3.12-0.02163 5.3192-0.8385 7.131-2.6486 2.3704-2.3681 2.299-5.3365 1.5178-7.1588-0.5605-1.3068-1.6291-2.3682-3.0904-3.0692zm-5.3871 5.0649c-1.305 0.0735-2.6608-0.51225-2.7275-1.7669-0.04962-0.93025 0.662-1.9682 2.8076-2.0919 0.24575-0.01425 0.48688-0.02112 0.72375-0.02112 0.77938 0 1.5085 0.07575 2.1714 0.22062-0.24725 3.0878-1.6975 3.5891-2.9752 3.6592z"/></svg>
21 |   </slot>
22 | </a>


--------------------------------------------------------------------------------
/docs/src/content/docs/start-here/advanced-usage.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Advanced Usage"
 3 | description: "How to install Astro Social Share"
 4 | ---
 5 | 
 6 | Simple, include all links
 7 | 
 8 | ```astro
 9 | ---
10 | import { SocialShare } from "astro-social-share";
11 | ---
12 | 
13 | <SocialShare
14 |     description="Description of the page/post"
15 |     title="Page Title"
16 | />
17 | ```
18 | 
19 | If you'd like to customize the share bar you can import the individual buttons and pass them into the `<SocialShare />` component.
20 | 
21 | ```astro
22 | ---
23 | import { 
24 |   FacebookShareButton,
25 |   HackerNewsShareButton,
26 |   LinkedInShareButton,
27 |   MediumShareButton,
28 |   RedditShareButton,
29 |   ThreadsShareButton,
30 |   TwitterShareButton,
31 |   WhatsAppShareButton,
32 |   BlueskyShareButton,
33 |   SocialShare
34 | } from "astro-social-share";
35 | 
36 | const BUTTONS = [TwitterShareButton, FacebookShareButton, BlueskyShareButton]
37 | ---
38 | 
39 | <SocialShare
40 |     buttons={BUTTONS}
41 |     description="Description of the page/post"
42 |     title="Page Title"
43 | />
44 | ```
45 | 
46 | ## Using your own icons
47 | 
48 | If you'd like to pass in your own icons you can do so through the individual components.
49 | 
50 | ```astro
51 | ---
52 | import { 
53 |   FacebookShareButton,
54 |   TwitterShareButton,
55 |   BlueskyShareButton,
56 | } from "astro-social-share";
57 | 
58 | ---
59 | 
60 | <FacebookShareButton>
61 |   <svg>...</svg>
62 | </FacebookShareButton>
63 | 
64 | <TwitterShareButton
65 |     description="Description of the page/post"
66 |     via="YourXAccount"
67 |     title="Page Title"
68 | >
69 |   <img ... />
70 | </TwitterShareButton>
71 | ```
72 | 
73 | ## Using your own CSS
74 | 
75 | If you'd like to style the share bar and icons you can pass in a global `<style>` component to a slot named `astro-social-share-css`
76 | 
77 | ```astro
78 | <SocialShare
79 |     description="Description of the page/post"
80 |     via="YourXAccount"
81 |     title="Page Title"
82 | >
83 | <slot name="astro-social-share-css">
84 |   <style is:global>
85 |     .astro-social-share {
86 |         margin: 20px 0px;
87 |         height: 24px;
88 |     }
89 |     .astro-social-share a {
90 |         text-decoration: none;
91 |         margin-right: 10px;
92 |     }
93 |     .astro-social-share svg {
94 |         height: 24px;
95 |     }
96 |   </style>
97 | </slot>
98 | ```
99 | 


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
 1 | # Starlight Starter Kit: Basics
 2 | 
 3 | [![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
 4 | 
 5 | ```
 6 | npm create astro@latest -- --template starlight
 7 | ```
 8 | 
 9 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
10 | [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
11 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs)
12 | 
13 | > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
14 | 
15 | ## 🚀 Project Structure
16 | 
17 | Inside of your Astro + Starlight project, you'll see the following folders and files:
18 | 
19 | ```
20 | .
21 | ├── public/
22 | ├── src/
23 | │   ├── assets/
24 | │   ├── content/
25 | │   │   ├── docs/
26 | │   │   └── config.ts
27 | │   └── env.d.ts
28 | ├── astro.config.mjs
29 | ├── package.json
30 | └── tsconfig.json
31 | ```
32 | 
33 | Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
34 | 
35 | Images can be added to `src/assets/` and embedded in Markdown with a relative link.
36 | 
37 | Static assets, like favicons, can be placed in the `public/` directory.
38 | 
39 | ## 🧞 Commands
40 | 
41 | All commands are run from the root of the project, from a terminal:
42 | 
43 | | Command                   | Action                                           |
44 | | :------------------------ | :----------------------------------------------- |
45 | | `npm install`             | Installs dependencies                            |
46 | | `npm run dev`             | Starts local dev server at `localhost:4321`      |
47 | | `npm run build`           | Build your production site to `./dist/`          |
48 | | `npm run preview`         | Preview your build locally, before deploying     |
49 | | `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
50 | | `npm run astro -- --help` | Get help using the Astro CLI                     |
51 | 
52 | ## 👀 Want to learn more?
53 | 
54 | Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).
55 | 


--------------------------------------------------------------------------------
/tests/button.test.ts:
--------------------------------------------------------------------------------
  1 | import { experimental_AstroContainer as AstroContainer } from 'astro/container';
  2 | import { expect, test } from 'vitest';
  3 | import BlueskyShareButton from '../src/Bluesky.astro';
  4 | import EmailShareButton from "../src/Email.astro";
  5 | import FacebookShareButton from '../src/Facebook.astro';
  6 | import HackerNewsShareButton from '../src/HackerNews.astro';
  7 | import LinkedInShareButton from '../src/LinkedIn.astro';
  8 | import ThreadsShareButton from '../src/Threads.astro';
  9 | import TwitterShareButton from '../src/Twitter.astro';
 10 | import WhatsAppShareButton from '../src/Whatsapp.astro';    
 11 | 
 12 | const BUTTONS = [
 13 |     {
 14 |         obj: EmailShareButton,
 15 |         props: {
 16 |             url: 'https://example.com',
 17 |             title: 'Example Subject',
 18 |             description: 'Example Description'
 19 |         },
 20 |         expected: 'mailto:?subject=Example Subject&#38;body=Example Description%0Ahttps://example.com'
 21 |     },
 22 |     {
 23 |         obj: FacebookShareButton,
 24 |         props: {
 25 |             url: 'https://example.com',
 26 |             title: 'Example Subject',
 27 |             description: 'Example Description'
 28 |         },
 29 |         expected: 'href="https://www.facebook.com/sharer/sharer.php?u=https://example.com'
 30 |     
 31 |     },
 32 |     {
 33 |         obj: HackerNewsShareButton,
 34 |         props: {
 35 |             url: 'https://example.com',
 36 |             title: 'Example Subject',
 37 |             description: 'Example Description'
 38 |         },
 39 |         expected: 'href="http://news.ycombinator.com/submitlink?u=https://example.com&t=Example Subject"'
 40 |     },
 41 |     {
 42 |         obj: LinkedInShareButton,
 43 |         props: {
 44 |             url: 'https://example.com',
 45 |             title: 'Example Subject',
 46 |             description: 'Example Description'
 47 |         },
 48 |         expected: 'href="https://www.linkedin.com/sharing/share-offsite/?url=https://example.com"'
 49 |     },
 50 |     {
 51 |         obj: ThreadsShareButton,
 52 |         props: {
 53 |             url: 'https://example.com',
 54 |             title: 'Example Subject',
 55 |             description: 'Example Description'
 56 |         },
 57 |         expected: 'href="https://threads.net/intent/post?url=https://example.com&text=Example Description"'
 58 |     },
 59 |     {
 60 |         obj: TwitterShareButton,
 61 |         props: {
 62 |             url: 'https://example.com',
 63 |             title: 'Example Subject',
 64 |             description: 'Example Description'
 65 |         },
 66 |         expected: 'href="https://x.com/intent/tweet?url=https://example.com&text=Example Description"'
 67 |     },
 68 |     {
 69 |         obj: WhatsAppShareButton,
 70 |         props: {
 71 |             url: 'https://example.com',
 72 |             title: 'Example Subject',
 73 |             description: 'Example Description'
 74 |         },
 75 |         expected: 'href="whatsapp://send?text=Example%20Description%20https://example.com"'
 76 |     },
 77 |     {
 78 |         obj: BlueskyShareButton,
 79 |         props: {
 80 |             url: 'https://example.com',
 81 |             title: 'Example Subject',
 82 |             description: 'Example Description'
 83 |         },
 84 |         expected: 'href="https://bsky.app/intent/compose?text=Example%20Subject https%3A%2F%2Fexample.com"'
 85 |     }
 86 | ]
 87 | 
 88 | test('Basic Buttons', async () => {
 89 |     const container = await AstroContainer.create();
 90 | 
 91 |     for (const element of BUTTONS) {
 92 |         const result = await container.renderToString(element.obj, {
 93 |             props: element.props
 94 |         });
 95 |         expect(result).toContain('social-share-btn');
 96 |         expect(result).toContain(element.expected); 
 97 |     };
 98 | });
 99 | 
100 | test('Custom SVG Icons', async () => {
101 |     const container = await AstroContainer.create();
102 | 
103 |     for (const element of BUTTONS) {
104 |         const result = await container.renderToString(element.obj, {
105 |             props: element.props,
106 |             slots: {
107 |                 default: '<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><path fill="#c8e6c9" d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"/><path fill="#4caf50" d="M34.586,14.586l-13.57,13.586l-5.602-5.586l-2.828,2.828l8.434,8.414l16.395-16.414L34.586,14.586z"/></svg>'
108 |             }
109 |         });
110 |         expect(result).toContain('M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z');
111 |     };
112 | });


--------------------------------------------------------------------------------