Skip to content

Commit

Permalink
add Social Share Button and Icon for Bluesky
Browse files Browse the repository at this point in the history
  • Loading branch information
cwlowder authored and nygardk committed Feb 2, 2025
1 parent 151363d commit 4aed49a
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/many-squids-promise.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"react-share": minor
---

add Social Share Button and Icon for Bluesky. This button will take a title and url parameter, and then use [Bluesky Intent Links](https://docs.bsky.app/docs/advanced-guides/intent-links) to share that content. There is also an overrideable seperator parameter (defaults as ' ') that seperates the title and url.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ npm install react-share
- Instapaper
- Hatena
- Gab
- Bluesky
- email
- Threads
- share counts for
Expand Down Expand Up @@ -190,6 +191,7 @@ import {
WhatsappIcon,
WorkplaceIcon,
XIcon,
BlueskyIcon,
} from "react-share";
```

Expand Down
14 changes: 14 additions & 0 deletions demo/Demo.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React from 'react';
import {
BlueskyIcon,
BlueskyShareButton,
EmailIcon,
EmailShareButton,
FacebookIcon,
Expand Down Expand Up @@ -317,6 +319,18 @@ export function Demo() {
<ThreadsIcon size={32} round />
</ThreadsShareButton>
</div>

<div className="Demo__some-network">
<BlueskyShareButton
url={shareUrl}
title={title}
windowWidth={660}
windowHeight={460}
className="Demo__some-network__share-button"
>
<BlueskyIcon size={32} round />
</BlueskyShareButton>
</div>
</div>
);
}
Expand Down
9 changes: 9 additions & 0 deletions src/BlueskyIcon.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import createIcon from './hocs/createIcon';

const BlueskyIcon = createIcon({
color: '#1185FE',
networkName: 'bluesky',
path: 'M21.945 18.886C26.015 21.941 30.393 28.137 32 31.461 33.607 28.137 37.985 21.941 42.055 18.886 44.992 16.681 49.75 14.975 49.75 20.403 49.75 21.487 49.128 29.51 48.764 30.813 47.497 35.341 42.879 36.496 38.772 35.797 45.951 37.019 47.778 41.067 43.833 45.114 36.342 52.801 33.066 43.186 32.227 40.722 32.073 40.27 32.001 40.059 32 40.238 31.999 40.059 31.927 40.27 31.773 40.722 30.934 43.186 27.658 52.801 20.167 45.114 16.222 41.067 18.049 37.019 25.228 35.797 21.121 36.496 16.503 35.341 15.236 30.813 14.872 29.51 14.25 21.487 14.25 20.403 14.25 14.975 19.008 16.681 21.945 18.886Z',
});

export default BlueskyIcon;
30 changes: 30 additions & 0 deletions src/BlueskyShareButton.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import assert from './utils/assert';
import objectToGetParams from './utils/objectToGetParams';
import createShareButton from './hocs/createShareButton';

function blueskyLink(url: string, { title, separator }: { title?: string; separator?: string }) {
assert(url, 'bluesky.url');

return (
'https://bsky.app/intent/compose' +
objectToGetParams({
text: title ? title + separator + url : url,
})
);
}

const BlueskyShareButton = createShareButton<{ title?: string }>(
'bluesky',
blueskyLink,
props => ({
title: props.title,
separator: props.separator || ' ',
}),
{
windowWidth: 660,
windowHeight: 460,
windowPosition: 'windowCenter',
},
);

export default BlueskyShareButton;
2 changes: 2 additions & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
export { default as BlueskyIcon } from './BlueskyIcon';
export { default as BlueskyShareButton } from './BlueskyShareButton';
export { default as EmailIcon } from './EmailIcon';
export { default as EmailShareButton } from './EmailShareButton';
export { default as FacebookIcon } from './FacebookIcon';
Expand Down

0 comments on commit 4aed49a

Please sign in to comment.