Add a Bluesky logo to the home page

I removed Twitter in
6f15a26.
I haven't used it much but I intend to use Bluesky instead.

Author: hockeybuggy

components/icon/index.tsx

@@ -9,6 +9,7 @@ import folderIcon from "./svgs/folder";
 import linkIcon from "./svgs/link";
 import creativeCommonsIcon from "./svgs/creativeCommons";
 import githubIcon from "./svgs/github";
+import blueskyIcon from "./svgs/bluesky";
 
 /* eslint-disable no-unused-vars */
 enum IconNames {
@@ -21,6 +22,7 @@ enum IconNames {
   Tag,
 
   GitHub,
+  Bluesky,
   CreativeCommons,
 }
 
@@ -53,6 +55,8 @@ function iconSvgByName(name: IconNames): React.ReactElement {
       return creativeCommonsIcon();
     case IconNames.GitHub:
       return githubIcon();
+    case IconNames.Bluesky:
+      return blueskyIcon();
   }
   exhasutiveCheck(name);
 }

components/icon/svgs/bluesky.tsx

@@ -0,0 +1,14 @@
+// Official Bluesky logo from Wikimedia Commons
+// https://upload.wikimedia.org/wikipedia/commons/7/7a/Bluesky_Logo.svg
+export default function BlueskyIcon() {
+  return (
+    <svg width="64" height="64" viewBox="0 0 16.196743 14.260887">
+      <g transform="translate(-0.48130957,-1.0996394)">
+        <path
+          d="M 3.9921673,2.0595724 C 5.849085,3.453629 7.8464109,6.2801954 8.5797285,7.7970955 9.3131012,6.280307 11.310315,3.453601 13.167288,2.0595724 c 1.339854,-1.0058955 3.510765,-1.78420027 3.510765,0.6924068 0,0.4946119 -0.283582,4.1549986 -0.449906,4.7492481 -0.578135,2.0660219 -2.684846,2.5929717 -4.558796,2.2740374 3.275631,0.5574993 4.108922,2.4041413 2.309333,4.2507833 C 10.560913,17.533182 9.0663535,13.146095 8.6832195,12.021964 8.6130152,11.815883 8.5801638,11.719477 8.5796807,11.801455 8.5791886,11.719472 8.5463466,11.815886 8.4761425,12.021964 8.0931756,13.146095 6.5986437,17.533292 3.1806762,14.026048 1.3810612,12.179406 2.2143228,10.332652 5.4900112,9.7752647 3.6160031,10.094199 1.509266,9.5672466 0.93121324,7.5012273 0.76488501,6.9069222 0.48130957,3.2465354 0.48130957,2.7519792 c 0,-2.47660707 2.17096513,-1.6983023 3.51076313,-0.6924068 z"
+          strokeWidth="0.0279251"
+        />
+      </g>
+    </svg>
+  );
+}

e2e_tests/landingPage.test.ts

@@ -20,6 +20,36 @@ describe("/ (Landing Page)", () => {
     expect(await page.title()).toEqual(LANDING_PAGE.expected.title);
   });
 
+  it("should have GitHub social link with proper attributes", async () => {
+    await loadPage(page, LANDING_PAGE.url);
+
+    const githubLink = await page.$('a[aria-label="GitHub"]');
+    expect(githubLink).not.toBeNull();
+
+    const href = await githubLink?.evaluate((el) => el.getAttribute("href"));
+    expect(href).toBe("https://github.com/hockeybuggy");
+  });
+
+  it("should have Bluesky social link with proper attributes", async () => {
+    await loadPage(page, LANDING_PAGE.url);
+
+    const blueskyLink = await page.$('a[aria-label="Bluesky"]');
+    expect(blueskyLink).not.toBeNull();
+
+    const href = await blueskyLink?.evaluate((el) => el.getAttribute("href"));
+    expect(href).toBe("https://bsky.app/profile/hockeybuggy.bsky.social");
+  });
+
+  it("should have Email social link with proper attributes", async () => {
+    await loadPage(page, LANDING_PAGE.url);
+
+    const emailLink = await page.$('a[aria-label="Email"]');
+    expect(emailLink).not.toBeNull();
+
+    const href = await emailLink?.evaluate((el) => el.getAttribute("href"));
+    expect(href).toBe("mailto:[email protected]");
+  });
+
   describe("screenshots", () => {
     test("iPhone light", async () => {
       await loadPage(page, LANDING_PAGE.url, "iPhone 6");

pages/index.tsx

@@ -14,6 +14,11 @@ const social = [
     link: "https://github.com/hockeybuggy",
     iconName: Icon.Names.GitHub,
   },
+  {
+    label: "Bluesky",
+    link: "https://bsky.app/profile/hockeybuggy.bsky.social",
+    iconName: Icon.Names.Bluesky,
+  },
   {
     label: "Email",
     link: "mailto:[email protected]",
@@ -68,7 +73,7 @@ const IndexPage = (): React.ReactElement => {
                     name={socialSite.iconName}
                     size={Icon.Sizes.Large}
                     aria-hidden="true"
-                    label=""
+                    label={"Icon for " + socialSite.label}
                   />
                 </a>
               </li>