move <Layout> to _app.tsx so it's not rerendered

components/Layout.tsx

@@ -1,26 +1,15 @@
-import { NextSeo } from "next-seo";
+import Header from "./page-header/Header";
+import Footer from "./page-footer/Footer";
 
 import styles from "./Layout.module.scss";
 
-type Props = {
+const Layout = ({ children }) => (
-  title?: string;
-  description?: string;
-  children: unknown;
-};
-
-const Layout = ({ title, description, children }: Props) => (
   <>
-    <NextSeo
+    <Header />
-      title={title}
-      description={description}
-      openGraph={{
-        title: title,
-      }}
-    />
-
     <main className={styles.main}>
       <div className={styles.container}>{children}</div>
     </main>
+    <Footer />
   </>
 );
 

pages/_app.tsx

@@ -3,8 +3,7 @@ import { useRouter } from "next/router";
 import { ThemeProvider } from "next-themes";
 import { DefaultSeo, SocialProfileJsonLd } from "next-seo";
 import * as Fathom from "fathom-client";
-import Header from "../components/page-header/Header";
+import Layout from "../components/Layout";
-import Footer from "../components/page-footer/Footer";
 import * as config from "../lib/config";
 import type { AppProps } from "next/app";
 
@@ -184,9 +183,9 @@ const App = ({ Component, pageProps }: AppProps) => {
       />
 
       <ThemeProvider>
-        <Header />
+        <Layout>
-        <Component {...pageProps} />
+          <Component {...pageProps} />
-        <Footer />
+        </Layout>
       </ThemeProvider>
     </>
   );

pages/birthday.tsx

@@ -1,4 +1,4 @@
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
 import Video from "../components/video/Video";
@@ -7,10 +7,15 @@ import { TapeIcon } from "../components/icons";
 import thumbnail from "../public/static/images/birthday/thumb.png";
 
 const Birthday = () => (
-  <Layout
+  <>
-    title="🎉 Cranky Birthday Boy on VHS Tape 📼"
+    <NextSeo
-    description="The origin of my hatred for the Happy Birthday song."
+      title="🎉 Cranky Birthday Boy on VHS Tape 📼"
-  >
+      description="The origin of my hatred for the Happy Birthday song."
+      openGraph={{
+        title: "🎉 Cranky Birthday Boy on VHS Tape 📼",
+      }}
+    />
+
     <PageTitle
       title={
         <>
@@ -38,7 +43,7 @@ const Birthday = () => (
         controls={true}
       />
     </Content>
-  </Layout>
+  </>
 );
 
 export default Birthday;

pages/cli.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
 import { BotIcon } from "../components/icons";
@@ -7,7 +7,15 @@ import { BotIcon } from "../components/icons";
 import cliImg from "../public/static/images/cli/screenshot.png";
 
 const CLI = () => (
-  <Layout title="CLI" description="AKA, the most useless Node module ever published, in history, by anyone, ever.">
+  <>
+    <NextSeo
+      title="CLI"
+      description="AKA, the most useless Node module ever published, in history, by anyone, ever."
+      openGraph={{
+        title: "CLI",
+      }}
+    />
+
     <PageTitle
       title={
         <>
@@ -82,7 +90,7 @@ const CLI = () => (
         </a>
       </p>
     </Content>
-  </Layout>
+  </>
 );
 
 export default CLI;

pages/contact.tsx

@@ -1,10 +1,18 @@
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import PageTitle from "../components/page/PageTitle";
 import ContactForm from "../components/contact/ContactForm";
 import { MailIcon, LockIcon } from "../components/icons";
+import Content from "../components/Content";
 
 const Contact = () => (
-  <Layout title="Contact Me">
+  <>
+    <NextSeo
+      title="Contact Me"
+      openGraph={{
+        title: "Contact Me",
+      }}
+    />
+
     <PageTitle
       title={
         <>
@@ -12,37 +20,38 @@ const Contact = () => (
         </>
       }
     />
-    <div>
+    <Content>
-      <p>
+      <div className="wrapper">
-        Fill out this quick form and I'll get back to you as soon as I can! You can also{" "}
+        <p>
-        <a href="mailto:jake@jarv.is">email me directly</a>, send me a{" "}
+          Fill out this quick form and I'll get back to you as soon as I can! You can also{" "}
-        <a
+          <a href="mailto:jake@jarv.is">email me directly</a>, send me a{" "}
-          href="https://twitter.com/messages/compose?recipient_id=229769022"
+          <a
-          target="_blank"
+            href="https://twitter.com/messages/compose?recipient_id=229769022"
-          rel="noopener nofollow noreferrer"
+            target="_blank"
-        >
+            rel="noopener nofollow noreferrer"
-          direct message on Twitter
+          >
-        </a>
+            direct message on Twitter
-        , or <a href="sms:+1-617-917-3737">text me</a>.
+          </a>
-      </p>
+          , or <a href="sms:+1-617-917-3737">text me</a>.
-      <p>
+        </p>
-        <LockIcon /> You can grab my public key here:{" "}
+        <p>
-        <a href="/pubkey.asc" title="My Public PGP Key" target="_blank" rel="pgpkey authn noopener">
+          <LockIcon /> You can grab my public key here:{" "}
-          <code>6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39</code>
+          <a href="/pubkey.asc" title="My Public PGP Key" target="_blank" rel="pgpkey authn noopener">
-        </a>
+            <code>6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39</code>
-        .
+          </a>
-      </p>
+          .
-      <ContactForm />
+        </p>
-    </div>
+        <ContactForm />
+      </div>
+    </Content>
+
     <style jsx>{`
-      div {
+      .wrapper {
         max-width: 600px;
         margin: 0 auto;
-        font-size: 0.9em;
-        line-height: 1.7;
       }
 
-      code {
+      .wrapper code {
         background: none;
         border: 0;
         padding: 0;
@@ -50,7 +59,7 @@ const Contact = () => (
         white-space: normal;
       }
     `}</style>
-  </Layout>
+  </>
 );
 
 export default Contact;

pages/hillary.tsx

@@ -1,4 +1,4 @@
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
 import Video from "../components/video/Video";
@@ -6,10 +6,15 @@ import Video from "../components/video/Video";
 import thumbnail from "../public/static/images/hillary/thumb.png";
 
 const Hillary = () => (
-  <Layout
+  <>
-    title="My Brief Apperance in Hillary Clinton's DNC Video"
+    <NextSeo
-    description="My brief apperance in one of Hillary Clinton's 2016 DNC convention videos on substance abuse."
+      title="My Brief Apperance in Hillary Clinton's DNC Video"
-  >
+      description="My brief apperance in one of Hillary Clinton's 2016 DNC convention videos on substance abuse."
+      openGraph={{
+        title: "My Brief Apperance in Hillary Clinton's DNC Video",
+      }}
+    />
+
     <PageTitle title="My Brief Apperance in Hillary Clinton's DNC Video" />
     <Content>
       <Video
@@ -39,6 +44,7 @@ const Hillary = () => (
         }}
         controls={true}
       />
+
       <p className="copyright">
         Video is property of{" "}
         <a href="https://www.hillaryclinton.com/" target="_blank" rel="noopener noreferrer">
@@ -54,21 +60,22 @@ const Hillary = () => (
         </a>
         . &copy; 2016.
       </p>
-      <style jsx>{`
-        .copyright {
-          text-align: center;
-          font-size: 0.9em;
-          line-height: 1.8;
-          margin: 1.25em 1em 0.5em;
-          color: var(--medium-light);
-        }
-
-        .copyright a {
-          font-weight: 700;
-        }
-      `}</style>
     </Content>
-  </Layout>
+
+    <style jsx>{`
+      .copyright {
+        text-align: center;
+        font-size: 0.9em;
+        line-height: 1.8;
+        margin: 1.25em 1em 0.5em;
+        color: var(--medium-light);
+      }
+
+      .copyright a {
+        font-weight: 700;
+      }
+    `}</style>
+  </>
 );
 
 export default Hillary;

pages/index.tsx

@@ -1,7 +1,6 @@
 import Link from "next/link";
 import isAbsoluteUrl from "is-absolute-url";
 import { colord } from "colord";
-import Layout from "../components/Layout";
 import { WaveIcon, LockIcon } from "../components/icons";
 
 type ColorLinkProps = {
@@ -40,7 +39,7 @@ const ColorLink = ({ href, title, lightColor, darkColor, external = false, child
 };
 
 const Index = () => (
-  <Layout>
+  <>
     <h1>
       Hi there! I'm Jake.{" "}
       <span className="wave">
@@ -376,7 +375,7 @@ const Index = () => (
         }
       }
     `}</style>
-  </Layout>
+  </>
 );
 
 export default Index;

pages/leo.tsx

@@ -1,4 +1,4 @@
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
 import Video from "../components/video/Video";
@@ -7,69 +7,74 @@ import thumbnail from "../public/static/images/leo/thumb.png";
 
 const Leo = () => (
   <>
-    <Layout
+    <NextSeo
       title='Facebook App on "The Lab with Leo Laporte"'
       description="Powncer app featured in Leo Laporte's TechTV show."
-    >
+      openGraph={{
-      <PageTitle title='Facebook App on "The Lab with Leo Laporte"' />
+        title: 'Facebook App on "The Lab with Leo Laporte"',
-      <Content>
+      }}
-        <Video
+    />
-          url={[
-            { src: "/static/images/leo/leo.webm", type: "video/webm" },
-            { src: "/static/images/leo/leo.mp4", type: "video/mp4" },
-          ]}
-          config={{
-            // @ts-ignore
-            file: {
-              attributes: {
-                poster: thumbnail.src,
-                controlsList: "nodownload",
-                preload: "metadata",
-                autoPlay: false,
-              },
-              tracks: [
-                {
-                  kind: "subtitles",
-                  src: "/static/images/leo/subs.en.vtt",
-                  srcLang: "en",
-                  label: "English",
-                  default: true,
-                },
-              ],
-            },
-          }}
-          controls={true}
-        />
-        <p className="copyright">
-          Video is property of{" "}
-          <a
-            href="https://web.archive.org/web/20070511004304/http://www.g4techtv.ca/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            G4techTV Canada
-          </a>{" "}
-          &amp;{" "}
-          <a href="https://leolaporte.com/" target="_blank" rel="noopener noreferrer">
-            Leo Laporte
-          </a>
-          . &copy; 2007 G4 Media, Inc.
-        </p>
-        <style jsx>{`
-          .copyright {
-            text-align: center;
-            font-size: 0.9em;
-            line-height: 1.8;
-            margin: 1.25em 1em 0.5em;
-            color: var(--medium-light);
-          }
 
-          .copyright a {
+    <PageTitle title='Facebook App on "The Lab with Leo Laporte"' />
-            font-weight: 700;
+    <Content>
-          }
+      <Video
-        `}</style>
+        url={[
-      </Content>
+          { src: "/static/images/leo/leo.webm", type: "video/webm" },
-    </Layout>
+          { src: "/static/images/leo/leo.mp4", type: "video/mp4" },
+        ]}
+        config={{
+          // @ts-ignore
+          file: {
+            attributes: {
+              poster: thumbnail.src,
+              controlsList: "nodownload",
+              preload: "metadata",
+              autoPlay: false,
+            },
+            tracks: [
+              {
+                kind: "subtitles",
+                src: "/static/images/leo/subs.en.vtt",
+                srcLang: "en",
+                label: "English",
+                default: true,
+              },
+            ],
+          },
+        }}
+        controls={true}
+      />
+
+      <p className="copyright">
+        Video is property of{" "}
+        <a
+          href="https://web.archive.org/web/20070511004304/http://www.g4techtv.ca/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          G4techTV Canada
+        </a>{" "}
+        &amp;{" "}
+        <a href="https://leolaporte.com/" target="_blank" rel="noopener noreferrer">
+          Leo Laporte
+        </a>
+        . &copy; 2007 G4 Media, Inc.
+      </p>
+    </Content>
+
+    <style jsx>{`
+      .copyright {
+        text-align: center;
+        font-size: 0.9em;
+        line-height: 1.8;
+        margin: 1.25em 1em 0.5em;
+        color: var(--medium-light);
+      }
+
+      .copyright a {
+        font-weight: 700;
+      }
+    `}</style>
   </>
 );
 

pages/license.tsx

@@ -1,10 +1,17 @@
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
 import { LicenseIcon } from "../components/icons";
 
 const License = () => (
-  <Layout title="License">
+  <>
+    <NextSeo
+      title="License"
+      openGraph={{
+        title: "License",
+      }}
+    />
+
     <PageTitle
       title={
         <>
@@ -459,7 +466,7 @@ const License = () => (
         </p>
       </blockquote>
     </Content>
-  </Layout>
+  </>
 );
 
 export default License;

pages/notes/[slug].tsx

@@ -1,7 +1,6 @@
 import { MDXRemote } from "next-mdx-remote";
 import { serialize } from "next-mdx-remote/serialize";
 import { NextSeo, ArticleJsonLd } from "next-seo";
-import Layout from "../../components/Layout";
 import Content from "../../components/Content";
 import Meta from "../../components/notes/Meta";
 import mdxComponents from "../../components/mdxComponents";
@@ -53,14 +52,12 @@ const Note = ({ frontMatter, source }) => (
       publisherLogo={`${config.baseUrl}/static/images/me.jpg`}
     />
 
-    <Layout>
+    <Meta {...frontMatter} />
-      <Meta {...frontMatter} />
+    <Content>
-      <Content>
+      <div className="markdown">
-        <div className="markdown">
+        <MDXRemote {...source} components={mdxComponents} />
-          <MDXRemote {...source} components={mdxComponents} />
+      </div>
-        </div>
+    </Content>
-      </Content>
-    </Layout>
   </>
 );
 

pages/notes/index.tsx

@@ -1,13 +1,21 @@
+import { NextSeo } from "next-seo";
 import { format } from "date-fns";
-import Layout from "../../components/Layout";
 import List from "../../components/notes/List";
 import { getAllNotes } from "../../lib/parse-notes";
 import type { GetStaticProps } from "next";
 
 const Notes = ({ notesByYear }) => (
-  <Layout title="Notes" description="Recent posts by Jake Jarvis.">
+  <>
+    <NextSeo
+      title="Notes"
+      description="Recent posts by Jake Jarvis."
+      openGraph={{
+        title: "Notes",
+      }}
+    />
+
     <List notesByYear={notesByYear} />
-  </Layout>
+  </>
 );
 
 export const getStaticProps: GetStaticProps = async () => {

pages/previously.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 
 import Image from "next/image";
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
 import { FloppyIcon, SirenIcon } from "../components/icons";
@@ -22,182 +22,186 @@ import img_2018_04 from "../public/static/images/previously/2018_04.png";
 
 const Previously = () => (
   <>
-    <Layout
+    <NextSeo
       title="Previously on..."
       description="An incredibly embarrassing and somewhat painful down of this site's memory lane..."
-    >
+      openGraph={{
-      <PageTitle
+        title: "Previously on...",
-        title={
+      }}
-          <>
+    />
-            <FloppyIcon /> Previously on...
+
-          </>
+    <PageTitle
-        }
+      title={
-      />
+        <>
-      <Content>
+          <FloppyIcon /> Previously on...
-        <figure>
+        </>
+      }
+    />
+    <Content>
+      <figure>
+        <a
+          className="no-underline"
+          href="https://web.archive.org/web/20010501000000*/jakejarvis.com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image src={img_wayback} placeholder="blur" alt="Timeline of this website's past." />
+        </a>
+        <figcaption>
+          ...the{" "}
           <a
-            className="no-underline"
             href="https://web.archive.org/web/20010501000000*/jakejarvis.com"
             target="_blank"
             rel="noopener noreferrer"
           >
-            <Image src={img_wayback} placeholder="blur" alt="Timeline of this website's past." />
+            Cringey Chronicles&trade;
+          </a>{" "}
+          of this website's past.
+        </figcaption>
+      </figure>
+
+      <hr />
+
+      <p>
+        <SirenIcon /> <strong>Trigger warning:</strong> marquees, Comic Sans MS, popups,{" "}
+        <code>
+          color: <span className="limegreen">limegreen</span>
+        </code>
+        ...{" "}
+        <a href="https://y2k.app/" target="_blank" rel="noopener noreferrer">
+          Click for the{" "}
+          <strong>
+            <em>FULL</em>
+          </strong>{" "}
+          experience anyway.
+        </a>
+      </p>
+      <figure>
+        <iframe
+          className="y2k_frame"
+          src="https://jakejarvis.github.io/my-first-website/"
+          title="My Terrible, Horrible, No Good, Very Bad First Website"
+        ></iframe>
+        <figcaption>
+          November 2001 (
+          <a href="https://github.com/jakejarvis/my-first-website" target="_blank" rel="noopener noreferrer">
+            archived source
           </a>
-          <figcaption>
+          )
-            ...the{" "}
+        </figcaption>
-            <a
+      </figure>
-              href="https://web.archive.org/web/20010501000000*/jakejarvis.com"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Cringey Chronicles&trade;
-            </a>{" "}
-            of this website's past.
-          </figcaption>
-        </figure>
 
-        <hr />
+      <hr />
 
-        <p>
+      <figure>
-          <SirenIcon /> <strong>Trigger warning:</strong> marquees, Comic Sans MS, popups,{" "}
+        <Image src={img_2002_02} placeholder="blur" alt="February 2002" />
-          <code>
+        <figcaption>February 2002</figcaption>
-            color: <span className="limegreen">limegreen</span>
+      </figure>
-          </code>
+
-          ...{" "}
+      <hr />
-          <a href="https://y2k.app/" target="_blank" rel="noopener noreferrer">
+
-            Click for the{" "}
+      <figure>
-            <strong>
+        <Image src={img_2002_10} placeholder="blur" alt="October 2002" />
-              <em>FULL</em>
+        <figcaption>October 2002</figcaption>
-            </strong>{" "}
+      </figure>
-            experience anyway.
+
+      <hr />
+
+      <figure>
+        <Image src={img_2003_08} placeholder="blur" alt="August 2003" />
+        <figcaption>August 2003</figcaption>
+      </figure>
+
+      <hr />
+
+      <figure>
+        <Image src={img_2004_11} placeholder="blur" alt="November 2004" />
+        <figcaption>November 2004</figcaption>
+      </figure>
+
+      <hr />
+
+      <figure>
+        <Image src={img_2006_04} placeholder="blur" alt="April 2006" />
+        <figcaption>April 2006</figcaption>
+      </figure>
+
+      <hr />
+
+      <figure>
+        <Image src={img_2006_05} placeholder="blur" alt="May 2006" />
+        <figcaption>May 2006</figcaption>
+      </figure>
+
+      <hr />
+
+      <figure>
+        <Image src={img_2007_01} placeholder="blur" alt="January 2007" />
+        <figcaption>January 2007</figcaption>
+      </figure>
+
+      <hr />
+
+      <figure>
+        <Image src={img_2007_04} placeholder="blur" alt="April 2007" />
+        <figcaption>April 2007</figcaption>
+      </figure>
+
+      <hr />
+
+      <figure>
+        <Image src={img_2007_05} placeholder="blur" alt="May 2007" />
+        <figcaption>May 2007</figcaption>
+      </figure>
+
+      <hr />
+
+      <figure>
+        <Image src={img_2009_07} placeholder="blur" alt="July 2009" />
+        <figcaption>July 2009</figcaption>
+      </figure>
+
+      <hr />
+
+      <figure>
+        <a
+          className="no-underline"
+          href="https://github.com/jakejarvis/jarv.is/tree/v1"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image src={img_2012_09} placeholder="blur" alt="September 2012" />
+        </a>
+        <figcaption>
+          September 2012 (
+          <a href="https://github.com/jakejarvis/jarv.is/tree/v1" target="_blank" rel="noopener noreferrer">
+            archived source
           </a>
-        </p>
+          )
-        <figure>
+        </figcaption>
-          <iframe
+      </figure>
-            className="y2k_frame"
-            src="https://jakejarvis.github.io/my-first-website/"
-            title="My Terrible, Horrible, No Good, Very Bad First Website"
-          ></iframe>
-          <figcaption>
-            November 2001 (
-            <a href="https://github.com/jakejarvis/my-first-website" target="_blank" rel="noopener noreferrer">
-              archived source
-            </a>
-            )
-          </figcaption>
-        </figure>
 
-        <hr />
+      <hr />
 
-        <figure>
+      <figure>
-          <Image src={img_2002_02} placeholder="blur" alt="February 2002" />
+        <a
-          <figcaption>February 2002</figcaption>
+          className="no-underline"
-        </figure>
+          href="https://github.com/jakejarvis/jarv.is/tree/v2"
-
+          target="_blank"
-        <hr />
+          rel="noopener noreferrer"
-
+        >
-        <figure>
+          <Image src={img_2018_04} placeholder="blur" alt="April 2018" />
-          <Image src={img_2002_10} placeholder="blur" alt="October 2002" />
+        </a>
-          <figcaption>October 2002</figcaption>
+        <figcaption>
-        </figure>
+          April 2018 (
-
+          <a href="https://github.com/jakejarvis/jarv.is/tree/v2" target="_blank" rel="noopener noreferrer">
-        <hr />
+            archived source
-
-        <figure>
-          <Image src={img_2003_08} placeholder="blur" alt="August 2003" />
-          <figcaption>August 2003</figcaption>
-        </figure>
-
-        <hr />
-
-        <figure>
-          <Image src={img_2004_11} placeholder="blur" alt="November 2004" />
-          <figcaption>November 2004</figcaption>
-        </figure>
-
-        <hr />
-
-        <figure>
-          <Image src={img_2006_04} placeholder="blur" alt="April 2006" />
-          <figcaption>April 2006</figcaption>
-        </figure>
-
-        <hr />
-
-        <figure>
-          <Image src={img_2006_05} placeholder="blur" alt="May 2006" />
-          <figcaption>May 2006</figcaption>
-        </figure>
-
-        <hr />
-
-        <figure>
-          <Image src={img_2007_01} placeholder="blur" alt="January 2007" />
-          <figcaption>January 2007</figcaption>
-        </figure>
-
-        <hr />
-
-        <figure>
-          <Image src={img_2007_04} placeholder="blur" alt="April 2007" />
-          <figcaption>April 2007</figcaption>
-        </figure>
-
-        <hr />
-
-        <figure>
-          <Image src={img_2007_05} placeholder="blur" alt="May 2007" />
-          <figcaption>May 2007</figcaption>
-        </figure>
-
-        <hr />
-
-        <figure>
-          <Image src={img_2009_07} placeholder="blur" alt="July 2009" />
-          <figcaption>July 2009</figcaption>
-        </figure>
-
-        <hr />
-
-        <figure>
-          <a
-            className="no-underline"
-            href="https://github.com/jakejarvis/jarv.is/tree/v1"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image src={img_2012_09} placeholder="blur" alt="September 2012" />
           </a>
-          <figcaption>
+          )
-            September 2012 (
+        </figcaption>
-            <a href="https://github.com/jakejarvis/jarv.is/tree/v1" target="_blank" rel="noopener noreferrer">
+      </figure>
-              archived source
+    </Content>
-            </a>
-            )
-          </figcaption>
-        </figure>
 
-        <hr />
-
-        <figure>
-          <a
-            className="no-underline"
-            href="https://github.com/jakejarvis/jarv.is/tree/v2"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image src={img_2018_04} placeholder="blur" alt="April 2018" />
-          </a>
-          <figcaption>
-            April 2018 (
-            <a href="https://github.com/jakejarvis/jarv.is/tree/v2" target="_blank" rel="noopener noreferrer">
-              archived source
-            </a>
-            )
-          </figcaption>
-        </figure>
-      </Content>
-    </Layout>
     <style jsx global>{`
       body {
         font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", "Inter", sans-serif;

pages/privacy.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
 import { PrivacyIcon } from "../components/icons";
@@ -8,7 +8,14 @@ import { PrivacyIcon } from "../components/icons";
 import faunaImg from "../public/static/images/privacy/fauna_hits.png";
 
 const Privacy = () => (
-  <Layout title="Privacy">
+  <>
+    <NextSeo
+      title="Privacy"
+      openGraph={{
+        title: "Privacy",
+      }}
+    />
+
     <PageTitle
       title={
         <>
@@ -211,7 +218,7 @@ const Privacy = () => (
         , for what it's worth. (A few cents, probably... 💰)
       </p>
     </Content>
-  </Layout>
+  </>
 );
 
 export default Privacy;

pages/projects.tsx

@@ -1,12 +1,19 @@
 import { graphql } from "@octokit/graphql";
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import PageTitle from "../components/page/PageTitle";
 import RepoCard from "../components/projects/RepoCard";
 import { ProjectsIcon } from "../components/icons";
 import type { GetStaticProps } from "next";
 
 const Projects = ({ repos }) => (
-  <Layout title="Projects">
+  <>
+    <NextSeo
+      title="Projects"
+      openGraph={{
+        title: "Projects",
+      }}
+    />
+
     <PageTitle
       title={
         <>
@@ -43,6 +50,7 @@ const Projects = ({ repos }) => (
       <a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener noreferrer">
         View more on GitHub...
       </a>
+
       <style jsx>{`
         p {
           text-align: center;
@@ -50,7 +58,7 @@ const Projects = ({ repos }) => (
         }
       `}</style>
     </p>
-  </Layout>
+  </>
 );
 
 export const getStaticProps: GetStaticProps = async () => {

pages/uses.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
-import Layout from "../components/Layout";
+import { NextSeo } from "next-seo";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
 import { LaptopIcon } from "../components/icons";
@@ -8,7 +8,15 @@ import { LaptopIcon } from "../components/icons";
 import desktopImg from "../public/static/images/uses/bigsur.png";
 
 const Uses = () => (
-  <Layout title="/uses" description="Things I use daily.">
+  <>
+    <NextSeo
+      title="/uses"
+      description="Things I use daily."
+      openGraph={{
+        title: "/uses",
+      }}
+    />
+
     <PageTitle
       title={
         <>
@@ -1070,7 +1078,7 @@ const Uses = () => (
         </li>
       </ul>
     </Content>
-  </Layout>
+  </>
 );
 
 export default Uses;