add mastodon 🐘 link

Ebonsignori · Aug 15, 2023 · 7ff24b4 · 7ff24b4
1 parent ab85031
commit 7ff24b4
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 12 deletions.
diff --git a/about/content.json b/about/content.json
@@ -2,6 +2,7 @@
   "repoUrl": "https://github.com/Ebonsignori/my-sites",
   "socialLinks":  {
     "github": "https://github.com/Ebonsignori",
+    "mastodon": "https://mastodon.social/@ebonsignori",
     "linkedin": "https://www.linkedin.com/in/ebonsignori/",
     "instagram": "https://www.instagram.com/ebonsignori/",
     "goodreads": "https://www.goodreads.com/user/show/19530662-evan-bonsignori",

diff --git a/about/pages/index.js b/about/pages/index.js
@@ -90,7 +90,7 @@ export default function Home({ content }) {
           <PageLink href={process.env.MUSIC_PAGE_URL}>Music</PageLink>
         </PageLinks>
         <StyledSocialIcons
-          content={content}
+          socialLinks={content.socialLinks}
           postLoadingFinished={postLoadingFinished}
         />
         {/* <ScrollDownArrowWrapper

diff --git a/about/src/components/social-icons.js b/about/src/components/social-icons.js
@@ -7,25 +7,28 @@ import GoodreadsIcon from "../svgs/social/goodreads";
 import InstagramIcon from "../svgs/social/instagram";
 import LastfmIcon from "../svgs/social/lastfm";
 import LinkedinIcon from "../svgs/social/linkedin";
+import MastodonIcon from "../svgs/social/mastodon";
 
 // Due to issues with styled components and Next.js, these can't be created dynamically
-export default function SocialIcons({ content, className }) {
-  const { socialLinks } = content;
+export default function SocialIcons({ socialLinks, className }) {
   return (
     <IconsWrapper className={className}>
-      <IconLink href={socialLinks.github}>
+      <IconLink rel="me" href={socialLinks.github}>
         <GithubIcon />
       </IconLink>
-      <IconLink href={socialLinks.linkedin}>
+      <IconLink rel="me" href={socialLinks.mastodon}>
+        <MastodonIcon />
+      </IconLink>
+      <IconLink rel="me" href={socialLinks.linkedin}>
         <LinkedinIcon />
       </IconLink>
-      <IconLink href={socialLinks.instagram}>
+      <IconLink rel="me" href={socialLinks.instagram}>
         <InstagramIcon />
       </IconLink>
-      <IconLink href={socialLinks.goodreads}>
+      <IconLink rel="me" href={socialLinks.goodreads}>
         <GoodreadsIcon />
       </IconLink>
-      <IconLink href={socialLinks.lastfm}>
+      <IconLink rel="me" href={socialLinks.lastfm}>
         <LastfmIcon />
       </IconLink>
     </IconsWrapper>
@@ -69,11 +72,11 @@ const IconsWrapper = styled.div`
 
 const IconLinkBreakpoints = setEachBreakpoint({
   xs: `
-  margin: 0 .75rem;
-  margin-bottom: 3%;
+  margin: 0 .6rem;
+  margin-bottom: 2%;
   svg {
-    width: 2.35rem;
-    height: 2.35rem;
+    width: 2.25rem;
+    height: 2.25rem;
   }
   `,
   sm: `

diff --git a/about/src/svgs/social/mastodon.js b/about/src/svgs/social/mastodon.js
@@ -0,0 +1,18 @@
+/* eslint-disable max-len */
+export default function MastadonIcon({ className }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="61.076954mm"
+      height="65.47831mm"
+      viewBox="0 0 216.4144 232.00976"
+      className={className}
+    >
+      <path d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" />
+      <path
+        fill="#000"
+        d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"
+      />
+    </svg>
+  );
+}