From 14e0c0c53c7ca3f147f44f0e8d4f5db09950a399 Mon Sep 17 00:00:00 2001
From: Max Leiter <max.leiter@vercel.com>
Date: Sun, 7 May 2023 16:22:37 -0700
Subject: [PATCH] components page, use github api for posts

---
 .../blog/[slug]/opengraph-image.tsx           |   4 +-
 app/(subpages)/blog/layout.tsx                |   2 -
 app/(subpages)/components/page.module.css     |  17 +++
 app/(subpages)/components/page.tsx            | 110 ++++++++++++++
 app/components/badge/index.tsx                |   5 +-
 app/components/button/index.tsx               | 113 ++++++++++-----
 app/components/entry/block.tsx                |   2 +-
 app/components/file-tree/file-tree.module.css |   2 +
 app/components/ie-or-css/index.tsx            |   6 +-
 app/components/ie-or-css/question/index.tsx   |  24 ++--
 app/components/link/index.tsx                 |  19 ++-
 app/components/link/link.module.css           |   6 +-
 app/components/posts-list/rsc.tsx             |   7 +-
 app/components/spinner/index.tsx              |   3 +
 app/components/spinner/spinner.module.css     |  17 +++
 app/layout.tsx                                |   3 +-
 app/lib/get-posts.ts                          |  64 +++++++--
 app/opengraph-image.tsx                       |   4 +-
 app/page.tsx                                  |   4 +-
 app/styles/global.css                         |   1 +
 package.json                                  |   1 +
 pages/api/og.tsx                              |   5 +-
 pnpm-lock.yaml                                | 135 ++++++++++++++++++
 23 files changed, 458 insertions(+), 96 deletions(-)
 create mode 100644 app/(subpages)/components/page.module.css
 create mode 100644 app/(subpages)/components/page.tsx
 create mode 100644 app/components/spinner/index.tsx
 create mode 100644 app/components/spinner/spinner.module.css

diff --git a/app/(subpages)/blog/[slug]/opengraph-image.tsx b/app/(subpages)/blog/[slug]/opengraph-image.tsx
index 01574779..d0bc3aac 100644
--- a/app/(subpages)/blog/[slug]/opengraph-image.tsx
+++ b/app/(subpages)/blog/[slug]/opengraph-image.tsx
@@ -4,10 +4,8 @@ export const size = { width: 1200, height: 600 }
 // TODO: update to support alt once nextjs has a solution for params
 export const alt = ''
 export const contentType = 'image/png'
+export const runtime = 'edge'
 
