Skip to content

Commit 97c7994

Browse files
louhlouh
committed
feat(people): add bluesky, mastodon and website frontmatter
1 parent 0131f04 commit 97c7994

23 files changed

+212
-21
lines changed

‎lib/ui/components/icons/Icon.js‎

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
import { shape, string } from "prop-types";
33
import React from "react";
44
import styled from "styled-components";
5+
import { FaLink } from "react-icons/fa";
6+
import { SiBluesky, SiMastodon } from "react-icons/si";
57

68
import { defaultThm } from "ui/themes";
79
import { icomoon } from "assets/fonts";
@@ -30,11 +32,47 @@ const IconEl = styled.i`
3032
}
3133
`;
3234

33-
const Icon = props => (
34-
<IconEl {...props} className={`icon-${props.name} `}>
35-
{props.text ? <span>{props.text}</span> : null}
36-
</IconEl>
37-
);
35+
const Icon = props => {
36+
switch (props.name) {
37+
// I'm not going to generate a new IcoMoon font for these
38+
// and in any case they don't have Bluesky or Mastdon readily
39+
// available anyway. Generating icons with react-icons is 100%
40+
// more flexible
41+
case 'bluesky':
42+
return (
43+
<IconEl {...props} className={`icon-${props.name}`} style={{
44+
top: '1px',
45+
position: 'relative'
46+
}}>
47+
<SiBluesky />
48+
</IconEl>
49+
)
50+
case 'mastodon':
51+
return (
52+
<IconEl {...props} className={`icon-${props.name}`} style={{
53+
top: '1px',
54+
position: 'relative'
55+
}}>
56+
<SiMastodon />
57+
</IconEl>
58+
)
59+
case 'website':
60+
return (
61+
<IconEl {...props} className={`icon-${props.name}`} style={{
62+
top: '1px',
63+
position: 'relative'
64+
}}>
65+
<FaLink />
66+
</IconEl>
67+
)
68+
default:
69+
return (
70+
<IconEl {...props} className={`icon-${props.name}`}>
71+
{props.text ? <span>{props.text}</span> : null}
72+
</IconEl>
73+
)
74+
}
75+
};
3876

