From 448d3fcb143ff0b3463a0d5ac40dc6233efe9583 Mon Sep 17 00:00:00 2001
From: r-freeman <hello@ryanfreeman.dev>
Date: Fri, 27 Jan 2023 23:33:49 +0000
Subject: [PATCH] Added dashboard page

---
 components/Card.tsx   |  5 ++--
 components/Footer.tsx |  1 +
 components/Header.tsx |  1 +
 lib/github.ts         | 66 ++++++++++++++++++++++++++++++++++++++++--
 pages/dashboard.tsx   | 67 +++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 136 insertions(+), 4 deletions(-)
 create mode 100644 pages/dashboard.tsx

diff --git a/components/Card.tsx b/components/Card.tsx
index b5b4edc..64843a1 100644
--- a/components/Card.tsx
+++ b/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>
     )
diff --git a/components/Footer.tsx b/components/Footer.tsx
index d41ded7..74f4790 100644
--- a/components/Footer.tsx
+++ b/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>
diff --git a/components/Header.tsx b/components/Header.tsx
index 38cdc3b..8418f36 100644
--- a/components/Header.tsx
+++ b/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>
diff --git a/lib/github.ts b/lib/github.ts
index 5f39128..5788742 100644
--- a/lib/github.ts
+++ b/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
 }
\ No newline at end of file
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
new file mode 100644
index 0000000..502e5bc
--- /dev/null
+++ b/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
+        }
+    }
+}