diff --git a/.changeset/many-squids-promise.md b/.changeset/many-squids-promise.md new file mode 100644 index 00000000..824f5ccb --- /dev/null +++ b/.changeset/many-squids-promise.md @@ -0,0 +1,5 @@ +--- +"react-share": minor +--- + +Added `BlueskyShareButton` and `BlueskyIcon`. 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. diff --git a/README.md b/README.md index 457ab5c5..cdd862a7 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,7 @@ npm install react-share - Instapaper - Hatena - Gab + - Bluesky - email - Threads - share counts for @@ -190,6 +191,7 @@ import { WhatsappIcon, WorkplaceIcon, XIcon, + BlueskyIcon, } from "react-share"; ``` diff --git a/demo/Demo.tsx b/demo/Demo.tsx index 2a8a80a7..2b19a8b5 100644 --- a/demo/Demo.tsx +++ b/demo/Demo.tsx @@ -1,5 +1,7 @@ import React from 'react'; import { + BlueskyIcon, + BlueskyShareButton, EmailIcon, EmailShareButton, FacebookIcon, @@ -317,6 +319,18 @@ export function Demo() { + +
+ + + +
); } diff --git a/example.png b/example.png index 9766dde1..15edfbb0 100644 Binary files a/example.png and b/example.png differ diff --git a/src/BlueskyIcon.ts b/src/BlueskyIcon.ts new file mode 100644 index 00000000..e960a82d --- /dev/null +++ b/src/BlueskyIcon.ts @@ -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; diff --git a/src/BlueskyShareButton.ts b/src/BlueskyShareButton.ts new file mode 100644 index 00000000..4a33f8ae --- /dev/null +++ b/src/BlueskyShareButton.ts @@ -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; diff --git a/src/index.ts b/src/index.ts index 1bb241ea..f93963e4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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';