r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-09-22 19:06:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added dashboard page

Browse Source
This commit is contained in:
r-freeman 2023-01-27 23:33:49 +00:00
parent c637fdf33b
commit 448d3fcb14
5 changed files with 136 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/Card.tsx
View File

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

1
components/Footer.tsx
View File

@ -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>

1
components/Header.tsx
View File

@ -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>

66
lib/github.ts
View File

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

67
pages/dashboard.tsx Normal file
View File

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