generate /projects page with ISR instead of calling the API on every single request (closes #715)

https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration

pages/projects.tsx

@@ -1,40 +1,12 @@
-import useSWR from "swr";
-import { fetcher } from "../lib/fetcher";
+import { graphql } from "@octokit/graphql";
 import Layout from "../components/Layout";
 import Container from "../components/Container";
 import PageTitle from "../components/page/PageTitle";
 import RepositoryGrid from "../components/projects/RepositoryGrid";
-import Loading from "../components/loading/Loading";
 import { ProjectsIcon } from "../components/icons";
+import type { GetStaticProps } from "next";
 
-function Grid() {
-  // start fetching repos from API immediately
-  const { data, error } = useSWR("/api/projects/?sort=top&limit=12", fetcher);
-
-  if (error) {
-    return <div>error: {error.message}</div>;
-  }
-
-  // show spinning loading indicator if data isn't fetched yet
-  if (!data) {
-    return (
-      <div>
-        <Loading boxes={3} width={50} />
-        <style jsx>{`
-          div {
-            text-align: center;
-            margin: 2.5em auto;
-          }
-        `}</style>
-      </div>
-    );
-  }
-
-  // we have data!
-  return <RepositoryGrid repos={data} />;
-}
-
-export default function Projects() {
+export default function Projects({ repos }) {
   return (
     <Layout>
       <Container title="👨‍💻 Projects">
@@ -45,8 +17,70 @@ export default function Projects() {
             </>
           }
         />
-        <Grid />
+        <RepositoryGrid repos={repos} />
       </Container>
     </Layout>
   );
 }
+
+export const getStaticProps: GetStaticProps = async () => {
+  // https://docs.github.com/en/graphql/reference/objects#repository
+  const { user } = await graphql(
+    `
+      query ($username: String!, $sort: String, $limit: Int) {
+        user(login: $username) {
+          repositories(
+            first: $limit
+            isLocked: false
+            isFork: false
+            ownerAffiliations: OWNER
+            privacy: PUBLIC
+            orderBy: { field: $sort, direction: DESC }
+          ) {
+            edges {
+              node {
+                name
+                url
+                description
+                pushedAt
+                stargazerCount
+                forkCount
+                primaryLanguage {
+                  name
+                  color
+                }
+              }
+            }
+          }
+        }
+      }
+    `,
+    {
+      username: "jakejarvis",
+      limit: 12,
+      sort: "STARGAZERS",
+      headers: {
+        authorization: `token ${process.env.GH_PUBLIC_TOKEN}`,
+      },
+    }
+  );
+
+  const repos = user.repositories.edges.map(({ node: repo }) => ({
+    name: repo.name,
+    url: repo.url,
+    description: repo.description,
+    updatedAt: repo.pushedAt,
+    stars: repo.stargazerCount,
+    forks: repo.forkCount,
+    language: repo.primaryLanguage,
+  }));
+
+  return {
+    props: {
+      repos,
+    },
+    // fetch updated data and update page every 10 minutes (as needed)
+    // https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration
+    revalidate: 600,
+  };
+};