3977
Icon.propTypes = {
4078
name: string.isRequired,

‎lib/ui/templates/PeopleTpl.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,12 +195,15 @@ export const pageQuery = graphql`
195195
id
196196
html
197197
frontmatter {
198+
bluesky
198199
fname
199200
github
200201
lname
202+
mastodon
201203
quote
202204
score
203205
twitter
206+
website
204207
uid
205208
avatar {
206209
childImageSharp {
@@ -235,12 +238,15 @@ export const pageQuery = graphql`
235238
id
236239
html
237240
frontmatter {
241+
bluesky
238242
fname
239243
github
240244
lname
245+
mastodon
241246
quote
242247
score
243248
twitter
249+
website
244250
uid
245251
avatar {
246252
childImageSharp {
@@ -275,12 +281,15 @@ export const pageQuery = graphql`
275281
id
276282
html
277283
frontmatter {
284+
bluesky
278285
fname
279286
github
280287
lname
288+
mastodon
281289
quote
282290
score
283291
twitter
292+
website
284293
uid
285294
avatar {
286295
childImageSharp {

‎lib/ui/templates/ofPeople/Person.js‎

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,16 @@ const PersonLinks = styled.div`
6969
const Member = props => {
7070
const { defaultAvatar } = props;
7171
const { frontmatter } = props.data;
72-
const { avatar, fname, github, lname, twitter } = frontmatter;
72+
const {
73+
avatar,
74+
bluesky,
75+
fname,
76+
github,
77+
lname,
78+
mastodon,
79+
twitter,
80+
website
81+
} = frontmatter;
7382
return (
7483
<Person onClick={props.toggleModal} role="button">
7584
<PersonPic hasAvatar={avatar}>
@@ -82,12 +91,42 @@ const Member = props => {
8291
<span>{fname}</span> <span>{lname}</span>
8392
</PersonName>
8493
<PersonLinks>
94+
{website ? (
95+
<Action
96+
onClick={e => e.stopPropagation()}
97+
href={`https://${website}/`}
98+
rel="external noopener noreferrer"
99+
target="_blank"
100+
>
101+
<Icon name="website" size="s" />
102+
</Action>
103+
) : null}
104+
{bluesky ? (
105+
<Action
106+
onClick={e => e.stopPropagation()}
107+
href={`https://bsky.app/profile/${bluesky}`}
108+
rel="external noopener noreferrer"
109+
target="_blank"
110+
>
111+
<Icon name="bluesky" size="s" />
112+
</Action>
113+
) : null}
114+
{mastodon ? (
115+
<Action
116+
onClick={e => e.stopPropagation()}
117+
href={`https://${mastodon}`}
118+
rel="external noopener noreferrer"
119+
target="_blank"
120+
>
121+
<Icon name="mastodon" size="s" />
122+
</Action>
123+
) : null}
85124
{twitter ? (
86125
<Action
87126
onClick={e => e.stopPropagation()}
88127
href={`https://twitter.com/${twitter}`}
89-
rel="external"
90-
target="_blank noreferrer nofollow"
128+
rel="external noopener noreferrer"
129+
target="_blank"
91130
>
92131
<Icon name="twitter" size="s" />
93132
</Action>
@@ -96,8 +135,8 @@ const Member = props => {
96135
<Action
97136
onClick={e => e.stopPropagation()}
98137
href={`https://github.com/${github}`}
99-
rel="external"
100-
target="_blank noreferrer nofollow"
138+
rel="external noopener noreferrer"
139+
target="_blank"
101140
>
102141
<Icon name="github" size="s" />
103142
</Action>

‎lib/ui/templates/ofPeople/PersonModal.js‎

Lines changed: 56 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,17 @@ const PersonSocial = styled.div`
6060
const Member = props => {
6161
const { defaultAvatar } = props;
6262
const { frontmatter, html } = props.data;
63-
const { avatar, fname, github, lname, quote, twitter } = frontmatter;
63+
const {
64+
avatar,
65+
bluesky,
66+
fname,
67+
github,
68+
lname,
69+
mastodon,
70+
quote,
71+
twitter,
72+
website
73+
} = frontmatter;
6474
return (
6575
<Modal toggleModal={props.toggleModal}>
6676
<Person>
@@ -78,12 +88,51 @@ const Member = props => {
7888
</PersonBio>
7989
<PersonQuote>{quote}</PersonQuote>
8090
<PersonSocial>
81-
<Action href={`https://github.com/${github}`} target="_blank">
82-
<Icon name="github" /> GitHub
83-
</Action>
84-
<Action href={`https://twitter.com/${twitter}`} target="_blank">
85-
<Icon name="twitter" /> Twitter
86-
</Action>
91+
{website && (
92+
<Action
93+
href={`https://${website}/`}
94+
rel="external noopener noreferrer"
95+
target="_blank"
96+
>
97+
<Icon name="website" /> Website
98+
</Action>
99+
)}
100+
{bluesky && (
101+
<Action
102+
href={`https://bsky.app/profile/${bluesky}`}
103+
rel="external noopener noreferrer"
104+
target="_blank"
105+
>
106+
<Icon name="bluesky" /> Bluesky
107+
</Action>
108+
)}
109+
{mastodon && (
110+
<Action
111+
href={`https://${mastodon}`}
112+
rel="external noopener noreferrer"
113+
target="_blank"
114+
>
115+
<Icon name="mastodon" /> Mastodon
116+
</Action>
117+
)}
118+
{twitter && (
119+
<Action
120+
href={`https://twitter.com/${twitter}`}
121+
rel="external noopener noreferrer"
122+
target="_blank"
123+
>
124+
<Icon name="twitter" /> Twitter
125+
</Action>
126+
)}
127+
{github && (
128+
<Action
129+
href={`https://github.com/${github}`}
130+
rel="external noopener noreferrer"
131+
target="_blank"
132+
>
133+
<Icon name="github" /> GitHub
134+
</Action>
135+
)}
87136
</PersonSocial>
88137
</PersonDetails>
89138
</Person>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"react": "17.0.2",
3535
"react-dom": "17.0.2",
3636
"react-helmet": "6.1.0",
37+
"react-icons": "^5.3.0",
3738
"react-plx": "1.3.17",
3839
"styled-components": "5.3.3"
3940
},

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ role:
88
- member: false
99
- accomplice: false
1010
avatar: fatima-khalid.jpg
11+
website:
12+
bluesky:
13+
mastodon:
1114
twitter: sugaroverflow
1215
github: sugaroverflow
1316
quote: Thank you for literally keeping everything from falling apart - Matt Stempeck

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ role:
88
- member: true
99
- accomplice: false
1010
avatar: ian-anderson.jpg
11+
website:
12+
bluesky:
13+
mastodon:
1114
twitter: senorinfinito
1215
github: ijanderso
1316
quote:

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ role:
88
- member: false
99
- accomplice: false
1010
avatar:
11+
website:
12+
bluesky:
13+
mastodon:
1114
twitter: millllllllllz
1215
github: JasonMiller
1316
quote:

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ role:
88
- member: false
99
- accomplice: true
1010
avatar: joanna-bogusz.jpg
11+
website:
12+
bluesky:
13+
mastodon:
1114
twitter:
1215
github:
1316
quote:

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ role:
88
- member: false
99
- accomplice: true
1010
avatar: julia-smith.png
11+
website:
12+
bluesky:
13+
mastodon:
1114
twitter: smythological
1215
github: julia-smith
1316
quote: OPPORTUNITY, n. A favorable occasion for grasping a disappointment. – Ambrose Bierce

0 commit comments

Comments
 (0)