-export const config = {
-  runtime: 'edge',
-}
 
 // eslint-disable-next-line import/no-anonymous-default-export
 export default async function ({
diff --git a/app/(subpages)/blog/layout.tsx b/app/(subpages)/blog/layout.tsx
index 86db7824..8764364f 100644
--- a/app/(subpages)/blog/layout.tsx
+++ b/app/(subpages)/blog/layout.tsx
@@ -19,5 +19,3 @@ export default function BlogLayout({
     </Outline>
   )
 }
-
-export const config = { runtime: 'experimental-edge' }
diff --git a/app/(subpages)/components/page.module.css b/app/(subpages)/components/page.module.css
new file mode 100644
index 00000000..ced439fb
--- /dev/null
+++ b/app/(subpages)/components/page.module.css
@@ -0,0 +1,17 @@
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+
+    section {
+        margin-bottom: var(--gap);
+    }
+
+    ul {
+        padding: 0;
+    }
+
+    h2 {
+        margin: 0;
+    }
+}
diff --git a/app/(subpages)/components/page.tsx b/app/(subpages)/components/page.tsx
new file mode 100644
index 00000000..fca5ddab
--- /dev/null
+++ b/app/(subpages)/components/page.tsx
@@ -0,0 +1,110 @@
+import Badge from '@components/badge'
+import Button from '@components/button'
+import { GitHub } from '@components/icons'
+import Link from '@components/link'
+import styles from './page.module.css'
+import * as FileTree from '@components/file-tree'
+import { Entry } from '@components/entry'
+import BlockEntry from '@components/entry/block'
+import Tooltip from '@components/tooltip'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Components',
+  description: 'A collection of components on this website.',
+  robots: {
+    index: false,
+  },
+}
+
+export default function ComponentsPage() {
+  return (
+    <section className={styles.wrapper}>
+      <h1>Components</h1>
+      <p>
+        This page is a collection of components on this website. I use many of
+        them in my other projects as well. Feel free to take what you need.
+      </p>
+      <ExampleWrapper>
+        <h2>Button</h2>
+        <Button width={100}>Click me</Button>
+        <Button loading width={100}>
+          Click me
+        </Button>
+        <Button disabled width={100}>
+          Click me
+        </Button>
+      </ExampleWrapper>
+      <ExampleWrapper>
+        <h2>Icon</h2>
+        <p>
+          {' '}
+          SVG Icons largely from{' '}
+          <Link href="https://feathericons.com/">Feather Icons</Link>{' '}
+        </p>
+        <GitHub /> <GitHub size={40} /> <GitHub strokeWidth={3} />
+      </ExampleWrapper>
+      <ExampleWrapper>
+        <h2>Link</h2>
+
+        <Link href="">A Link</Link>
+        <Link href="" underline={false}>
+          No underline
+        </Link>
+      </ExampleWrapper>
+      <ExampleWrapper>
+        <h2>Badge</h2>
+        <Badge width={75}>A badge</Badge>
+      </ExampleWrapper>
+      <ExampleWrapper>
+        <h2>File tree</h2>
+        <FileTree.FileTree>
+          <FileTree.Folder name="src" open>
+            <FileTree.File name="page.tsx" type="page" />
+            <FileTree.File name="layout.tsx" type="layout" />
+            <FileTree.Folder name="components" open>
+              <FileTree.File name="button.tsx" type="component" note="A note" />
+              <FileTree.File name="icon.tsx" type="component" />
+            </FileTree.Folder>
+          </FileTree.Folder>
+        </FileTree.FileTree>
+      </ExampleWrapper>
+      <ExampleWrapper>
+        <h2>Entries</h2>
+        <h3>Regular</h3>
+        <ul style={{ listStyle: 'none', margin: 0 }}>
+          <Entry
+            description="Description"
+            role="Role"
+            title="Title"
+            href=""
+            years={['2023']}
+            showYears
+          />
+        </ul>
+        <h3>Block</h3>
+        <ul style={{ listStyle: 'none', margin: 0 }}>
+          <BlockEntry
+            title="Title"
+            href=""
+            description="Description"
+            date={new Date()}
+            views={0}
+          />
+        </ul>
+        <h4>Skeleton</h4>
+        <ul style={{ listStyle: 'none', margin: 0 }}>
+          <BlockEntry skeleton />
+        </ul>
+      </ExampleWrapper>
+      <ExampleWrapper>
+        <h2>Tooltip</h2>
+        <Tooltip text="This is a tooltip">Hover me</Tooltip>
+      </ExampleWrapper>
+    </section>
+  )
+}
+
+const ExampleWrapper = ({ children }: { children: React.ReactNode }) => (
+  <section className={styles.wrapper}>{children}</section>
+)
diff --git a/app/components/badge/index.tsx b/app/components/badge/index.tsx
index 605cbc6e..a83b772e 100644
--- a/app/components/badge/index.tsx
+++ b/app/components/badge/index.tsx
@@ -6,11 +6,12 @@ type Props = React.DetailedHTMLProps<
   HTMLDivElement
 > & {
   children: ReactNode
+  width?: string | number
 }
 
