Added fork count to projects

This commit is contained in:
r-freeman 2023-01-26 22:21:15 +00:00
parent 3c2e63e753
commit 819826422b
4 changed files with 33 additions and 9 deletions

10
components/ForkIcon.tsx Normal file
View File

@ -0,0 +1,10 @@
import type {Props} from '@/types'
export function ForkIcon(props: Props) {
return (
<svg viewBox="0 0 16 16" aria-label="forks" data-view-component="true" {...props}>
<path fillRule="evenodd"
d="M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm0 2.122a2.25 2.25 0 1 0-1.5 0v.878A2.25 2.25 0 0 0 5.75 8.5h1.5v2.128a2.251 2.251 0 1 0 1.5 0V8.5h1.5a2.25 2.25 0 0 0 2.25-2.25v-.878a2.25 2.25 0 1 0-1.5 0v.878a.75.75 0 0 1-.75.75h-4.5A.75.75 0 0 1 5 6.25v-.878zm3.75 7.378a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm3-8.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
</svg>
)
}

View File

@ -31,6 +31,7 @@ export async function getPinnedRepos() {
description description
url url
stargazerCount stargazerCount
forkCount
primaryLanguage { primaryLanguage {
name name
color color

View File

@ -4,6 +4,7 @@ import {Card} from '@/components/Card'
import {SimpleLayout} from '@/components/SimpleLayout' import {SimpleLayout} from '@/components/SimpleLayout'
import {SocialLink} from '@/components/SocialLink' import {SocialLink} from '@/components/SocialLink'
import {StarIcon} from '@/components/StarIcon' import {StarIcon} from '@/components/StarIcon'
import {ForkIcon} from '@/components/ForkIcon'
import {getPinnedRepos} from '@/lib/github' import {getPinnedRepos} from '@/lib/github'
import {numberFormat} from '@/lib/numberFormat' import {numberFormat} from '@/lib/numberFormat'
import type {Repo} from '@/types' import type {Repo} from '@/types'
@ -50,15 +51,26 @@ export default function Projects({pinnedRepos}: { pinnedRepos: Repo[] }) {
className="w-4 h-4 rounded-full order-first" className="w-4 h-4 rounded-full order-first"
style={{backgroundColor: repo.primaryLanguage.color}}/> style={{backgroundColor: repo.primaryLanguage.color}}/>
</p> </p>
<p className="relative z-10 flex items-center"> <div className="flex space-x-4">
<span className="ml-2 order-last">{numberFormat(repo.stargazerCount)}</span> <p className="relative z-10 flex items-center">
<SocialLink <span className="ml-2 order-last">{numberFormat(repo.stargazerCount)}</span>
href={repo.url} <SocialLink
ariaLabel={`Star ${repo.name} on GitHub`} href={repo.url}
icon={StarIcon} ariaLabel={`Star ${repo.name} on GitHub`}
className={'w-5 h-5'} icon={StarIcon}
/> className={'w-5 h-5'}
</p> />
</p>
<p className="relative z-10 flex items-center">
<span className="ml-2 order-last">{numberFormat(repo.forkCount)}</span>
<SocialLink
href={repo.url}
ariaLabel={`Fork ${repo.name} on GitHub`}
icon={ForkIcon}
className={'w-5 h-5'}
/>
</p>
</div>
</div> </div>
</Card> </Card>
))} ))}

View File

@ -17,6 +17,7 @@ export type Repo = {
description: string description: string
url: string url: string
stargazerCount: number stargazerCount: number
forkCount: number
primaryLanguage: { primaryLanguage: {
name: string name: string
color: string color: string