Add bluesky share button to blog posts

Author: pimterry

src/app/blog/[slug]/post-share/index.tsx

@@ -3,7 +3,7 @@ import dynamic from 'next/dynamic';
 import { SocialShareContainer, SocialButton } from './post-share.styles';
 import type { SocialShareProps } from './post-share.types';
 
-import { TwitterX, RedditLogo, DevToLogo, YCombinator, ProductHuntLogo } from '@/components/elements/icon';
+import { TwitterX, RedditLogo, DevToLogo, YCombinator, ProductHuntLogo, Butterfly } from '@/components/elements/icon';
 import { SquareIcon } from '@/components/elements/square-icon';
 import Stack from '@/components/elements/stack';
 import { Text } from '@/components/elements/text';
@@ -18,6 +18,15 @@ export const SocialPostShare = ({ postTitle, postUrl, socialLinks }: SocialShare
     <SocialShareContainer>
       <Text fontSize="m">Share this post:</Text>
       <Stack $direction="row" $gap="8px" $gapxl="8px">
+        <SocialButton
+          href={socialLinks?.blueskyUrl || `https://bsky.app/intent/compose?text=${postTitle}%3Cbr%3E%3Cbr%3E${fullPostUrl}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={`Share ${postTitle} on BlueSky`}
+        >
+          <SquareIcon $size="mini" icon={Butterfly} />
+        </SocialButton>
+
         <SocialButton
           href={socialLinks?.twitterUrl || `https://twitter.com/intent/tweet?text=${postTitle}&url=${fullPostUrl}`}
           target="_blank"

src/components/elements/icon/index.ts

@@ -21,6 +21,7 @@ import {
   Heart,
   Article,
   RedditLogo,
+  Butterfly,
   X,
   Gear,
   NetworkSlash,
@@ -100,6 +101,7 @@ export {
   Heart,
   Article,
   RedditLogo,
+  Butterfly,
   DockerLogo,
   ElectronLogo,
   JavaLogo,

src/types/global.d.ts

@@ -41,6 +41,7 @@ interface Post {
   };
   socialLinks?: {
     twitterUrl?: string;
+    blueskyUrl?: string;
     redditUrl?: string;
     hackerNewsUrl?: string;
     devToUrl?: string;