feat: Add the Bluesky social

constants/links.ts

@@ -1,5 +1,6 @@
 export const HANDLES = {
   github: 'gorzelinski',
+  bluesky: 'gorzelinski.com',
   twitter: 'gorzelinski',
   dribbble: 'gorzelinski',
   facebook: 'gorzelinski',
@@ -9,6 +10,7 @@ export const HANDLES = {
 
 export const SOCIALS = {
   github: `https://github.com/${HANDLES.github}`,
+  bluesky: `https://bsky.app/profile/${HANDLES.bluesky}`,
   twitter: `https://twitter.com/${HANDLES.twitter}`,
   dribbble: `https://dribbble.com/${HANDLES.dribbble}`,
   facebook: `https://www.facebook.com/${HANDLES.facebook}`,

design-system/components/socials/__tests__/socials.test.tsx

@@ -35,7 +35,7 @@ describe('Socials', () => {
 
     const socialLinks = screen.getAllByRole('link')
 
-    expect(socialLinks.length).toEqual(4)
+    expect(socialLinks.length).toBeGreaterThanOrEqual(5)
     socialLinks.forEach((social) => {
       expect(social).toHaveAttribute(
         'href',

design-system/components/socials/socials.constants.tsx

@@ -1,6 +1,7 @@
 import { LINKS, SOCIALS } from '@/constants'
 import { Social } from './socials.types'
 import {
+  Bluesky,
   Dribbble,
   Facebook,
   Github,
@@ -16,6 +17,11 @@ export const socialLinks: Social[] = [
     url: SOCIALS.github,
     icon: <Github />
   },
+  {
+    name: 'Bluesky',
+    url: SOCIALS.bluesky,
+    icon: <Bluesky />
+  },
   {
     name: 'Twitter',
     url: SOCIALS.twitter,

design-system/components/socials/socials.helpers.tsx

@@ -10,6 +10,7 @@ export function createShareLinks(
   const encodedTitle = encodeURIComponent(title)
 
   const shareLinks: Share = {
+    bluesky: `https://bsky.app/intent/compose?text=${encodedUrl}`,
     twitter: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`,
     facebook: `https://www.facebook.com/sharer.php?u=${encodedUrl}&quote=${encodedTitle}`,
     linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,

design-system/components/socials/socials.types.tsx

@@ -5,6 +5,7 @@ export type Social = {
 }
 
 export type Share = {
+  bluesky: string
   twitter: string
   facebook: string
   linkedin: string

design-system/elements/icon/bluesky.tsx

@@ -0,0 +1,13 @@
+import { styled } from '@/styled-system/jsx'
+import { icon } from './icon.styles'
+import { IconProps } from './icon.types'
+
+const BlueskySVG = (props: IconProps) => (
+  <span {...props}>
+    <svg fill="currentColor" viewBox="0 0 512 512">
+      <path d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z" />
+    </svg>
+  </span>
+)
+
+export const Bluesky = styled(BlueskySVG, icon)

design-system/elements/icon/index.tsx

@@ -1,5 +1,6 @@
 export { AlertCircle } from './alert-circle'
 export { At } from './at'
+export { Bluesky } from './bluesky'
 export { Book } from './book'
 export { Cafe } from './cafe'
 export { CheckmarkCircle } from './checkmark-circle'

design-system/elements/index.tsx

@@ -9,6 +9,7 @@ export { H1, H2, H3, H4 } from './heading'
 export {
   AlertCircle,
   At,
+  Bluesky,
   Book,
   Cafe,
   CheckmarkCircle,

design-system/index.tsx

@@ -3,6 +3,7 @@ export {
   AlertCircle,
   At,
   Blockquote,
+  Bluesky,
   Book,
   Button,
   ButtonAnchor,

e2e/navigation.spec.ts

@@ -92,6 +92,15 @@ test.describe('Navigation tests', () => {
     await expect(github).toHaveAttribute('target', '_blank')
     await expect(github).toHaveAttribute('href', link.github)
 
+    const bluesky = page
+      .getByRole('link', {
+        name: 'Bluesky'
+      })
+      .last()
+    await expect(bluesky).toBeVisible()
+    await expect(bluesky).toHaveAttribute('target', '_blank')
+    await expect(bluesky).toHaveAttribute('href', link.bluesky)
+
     const twitter = page
       .getByRole('link', {
         name: 'Twitter'