add custom creator avatar and contact url

compsoc-edinburgh · Jul 13, 2023 · a0c01d1 · a0c01d1
1 parent 2a067bc
commit a0c01d1
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 51 deletions.
diff --git a/src/Footer/Footer.tsx b/src/Footer/Footer.tsx
@@ -17,6 +17,8 @@ const StyledFooterWrapper = styled.div`
   font-size: 0.75rem;
   text-align: center;
   z-index: 1;
+
+  user-select: none;
 `
 const Footer = () => {
   return (

diff --git a/src/NextMeetup/NextMeetup.tsx b/src/NextMeetup/NextMeetup.tsx
@@ -1,5 +1,6 @@
 import styled from 'styled-components'
 import { NEXT_MEETUP, SECONDARY_COLOR } from '../constants'
+import Dot from '../components/Dot'
 
 const StyledWrapper = styled.div`
   position: relative;
@@ -72,13 +73,17 @@ const NextMeeting = () => {
       <StyledTitle>Next meet-up</StyledTitle>
       <StyledDetail>
         {formatDate(NEXT_MEETUP.date)}
-        {' • '}
+
+        <Dot />
+
         {NEXT_MEETUP.date.toLocaleTimeString('en-US', {
           hour: '2-digit',
           minute: '2-digit',
           hour12: false,
         })}
-        {' • '}
+
+        <Dot />
+
         {NEXT_MEETUP.location}
       </StyledDetail>
       <StyledButton onClick={() => window.open(eventURL, '_blank')}>

diff --git a/src/ProjectList/ProjectCreator.tsx b/src/ProjectList/ProjectCreator.tsx
@@ -0,0 +1,45 @@
+import styled from 'styled-components'
+import Avatar from '../components/Avatar'
+import { Creator } from '../constants'
+
+const CreatorWrapper = styled.p`
+  margin: 0;
+  color: grey;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  white-space: nowrap;
+`
+
+const StyledContactURL = styled.a`
+  color: inherit;
+  text-decoration: none;
+  font-weight: 400;
+
+  &:hover {
+    text-decoration: underline;
+    color: inherit;
+  }
+`
+
+const CreatorName = ({ name, contactURL }: Creator) => {
+  if (contactURL)
+    return (
+      <StyledContactURL href={contactURL} target="_blank" rel="noreferrer">
+        {name}
+      </StyledContactURL>
+    )
+
+  return <>{name}</>
+}
+
+const ProjectCreator = ({ name, avatarURL, contactURL }: Creator) => {
+  return (
+    <CreatorWrapper>
+      {avatarURL && <Avatar src={avatarURL} name={name} />}
+      <CreatorName name={name} contactURL={contactURL} />
+    </CreatorWrapper>
+  )
+}
+
+export default ProjectCreator
diff --git a/src/ProjectList/ProjectTile.tsx b/src/ProjectList/ProjectTile.tsx
@@ -3,7 +3,8 @@ import { Project, SECONDARY_COLOR } from '../constants'
 import Placeholder from '../components/Placeholder'
 import SketchLines from '../components/SketchLines'
 import { StyledLink } from '../components/StyledLink'
-import Avatar from '../components/Avatar'
+import ProjectCreator from './ProjectCreator'
+import Dot from '../components/Dot'
 
 const TopBar = styled.div`
   display: flex;
@@ -45,24 +46,19 @@ const IconHolder = styled.div`
   }
 `
 
-const ProjectTitle = styled.p`
+const ProjectTitle = styled.p<{ hasURL?: boolean }>`
   margin: 0;
   color: ${SECONDARY_COLOR};
   white-space: nowrap;
-`
 
-const Creator = styled.p`
-  margin: 0;
-  color: grey;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  white-space: nowrap;
+  &:hover {
+    text-decoration: ${({ hasURL }) => (hasURL ? 'underline' : 'none')};
+  }
 `
 
 const CreatorsWrapper = styled.div`
   display: flex;
-  gap: 5px;
+  gap: 10px;
   flex-wrap: wrap;
 `
 
@@ -74,20 +70,21 @@ const Description = styled.p`
 const ProjectTile = ({
   id,
   title,
-  creator,
+  creators,
   description,
-  link,
+  projectURL,
   media,
   icon,
-  hideAvatar = false,
 }: Project) => {
   return (
     <div key={id}>
       <TopBar>
         <ProjectId>#{id}</ProjectId>
-        <StyledLink as="a" href={link}>
-          Open
-        </StyledLink>
+        {projectURL && (
+          <StyledLink as="a" href={projectURL}>
+            Open
+          </StyledLink>
+        )}
       </TopBar>
       <ProjectVideo
         src={media}
@@ -110,21 +107,16 @@ const ProjectTile = ({
 
         <div>
           <div style={{ display: 'flex', gap: '5px' }}>
-            <a href={link}>
-              <ProjectTitle>{title}</ProjectTitle>
+            <a href={projectURL} target="_blank" rel="noreferrer">
+              <ProjectTitle hasURL={!!projectURL}>{title}</ProjectTitle>
             </a>
 
-            <span style={{ color: 'gray', userSelect: 'none' }}>{' • '}</span>
+            <Dot />
+
             <CreatorsWrapper>
-              {creator.map((name, index) => (
-                <div key={index}>
-                  <Creator>
-                    {hideAvatar ? null : <Avatar name={name} />}
-                    <span>
-                      {name}
-                      {index === creator.length - 1 ? null : ','}
-                    </span>
-                  </Creator>
+              {creators.map((creator, i) => (
+                <div key={i}>
+                  <ProjectCreator {...creator} />
                 </div>
               ))}
             </CreatorsWrapper>

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
@@ -11,16 +11,12 @@ const StyledAvatarImg = styled.img`
 
 export interface AvatarProps {
   name: string
+  src: string
 }
 
-const Avatar: FC<AvatarProps> = ({ name }) => {
-  const formattedName = name.replace(/\s+/g, '') // Remove spaces
+const Avatar: FC<AvatarProps> = ({ src, name }) => {
   return (
-    <StyledAvatarImg
-      src={`https://unavatar.io/github/${formattedName}`}
-      alt={`${name}'s avatar'`}
-      draggable={false}
-    />
+    <StyledAvatarImg src={src} alt={`${name}'s avatar'`} draggable={false} />
   )
 }
 

diff --git a/src/components/Dot.tsx b/src/components/Dot.tsx
@@ -0,0 +1,5 @@
+const Dot = () => {
+  return <span style={{ color: 'gray', userSelect: 'none' }}>{' • '}</span>
+}
+
+export default Dot
diff --git a/src/constants.ts b/src/constants.ts
@@ -18,15 +18,20 @@ export const NEXT_MEETUP: {
 
 export const DISCORD_INVITE_LINK = 'https://discord.gg/wNGukFdBgp'
 
+export interface Creator {
+  name: string
+  avatarURL?: string
+  contactURL?: string
+}
+
 export interface Project {
   id: number
   title: string
-  creator: string[]
+  creators: Creator[]
   description: string
-  link: string
+  projectURL?: string
   media: string
   icon: string | undefined
-  hideAvatar?: boolean
 }
 
 export const PROJECTS_SHOWN_ON_HOMEPAGE = 2
@@ -36,50 +41,85 @@ export const PROJECTS: Project[] = [
   {
     id: 1,
     title: 'Portfolio Website',
-    creator: ['Tomas Maillo'],
+    creators: [
+      {
+        name: 'Tomas Maillo',
+        avatarURL: 'https://unavatar.io/github/tomasmaillo',
+        contactURL: 'https://github.com/tomasmaillo',
+      },
+    ],
     description:
       'My own digital canvas showing all of my creations. Each year, like a tech tree, it branches out further, showcasing new creations that echo my evolution. Curious? Step inside the annual update carousel!',
-    link: 'https://tomasmaillo.com',
+    projectURL: 'https://tomasmaillo.com',
     media: './media/projects/tomasmaillo.mp4',
     icon: './media/projects/tomasmaillo.ico',
   },
   {
     id: 2,
     title: 'Main Library',
-    creator: ['Tomas Maillo'],
+    creators: [
+      {
+        name: 'Tomas Maillo',
+        avatarURL: 'https://unavatar.io/github/tomasmaillo',
+        contactURL: 'https://github.com/tomasmaillo',
+      },
+    ],
     description:
       "Check the busyness of UoEdinburgh's Main Library from the comfort of your screen. Brought to life with vivid colors and dynamic graphs, it's your peephole into the intellectual orchestra, of exam season",
-    link: 'https://library.tomasmaillo.com',
+    projectURL: 'https://library.tomasmaillo.com',
     media: './media/projects/library.mp4',
     icon: './media/projects/library.ico',
   },
   {
     id: 3,
     title: 'Hexbois.com',
-    creator: ['Stan Flint'],
+    creators: [
+      {
+        name: 'Stan Flint',
+        avatarURL: 'https://unavatar.io/github/StanFlint',
+        contactURL: 'https://github.com/StanFlint',
+      },
+    ],
     description:
       'Welcome to Hexbois, where hexagons meet mayhem! Build your empire, destroy your enemies, and rule the hexagonal realm. Will you be the last hex standing?',
-    link: 'https://hexbois.com',
+    projectURL: 'https://hexbois.com',
     media: './media/projects/hexbois.mp4',
     icon: './media/projects/hexbois.png',
   },
   {
     id: 4,
     title: 'vibe-check',
-    creator: ['Stan Flint', 'Tomas Maillo'],
+    creators: [
+      {
+        name: 'Stan Flint',
+        avatarURL: 'https://unavatar.io/github/StanFlint',
+        contactURL: 'https://github.com/StanFlint',
+      },
+      {
+        name: 'Tomas Maillo',
+        avatarURL: 'https://unavatar.io/github/tomasmaillo',
+        contactURL: 'https://github.com/tomasmaillo',
+      },
+    ],
     description:
       'Transforming your audience into participants. Liven up presentations by channeling audience feedback into real-time, interactive engagement. ',
-    link: 'https://vibe-check.tech',
+    projectURL: 'https://vibe-check.tech',
     media: './media/projects/vibe-check.mp4',
     icon: './media/projects/vibe-check.png',
   },
   {
     id: 5,
     title: 'Land Ho!',
-    creator: ['Kyle Winn'],
+    creators: [
+      {
+        name: 'Kyle Winn',
+        avatarURL: 'https://unavatar.io/github/fast-fingers',
+        contactURL: 'https://www.linkedin.com/in/kyle-winn-201783260/',
+      },
+    ],
     description:
       'Embark on a thrilling pirate adventure with our online pirate game. Battle other pirates, collect gold, and rule the seas.',
-    link: 'https://landho.uk',
+    projectURL: 'https://landho.uk',
     media: './media/projects/landho.mp4',
     icon: './media/projects/landho.png',
   },