add Social Share Button and Icon for Bluesky

Author: cwlowder

.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.

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";
 ```
 

demo/Demo.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import {
+  BlueskyIcon,
+  BlueskyShareButton,
   EmailIcon,
   EmailShareButton,
   FacebookIcon,
@@ -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>
   );
 }

example.png

@@ -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;

src/BlueskyIcon.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; separator?: string }>(
+  'bluesky',
+  blueskyLink,
+  props => ({
+    title: props.title,
+    separator: props.separator || ' ',
+  }),
+  {
+    windowWidth: 660,
+    windowHeight: 460,
+    windowPosition: 'windowCenter',
+  },
+);
+
+export default BlueskyShareButton;

src/BlueskyShareButton.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';