1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 05:18:28 -04:00

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

This commit is contained in:
Jake Jarvis 2022-01-07 09:57:32 -05:00
parent 34d2304e7c
commit 354d767fc5
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
15 changed files with 388 additions and 328 deletions

View File

@ -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 = {
title?: string;
description?: string;
children: unknown;
};
const Layout = ({ title, description, children }: Props) => (
const Layout = ({ children }) => (
<>
<NextSeo
title={title}
description={description}
openGraph={{
title: title,
}}
/>
<Header />
<main className={styles.main}>
<div className={styles.container}>{children}</div>
</main>
<Footer />
</>
);

View File

@ -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 Footer from "../components/page-footer/Footer";
import Layout from "../components/Layout";
import * as config from "../lib/config";
import type { AppProps } from "next/app";
@ -184,9 +183,9 @@ const App = ({ Component, pageProps }: AppProps) => {
/>
<ThemeProvider>
<Header />
<Component {...pageProps} />
<Footer />
<Layout>
<Component {...pageProps} />
</Layout>
</ThemeProvider>
</>
);

View File

@ -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 📼"
description="The origin of my hatred for the Happy Birthday song."
>
<>
<NextSeo
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;

View File

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

View File

@ -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>
<p>
Fill out this quick form and I'll get back to you as soon as I can! You can also{" "}
<a href="mailto:jake@jarv.is">email me directly</a>, send me a{" "}
<a
href="https://twitter.com/messages/compose?recipient_id=229769022"
target="_blank"
rel="noopener nofollow noreferrer"
>
direct message on Twitter
</a>
, or <a href="sms:+1-617-917-3737">text me</a>.
</p>
<p>
<LockIcon /> You can grab my public key here:{" "}
<a href="/pubkey.asc" title="My Public PGP Key" target="_blank" rel="pgpkey authn noopener">
<code>6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39</code>
</a>
.
</p>
<ContactForm />
</div>
<Content>
<div className="wrapper">
<p>
Fill out this quick form and I'll get back to you as soon as I can! You can also{" "}
<a href="mailto:jake@jarv.is">email me directly</a>, send me a{" "}
<a
href="https://twitter.com/messages/compose?recipient_id=229769022"
target="_blank"
rel="noopener nofollow noreferrer"
>
direct message on Twitter
</a>
, or <a href="sms:+1-617-917-3737">text me</a>.
</p>
<p>
<LockIcon /> You can grab my public key here:{" "}
<a href="/pubkey.asc" title="My Public PGP Key" target="_blank" rel="pgpkey authn noopener">
<code>6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39</code>
</a>
.
</p>
<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;

View File

@ -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"
description="My brief apperance in one of Hillary Clinton's 2016 DNC convention videos on substance abuse."
>
<>
<NextSeo
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;

View File

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

View File

@ -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."
>
<PageTitle 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);
}
openGraph={{
title: 'Facebook App on "The Lab with Leo Laporte"',
}}
/>
.copyright a {
font-weight: 700;
}
`}</style>
</Content>
</Layout>
<PageTitle 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>
</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>
</>
);

View File

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

View File

@ -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} />
<Content>
<div className="markdown">
<MDXRemote {...source} components={mdxComponents} />
</div>
</Content>
</Layout>
<Meta {...frontMatter} />
<Content>
<div className="markdown">
<MDXRemote {...source} components={mdxComponents} />
</div>
</Content>
</>
);

View File

@ -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 () => {

View File

@ -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..."
>
<PageTitle
title={
<>
<FloppyIcon /> Previously on...
</>
}
/>
<Content>
<figure>
openGraph={{
title: "Previously on...",
}}
/>
<PageTitle
title={
<>
<FloppyIcon /> Previously on...
</>
}
/>
<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{" "}
<a
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>
)
</figcaption>
</figure>
<hr />
<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.
<figure>
<Image src={img_2002_02} placeholder="blur" alt="February 2002" />
<figcaption>February 2002</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2002_10} placeholder="blur" alt="October 2002" />
<figcaption>October 2002</figcaption>
</figure>
<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>
<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>
</figure>
)
</figcaption>
</figure>
<hr />
<hr />
<figure>
<Image src={img_2002_02} placeholder="blur" alt="February 2002" />
<figcaption>February 2002</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2002_10} placeholder="blur" alt="October 2002" />
<figcaption>October 2002</figcaption>
</figure>
<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" />
<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>
September 2012 (
<a href="https://github.com/jakejarvis/jarv.is/tree/v1" target="_blank" rel="noopener noreferrer">
archived source
</a>
)
</figcaption>
</figure>
)
</figcaption>
</figure>
</Content>
<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;

View File

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

View File

@ -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 () => {

View File

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