From b8f3b3a9865d0bb0cd02a08fab4e98fa27e903cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20Schr=C3=B6ter?= <dev@felschr.com>
Date: Sun, 15 Dec 2024 17:24:44 +0100
Subject: [PATCH] feat: add Bluesky link

---
 package-lock.json                   |  8 +--
 package.json                        |  2 +-
 src/components/organisms/Layout.tsx | 78 +++++++++++++++++++----------
 3 files changed, 56 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 969fb4c..82baeb0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,7 +33,7 @@
         "prism-themes": "^1.9.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
-        "react-icons": "^4.7.1"
+        "react-icons": "^5.4.0"
       },
       "devDependencies": {
         "@types/node": "^17.0.45",
@@ -19101,9 +19101,9 @@
       }
     },
     "node_modules/react-icons": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
-      "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz",
+      "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==",
       "license": "MIT",
       "peerDependencies": {
         "react": "*"
diff --git a/package.json b/package.json
index 5898b27..b7011bf 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "prism-themes": "^1.9.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-icons": "^4.7.1"
+    "react-icons": "^5.4.0"
   },
   "devDependencies": {
     "@types/node": "^17.0.45",
diff --git a/src/components/organisms/Layout.tsx b/src/components/organisms/Layout.tsx
index fb98395..427d754 100644
--- a/src/components/organisms/Layout.tsx
+++ b/src/components/organisms/Layout.tsx
@@ -1,30 +1,44 @@
-import * as React from "react"
-import { ReactNode, useMemo } from "react"
-import { AppBar, Box, Button, Container, experimental_extendTheme as extendTheme, CssBaseline, Link, Toolbar, Typography, useTheme, Experimental_CssVarsProvider as CssVarsProvider, getInitColorSchemeScript, Tooltip } from "@mui/material"
-import CodeIcon from "@mui/icons-material/Code"
-import GitHubIcon from "@mui/icons-material/GitHub"
-import LinkedInIcon from "@mui/icons-material/LinkedIn"
-import { BsMastodon } from "react-icons/bs"
-import { FaGitlab } from "react-icons/fa"
-import { Link as GatsbyLink } from "gatsby"
-import { Footer } from "../atoms/Footer"
+import * as React from "react";
+import { ReactNode, useMemo } from "react";
+import {
+  AppBar,
+  Box,
+  Button,
+  Container,
+  experimental_extendTheme as extendTheme,
+  CssBaseline,
+  Link,
+  Toolbar,
+  Typography,
+  useTheme,
+  Experimental_CssVarsProvider as CssVarsProvider,
+  getInitColorSchemeScript,
+  Tooltip,
+} from "@mui/material";
+import CodeIcon from "@mui/icons-material/Code";
+import GitHubIcon from "@mui/icons-material/GitHub";
+import LinkedInIcon from "@mui/icons-material/LinkedIn";
+import { BsMastodon } from "react-icons/bs";
+import { FaGitlab, FaBluesky } from "react-icons/fa6";
+import { Link as GatsbyLink } from "gatsby";
+import { Footer } from "../atoms/Footer";
 
 // this adds typings for using `theme.vars`
-import type {} from "@mui/material/themeCssVarsAugmentation"
+import type {} from "@mui/material/themeCssVarsAugmentation";
 
 const pages = [
   { title: "Home", to: "/" },
   { title: "Blog", to: "/blog" },
-]
+];
 
 type LayoutProps = {
-  pageTitle: string
-  preTitle?: ReactNode
-  children: ReactNode
-}
+  pageTitle: string;
+  preTitle?: ReactNode;
+  children: ReactNode;
+};
 
 const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
-  const theme = useTheme()
+  const theme = useTheme();
 
   return (
     <main style={{ border: 0 }}>
@@ -50,7 +64,6 @@ const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
           >
             Felix Schröter
           </Typography>
-
           <Box sx={{ flexGrow: 1, display: "flex", justifyContent: "end" }}>
             {pages.map(({ title, to }) => (
               <Button
@@ -67,7 +80,9 @@ const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
         </Toolbar>
       </AppBar>
 
-      <Container style={{ marginTop: 68.5, marginBottom: 80, minHeight: "100%" }}>
+      <Container
+        style={{ marginTop: 68.5, marginBottom: 80, minHeight: "100%" }}
+      >
         {preTitle}
         <Typography variant="h1">{pageTitle}</Typography>
         {children}
@@ -89,18 +104,27 @@ const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
             <BsMastodon size="1.25em" />
           </Link>
         </Tooltip>
+        <Tooltip title="Bluesky">
+          <Link rel="me" href="https://bsky.app/profile/felschr.com">
+            <FaBluesky size="1.25em" />
+          </Link>
+        </Tooltip>
         <Tooltip title="LinkedIn">
           <Link rel="me" href="https://www.linkedin.com/in/schroeter">
             <LinkedInIcon />
           </Link>
         </Tooltip>
-        <Typography component={GatsbyLink} to="/terms-of-service" color="inherit">
+        <Typography
+          component={GatsbyLink}
+          to="/terms-of-service"
+          color="inherit"
+        >
           Terms of Service
         </Typography>
       </Footer>
     </main>
-  )
-}
+  );
+};
 
 const theme = extendTheme({
   colorSchemes: {
@@ -109,8 +133,8 @@ const theme = extendTheme({
   },
   typography: {
     h1: { fontSize: 48, paddingBottom: 20 },
-  }
-})
+  },
+});
 
 const AppLayout = (props: LayoutProps) => {
   return (
@@ -119,7 +143,7 @@ const AppLayout = (props: LayoutProps) => {
       <CssBaseline enableColorScheme />
       <Layout {...props} />
     </CssVarsProvider>
-  )
-}
+  );
+};
 
-export default AppLayout
+export default AppLayout;