Using @styled-icons to make it less verbose

jsconfjp · Nov 16, 2023 · 6dc93cd · 6dc93cd
1 parent 440a618
commit 6dc93cd
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 35 deletions.
diff --git a/2023/package-lock.json b/2023/package-lock.json
diff --git a/2023/package.json b/2023/package.json
@@ -25,6 +25,7 @@
     "*.{yml,yaml,ts,json}": "prettier"
   },
   "dependencies": {
+    "@styled-icons/remix-line": "^10.46.0",
     "date-fns": "^2.30.0",
     "gatsby": "^5.12.9",
     "gatsby-image": "3.11.0",

diff --git a/2023/src/templates/speaker.tsx b/2023/src/templates/speaker.tsx
@@ -14,6 +14,11 @@ import { enOrJa } from "../util/languages"
 import { EventTime } from "../components/EventTime"
 import { Room } from "../components/RoomLegend"
 import { Rooms } from "../util/misc"
+import { ExternalLink } from '@styled-icons/remix-line/ExternalLink'
+import { Mastodon } from '@styled-icons/remix-line/Mastodon'
+import { Github } from '@styled-icons/remix-line/Github'
+import { Twitter } from '@styled-icons/remix-line/Twitter'
+import { Link } from "gatsby"
 
 type Props = {
   pageContext: {
@@ -86,20 +91,44 @@ const TalkTitle = styled.h2`
 `
 
 export interface SocialLinksProps {
-  links: Array<{account: string, name: string, site: string}>
+  speaker: SpeakerType
 }
 
+const SocialLinkContainer = styled.ul`
+  &, & > li {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+  & {
+    display: flex;
+  }
+  & > li > a {
+    padding: 0.4em;
+    color: ${({ theme }) => theme.colors.disabledText};
+    &:hover {
+      color: ${({ theme }) => theme.colors.primary};
+    }
+  }
+  svg {
+    width: 1.6em;
+  }
+`
+
 export function SocialLinks(props: SocialLinksProps) {
-  const { links } = props
+  const { speaker } = props
+  const socialLinks = [
+    speaker.homepage ? <Link to={speaker.homepage}><ExternalLink /></Link> : null,
+    speaker.github ? <Link to={`https://github.com/${speaker.github}`}><Github /></Link> : null,
+    speaker.mastodon ? <Link to={speaker.homepage}><Mastodon /></Link> : null,
+    speaker.twitter ? <Link to={`https://twitter.com/${speaker.homepage}`}><Twitter /></Link> : null
+  ].filter(Boolean).map(entry => <li>{entry}</li>);
+
+  if (!socialLinks.length) {
+    return <></>
+  }
 
-  return <>
-    <h3>Social Links:</h3>
-    <ul>
-      {links.map(data => (
-        <li>{data.name}: <a href={`${data.site}${data.account}`}>{data.account}</a></li>
-      ))}
-    </ul>
-  </>
+  return <SocialLinkContainer>{socialLinks}</SocialLinkContainer>
 }
 
 export default function Speaker(props: Props) {
@@ -130,24 +159,16 @@ export default function Speaker(props: Props) {
       <ResponsiveBox>
         <Breadcrumb path={[{ label: t("speakers"), to: "/speakers" }, title]} />
         {speakers.map((speaker, i) => {
-          const socialLinks = [
-            {account: speaker.github, name: 'Github', site: 'https://github.com/'},
-            {account: speaker.mastodon, name: 'Mastodon', site: ''},
-            {account: speaker.twitter, name: 'X (twitter)', site: 'https://twitter.com/'},
-            {account: speaker.homepage, name: 'Homepage', site: ''}
-          ].filter(item => item.account);
-
-          const biography = enOrJa(i18n)(speaker.biography, speaker.biographyJa)
           return <SpeakerBox key={speaker.uuid}>
             <Avatar image={avatars[i]} alt={speaker.name} loading="eager"/>
             <SpeakerSide>
               <h1>
                 <SpeakerName speaker={speaker}/>
               </h1>
               <Markdown>
-                {biography}
+                {enOrJa(i18n)(speaker.biography, speaker.biographyJa)}
               </Markdown>
-              <SocialLinks links={socialLinks}></SocialLinks>
+              <SocialLinks speaker={speaker} />
             </SpeakerSide>
           </SpeakerBox>
         })}