Added dashboard page

components/Card.tsx

@@ -23,6 +23,7 @@ type CardTitle = {
 
 type CardDescription = {
     children: ReactNode
+    className?: string
 }
 
 type CardCta = {
@@ -86,9 +87,9 @@ Card.Title = function CardTitle({as: Component = 'h2', href, children}: CardTitl
     )
 }
 
-Card.Description = function CardDescription({children}: CardDescription) {
+Card.Description = function CardDescription({children, className}: CardDescription) {
     return (
-        <p className="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+        <p className={clsx(className ? className : "mt-2 text-sm text-zinc-600 dark:text-zinc-400", "relative z-10")}>
             {children}
         </p>
     )

components/Footer.tsx

@@ -25,6 +25,7 @@ export function Footer() {
                         <div className="flex flex-col items-center justify-between gap-6 mt-12">
                             <div className="flex gap-6 text-sm font-medium text-zinc-800 dark:text-zinc-200">
                                 <NavLink href="/about">About</NavLink>
+                                <NavLink href="/dashboard">Dashboard</NavLink>
                                 <NavLink href="/writing">Writing</NavLink>
                                 <NavLink href="/projects">Projects</NavLink>
                                 <NavLink href="/uses">Uses</NavLink>

components/Header.tsx

@@ -168,6 +168,7 @@ function DesktopNavigation(props: Props) {
         <nav {...props}>
             <ul className="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
                 <NavItem href="/about">About</NavItem>
+                <NavItem href="/dashboard">Dashboard</NavItem>
                 <NavItem href="/writing">Writing</NavItem>
                 <NavItem href="/projects">Projects</NavItem>
                 <NavItem href="/uses">Uses</NavItem>

lib/github.ts

@@ -4,7 +4,7 @@ import type {Repo} from '@/types'
 const GITHUB_ACCESS_TOKEN = process.env.GITHUB_ACCESS_TOKEN
 const GITHUB_GRAPHQL = "https://api.github.com/graphql"
 
-type Response = {
+type PinnedReposResponse = {
     data: {
         user: {
             pinnedItems: {
@@ -14,6 +14,26 @@ type Response = {
     }
 }
 
+type TotalReposResponse = {
+    data: {
+        user: {
+            repositories: {
+                totalCount: number
+            }
+        }
+    }
+}
+
+type TotalFollowersResponse = {
+    data: {
+        user: {
+            followers: {
+                totalCount: number
+            }
+        }
+    }
+}
+
 export async function getPinnedRepos() {
     const response = await fetch(GITHUB_GRAPHQL, {
         method: 'POST',
@@ -42,7 +62,49 @@ export async function getPinnedRepos() {
               }
             }`
         })
-    }).then(r => r.json()) as Response
+    }).then(r => r.json()) as PinnedReposResponse
 
     return response.data.user.pinnedItems.nodes
+}
+
+export async function getTotalRepos() {
+    const response = await fetch(GITHUB_GRAPHQL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${GITHUB_ACCESS_TOKEN}`
+        },
+        body: JSON.stringify({
+            query: `{
+              user(login: "r-freeman") {
+                repositories {
+                  totalCount
+                }
+              }
+            }`
+        })
+    }).then(r => r.json()) as TotalReposResponse
+
+    return response.data.user.repositories.totalCount
+}
+
+export async function getTotalFollowers() {
+    const response = await fetch(GITHUB_GRAPHQL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${GITHUB_ACCESS_TOKEN}`
+        },
+        body: JSON.stringify({
+            query: `{
+              user(login: "r-freeman") {
+                followers {
+                  totalCount
+                }
+              }
+            }`
+        })
+    }).then(r => r.json()) as TotalFollowersResponse
+
+    return response.data.user.followers.totalCount
 }

pages/dashboard.tsx

@@ -0,0 +1,67 @@
+import Head from 'next/head'
+import {SimpleLayout} from '@/components/SimpleLayout'
+import {Card} from '@/components/Card'
+import {numberFormat} from '@/lib/numberFormat'
+import {getTotalFollowers, getTotalRepos} from '@/lib/github'
+import {GetStaticProps} from 'next'
+
+export default function Dashboard({totalRepos, totalFollowers}: { totalRepos: number, totalFollowers: number }) {
+    return (
+        <>
+            <Head>
+                <title>Dashboard - Ryan Freeman</title>
+                <meta
+                    name="description"
+                    content="This is my digital life in numbers which is updated daily. I use this dashboard to track various metrics across platforms like Spotify, GitHub, Twitter and more."
+                />
+                <meta
+                    property="og:title"
+                    content="Dashboard - Ryan Freeman"
+                />
+                <meta
+                    property="og:description"
+                    content="This is my digital life in numbers which is updated daily. I use this dashboard to track various metrics across platforms like Spotify, GitHub, Twitter and more."
+                />
+            </Head>
+            <SimpleLayout
+                title="Dashboard."
+                intro="This is my digital life in numbers which is updated daily. I use this dashboard to track various metrics across platforms like Spotify, GitHub, Twitter and more."
+                gradient="bg-gradient-to-r from-orange-300 to-rose-300"
+            >
+                <ul
+                    role="list"
+                    className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3"
+                >
+                    <Card as="li">
+                        <h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-400">
+                            <Card.Link href="https://github.com/r-freeman">GitHub Repos</Card.Link>
+                        </h2>
+                        <Card.Description className="text-zinc-800 dark:text-zinc-100 font-semibold text-5xl">
+                            {numberFormat(totalRepos)}
+                        </Card.Description>
+                    </Card>
+                    <Card as="li">
+                        <h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-400">
+                            <Card.Link href="https://github.com/r-freeman">GitHub Followers</Card.Link>
+                        </h2>
+                        <Card.Description className="text-zinc-800 dark:text-zinc-100 font-semibold text-5xl">
+                            {numberFormat(totalFollowers)}
+                        </Card.Description>
+                    </Card>
+                </ul>
+            </SimpleLayout>
+        </>
+    )
+}
+
+export const getStaticProps: GetStaticProps = async () => {
+    const totalRepos = await getTotalRepos()
+    const totalFollowers = await getTotalFollowers()
+
+    return {
+        props: {
+            totalRepos,
+            totalFollowers
+        }
+    }
+}