-const Badge = ({ children, className }: Props) => {
+const Badge = ({ children, className, width }: Props) => {
   return (
-    <div className={`${styles.badge} ${className ? className : ''}`}>
+    <div className={`${styles.badge} ${className ? className : ''}`} style={{ width }}>
       {children}
     </div>
   )
diff --git a/app/components/button/index.tsx b/app/components/button/index.tsx
index 747425c9..b24acac7 100644
--- a/app/components/button/index.tsx
+++ b/app/components/button/index.tsx
@@ -1,40 +1,87 @@
-import styles from './button.module.css'
-import { forwardRef, Ref } from 'react'
+import styles from "./button.module.css"
+import { forwardRef } from "react"
+import clsx from "clsx"
+import { Spinner } from "@components/spinner"
 
-type Props = React.HTMLProps<HTMLButtonElement> & {
-  onClick?: () => void
-  children: React.ReactNode
-  disabled?: boolean
-  width?: number
-  height?: number
+type Props = React.DetailedHTMLProps<
+	React.ButtonHTMLAttributes<HTMLButtonElement>,
+	HTMLButtonElement
+> & {
+	children?: React.ReactNode
+	buttonType?: "primary" | "secondary"
+	className?: string
+	// eslint-disable-next-line no-unused-vars
+	onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+	iconRight?: React.ReactNode
+	iconLeft?: React.ReactNode
+	height?: string | number
+	width?: string | number
+	padding?: string | number
+	margin?: string | number
+	loading?: boolean
 }
 
 // eslint-disable-next-line react/display-name
-const Button = forwardRef(
-  (
-    { onClick, children, disabled, width, height, ...props }: Props,
-    ref: Ref<HTMLButtonElement>
-  ) => {
-    return (
-      <button
-        onClick={onClick}
-        className={styles.button}
-        disabled={disabled}
-        ref={ref}
-        style={{
-          width: width ? `${width}px` : 'auto',
-          height: height ? `${height}px` : 'auto',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-        {...props}
-        type={(props.type as any) || 'button'}
-      >
-        {children}
-      </button>
-    )
-  }
+const Button = forwardRef<HTMLButtonElement, Props>(
+	(
+		{
+			children,
+			onClick,
+			className,
+			buttonType = "secondary",
+			disabled = false,
+			iconRight,
+			iconLeft,
+			height = 40,
+			width,
+			padding = 10,
+			margin,
+			loading,
+			style,
+			...props
+		},
+		ref
+	) => {
+		return (
+			<button
+				ref={ref}
+				className={clsx(styles.button, className, {
+					[styles.primary]: buttonType === "primary",
+					[styles.secondary]: buttonType === "secondary"
+				})}
+				disabled={disabled || loading}
+				onClick={onClick}
+				style={{ height, width, margin, padding, ...style }}
+				{...props}
+			>
+				{children && iconLeft && (
+					<span className={clsx(styles.icon, styles.iconLeft)}>{iconLeft}</span>
+				)}
+				{!loading &&
+					(children ? (
+						children
+					) : (
+						<span className={styles.icon}>{iconLeft || iconRight}</span>
+					))}
+				{loading && (
+					<span
+						style={{
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center"
+						}}
+					>
+						<Spinner />
+					</span>
+				)}
+				{children && iconRight && (
+					<span className={clsx(styles.icon, styles.iconRight)}>
+						{iconRight}
+					</span>
+				)}
+			</button>
+		)
+	}
 )
 
 export default Button
diff --git a/app/components/entry/block.tsx b/app/components/entry/block.tsx
index 9e168830..e7fcc5da 100644
--- a/app/components/entry/block.tsx
+++ b/app/components/entry/block.tsx
@@ -26,7 +26,7 @@ const BlockEntry = (props: Props) => {
         href={href}
         title={description || title}
         className={styles.link}
-        underline
+        underline={false}
         scroll={true}
       >
         {type && <div className={styles.type}>{type}</div>}
diff --git a/app/components/file-tree/file-tree.module.css b/app/components/file-tree/file-tree.module.css
index 7638f06e..a9ffc08d 100644
--- a/app/components/file-tree/file-tree.module.css
+++ b/app/components/file-tree/file-tree.module.css
@@ -32,6 +32,8 @@
 
 .folder {
   cursor: pointer;
+  /* To avoid highlighting on double clicking */
+  user-select: none;
 }
 
 .folder-children {
diff --git a/app/components/ie-or-css/index.tsx b/app/components/ie-or-css/index.tsx
index 3c339676..50e80274 100644
--- a/app/components/ie-or-css/index.tsx
+++ b/app/components/ie-or-css/index.tsx
@@ -23,7 +23,7 @@ export type IEQuizProps = {
 
 export const UselessButton = ({ text }: { text: string }) => (
   <Button
-    style={{ display: 'inline-block', width: '100px', height: 36, margin: 2 }}
+    style={{ display: 'inline-block' }}
     onClick={() => alert("That's the idea!")}
   >
     {text}
@@ -94,7 +94,9 @@ const IeOrCss = ({ questions }: IEQuizProps) => {
       <p>Good luck!</p>
       <ul className={styles.list}>
         {questionsWithVotes.map((question, index) => (
-          <Question question={question} key={index} />
+          <Question question={question} key={index}>
+            {question.question}
+          </Question>
         ))}
       </ul>
     </>
diff --git a/app/components/ie-or-css/question/index.tsx b/app/components/ie-or-css/question/index.tsx
index 6daaeac8..263f0419 100644
--- a/app/components/ie-or-css/question/index.tsx
+++ b/app/components/ie-or-css/question/index.tsx
@@ -9,7 +9,13 @@ import FadeIn from '@components/fade-in'
 
 const getLocalStorageKeyString = (id: string) => `question-${id}`
 
-const Question = ({ question }: { question: QuestionWithVotes }) => {
+const Question = ({
+  question,
+  children,
+}: {
+  question: QuestionWithVotes
+  children: string
+}) => {
   // const { id, question: questionText, isCSS } = question
   const { id, isCSS } = question
 
@@ -70,20 +76,7 @@ const Question = ({ question }: { question: QuestionWithVotes }) => {
   return (
     <li className={styles.wrapper}>
       <pre className={styles.pre}>
-        {/* TODO: convert to MDX */}
-        {/* <Highlight {...defaultProps} code={questionText} language={'css'}>
-          {({ className, style, tokens, getLineProps, getTokenProps }) => (
-            <code className={className} style={{ ...style }}>
-              {tokens.map((line, i) => (
-                <div key={i} {...getLineProps({ line, key: i })}>
-                  {line.map((token, key) => (
-                    <span key={key} {...getTokenProps({ token, key })} />
-                  ))}
-                </div>
-              ))}
-            </code>
-          )}
-        </Highlight> */}
+        <code>{children}</code>
       </pre>
       <div
         className={styles.buttons}
@@ -110,7 +103,6 @@ const Question = ({ question }: { question: QuestionWithVotes }) => {
       </div>
       {voted && (
         <FadeIn>
-          {/* line showing vote margins */}
           <div className={styles.line}>
             <div
               className={styles.left}
diff --git a/app/components/link/index.tsx b/app/components/link/index.tsx
index fcc15d80..5c22dc16 100644
--- a/app/components/link/index.tsx
+++ b/app/components/link/index.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import NextLink from 'next/link'
 
 import styles from './link.module.css'
@@ -18,27 +19,31 @@ const Link = ({
   external,
   href,
   children,
-  className = 'link',
+  className: classNameProp = '',
   title,
-  underline = false,
+  underline = true,
   tabIndex = 0,
   ...props
 }: Props) => {
-  const style = underline ? className : `${styles.link} ${className}`
+  const className = clsx(
+    styles.link,
+    underline && styles.underline,
+    classNameProp
+  )
 
   if (external) {
     return (
-      <NextLink
+      <a
         href={href}
         target="_blank"
         rel="noopener noreferrer"
-        className={style}
+        className={className}
         title={title}
         tabIndex={tabIndex}
         {...props}
       >
         {children}
-      </NextLink>
+      </a>
     )
   }
 
@@ -46,7 +51,7 @@ const Link = ({
     <NextLink
       href={href}
       title={title}
-      className={style}
+      className={className}
       {...props}
       tabIndex={tabIndex}
     >
diff --git a/app/components/link/link.module.css b/app/components/link/link.module.css
index db942b01..42aa4676 100644
--- a/app/components/link/link.module.css
+++ b/app/components/link/link.module.css
@@ -10,8 +10,8 @@
 .link {
   text-decoration: none;
   color: var(--link);
-}
 
-.link:hover {
-  text-decoration: underline;
+  &.underline:hover {
+    text-decoration: underline;
+  }
 }
diff --git a/app/components/posts-list/rsc.tsx b/app/components/posts-list/rsc.tsx
index fe5d8974..d8d35986 100644
--- a/app/components/posts-list/rsc.tsx
+++ b/app/components/posts-list/rsc.tsx
@@ -1,12 +1,7 @@
 import getPosts from '@lib/get-posts'
 import PostsList from '.'
 
-const fetchPosts = async () => {
-  const posts = await getPosts()
-  return posts
-}
-
 export async function PostListRSC({ paginate }: { paginate?: boolean }) {
-  const posts = await fetchPosts()
+  const posts = await getPosts()
   return <PostsList posts={posts} paginate={paginate} />
 }
diff --git a/app/components/spinner/index.tsx b/app/components/spinner/index.tsx
new file mode 100644
index 00000000..d35c2e41
--- /dev/null
+++ b/app/components/spinner/index.tsx
@@ -0,0 +1,3 @@
+import styles from "./spinner.module.css"
+
+export const Spinner = () => <div className={styles.spinner} />
diff --git a/app/components/spinner/spinner.module.css b/app/components/spinner/spinner.module.css
new file mode 100644
index 00000000..97bfd9bd
--- /dev/null
+++ b/app/components/spinner/spinner.module.css
@@ -0,0 +1,17 @@
+.spinner {
+	border: 4px solid var(--light-gray);
+	border-top: 4px solid var(--gray);
+	border-radius: 50%;
+	width: 24px;
+	height: 24px;
+	animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 2ed2c096..285f1f4a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -12,7 +12,7 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en" className={inter.variable}>
+    <html lang="en" className={inter.variable} suppressHydrationWarning>
       <body>
         <ThemeProvider>
           <div className={styles.wrapper}>
@@ -25,7 +25,6 @@ export default function RootLayout({
   )
 }
 
-export const runtime = 'edge'
 export const metadata = {
   metadataBase: new URL('https://maxleiter.com'),
   title: {
diff --git a/app/lib/get-posts.ts b/app/lib/get-posts.ts
index 4ef82329..48ef9cc9 100644
--- a/app/lib/get-posts.ts
+++ b/app/lib/get-posts.ts
@@ -1,31 +1,73 @@
 import matter from 'gray-matter'
-import path from 'path'
+import { Octokit } from '@octokit/rest'
 import type { Post } from './types'
-import fs from 'fs/promises'
 import { cache } from 'react'
 // import supabase from '@lib/supabase/private'
 
-export const getPosts = cache(async () => {
-  const posts = await fs.readdir('./posts/')
+const octokit = new Octokit({
+  auth: process.env.GITHUB_TOKEN,
+  request: {
+    fetch,
+  },
+})
+
+type GithubFile = {
+  type: 'file' | 'dir' | 'submodule' | 'symlink'
+  size: number
+  name: string
+  path: string
+  content?: string | undefined
+  sha: string
+  url: string
+  git_url: string | null
+  html_url: string | null
+  download_url: string | null
+  _links: any
+}
+
+const getPosts = cache(async () => {
+  const repoOwner = 'maxleiter'
+  const repoName = 'maxleiter.com'
+  const postsDir = 'posts'
+
+  const { data: files } = (await octokit.repos.getContent({
+    owner: repoOwner,
+    repo: repoName,
+    path: postsDir,
+  })) as { data: GithubFile[] }
 
   const postsWithMetadata = await Promise.all(
-    posts
+    files
       .filter(
-        (file) => path.extname(file) === '.md' || path.extname(file) === '.mdx'
+        (file) =>
+          file.type === 'file' &&
+          (file.path.endsWith('.md') || file.path.endsWith('.mdx'))
       )
       .map(async (file) => {
-        const filePath = `./posts/${file}`
-        const postContent = await fs.readFile(filePath, 'utf8')
+        const { data: fileContent } = (await octokit.repos.getContent({
+          owner: repoOwner,
+          repo: repoName,
+          path: file.path,
+        })) as { data: GithubFile }
+
+        if (!fileContent.content) {
+          return null
+        }
+
+        const postContent = Buffer.from(fileContent.content, 'base64').toString(
+          'utf8'
+        )
         const { data, content } = matter(postContent)
 
         if (data.published === false) {
           return null
         }
-        const withoutLeadingChars = filePath.substring(2).replace('.mdx', '.md')
+
+        const withoutLeadingChars = file.path.replace('.mdx', '.md')
 
         const fetchUrl =
           process.env.NODE_ENV === 'production'
-            ? `https://api.github.com/repos/maxleiter/maxleiter.com/commits?path=${withoutLeadingChars}&page=1&per_page=1`
+            ? `https://api.github.com/repos/${repoOwner}/${repoName}/commits?path=${withoutLeadingChars}&page=1&per_page=1`
             : `http://localhost:3000/mock-commit-response.json`
 
         const commitInfoResponse = await fetch(fetchUrl, {
@@ -68,7 +110,7 @@ export const getPosts = cache(async () => {
   return filtered
 })
 
-export async function getPost(slug: string) {
+export const getPost = async (slug: string) => {
   const posts = await getPosts()
   return posts.find((post) => post.slug === slug)
 }
diff --git a/app/opengraph-image.tsx b/app/opengraph-image.tsx
index a23cb733..654ee4d1 100644
--- a/app/opengraph-image.tsx
+++ b/app/opengraph-image.tsx
@@ -5,9 +5,7 @@ export const size = { width: 1200, height: 600 }
 export const alt = ''
 export const contentType = 'image/png'
 
-export const config = {
-  runtime: 'edge',
-}
+export const runtime = 'edge'
 
 // eslint-disable-next-line import/no-anonymous-default-export
 export default async function (): Promise<ImageResponse> {
diff --git a/app/page.tsx b/app/page.tsx
index 34141950..cb036115 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,6 +11,8 @@ import Posts from '@components/posts-list'
 
 const PROJECT_COUNT = 3
 
+export const revalidate = 10800
+
 export default async function HomePage() {
   const projects = await getProjects()
 
@@ -59,5 +61,3 @@ export default async function HomePage() {
     </>
   )
 }
-
-export const dynamic = 'force-static'
diff --git a/app/styles/global.css b/app/styles/global.css
index 44c7bbab..b81e2b98 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -89,6 +89,7 @@ body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 110%;
   font-size: 16px;
   line-height: 1.55em;
 }
diff --git a/package.json b/package.json
index b6ec5b79..2bccda0b 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@next/bundle-analyzer": "13.3.4",
     "@next/eslint-plugin-next": "13.3.4",
     "@next/mdx": "13.3.5-canary.8",
+    "@octokit/rest": "^19.0.7",
     "@supabase/supabase-js": "2.21.0",
     "@vercel/analytics": "^1.0.1",
     "@vercel/og": "^0.5.4",
diff --git a/pages/api/og.tsx b/pages/api/og.tsx
index 795ab311..dd4f123d 100644
--- a/pages/api/og.tsx
+++ b/pages/api/og.tsx
@@ -1,8 +1,7 @@
 import { ImageResponse } from '@vercel/og'
 import { NextRequest } from 'next/server'
-export const config = {
-  runtime: 'edge',
-}
+export const runtime = 'edge'
+
 
 const font = fetch(new URL('./fonts/Inter-Medium.ttf', import.meta.url)).then(
   (res) => res.arrayBuffer()
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 31246427..25b7471a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,7 @@ specifiers:
   '@next/bundle-analyzer': 13.3.4
   '@next/eslint-plugin-next': 13.3.4
   '@next/mdx': 13.3.5-canary.8
+  '@octokit/rest': ^19.0.7
   '@supabase/supabase-js': 2.21.0
   '@types/marked': 4.3.0
   '@types/mdx': ^2.0.5
@@ -72,6 +73,7 @@ dependencies:
   '@next/bundle-analyzer': 13.3.4
   '@next/eslint-plugin-next': 13.3.4
   '@next/mdx': 13.3.5-canary.8_msthxdjvrhmdkfpqqalumiidgq
+  '@octokit/rest': 19.0.7
   '@supabase/supabase-js': 2.21.0
   '@vercel/analytics': 1.0.1
   '@vercel/og': 0.5.4
@@ -763,6 +765,122 @@ packages:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.15.0
 
+  /@octokit/auth-token/3.0.3:
+    resolution: {integrity: sha512-/aFM2M4HVDBT/jjDBa84sJniv1t9Gm/rLkalaz9htOm+L+8JMj1k9w0CkUdcxNyNxZPlTxKPVko+m1VlM58ZVA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@octokit/types': 9.2.1
+    dev: false
+
+  /@octokit/core/4.2.0:
+    resolution: {integrity: sha512-AgvDRUg3COpR82P7PBdGZF/NNqGmtMq2NiPqeSsDIeCfYFOZ9gddqWNQHnFdEUf+YwOj4aZYmJnlPp7OXmDIDg==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@octokit/auth-token': 3.0.3
+      '@octokit/graphql': 5.0.5
+      '@octokit/request': 6.2.3
+      '@octokit/request-error': 3.0.3
+      '@octokit/types': 9.2.1
+      before-after-hook: 2.2.3
+      universal-user-agent: 6.0.0
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /@octokit/endpoint/7.0.5:
+    resolution: {integrity: sha512-LG4o4HMY1Xoaec87IqQ41TQ+glvIeTKqfjkCEmt5AIwDZJwQeVZFIEYXrYY6yLwK+pAScb9Gj4q+Nz2qSw1roA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@octokit/types': 9.2.1
+      is-plain-object: 5.0.0
+      universal-user-agent: 6.0.0
+    dev: false
+
+  /@octokit/graphql/5.0.5:
+    resolution: {integrity: sha512-Qwfvh3xdqKtIznjX9lz2D458r7dJPP8l6r4GQkIdWQouZwHQK0mVT88uwiU2bdTU2OtT1uOlKpRciUWldpG0yQ==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@octokit/request': 6.2.3
+      '@octokit/types': 9.2.1
+      universal-user-agent: 6.0.0
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /@octokit/openapi-types/17.1.1:
+    resolution: {integrity: sha512-/X7Gh/qWiWaooJmUnYD48SYy72fyrk2ceisOSe89JojK7r0j8YrTwYpDi76kI+c6QiqX1KSgdoBTMJvktsDkYw==}
+    dev: false
+
+  /@octokit/plugin-paginate-rest/6.0.0_@octokit+core@4.2.0:
+    resolution: {integrity: sha512-Sq5VU1PfT6/JyuXPyt04KZNVsFOSBaYOAq2QRZUwzVlI10KFvcbUo8lR258AAQL1Et60b0WuVik+zOWKLuDZxw==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      '@octokit/core': '>=4'
+    dependencies:
+      '@octokit/core': 4.2.0
+      '@octokit/types': 9.2.1
+    dev: false
+
+  /@octokit/plugin-request-log/1.0.4_@octokit+core@4.2.0:
+    resolution: {integrity: sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==}
+    peerDependencies:
+      '@octokit/core': '>=3'
+    dependencies:
+      '@octokit/core': 4.2.0
+    dev: false
+
+  /@octokit/plugin-rest-endpoint-methods/7.0.1_@octokit+core@4.2.0:
+    resolution: {integrity: sha512-pnCaLwZBudK5xCdrR823xHGNgqOzRnJ/mpC/76YPpNP7DybdsJtP7mdOwh+wYZxK5jqeQuhu59ogMI4NRlBUvA==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      '@octokit/core': '>=3'
+    dependencies:
+      '@octokit/core': 4.2.0
+      '@octokit/types': 9.2.1
+      deprecation: 2.3.1
+    dev: false
+
+  /@octokit/request-error/3.0.3:
+    resolution: {integrity: sha512-crqw3V5Iy2uOU5Np+8M/YexTlT8zxCfI+qu+LxUB7SZpje4Qmx3mub5DfEKSO8Ylyk0aogi6TYdf6kxzh2BguQ==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@octokit/types': 9.2.1
+      deprecation: 2.3.1
+      once: 1.4.0
+    dev: false
+
+  /@octokit/request/6.2.3:
+    resolution: {integrity: sha512-TNAodj5yNzrrZ/VxP+H5HiYaZep0H3GU0O7PaF+fhDrt8FPrnkei9Aal/txsN/1P7V3CPiThG0tIvpPDYUsyAA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@octokit/endpoint': 7.0.5
+      '@octokit/request-error': 3.0.3
+      '@octokit/types': 9.2.1
+      is-plain-object: 5.0.0
+      node-fetch: 2.6.7
+      universal-user-agent: 6.0.0
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /@octokit/rest/19.0.7:
+    resolution: {integrity: sha512-HRtSfjrWmWVNp2uAkEpQnuGMJsu/+dBr47dRc5QVgsCbnIc1+GFEaoKBWkYG+zjrsHpSqcAElMio+n10c0b5JA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@octokit/core': 4.2.0
+      '@octokit/plugin-paginate-rest': 6.0.0_@octokit+core@4.2.0
+      '@octokit/plugin-request-log': 1.0.4_@octokit+core@4.2.0
+      '@octokit/plugin-rest-endpoint-methods': 7.0.1_@octokit+core@4.2.0
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /@octokit/types/9.2.1:
+    resolution: {integrity: sha512-Vx4keMiD/CAiwVFasLcH0xBSVbKIHebIZke9i7ZbUWGNN4vJFWSYH6Nvga7UY9NIJCGa6x3QG849XTbi5wYmkA==}
+    dependencies:
+      '@octokit/openapi-types': 17.1.1
+    dev: false
+
   /@pkgr/utils/2.3.1:
     resolution: {integrity: sha512-wfzX8kc1PMyUILA+1Z/EqoE4UCXGy0iRGMhPwdfae1+f0OXlLqCk+By+aMzgJBzR9AzS4CDizioG6Ss1gvAFJw==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@@ -1336,6 +1454,10 @@ packages:
     engines: {node: '>= 0.4'}
     dev: false
 
+  /before-after-hook/2.2.3:
+    resolution: {integrity: sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==}
+    dev: false
+
   /binary-extensions/2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -1815,6 +1937,10 @@ packages:
     engines: {node: '>= 0.8'}
     dev: false
 
+  /deprecation/2.3.1:
+    resolution: {integrity: sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==}
+    dev: false
+
   /dequal/2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -3256,6 +3382,11 @@ packages:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
 
+  /is-plain-object/5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /is-reference/3.0.1:
     resolution: {integrity: sha512-baJJdQLiYaJdvFbJqXrcGv3WU3QCzBlUcI5QhbesIm6/xPsvmO+2CDoi/GMOFBQEQm+PXkwOPrp9KK5ozZsp2w==}
     dependencies:
@@ -6020,6 +6151,10 @@ packages:
       unist-util-is: 5.2.1
       unist-util-visit-parents: 5.1.3
 
+  /universal-user-agent/6.0.0:
+    resolution: {integrity: sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==}
+    dev: false
+
   /universalify/2.0.0:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
     engines: {node: '>= 10.0.0'}