separate repository grid styles/logic from the card component

components/page-header/Header.module.scss

@@ -20,6 +20,6 @@
 
 @media screen and (max-width: 800px) {
   .header {
-    padding: 0.5em 1.25em;
+    padding: 0.75em 1.25em;
   }
 }

components/page-header/Menu.module.scss

@@ -43,12 +43,16 @@
 }
 
 @media screen and (max-width: 800px) {
-  .item {
-    margin-left: 1.75em;
+  .menu {
+    max-width: 380px;
+    justify-content: space-between;
+    flex-grow: 1;
+  }
 
+  .item {
     .icon {
-      width: 1.75em;
-      height: 1.75em;
+      width: 1.8em;
+      height: 1.8em;
     }
 
     // hide text next to emojis on mobile
@@ -56,8 +60,4 @@
       display: none;
     }
   }
-
-  .theme_toggle {
-    margin-left: 1.4em;
-  }
 }

components/projects/RepoCard.module.scss

@@ -1,8 +1,6 @@
 .card {
-  flex-grow: 1;
-  width: 416px; // magic number
+  width: 100%;
   padding: 1em 1.2em;
-  margin: 0.6em;
   border: 1px solid;
   border-radius: 0.5em;
   font-size: 0.85em;
@@ -15,7 +13,7 @@
   }
 
   .description {
-    margin: 0.25em 0 0.75em;
+    margin: 0.4em 0 0.7em;
     line-height: 1.7;
   }
 

components/projects/RepoCard.tsx

@@ -1,7 +1,7 @@
 import { intlFormat, formatDistanceToNowStrict, parseISO } from "date-fns";
 import { StarIcon, RepoForkedIcon } from "@primer/octicons-react";
 
-import styles from "./RepositoryCard.module.scss";
+import styles from "./RepoCard.module.scss";
 
 type Props = {
   name: string;
@@ -16,7 +16,7 @@ type Props = {
   updatedAt: string;
 };
 
-export default function RepositoryCard({ name, url, description, language, stars, forks, updatedAt }: Props) {
+export default function RepoCard({ name, url, description, language, stars, forks, updatedAt }: Props) {
   return (
     <div className={styles.card}>
       <a className={styles.name} href={url} target="_blank" rel="noopener noreferrer">

components/projects/RepositoryGrid.module.scss

@@ -1,12 +0,0 @@
-.grid {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-evenly;
-  align-items: flex-start;
-  width: 100%;
-}
-
-.view_more {
-  text-align: center;
-  margin-bottom: 0;
-}

components/projects/RepositoryGrid.tsx

@@ -1,21 +0,0 @@
-import RepositoryCard from "./RepositoryCard";
-
-import styles from "./RepositoryGrid.module.scss";
-
-export default function RepositoryGrid({ repos }) {
-  return (
-    <>
-      <div className={styles.grid}>
-        {repos.map((repo) => (
-          <RepositoryCard key={repo.name} {...repo} />
-        ))}
-      </div>
-
-      <p className={styles.view_more}>
-        <a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener noreferrer">
-          View more on GitHub...
-        </a>
-      </p>
-    </>
-  );
-}

pages/contact.tsx

@@ -7,7 +7,7 @@ import { MailIcon, LockIcon } from "../components/icons";
 export default function Contact() {
   return (
     <Layout>
-      <Container title="✉️ Contact Me">
+      <Container title="Contact Me">
         <PageTitle
           title={
             <>

pages/feed.atom.ts

@@ -3,16 +3,13 @@ import { buildFeed } from "../lib/build-feed";
 import type { GetServerSideProps } from "next";
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  if (context && context.res) {
-    const { res } = context;
-
   const notes = getAllNotes(["title", "date", "image", "slug", "description"]);
-
   const feed = buildFeed(notes);
+
+  const { res } = context;
   res.setHeader("content-type", "application/atom+xml");
   res.write(feed.atom1());
   res.end();
-  }
 
   return {
     props: {},

pages/feed.xml.ts

@@ -3,16 +3,13 @@ import { buildFeed } from "../lib/build-feed";
 import type { GetServerSideProps } from "next";
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  if (context && context.res) {
-    const { res } = context;
-
   const notes = getAllNotes(["title", "date", "image", "slug", "description"]);
-
   const feed = buildFeed(notes);
+
+  const { res } = context;
   res.setHeader("content-type", "application/rss+xml");
   res.write(feed.rss2());
   res.end();
-  }
 
   return {
     props: {},

pages/projects.tsx

@@ -2,14 +2,14 @@ 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 RepoCard from "../components/projects/RepoCard";
 import { ProjectsIcon } from "../components/icons";
 import type { GetStaticProps } from "next";
 
 export default function Projects({ repos }) {
   return (
     <Layout>
-      <Container title="👨‍💻 Projects">
+      <Container title="Projects">
         <PageTitle
           title={
             <>
@@ -17,7 +17,42 @@ export default function Projects({ repos }) {
             </>
           }
         />
-        <RepositoryGrid repos={repos} />
+
+        <div>
+          {repos.map((repo) => (
+            <div key={repo.name} className="repo_card">
+              <RepoCard {...repo} />
+            </div>
+          ))}
+
+          <style jsx>{`
+            div {
+              display: flex;
+              flex-flow: row wrap;
+              justify-content: space-between;
+              align-items: flex-start;
+              width: 100%;
+            }
+
+            div .repo_card {
+              flex-grow: 1;
+              margin: 0.5em;
+              width: 400px;
+            }
+          `}</style>
+        </div>
+
+        <p>
+          <a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener noreferrer">
+            View more on GitHub...
+          </a>
+          <style jsx>{`
+            p {
+              text-align: center;
+              margin-bottom: 0;
+            }
+          `}</style>
+        </p>
       </Container>
     </Layout>
   );