feat(people): add bluesky, mastodon and website frontmatter

lib/ui/components/icons/Icon.js

@@ -2,6 +2,8 @@
 import { shape, string } from "prop-types";
 import React from "react";
 import styled from "styled-components";
+import { FaLink } from "react-icons/fa";
+import { SiBluesky, SiMastodon } from "react-icons/si";
 
 import { defaultThm } from "ui/themes";
 import { icomoon } from "assets/fonts";
@@ -30,11 +32,47 @@ const IconEl = styled.i`
   }
 `;
 
-const Icon = props => (
-  <IconEl {...props} className={`icon-${props.name} `}>
-    {props.text ? <span>{props.text}</span> : null}
-  </IconEl>
-);
+const Icon = props => {
+  switch (props.name) {
+    // I'm not going to generate a new IcoMoon font for these
+    // and in any case they don't have Bluesky or Mastdon readily
+    // available anyway. Generating icons with react-icons is 100%
+    // more flexible
+    case 'bluesky':
+      return (
+        <IconEl {...props} className={`icon-${props.name}`} style={{
+          top: '1px',
+          position: 'relative'
+        }}>
+          <SiBluesky />
+        </IconEl>
+      )
+    case 'mastodon':
+      return (
+        <IconEl {...props} className={`icon-${props.name}`} style={{
+          top: '1px',
+          position: 'relative'
+        }}>
+          <SiMastodon />
+        </IconEl>
+      )
+    case 'website':
+      return (
+        <IconEl {...props} className={`icon-${props.name}`} style={{
+          top: '1px',
+          position: 'relative'
+        }}>
+          <FaLink />
+        </IconEl>
+      )
+    default:
+      return (
+        <IconEl {...props} className={`icon-${props.name}`}>
+          {props.text ? <span>{props.text}</span> : null}
+        </IconEl>
+      )
+  }
+};
 
 Icon.propTypes = {
   name: string.isRequired,

lib/ui/templates/PeopleTpl.js

@@ -195,12 +195,15 @@ export const pageQuery = graphql`
           id
           html
           frontmatter {
+            bluesky
             fname
             github
             lname
+            mastodon
             quote
             score
             twitter
+            website
             uid
             avatar {
               childImageSharp {
@@ -235,12 +238,15 @@ export const pageQuery = graphql`
           id
           html
           frontmatter {
+            bluesky
             fname
             github
             lname
+            mastodon
             quote
             score
             twitter
+            website
             uid
             avatar {
               childImageSharp {
@@ -275,12 +281,15 @@ export const pageQuery = graphql`
           id
           html
           frontmatter {
+            bluesky
             fname
             github
             lname
+            mastodon
             quote
             score
             twitter
+            website
             uid
             avatar {
               childImageSharp {

lib/ui/templates/ofPeople/Person.js

@@ -69,7 +69,16 @@ const PersonLinks = styled.div`
 const Member = props => {
   const { defaultAvatar } = props;
   const { frontmatter } = props.data;
-  const { avatar, fname, github, lname, twitter } = frontmatter;
+  const {
+    avatar,
+    bluesky,
+    fname,
+    github,
+    lname,
+    mastodon,
+    twitter,
+    website
+  } = frontmatter;
   return (
     <Person onClick={props.toggleModal} role="button">
       <PersonPic hasAvatar={avatar}>
@@ -82,12 +91,42 @@ const Member = props => {
           <span>{fname}</span> <span>{lname}</span>
         </PersonName>
         <PersonLinks>
+          {website ? (
+            <Action
+              onClick={e => e.stopPropagation()}
+              href={`https://${website}/`}
+              rel="external noopener noreferrer"
+              target="_blank"
+            >
+              <Icon name="website" size="s" />
+            </Action>
+          ) : null}
+          {bluesky ? (
+            <Action
+              onClick={e => e.stopPropagation()}
+              href={`https://bsky.app/profile/${bluesky}`}
+              rel="external noopener noreferrer"
+              target="_blank"
+            >
+              <Icon name="bluesky" size="s" />
+            </Action>
+          ) : null}
+          {mastodon ? (
+            <Action
+              onClick={e => e.stopPropagation()}
+              href={`https://${mastodon}`}
+              rel="external noopener noreferrer"
+              target="_blank"
+            >
+              <Icon name="mastodon" size="s" />
+            </Action>
+          ) : null}
           {twitter ? (
             <Action
               onClick={e => e.stopPropagation()}
               href={`https://twitter.com/${twitter}`}
-              rel="external"
-              target="_blank noreferrer nofollow"
+              rel="external noopener noreferrer"
+              target="_blank"
             >
               <Icon name="twitter" size="s" />
             </Action>
@@ -96,8 +135,8 @@ const Member = props => {
             <Action
               onClick={e => e.stopPropagation()}
               href={`https://github.com/${github}`}
-              rel="external"
-              target="_blank noreferrer nofollow"
+              rel="external noopener noreferrer"
+              target="_blank"
             >
               <Icon name="github" size="s" />
             </Action>

lib/ui/templates/ofPeople/PersonModal.js

@@ -60,7 +60,17 @@ const PersonSocial = styled.div`
 const Member = props => {
   const { defaultAvatar } = props;
   const { frontmatter, html } = props.data;
-  const { avatar, fname, github, lname, quote, twitter } = frontmatter;
+  const {
+    avatar,
+    bluesky,
+    fname,
+    github,
+    lname,
+    mastodon,
+    quote,
+    twitter,
+    website
+  } = frontmatter;
   return (
     <Modal toggleModal={props.toggleModal}>
       <Person>
@@ -78,12 +88,51 @@ const Member = props => {
           </PersonBio>
           <PersonQuote>{quote}</PersonQuote>
           <PersonSocial>
-            <Action href={`https://github.com/${github}`} target="_blank">
-              <Icon name="github" /> GitHub
-            </Action>
-            <Action href={`https://twitter.com/${twitter}`} target="_blank">
-              <Icon name="twitter" /> Twitter
-            </Action>
+            {website && (
+              <Action
+                href={`https://${website}/`}
+                rel="external noopener noreferrer"
+                target="_blank"
+              >
+                <Icon name="website" /> Website
+              </Action>
+            )}
+            {bluesky && (
+              <Action
+                href={`https://bsky.app/profile/${bluesky}`}
+                rel="external noopener noreferrer"
+                target="_blank"
+              >
+                <Icon name="bluesky" /> Bluesky
+              </Action>
+            )}
+            {mastodon && (
+              <Action
+                href={`https://${mastodon}`}
+                rel="external noopener noreferrer"
+                target="_blank"
+              >
+                <Icon name="mastodon" /> Mastodon
+              </Action>
+            )}
+            {twitter && (
+              <Action
+                href={`https://twitter.com/${twitter}`}
+                rel="external noopener noreferrer"
+                target="_blank"
+              >
+                <Icon name="twitter" /> Twitter
+              </Action>
+            )}
+            {github && (
+              <Action
+                href={`https://github.com/${github}`}
+                rel="external noopener noreferrer"
+                target="_blank"
+              >
+                <Icon name="github" /> GitHub
+              </Action>
+            )}
           </PersonSocial>
         </PersonDetails>
       </Person>

package.json

@@ -34,6 +34,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
+    "react-icons": "^5.3.0",
     "react-plx": "1.3.17",
     "styled-components": "5.3.3"
   },

src/pages/people/bios/fatima-khalid.md

@@ -8,6 +8,9 @@ role:
   - member: false
   - accomplice: false
 avatar: fatima-khalid.jpg
+website: 
+bluesky: 
+mastodon: 
 twitter: sugaroverflow
 github: sugaroverflow
 quote: Thank you for literally keeping everything from falling apart - Matt Stempeck

src/pages/people/bios/ian-anderson.md

@@ -8,6 +8,9 @@ role:
   - member: true
   - accomplice: false
 avatar: ian-anderson.jpg
+website: 
+bluesky: 
+mastodon: 
 twitter: senorinfinito
 github: ijanderso
 quote: 

src/pages/people/bios/jason-miller.md

@@ -8,6 +8,9 @@ role:
   - member: false
   - accomplice: false
 avatar: 
+website: 
+bluesky: 
+mastodon: 
 twitter: millllllllllz
 github: JasonMiller
 quote: 

src/pages/people/bios/joanna-bogusz.md

@@ -8,6 +8,9 @@ role:
   - member: false
   - accomplice: true
 avatar: joanna-bogusz.jpg
+website: 
+bluesky: 
+mastodon: 
 twitter: 
 github: 
 quote: 

src/pages/people/bios/julia-smith.md

@@ -8,6 +8,9 @@ role:
   - member: false
   - accomplice: true
 avatar: julia-smith.png
+website: 
+bluesky: 
+mastodon: 
 twitter: smythological
 github: julia-smith
 quote: OPPORTUNITY, n. A favorable occasion for grasping a disappointment. – Ambrose Bierce

src/pages/people/bios/justin-reese.md

@@ -8,6 +8,9 @@ role:
   - member: false
   - accomplice: true
 avatar: justin-reese.jpg
+website: 
+bluesky: 
+mastodon: 
 twitter: reefdog
 github: reefdog
 quote: “The story was gradually taking shape. Pilon liked it this way. It ruined a story to have it all come out quickly. The good story lay in half-told things which must be filled in out of the hearer’s own experiences.” — Tortilla Flat

src/pages/people/bios/kate-darling.md

@@ -8,6 +8,9 @@ role:
   - member: false
   - accomplice: false
 avatar: kate-darling.jpg
+website: 
+bluesky: 
+mastodon: 
 twitter: grok_
 github: grok
 quote: Quick someone give me a good quote

src/pages/people/bios/kavya-sukumar.md

@@ -8,6 +8,9 @@ role:
   - member: true
   - accomplice: true
 avatar: kavya-sukumar.jpg
+website: 
+bluesky: 
+mastodon: 
 twitter: kavyasukumar
 github: kavyasukumar
 quote: She is a diversity lottery - A recruiter who accidentally cc'ed me on an internal mail about my job application

src/pages/people/bios/laurian-gridinoc.md

@@ -8,6 +8,9 @@ role:
   - member: false
   - accomplice: true
 avatar: laurian-gridinoc.jpg
+website: 
+bluesky: 
+mastodon: 
 twitter: gridinoc
 github: Laurian
 quote: Puisque nos dieux et nos espoirs ne sont plus que scientifiques, pourquoi nos amours ne le deviendraient-ils pas également? — Auguste Villiers de l’Isle-Adam, L’Ève future

src/pages/people/bios/lou-huang.md

@@ -8,13 +8,15 @@ role:
   - member: true
   - accomplice: true
 avatar: lou-huang.jpg
-twitter: saikofish
+website: louhuang.com
+bluesky: louh.bsky.social
+mastodon: jawns.club/@lou
+# twitter: saikofish
 github: louh
 quote: Unlike the rest of you losers, I’ve made at least 20% of the shots I didn’t take
 score: 1
 ---
 
-Lou is an open source software developer, user interface engineer, urban designer, recovering architect and professional internet trickster based in Brooklyn, NY. He is the founder and CEO of Streetmix, a collaborative urban design platform.
-
-He is currently serving as Bad Idea Factory’s Treasure Goblin and works on a number of frivolous projects under the guise of secretly undermining capitalism. Sometimes he will stream livecoding and video games on [Twitch](https://www.twitch.tv/saikofish).
+Lou is an open source software developer, user interface engineer, urban designer, recovering architect and professional internet trickster based in Philadelphia, PA. He is the founder of [Streetmix](https://streetmix.net/), a collaborative urban design platform.
 
+He is currently serving as Bad Idea Factory’s Undersecretary of the Interior and works on a number of frivolous projects under the guise of secretly undermining capitalism.

src/pages/people/bios/margo-dunlap.md

@@ -8,6 +8,9 @@ role:
   - member: false
   - accomplice: true
 avatar: margo-dunlap.jpg
+website: 
+bluesky: 
+mastodon: 
 twitter: MargoDunlap
 github: margoyle
 quote: 

src/pages/people/bios/mark-boas.md

@@ -8,6 +8,9 @@ role:
   - member: true
   - accomplice: true
 avatar: mark-boas.jpg
+website: 
+bluesky: 
+mastodon: 
 twitter: maboa
 github: maboa
 quote: Well, in that case, sir, I hope you will not object if I also offer the doctor my most enthusiastic contrafibularities – Sir Edmund Blackadder