🦋 bluesky

src/components/Connect/Connect.test.tsx

@@ -13,7 +13,16 @@ test("shows connect", () => {
         screen.getByText("Let's connect on these platforms."),
     ).toBeInTheDocument()
 
-    const labels = ["twitch", "github", "youtube", "x", "instagram", "discord"]
+    const labels = [
+        "bluesky",
+        "discord",
+        "feed",
+        "github",
+        "instagram",
+        "twitch",
+        "x",
+        "youtube",
+    ]
 
     labels.forEach(label => {
         expect(screen.getByLabelText(label)).toBeInTheDocument()

src/components/Connect/Connect.tsx

@@ -22,13 +22,15 @@ const Connect: FC = () => {
                 <p className="m-0">Let&apos;s connect on these platforms.</p>
             </div>
 
-            <div className="grid grid-flow-col content-center justify-center gap-x-5">
+            <div className="flex flex-wrap content-center justify-center gap-5">
                 <SocialLink platform="twitch" />
                 <SocialLink platform="github" />
+                <SocialLink platform="bluesky" />
                 <SocialLink platform="youtube" />
                 <SocialLink platform="x" />
                 <SocialLink platform="instagram" />
                 <SocialLink platform="discord" />
+                <SocialLink platform="feed" />
             </div>
         </div>
     )

src/components/Footer/Footer.test.tsx

@@ -4,6 +4,7 @@ import {expect, test} from "vitest"
 import Footer from "~/components/Footer"
 
 const labels = [
+    "bluesky",
     "discord",
     "feed",
     "github",

src/components/Footer/Footer.tsx

@@ -4,9 +4,10 @@ import SocialLink from "~/components/SocialLink"
 
 const Footer: FC = () => {
     return (
-        <footer className="grid grid-flow-col content-center justify-center gap-5 pb-20 pt-28">
+        <footer className="flex flex-wrap content-center justify-center gap-5 px-5 pb-20 pt-28">
             <SocialLink platform="twitch" />
             <SocialLink platform="github" />
+            <SocialLink platform="bluesky" />
             <SocialLink platform="youtube" />
             <SocialLink platform="x" />
             <SocialLink platform="instagram" />

src/components/Icon/Icon.test.tsx

@@ -5,6 +5,7 @@ import Icon from "~/components/Icon"
 
 const icons = [
     "close",
+    "bluesky",
     "discord",
     "feed",
     "gatsby",

src/components/Icon/Icon.tsx

@@ -1,6 +1,7 @@
 import type {FC, HTMLAttributes} from "react"
 
 import {
+    BlueskyIcon,
     CloseIcon,
     DiscordIcon,
     FeedIcon,
@@ -31,6 +32,8 @@ type IconProps = {
 
 const Icon: FC<IconProps> = ({name, ...props}) => {
     switch (name) {
+        case "bluesky":
+            return <BlueskyIcon {...props} />
         case "close":
             return <CloseIcon {...props} />
         case "discord":

src/components/Icons/BlueskyIcon.tsx

@@ -0,0 +1,11 @@
+import type {FC} from "react"
+
+const BlueskyIcon: FC = props => {
+    return (
+        <svg aria-label="bluesky" fill="none" viewBox="0 0 64 57" {...props}>
+            <path d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z" />
+        </svg>
+    )
+}
+
+export default BlueskyIcon

src/components/Icons/index.ts

@@ -1,3 +1,4 @@
+export {default as BlueskyIcon} from "~/components/Icons/BlueskyIcon"
 export {default as CloseIcon} from "~/components/Icons/CloseIcon"
 export {default as DiscordIcon} from "~/components/Icons/DiscordIcon"
 export {default as FeedIcon} from "~/components/Icons/FeedIcon"

src/components/SocialLink/SocialLink.test.tsx

@@ -3,6 +3,11 @@ import {expect, test} from "vitest"
 
 import SocialLink from "~/components/SocialLink"
 
+test("bluesky", () => {
+    render(<SocialLink platform="bluesky" />)
+    expect(screen.getByLabelText("bluesky")).toBeInTheDocument()
+})
+
 test("discord", () => {
     render(<SocialLink platform="discord" />)
     expect(screen.getByLabelText("discord")).toBeInTheDocument()

src/components/SocialLink/SocialLink.tsx

@@ -5,6 +5,7 @@ import Icon from "~/components/Icon"
 
 type SocialLinkProps = {
     platform:
+        | "bluesky"
         | "discord"
         | "github"
         | "instagram"
@@ -20,6 +21,11 @@ const SocialLink: FC<SocialLinkProps> = ({platform}) => {
     let name
 
     switch (platform) {
+        case "bluesky":
+            url = "/bluesky"
+            name = "bluesky"
+            break
+
         case "discord":
             url = "/discord"
             name = "discord"

src/routes/bluesky.ts

@@ -0,0 +1,5 @@
+import {redirect} from "@remix-run/node"
+
+export const loader = () => {
+    throw redirect("https://bsky.app/profile/bradgarropy.com")
+}