Issue 0/contributors (#242)

* Add contributors spotlight widget and page

package.json

@@ -68,7 +68,8 @@
     "rxjs": "^7.8.1",
     "sqlite3": "^5.1.7",
     "uuid": "^10.0.0",
-    "ws": "^8.18.0"
+    "ws": "^8.18.0",
+    "zustand": "^5.0.0-rc.2"
   },
   "optionalDependencies": {
     "@codeclimbers/node-linux": "^0.1.14",

packages/app/package.json

@@ -32,7 +32,8 @@
     "posthog-js": "^1.165.1",
     "react": "^18.3.1",
     "react-router-dom": "^6.24.0",
-    "uuid": "^10.0.0"
+    "uuid": "^10.0.0",
+    "zustand": "^5.0.0-rc.2"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

packages/app/src/components/ContributorsPage.tsx

@@ -0,0 +1,35 @@
+import { Box, Typography } from '@mui/material'
+import PlainHeader from './common/PlainHeader'
+import contributorsService from '../services/contributors.service'
+import { SimpleInfoCard, SimpleInfoCardProps } from './common/SimpleInfoCard'
+import Grid2 from '@mui/material/Unstable_Grid2'
+
+export const ContributorsPage = () => {
+  const contributors = contributorsService.getContributors()
+  const contributorCardData: SimpleInfoCardProps[] = contributors.map(
+    (contributor) => ({
+      title: contributor.name,
+      subTitle: contributor.subTitle,
+      subjectUrl: contributor.profileUrl,
+      callout: '',
+      href: contributor.githubUrl,
+    }),
+  )
+  return (
+    <Box sx={{ padding: '2rem' }}>
+      <PlainHeader title="Contributors" />
+      <Box sx={{ mt: 4 }}>
+        <Typography sx={{ mb: 2 }}>
+          Thank you to all our amazing contributors!
+        </Typography>
+        <Grid2 container spacing={2}>
+          {contributorCardData.map((contributor) => (
+            <Grid2 key={contributor.title} xs={12} sm={6} md={4} lg={3}>
+              <SimpleInfoCard {...contributor} />
+            </Grid2>
+          ))}
+        </Grid2>
+      </Box>
+    </Box>
+  )
+}

packages/app/src/components/Extensions/AuthorInfo.tsx

@@ -1,4 +1,4 @@
-import { Box, ToggleButton, Typography } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import { GitHubProfileImage } from '../common/GithubProfileImage'
 
 interface Props {

packages/app/src/components/Extensions/ExtensionsPage.tsx

@@ -1,15 +1,9 @@
-import { Box, Typography } from '@mui/material'
-import CodeClimbersButton from '../common/CodeClimbersButton'
-import { Logo } from '../common/Logo/Logo'
-import { useNavigate } from 'react-router-dom'
+import { Box } from '@mui/material'
 import extensionsService from '../../services/extensions.service'
 import { ExtensionDetail } from './ExtensionDetail'
+import PlainHeader from '../common/PlainHeader'
 
 export const ExtensionsPage = () => {
-  const navigate = useNavigate()
-  const handleClick = () => {
-    navigate('/')
-  }
   const extensions = extensionsService.extensions
   return (
     <Box sx={{ padding: '2rem' }}>
@@ -21,14 +15,7 @@ export const ExtensionsPage = () => {
           alignItems: 'center',
         }}
       >
-        <CodeClimbersButton
-          variant="text"
-          onClick={handleClick}
-          eventName="home_header_logo_click"
-        >
-          <Logo />
-        </CodeClimbersButton>
-        <Typography variant="h4">Extensions</Typography>
+        <PlainHeader title="Extensions" />
       </Box>
       <Box sx={{ display: 'flex', flexDirection: 'row', gap: 4, marginTop: 4 }}>
         {extensions.map((extension) => (

packages/app/src/components/Home/Extensions/ExtensionsWidget.tsx

@@ -4,8 +4,12 @@ import Grid2 from '@mui/material/Unstable_Grid2/Grid2'
 import { DiscordIcon } from '../../common/Icons/DiscordIcon'
 import CodeClimbersIconButton from '../../common/CodeClimbersIconButton'
 import extensionsService from '../../../services/extensions.service'
-import { ExtensionCard, ExtensionCardProps } from './ExtensionCard'
 import CodeClimbersButton from '../../common/CodeClimbersButton'
+import contributorsService from '../../../services/contributors.service'
+import {
+  SimpleInfoCard,
+  SimpleInfoCardProps,
+} from '../../common/SimpleInfoCard'
 
 const RESOURCES = [
   {
@@ -20,18 +24,20 @@ const RESOURCES = [
   },
 ]
 
+const spotlightContributor = contributorsService.getSpotlight()
+
 export const ExtensionsWidget = () => {
   const newestExtension = extensionsService.getNewestExtension()
   const popularExtension = extensionsService.getPopularExtension()
-
-  const extensionCardData: ExtensionCardProps[] = []
+  const extensionCardData: SimpleInfoCardProps[] = []
 
   if (popularExtension) {
     extensionCardData.push({
       subjectUrl: popularExtension.authorUrl,
       title: popularExtension.name,
       subTitle: `by ${popularExtension.authorName}`,
       callout: 'popular extension',
+      href: '/extensions',
     })
   }
   if (newestExtension) {
@@ -40,6 +46,17 @@ export const ExtensionsWidget = () => {
       title: newestExtension.name,
       subTitle: `by ${newestExtension.authorName}`,
       callout: 'newest extension',
+      href: '/extensions',
+    })
+  }
+
+  if (spotlightContributor) {
+    extensionCardData.push({
+      subjectUrl: spotlightContributor.profileUrl,
+      title: spotlightContributor.name,
+      subTitle: spotlightContributor.subTitle,
+      callout: 'spotlight contributor ♥',
+      href: `/contributors`,
     })
   }
 
@@ -81,7 +98,7 @@ export const ExtensionsWidget = () => {
           </Stack>
           <Stack spacing={2}>
             {extensionCardData.map((extension) => (
-              <ExtensionCard key={extension.title} {...extension} />
+              <SimpleInfoCard key={extension.title} {...extension} />
             ))}
           </Stack>
         </Stack>

packages/app/src/components/Home/Header.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useState } from 'react'
+import { useState } from 'react'
 import {
   Box,
   ListItemIcon,
@@ -47,7 +47,7 @@ const LeftWrapper = styled('div')(({ theme }) => ({
 
 type Props = {
   selectedDate: Dayjs
-  setSelectedDate: Dispatch<SetStateAction<Dayjs>>
+  setSelectedDate: (date: Dayjs) => void
 }
 
 const HomeHeader = ({ selectedDate, setSelectedDate }: Props) => {

packages/app/src/components/Home/HomePage.tsx

@@ -10,7 +10,7 @@ import { useGetHealth } from '../../services/health.service'
 import { ExtensionsDashboard } from '../Extensions/ExtensionsDashboard'
 import { ExtensionsWidget } from './Extensions/ExtensionsWidget'
 
-export const HomePage = () => {
+const HomePage = () => {
   const { data: health, isPending: isHealthPending } = useGetHealth({
     retry: false,
     refetchInterval: false,
@@ -30,6 +30,7 @@ export const HomePage = () => {
           display: 'flex',
           flexDirection: { xs: 'column', lg: 'row' },
           gap: 4,
+          mb: 4,
         }}
       >
         <Time selectedDate={selectedDate} />
@@ -48,3 +49,5 @@ export const HomePage = () => {
     </div>
   )
 }
+
+export default HomePage

packages/app/src/components/common/GithubProfileImage.tsx

@@ -22,7 +22,7 @@ export const GitHubProfileImage = ({ url, size = 60 }: Props) => {
         const username = url.split('/').pop()
         const response = await fetch(`https://api.github.com/users/${username}`)
         if (!response.ok) {
-          throw new Error('Failed to fetch profile')
+          throw new Error()
         }
         const data = await response.json()
         setProfile(data)

packages/app/src/components/common/PlainHeader.tsx

@@ -0,0 +1,51 @@
+import { Box, Typography } from '@mui/material'
+
+import { Logo } from '../common/Logo/Logo'
+import CodeClimbersButton from '../common/CodeClimbersButton'
+import { useNavigate } from 'react-router-dom'
+import { Close } from '@mui/icons-material'
+
+type Props = {
+  title: string
+}
+
+const PlainHeader = ({ title }: Props) => {
+  const navigate = useNavigate()
+
+  const handleClick = () => {
+    navigate('/')
+  }
+
+  return (
+    <>
+      <Box
+        display="flex"
+        sx={{ justifyContent: 'space-between', width: '100%' }}
+      >
+        <Box display="flex" flexDirection="row" gap={2}>
+          <CodeClimbersButton
+            variant="text"
+            onClick={handleClick}
+            eventName="plain_header_logo_click"
+          >
+            <Logo />
+          </CodeClimbersButton>
+        </Box>
+        <Box display="flex" flexDirection="row" gap={2}>
+          <CodeClimbersButton
+            variant="text"
+            onClick={handleClick}
+            eventName="plain_header_logo_click"
+            sx={{ textTransform: 'none' }}
+            color="inherit"
+          >
+            <Typography sx={{ mr: 2 }}>{title}</Typography>
+            <Close />
+          </CodeClimbersButton>
+        </Box>
+      </Box>
+    </>
+  )
+}
+
+export default PlainHeader