Added fork count to projects

components/ForkIcon.tsx

@@ -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>
+    )
+}

lib/github.ts

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

pages/projects.tsx

@@ -4,6 +4,7 @@ import {Card} from '@/components/Card'
 import {SimpleLayout} from '@/components/SimpleLayout'
 import {SocialLink} from '@/components/SocialLink'
 import {StarIcon} from '@/components/StarIcon'
+import {ForkIcon} from '@/components/ForkIcon'
 import {getPinnedRepos} from '@/lib/github'
 import {numberFormat} from '@/lib/numberFormat'
 import type {Repo} from '@/types'
@@ -50,6 +51,7 @@ export default function Projects({pinnedRepos}: { pinnedRepos: Repo[] }) {
                                         className="w-4 h-4 rounded-full order-first"
                                         style={{backgroundColor: repo.primaryLanguage.color}}/>
                                 </p>
+                                <div className="flex space-x-4">
                                     <p className="relative z-10 flex items-center">
                                         <span className="ml-2 order-last">{numberFormat(repo.stargazerCount)}</span>
                                         <SocialLink
@@ -59,6 +61,16 @@ export default function Projects({pinnedRepos}: { pinnedRepos: Repo[] }) {
                                             className={'w-5 h-5'}
                                         />
                                     </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>
                         </Card>
                     ))}

types/index.ts

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