fresh <PageTitle> look

2025-07-03 12:46:38 -04:00 · 2025-03-08 13:09:29 -05:00
parent 5cfa86f690
commit 2d6fc82f71
29 changed files with 346 additions and 401 deletions
--- a/app/birthday/page.tsx
+++ b/app/birthday/page.tsx
@ -1,4 +1,3 @@
-import Content from "../../components/Content";
 import PageTitle from "../../components/PageTitle";
 import Video from "../../components/Video";
 import { metadata as defaultMetadata } from "../layout";
@ -24,11 +23,9 @@ export const metadata: Metadata = {
 export default function Page() {
  return (
    <>
-      <PageTitle>📼 1996.MOV</PageTitle>
+      <PageTitle canonical="/birthday">1996.mov</PageTitle>

-      <Content>
-        <Video src={["/static/birthday/birthday.webm", "/static/birthday/birthday.mp4"]} poster={thumbnail.src} />
-      </Content>
+      <Video src={["/static/birthday/birthday.webm", "/static/birthday/birthday.mp4"]} poster={thumbnail.src} />
    </>
  );
 }
--- a/app/cli/page.mdx
+++ b/app/cli/page.mdx
@ -1,5 +1,4 @@
 import PageTitle from "../../components/PageTitle";
-import Content from "../../components/Content";
 import { metadata as defaultMetadata } from "../layout";

 import featuredImage from "./screenshot.png";
@ -19,9 +18,7 @@ export const metadata = {
  },
 };

-<PageTitle>🤖 CLI</PageTitle>
-
-<Content>
+<PageTitle canonical="/cli">CLI</PageTitle>

 > The [Jake Jarvis](https://jarv.is/) CLI (aka the most useless Node module ever published, in history, by anyone, ever).

@ -48,5 +45,3 @@ npx @jakejarvis/cli
 ## License

 MIT © [Jake Jarvis](https://jarv.is/), [Sindre Sorhus](https://sindresorhus.com/)
-
-</Content>
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@ -1,4 +1,3 @@
-import Content from "../../components/Content";
 import PageTitle from "../../components/PageTitle";
 import Link from "../../components/Link";
 import ContactForm from "./form";
@ -7,6 +6,7 @@ import type { Metadata, Route } from "next";

 export const metadata: Metadata = {
  title: "Contact Me",
+  description: "Fill out this quick form and I'll get back to you as soon as I can.",
  openGraph: {
    ...defaultMetadata.openGraph,
    title: "Contact Me",
@ -20,32 +20,30 @@ export const metadata: Metadata = {

 export default function Page() {
  return (
-    <>
-      <PageTitle>📬 Contact Me</PageTitle>
+    <div
+      style={{
+        maxWidth: "600px",
+        margin: "0 auto",
+      }}
+    >
+      <PageTitle canonical="/contact">Contact</PageTitle>

-      <Content
-        style={{
-          maxWidth: "600px",
-          margin: "0 auto",
-        }}
-      >
-        <p>
-          Fill out this quick form and I'll get back to you as soon as I can! You can also{" "}
-          <Link href="mailto:jake@jarv.is">email me directly</Link> or send me a{" "}
-          <Link href="https://fediverse.jarv.is/@jake">direct message on Mastodon</Link>.
-        </p>
-        <p>
-          🔐 You can grab my public key here:{" "}
-          <Link href={"/pubkey.asc" as Route} title="My Public PGP Key" rel="pgpkey authn" openInNewTab>
-            <code style={{ fontSize: "0.925em", letterSpacing: "0.075em", wordSpacing: "-0.3em" }}>
-              6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39
-            </code>
-          </Link>
-          .
-        </p>
+      <p>
+        Fill out this quick form and I'll get back to you as soon as I can! You can also{" "}
+        <Link href="mailto:jake@jarv.is">email me directly</Link> or send me a{" "}
+        <Link href="https://fediverse.jarv.is/@jake">direct message on Mastodon</Link>.
+      </p>
+      <p>
+        🔐 You can grab my public key here:{" "}
+        <Link href={"/pubkey.asc" as Route} title="My Public PGP Key" rel="pgpkey authn" openInNewTab>
+          <code style={{ fontSize: "0.925em", letterSpacing: "0.075em", wordSpacing: "-0.3em" }}>
+            6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39
+          </code>
+        </Link>
+        .
+      </p>

-        <ContactForm />
-      </Content>
-    </>
+      <ContactForm />
+    </div>
  );
 }
--- a/app/global.css
+++ b/app/global.css
@ -14,8 +14,7 @@ pre {
 /* https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/ */
@media (prefers-reduced-motion: reduce) {
  * {
-    animation-duration: 0.001ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.001ms !important;
+    animation: none !important;
+    transition: none !important;
  }
 }
--- a/app/hillary/page.tsx
+++ b/app/hillary/page.tsx
@ -1,4 +1,3 @@
-import Content from "../../components/Content";
 import PageTitle from "../../components/PageTitle";
 import Link from "../../components/Link";
 import Video from "../../components/Video";
@ -25,42 +24,40 @@ export const metadata: Metadata = {
 export default function Page() {
  return (
    <>
-      <PageTitle>My Brief Apperance in Hillary Clinton's DNC Video</PageTitle>
+      <PageTitle canonical="/hillary">HRC.mov</PageTitle>

-      <Content>
-        <Video
-          src={[
-            "/static/hillary/convention-720p.webm",
-            "/static/hillary/convention-720p.mp4",
-            "/static/hillary/subs.en.vtt",
-          ]}
-          poster={thumbnail.src}
-        />
+      <Video
+        src={[
+          "/static/hillary/convention-720p.webm",
+          "/static/hillary/convention-720p.mp4",
+          "/static/hillary/subs.en.vtt",
+        ]}
+        poster={thumbnail.src}
+      />

-        <p
-          style={{
-            textAlign: "center",
-            fontSize: "0.9em",
-            lineHeight: 1.8,
-            margin: "1.25em 1em 0 1em",
-            color: "var(--colors-mediumLight)",
-          }}
-        >
-          Video is property of{" "}
-          <Link href="https://www.hillaryclinton.com/" style={{ fontWeight: 700 }}>
-            Hillary for America
-          </Link>
-          , the{" "}
-          <Link href="https://democrats.org/" style={{ fontWeight: 700 }}>
-            Democratic National Committee
-          </Link>
-          , and{" "}
-          <Link href="https://cnnpressroom.blogs.cnn.com/" style={{ fontWeight: 700 }}>
-            CNN / WarnerMedia
-          </Link>
-          . &copy; 2016.
-        </p>
-      </Content>
+      <p
+        style={{
+          textAlign: "center",
+          fontSize: "0.9em",
+          lineHeight: 1.8,
+          margin: "1.25em 1em 0 1em",
+          color: "var(--colors-mediumLight)",
+        }}
+      >
+        Video is property of{" "}
+        <Link href="https://www.hillaryclinton.com/" style={{ fontWeight: 700 }}>
+          Hillary for America
+        </Link>
+        , the{" "}
+        <Link href="https://democrats.org/" style={{ fontWeight: 700 }}>
+          Democratic National Committee
+        </Link>
+        , and{" "}
+        <Link href="https://cnnpressroom.blogs.cnn.com/" style={{ fontWeight: 700 }}>
+          CNN / WarnerMedia
+        </Link>
+        . &copy; 2016.
+      </p>
    </>
  );
 }
--- a/app/layout.module.css
+++ b/app/layout.module.css
@ -7,6 +7,9 @@
 .default {
  width: 100%;
  padding: 1.5em;
+  font-size: 0.9em;
+  line-height: 1.7;
+  color: var(--colors-text);
 }

 .container {
@ -14,3 +17,10 @@
  margin: 0 auto;
  display: block;
 }
+
+@media (max-width: 768px) {
+  .default {
+    font-size: 0.925em;
+    line-height: 1.85;
+  }
+}
--- a/app/leo/page.tsx
+++ b/app/leo/page.tsx
@ -1,4 +1,3 @@
-import Content from "../../components/Content";
 import PageTitle from "../../components/PageTitle";
 import Link from "../../components/Link";
 import Video from "../../components/Video";
@ -25,34 +24,29 @@ export const metadata: Metadata = {
 export default function Page() {
  return (
    <>
-      <PageTitle>Facebook App on "The Lab with Leo Laporte"</PageTitle>
+      <PageTitle canonical="/leo">TheLab.mov</PageTitle>

-      <Content>
-        <Video
-          src={["/static/leo/leo.webm", "/static/leo/leo.mp4", "/static/leo/subs.en.vtt"]}
-          poster={thumbnail.src}
-        />
+      <Video src={["/static/leo/leo.webm", "/static/leo/leo.mp4", "/static/leo/subs.en.vtt"]} poster={thumbnail.src} />

-        <p
-          style={{
-            textAlign: "center",
-            fontSize: "0.9em",
-            lineHeight: 1.8,
-            margin: "1.25em 1em 0 1em",
-            color: "var(--colors-mediumLight)",
-          }}
-        >
-          Video is property of{" "}
-          <Link href="https://web.archive.org/web/20070511004304/www.g4techtv.ca" style={{ fontWeight: 700 }}>
-            G4techTV Canada
-          </Link>{" "}
-          &amp;{" "}
-          <Link href="https://leolaporte.com/" style={{ fontWeight: 700 }}>
-            Leo Laporte
-          </Link>
-          . &copy; 2007 G4 Media, Inc.
-        </p>
-      </Content>
+      <p
+        style={{
+          textAlign: "center",
+          fontSize: "0.9em",
+          lineHeight: 1.8,
+          margin: "1.25em 1em 0 1em",
+          color: "var(--colors-mediumLight)",
+        }}
+      >
+        Video is property of{" "}
+        <Link href="https://web.archive.org/web/20070511004304/www.g4techtv.ca" style={{ fontWeight: 700 }}>
+          G4techTV Canada
+        </Link>{" "}
+        &amp;{" "}
+        <Link href="https://leolaporte.com/" style={{ fontWeight: 700 }}>
+          Leo Laporte
+        </Link>
+        . &copy; 2007 G4 Media, Inc.
+      </p>
    </>
  );
 }
--- a/app/license/page.mdx
+++ b/app/license/page.mdx
@ -1,5 +1,4 @@
 import PageTitle from "../../components/PageTitle";
-import Content from "../../components/Content";
 import { metadata as defaultMetadata } from "../layout";

 export const metadata = {
@ -15,9 +14,7 @@ export const metadata = {
  },
 };

-<PageTitle>📜 License</PageTitle>
-
-<Content>
+<PageTitle canonical="/license">License</PageTitle>

 Unless otherwise noted, content on this website is published under the [**Creative Commons Attribution 4.0 International Public License**](https://creativecommons.org/licenses/by/4.0/) (CC-BY-4.0), which means that you can copy, redistribute, remix, transform, and build upon the content for any purpose as long as you give appropriate credit (such as a hyperlink to the original URL).

@ -196,5 +193,3 @@ d. Nothing in this Public License constitutes or may be interpreted as a limitat
 > Creative Commons is not a party to its public licenses. Notwithstanding, Creative Commons may elect to apply one of its public licenses to material it publishes and in those instances will be considered the “Licensor.” The text of the Creative Commons public licenses is dedicated to the public domain under the [_CC0 Public Domain Dedication_](https://creativecommons.org/publicdomain/zero/1.0/legalcode). Except for the limited purpose of indicating that material is shared under a Creative Commons public license or as otherwise permitted by the Creative Commons policies published at [creativecommons.org/policies](http://creativecommons.org/policies), Creative Commons does not authorize the use of the trademark “Creative Commons” or any other trademark or logo of Creative Commons without its prior written consent including, without limitation, in connection with any unauthorized modifications to any of its public licenses or any other arrangements, understandings, or agreements concerning use of licensed material. For the avoidance of doubt, this paragraph does not form part of the public licenses.
 >
 > Creative Commons may be contacted at [creativecommons.org](https://creativecommons.org/).
-
-</Content>
--- a/app/notes/[slug]/page.module.css
+++ b/app/notes/[slug]/page.module.css
@ -1,7 +1,7 @@
 .meta {
  display: inline-flex;
  flex-wrap: wrap;
-  font-size: 0.825em;
+  font-size: 0.925em;
  line-height: 2.3;
  letter-spacing: 0.04em;
  color: var(--colors-medium);
@ -46,7 +46,7 @@

 .title {
  margin: 0.3em 0 0.5em -1px; /* misaligned left margin, super nitpicky */
-  font-size: 2.1em;
+  font-size: 2.3em;
  line-height: 1.3;
  font-weight: 700;
 }
@ -68,6 +68,6 @@

@media (max-width: 768px) {
  .title {
-    font-size: 1.8em;
+    font-size: 1.9em;
  }
 }
--- a/app/notes/[slug]/page.tsx
+++ b/app/notes/[slug]/page.tsx
@ -1,6 +1,5 @@
 import { Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import Content from "../../../components/Content";
 import Link from "../../../components/Link";
 import Time from "../../../components/Time";
 import Comments from "../../../components/Comments";
@ -145,9 +144,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
        />
      </h1>

-      <Content>
-        <MDXContent />
-      </Content>
+      <MDXContent />

      {!frontmatter.noComments && (
        <div id="comments" className={styles.comments}>
--- a/app/notes/page.module.css
+++ b/app/notes/page.module.css
@ -5,10 +5,10 @@
 }

 .section:first-of-type {
-  margin-top: 0;
+  margin-top: 0.25em;
 }
 .section:last-of-type {
-  margin-bottom: 0;
+  margin-bottom: 0.25em;
 }

 .year {
--- a/app/notes/page.tsx
+++ b/app/notes/page.tsx
@ -1,4 +1,3 @@
-import Content from "../../components/Content";
 import Link from "../../components/Link";
 import Time from "../../components/Time";
 import { getAllPosts } from "../../lib/helpers/posts";
@ -59,5 +58,5 @@ export default async function Page() {
  // grouped posts enter this component ordered chronologically -- we want reverse chronological
  const reversed = sections.reverse();

-  return <Content>{reversed}</Content>;
+  return <>{reversed}</>;
 }
--- a/app/page.module.css
+++ b/app/page.module.css
@ -1,22 +1,22 @@
 .page h1 {
  margin: 0 0 0.5em -1px; /* misaligned left margin, super nitpicky */
-  font-size: 1.75em;
+  font-size: 1.925em;
  font-weight: 500;
-  line-height: 1.1;
+  line-height: 1.2;
  color: var(--colors-text);
 }

 .page h2 {
  margin: 0.5em 0 0.5em -1px;
-  font-size: 1.2em;
+  font-size: 1.3em;
  font-weight: 400;
-  line-height: 1.4;
+  line-height: 1.5;
  color: var(--colors-text);
 }

 .page p {
  margin: 0.85em 0;
-  font-size: 0.95em;
+  font-size: 1.05em;
  line-height: 1.7;
  color: var(--colors-text);
 }
@ -74,15 +74,15 @@

@media (max-width: 768px) {
  .page h1 {
-    font-size: 1.6em;
+    font-size: 1.8em;
  }

  .page h2 {
-    font-size: 1.25em;
+    font-size: 1.3em;
  }

  .page p {
-    font-size: 0.925em;
-    line-height: 1.825;
+    font-size: 1em;
+    line-height: 1.9;
  }
 }
--- a/app/previously/page.module.css
+++ b/app/previously/page.module.css
@ -1,8 +1,9 @@
 .wackyWrapper {
  font-weight: 700;
-  font-size: 1em;
-  text-align: center;
+  font-size: 1.15em;
+}

+body:has(.wackyWrapper) {
  /* classic windows 9x cursor easter egg */
  cursor:
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZklEQVR4AWIAgn/uBT6A9uoAAwAQiIJo97/0Rgy0ANoJH8MPeEgtqwPQEACqCoQHAKECQKgAECoAhAoAoQJAqAAQxh1oPQfcW3kJpxHtL1AAHAwEwwdYiH8BIEgBTBRAAAEEEEAAG7mRt30hEhoLAAAAAElFTkSuQmCC")
@ -10,7 +11,7 @@
    auto;
 }

-.wackyWrapper a {
+body:has(.wackyWrapper) a {
  /* windows 9x hand cursor */
  cursor:
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAACVBMVEVHcEwAAAD///8W1S+BAAAAAXRSTlMAQObYZgAAAEdJREFUeAFjoAVghTGkHIhghMAYmQEwxlIYYxlYlSiQMQEsELUKyli1ahWYwQZjMGIwGLKQGA4QA1EYEP0rGVAZrKGhSF4BAHw/HsVwshytAAAAAElFTkSuQmCC")
--- a/app/previously/page.tsx
+++ b/app/previously/page.tsx
@ -1,4 +1,3 @@
-import Content from "../../components/Content";
 import PageTitle from "../../components/PageTitle";
 import Link from "../../components/Link";
 import Figure from "../../components/Figure";
@ -41,157 +40,154 @@ export const metadata: Metadata = {

 export default async function Page() {
  return (
-    <>
-      <PageTitle>🕰️ Previously on...</PageTitle>
+    <div
+      className={styles.wackyWrapper}
+      style={{
+        fontFamily: `${ComicNeue.style.fontFamily}, var(--fonts-sans)`,
+      }}
+    >
+      <PageTitle canonical="/previously">Previously</PageTitle>

-      <Content
-        className={styles.wackyWrapper}
-        style={{
-          fontFamily: `${ComicNeue.style.fontFamily}, var(--fonts-sans)`,
-        }}
-      >
-        <Figure src={img_wayback} alt="Timeline of this website's past." priority className={styles.screenshot}>
-          ...the{" "}
-          <Link href="https://web.archive.org/web/20010501000000*/jakejarvis.com">Cringey Chronicles&trade;</Link> of
-          this website's past.
-        </Figure>
+      <Figure src={img_wayback} alt="Timeline of this website's past." priority className={styles.screenshot}>
+        ...the <Link href="https://web.archive.org/web/20010501000000*/jakejarvis.com">Cringey Chronicles&trade;</Link>{" "}
+        of this website's past.
+      </Figure>

-        <HorizontalRule className={styles.divider} />
+      <HorizontalRule className={styles.divider} />

-        <p style={{ marginBottom: "0.5em" }}>
-          🚨 Trigger warning: excessive marquees, animated GIFs, Comic Sans, popups,{" "}
-          <CodeInline
+      <p style={{ textAlign: "center", margin: "0.5em 0" }}>
+        🚨 Trigger warning: excessive marquees, animated GIFs, Comic Sans, popups,{" "}
+        <CodeInline
+          style={{
+            fontSize: "0.8em",
+            fontWeight: 400,
+          }}
+        >
+          color: <span style={{ color: "#32cd32" }}>limegreen</span>
+        </CodeInline>{" "}
+        ahead...
+      </p>
+
+      <p style={{ textAlign: "center", fontSize: "0.95em", margin: "0.5em 0" }}>
+        <Link href="/y2k">
+          <svg
+            fill="currentColor"
+            stroke="currentColor"
+            strokeWidth="0"
+            viewBox="0 0 24 24"
+            role="img"
            style={{
-              fontSize: "0.8em",
-              fontWeight: 400,
+              display: "inline",
+              width: "1.2em",
+              height: "1.2em",
+              verticalAlign: "-0.15em",
+              marginRight: "0.1em",
+              fill: "currentColor",
+              stroke: "currentcolor",
+              strokeWidth: 0,
            }}
+            xmlns="http://www.w3.org/2000/svg"
          >
-            color: <span style={{ color: "#32cd32" }}>limegreen</span>
-          </CodeInline>{" "}
-          ahead...
-        </p>
+            <path d="M5.712 1.596l-.756.068-.238.55.734-.017zm1.39.927l-.978.137-.326.807.96-.12.345-.824zM4.89 3.535l-.72.05-.24.567.721-.017zm3.724.309l-1.287.068-.394.96 1.27-.052zm1.87.566l-1.579.069-.566 1.357 1.596-.088.548-1.338zm-4.188.037l-.977.153-.343.806.976-.12zm6.144.668l-1.87.135-.637 1.527 1.87-.154zm2.925.219c-.11 0-.222 0-.334.002l-.767 1.85c1.394-.03 2.52.089 3.373.38l-1.748 4.201c-.955-.304-2.082-.444-3.36-.394l-.54 1.305a8.762 8.762 0 0 1 3.365.396l-1.663 4.014c-1.257-.27-2.382-.395-3.387-.344l-.782 1.887c3.363-.446 6.348.822 9.009 3.773L24 9.23c-2.325-2.575-5.2-3.88-8.637-3.896zm-.644.002l-2.024.12-.687 1.68 2.025-.19zm-10.603.05l-.719.036-.224.566h.703l.24-.601zm3.69.397l-1.287.069-.395.959 1.27-.05zM5.54 6.3l-.994.154-.344.807.98-.121zm4.137.066l-1.58.069L7.53 7.77l1.596-.085.55-1.32zm1.955.688l-1.87.135-.636 1.527 1.887-.154zm2.282.19l-2.01.136-.7 1.682 2.04-.19.67-1.63zm-10.57.066l-.739.035-.238.564h.72l.257-.6zm3.705.293l-1.303.085-.394.96 1.287-.034zm11.839.255a6.718 6.718 0 0 1 2.777 1.717l-1.75 4.237c-.617-.584-1.15-.961-1.611-1.149l-1.201-.498zM4.733 8.22l-.976.154-.344.807.961-.12.36-.841zm4.186 0l-1.594.052-.549 1.354L8.37 9.54zm1.957.668L8.99 9.04l-.619 1.508 1.87-.135.636-1.527zm2.247.275l-2.007.12-.703 1.665 2.042-.156zM2.52 9.267l-.718.033-.24.549.718-.016zm3.725.273l-1.289.07-.41.96 1.287-.03.412-1zm1.87.6l-1.596.05-.55 1.356 1.598-.084.547-1.322zm-4.186.037l-.979.136-.324.805.96-.119zm6.14.633l-1.87.154-.653 1.527 1.906-.154zm2.267.275l-2.026.12-.686 1.663 2.025-.172zm-10.569.031l-.739.037-.238.565.72-.016zm3.673.362l-1.289.068-.41.978 1.305-.05zm-2.285.533l-.976.154-.326.805.96-.12.342-.84zm4.153.07l-1.596.066-.565 1.356 1.612-.084zm1.957.666l-1.889.154-.617 1.526 1.886-.15zm2.28.223l-2.025.12-.685 1.665 2.041-.172.67-1.613zm-10.584.05l-.738.053L0 13.64l.72-.02.24-.6zm3.705.31l-1.285.07-.395.976 1.287-.05.393-.997zm11.923.07c1.08.29 2.024.821 2.814 1.613l-1.715 4.183c-.892-.754-1.82-1.32-2.814-1.664l1.715-4.133zm-10.036.515L4.956 14l-.549 1.32 1.578-.066.567-1.338zm-4.184.014l-.996.156-.309.79.961-.106zm6.14.67l-1.904.154-.617 1.527 1.89-.154.632-1.527zm2.231.324l-2.025.123-.686 1.682 2.026-.174zm-6.863.328l-1.3.068-.397.98 1.285-.054zm1.871.584l-1.578.068-.566 1.334 1.595-.064zm1.953.701l-1.867.137-.635 1.51 1.87-.137zm2.23.31l-2.005.122-.703 1.68 2.04-.19.67-1.61z"></path>
+          </svg>{" "}
+          Click here for the <em>full</em> experience anyway.
+        </Link>
+      </p>

-        <p style={{ fontSize: "0.95em", marginBottom: "0.5em" }}>
-          <Link href="/y2k">
-            <svg
-              fill="currentColor"
-              stroke="currentColor"
-              strokeWidth="0"
-              viewBox="0 0 24 24"
-              role="img"
-              style={{
-                display: "inline",
-                width: "1.2em",
-                height: "1.2em",
-                verticalAlign: "-0.15em",
-                marginRight: "0.1em",
-                fill: "currentColor",
-                stroke: "currentcolor",
-                strokeWidth: 0,
-              }}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M5.712 1.596l-.756.068-.238.55.734-.017zm1.39.927l-.978.137-.326.807.96-.12.345-.824zM4.89 3.535l-.72.05-.24.567.721-.017zm3.724.309l-1.287.068-.394.96 1.27-.052zm1.87.566l-1.579.069-.566 1.357 1.596-.088.548-1.338zm-4.188.037l-.977.153-.343.806.976-.12zm6.144.668l-1.87.135-.637 1.527 1.87-.154zm2.925.219c-.11 0-.222 0-.334.002l-.767 1.85c1.394-.03 2.52.089 3.373.38l-1.748 4.201c-.955-.304-2.082-.444-3.36-.394l-.54 1.305a8.762 8.762 0 0 1 3.365.396l-1.663 4.014c-1.257-.27-2.382-.395-3.387-.344l-.782 1.887c3.363-.446 6.348.822 9.009 3.773L24 9.23c-2.325-2.575-5.2-3.88-8.637-3.896zm-.644.002l-2.024.12-.687 1.68 2.025-.19zm-10.603.05l-.719.036-.224.566h.703l.24-.601zm3.69.397l-1.287.069-.395.959 1.27-.05zM5.54 6.3l-.994.154-.344.807.98-.121zm4.137.066l-1.58.069L7.53 7.77l1.596-.085.55-1.32zm1.955.688l-1.87.135-.636 1.527 1.887-.154zm2.282.19l-2.01.136-.7 1.682 2.04-.19.67-1.63zm-10.57.066l-.739.035-.238.564h.72l.257-.6zm3.705.293l-1.303.085-.394.96 1.287-.034zm11.839.255a6.718 6.718 0 0 1 2.777 1.717l-1.75 4.237c-.617-.584-1.15-.961-1.611-1.149l-1.201-.498zM4.733 8.22l-.976.154-.344.807.961-.12.36-.841zm4.186 0l-1.594.052-.549 1.354L8.37 9.54zm1.957.668L8.99 9.04l-.619 1.508 1.87-.135.636-1.527zm2.247.275l-2.007.12-.703 1.665 2.042-.156zM2.52 9.267l-.718.033-.24.549.718-.016zm3.725.273l-1.289.07-.41.96 1.287-.03.412-1zm1.87.6l-1.596.05-.55 1.356 1.598-.084.547-1.322zm-4.186.037l-.979.136-.324.805.96-.119zm6.14.633l-1.87.154-.653 1.527 1.906-.154zm2.267.275l-2.026.12-.686 1.663 2.025-.172zm-10.569.031l-.739.037-.238.565.72-.016zm3.673.362l-1.289.068-.41.978 1.305-.05zm-2.285.533l-.976.154-.326.805.96-.12.342-.84zm4.153.07l-1.596.066-.565 1.356 1.612-.084zm1.957.666l-1.889.154-.617 1.526 1.886-.15zm2.28.223l-2.025.12-.685 1.665 2.041-.172.67-1.613zm-10.584.05l-.738.053L0 13.64l.72-.02.24-.6zm3.705.31l-1.285.07-.395.976 1.287-.05.393-.997zm11.923.07c1.08.29 2.024.821 2.814 1.613l-1.715 4.183c-.892-.754-1.82-1.32-2.814-1.664l1.715-4.133zm-10.036.515L4.956 14l-.549 1.32 1.578-.066.567-1.338zm-4.184.014l-.996.156-.309.79.961-.106zm6.14.67l-1.904.154-.617 1.527 1.89-.154.632-1.527zm2.231.324l-2.025.123-.686 1.682 2.026-.174zm-6.863.328l-1.3.068-.397.98 1.285-.054zm1.871.584l-1.578.068-.566 1.334 1.595-.064zm1.953.701l-1.867.137-.635 1.51 1.87-.137zm2.23.31l-2.005.122-.703 1.68 2.04-.19.67-1.61z"></path>
-            </svg>{" "}
-            Click here for the <em>full</em> experience anyway.
-          </Link>
-        </p>
+      <figure className={styles.screenshot}>
+        <iframe
+          src="https://jakejarvis.github.io/my-first-website/"
+          title="My Terrible, Horrible, No Good, Very Bad First Website"
+          sandbox="allow-same-origin allow-scripts allow-popups"
+          className={styles.iframe}
+          style={{ height: "500px" }}
+        />
+        <figcaption>
+          <Link href="https://jakejarvis.github.io/my-first-website/">November 2001</Link> (
+          <Link href="https://github.com/jakejarvis/my-first-website">view source</Link>)
+        </figcaption>
+      </figure>

-        <figure className={styles.screenshot}>
-          <iframe
-            src="https://jakejarvis.github.io/my-first-website/"
-            title="My Terrible, Horrible, No Good, Very Bad First Website"
-            sandbox="allow-same-origin allow-scripts allow-popups"
-            className={styles.iframe}
-            style={{ height: "500px" }}
-          />
-          <figcaption>
-            <Link href="https://jakejarvis.github.io/my-first-website/">November 2001</Link> (
-            <Link href="https://github.com/jakejarvis/my-first-website">view source</Link>)
-          </figcaption>
-        </figure>
+      <HorizontalRule className={styles.divider} />

-        <HorizontalRule className={styles.divider} />
+      <Figure src={img_2002_02} className={styles.screenshot}>
+        February 2002
+      </Figure>

-        <Figure src={img_2002_02} className={styles.screenshot}>
-          February 2002
-        </Figure>
+      <HorizontalRule className={styles.divider} />

-        <HorizontalRule className={styles.divider} />
+      <Figure src={img_2002_10} className={styles.screenshot}>
+        October 2002
+      </Figure>

-        <Figure src={img_2002_10} className={styles.screenshot}>
-          October 2002
-        </Figure>
+      <HorizontalRule className={styles.divider} />

-        <HorizontalRule className={styles.divider} />
+      <Figure src={img_2003_08} className={styles.screenshot}>
+        August 2003
+      </Figure>

-        <Figure src={img_2003_08} className={styles.screenshot}>
-          August 2003
-        </Figure>
+      <HorizontalRule className={styles.divider} />

-        <HorizontalRule className={styles.divider} />
+      <Figure src={img_2004_11} className={styles.screenshot}>
+        November 2004
+      </Figure>

-        <Figure src={img_2004_11} className={styles.screenshot}>
-          November 2004
-        </Figure>
+      <HorizontalRule className={styles.divider} />

-        <HorizontalRule className={styles.divider} />
+      <Figure src={img_2006_04} className={styles.screenshot}>
+        April 2006
+      </Figure>

-        <Figure src={img_2006_04} className={styles.screenshot}>
-          April 2006
-        </Figure>
+      <HorizontalRule className={styles.divider} />

-        <HorizontalRule className={styles.divider} />
+      <Figure src={img_2006_05} className={styles.screenshot}>
+        May 2006
+      </Figure>

-        <Figure src={img_2006_05} className={styles.screenshot}>
-          May 2006
-        </Figure>
+      <HorizontalRule className={styles.divider} />

-        <HorizontalRule className={styles.divider} />
+      <Figure src={img_2007_01} className={styles.screenshot}>
+        January 2007
+      </Figure>

-        <Figure src={img_2007_01} className={styles.screenshot}>
-          January 2007
-        </Figure>
+      <HorizontalRule className={styles.divider} />

-        <HorizontalRule className={styles.divider} />
+      <Figure src={img_2007_04} className={styles.screenshot}>
+        April 2007
+      </Figure>

-        <Figure src={img_2007_04} className={styles.screenshot}>
-          April 2007
-        </Figure>
+      <HorizontalRule className={styles.divider} />

-        <HorizontalRule className={styles.divider} />
+      <Figure src={img_2007_05} className={styles.screenshot}>
+        May 2007
+      </Figure>

-        <Figure src={img_2007_05} className={styles.screenshot}>
-          May 2007
-        </Figure>
+      <HorizontalRule className={styles.divider} />

-        <HorizontalRule className={styles.divider} />
+      <Figure src={img_2009_07} className={styles.screenshot}>
+        July 2009
+      </Figure>

-        <Figure src={img_2009_07} className={styles.screenshot}>
-          July 2009
-        </Figure>
+      <HorizontalRule className={styles.divider} />

-        <HorizontalRule className={styles.divider} />
+      <Figure src={img_2012_09} alt="September 2012" className={styles.screenshot}>
+        <Link href="https://focused-knuth-7bc10d.netlify.app/">September 2012</Link> (
+        <Link href="https://github.com/jakejarvis/jarv.is/tree/v1">view source</Link>)
+      </Figure>

-        <Figure src={img_2012_09} alt="September 2012" className={styles.screenshot}>
-          <Link href="https://focused-knuth-7bc10d.netlify.app/">September 2012</Link> (
-          <Link href="https://github.com/jakejarvis/jarv.is/tree/v1">view source</Link>)
-        </Figure>
+      <HorizontalRule className={styles.divider} />

-        <HorizontalRule className={styles.divider} />
+      <Figure src={img_2018_04} alt="April 2018" className={styles.screenshot}>
+        <Link href="https://hungry-mayer-40e790.netlify.app/">April 2018</Link> (
+        <Link href="https://github.com/jakejarvis/jarv.is/tree/v2">view source</Link>)
+      </Figure>

-        <Figure src={img_2018_04} alt="April 2018" className={styles.screenshot}>
-          <Link href="https://hungry-mayer-40e790.netlify.app/">April 2018</Link> (
-          <Link href="https://github.com/jakejarvis/jarv.is/tree/v2">view source</Link>)
-        </Figure>
+      <HorizontalRule className={styles.divider} />

-        <HorizontalRule className={styles.divider} />
-
-        <Figure src={img_2020_03} alt="March 2020" className={styles.screenshot}>
-          <Link href="https://quiet-truffle-92842d.netlify.app/">March 2020</Link> (
-          <Link href="https://github.com/jakejarvis/jarv.is-hugo">view source</Link>)
-        </Figure>
-      </Content>
-    </>
+      <Figure src={img_2020_03} alt="March 2020" className={styles.screenshot}>
+        <Link href="https://quiet-truffle-92842d.netlify.app/">March 2020</Link> (
+        <Link href="https://github.com/jakejarvis/jarv.is-hugo">view source</Link>)
+      </Figure>
+    </div>
  );
 }
--- a/app/privacy/page.mdx
+++ b/app/privacy/page.mdx
@ -1,5 +1,4 @@
 import PageTitle from "../../components/PageTitle";
-import Content from "../../components/Content";
 import { metadata as defaultMetadata } from "../layout";

 export const metadata = {
@ -15,9 +14,7 @@ export const metadata = {
  },
 };

-<PageTitle>🕵️ Privacy</PageTitle>
-
-<Content>
+<PageTitle canonical="/privacy">Privacy</PageTitle>

 Okay, this is an easy one. 😉

@ -52,5 +49,3 @@ Occasionally, embedded content from third-party services is included in posts, a
 Using [**Cloudflare Turnstile**](https://www.cloudflare.com/products/turnstile/) to fight bot spam on the [contact form](/contact) was an easy choice over seemingly unavoidable alternatives like [reCAPTCHA](https://developers.google.com/recaptcha/).

 You can refer to Cloudflare's [privacy policy](https://www.cloudflare.com/privacypolicy/) and [terms of service](https://www.cloudflare.com/website-terms/) for more details. While some information is sent to the Turnstile API about your behavior (on the contact page only), at least you won't be helping a certain internet conglomerate [train their self-driving cars](https://blog.cloudflare.com/moving-from-recaptcha-to-hcaptcha/). 🚗
-
-</Content>
--- a/app/projects/page.module.css
+++ b/app/projects/page.module.css
@ -5,16 +5,16 @@
  align-items: flex-start;
  width: 100%;
  line-height: 1.1;
+  gap: 1em;
 }

 .card {
  flex-grow: 1;
-  margin: 0.6em;
  width: 370px;
  padding: 1.2em 1.2em 0.8em 1.2em;
  border: 1px solid var(--colors-kindaLight);
  border-radius: var(--radii-corner);
-  font-size: 0.85em;
+  font-size: 0.9em;
  color: var(--colors-mediumDark);
  transition: border var(--transitions-fade);
 }
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@ -1,5 +1,4 @@
 import { graphql } from "@octokit/graphql";
-import Content from "../../components/Content";
 import PageTitle from "../../components/PageTitle";
 import Link from "../../components/Link";
 import RelativeTime from "../../components/RelativeTime";
@ -111,94 +110,92 @@ export default async function Page() {

  return (
    <>
-      <PageTitle>💾 Projects</PageTitle>
+      <PageTitle canonical="/projects">Projects</PageTitle>

-      <Content>
-        <div className={styles.grid}>
-          {repos?.map((repo) => (
-            <div key={repo.name} className={styles.card}>
-              <Link
-                // @ts-ignore
-                href={repo.url}
-                className={styles.name}
-              >
-                {repo.name}
-              </Link>
+      <div className={styles.grid}>
+        {repos?.map((repo) => (
+          <div key={repo.name} className={styles.card}>
+            <Link
+              // @ts-ignore
+              href={repo.url}
+              className={styles.name}
+            >
+              {repo.name}
+            </Link>

-              {repo.description && <p className={styles.description}>{repo.description}</p>}
+            {repo.description && <p className={styles.description}>{repo.description}</p>}

-              <div className={styles.meta}>
-                {repo.language && (
-                  <div className={styles.metaItem}>
-                    {repo.language.color && (
-                      <span className={styles.metaLanguage} style={{ backgroundColor: repo.language.color }} />
-                    )}
-                    {repo.language.name}
-                  </div>
-                )}
-
-                {repo.stars && repo.stars > 0 && (
-                  <div className={styles.metaItem}>
-                    <Link
-                      // @ts-ignore
-                      href={`${repo.url}/stargazers`}
-                      title={`${commaNumber(repo.stars)} ${repo.stars === 1 ? "star" : "stars"}`}
-                      plain
-                      className={styles.metaLink}
-                    >
-                      <GoStar className={styles.metaIcon} />
-                      {commaNumber(repo.stars)}
-                    </Link>
-                  </div>
-                )}
-
-                {repo.forks && repo.forks > 0 && (
-                  <div className={styles.metaItem}>
-                    <Link
-                      // @ts-ignore
-                      href={`${repo.url}/network/members`}
-                      title={`${commaNumber(repo.forks)} ${repo.forks === 1 ? "fork" : "forks"}`}
-                      plain
-                      className={styles.metaLink}
-                    >
-                      <GoRepoForked className={styles.metaIcon} />
-                      {commaNumber(repo.forks)}
-                    </Link>
-                  </div>
-                )}
-
-                {/* only use relative "time ago" on client side, since it'll be outdated via SSG and cause hydration errors */}
+            <div className={styles.meta}>
+              {repo.language && (
                <div className={styles.metaItem}>
-                  <RelativeTime date={repo.updatedAt} verb="Updated" staticFormat="MMM D, YYYY" />
+                  {repo.language.color && (
+                    <span className={styles.metaLanguage} style={{ backgroundColor: repo.language.color }} />
+                  )}
+                  {repo.language.name}
                </div>
+              )}
+
+              {repo.stars && repo.stars > 0 && (
+                <div className={styles.metaItem}>
+                  <Link
+                    // @ts-ignore
+                    href={`${repo.url}/stargazers`}
+                    title={`${commaNumber(repo.stars)} ${repo.stars === 1 ? "star" : "stars"}`}
+                    plain
+                    className={styles.metaLink}
+                  >
+                    <GoStar className={styles.metaIcon} />
+                    {commaNumber(repo.stars)}
+                  </Link>
+                </div>
+              )}
+
+              {repo.forks && repo.forks > 0 && (
+                <div className={styles.metaItem}>
+                  <Link
+                    // @ts-ignore
+                    href={`${repo.url}/network/members`}
+                    title={`${commaNumber(repo.forks)} ${repo.forks === 1 ? "fork" : "forks"}`}
+                    plain
+                    className={styles.metaLink}
+                  >
+                    <GoRepoForked className={styles.metaIcon} />
+                    {commaNumber(repo.forks)}
+                  </Link>
+                </div>
+              )}
+
+              {/* only use relative "time ago" on client side, since it'll be outdated via SSG and cause hydration errors */}
+              <div className={styles.metaItem}>
+                <RelativeTime date={repo.updatedAt} verb="Updated" staticFormat="MMM D, YYYY" />
              </div>
            </div>
-          ))}
-        </div>
+          </div>
+        ))}
+      </div>

-        <p
-          style={{
-            textAlign: "center",
-            marginBottom: 0,
-            fontWeight: 500,
-          }}
-        >
-          <Link href={`https://github.com/${config.authorSocial.github}`}>
-            View more on{" "}
-            <SiGithub
-              style={{
-                display: "inline",
-                width: "1.2em",
-                height: "1.2em",
-                verticalAlign: "-0.2em",
-                margin: "0 0.15em",
-                fill: "var(--colors-text)",
-              }}
-            />{" "}
-            GitHub...
-          </Link>
-        </p>
-      </Content>
+      <p
+        style={{
+          textAlign: "center",
+          marginBottom: 0,
+          fontWeight: 500,
+        }}
+      >
+        <Link href={`https://github.com/${config.authorSocial.github}`}>
+          View more on{" "}
+          <SiGithub
+            style={{
+              display: "inline",
+              width: "1.2em",
+              height: "1.2em",
+              verticalAlign: "-0.2em",
+              margin: "0 0.15em",
+              fill: "var(--colors-text)",
+            }}
+          />{" "}
+          GitHub...
+        </Link>
+      </p>
    </>
  );
 }
--- a/app/robots.ts
+++ b/app/robots.ts
@ -6,6 +6,7 @@ export const dynamic = "force-static";
 const robots = (): MetadataRoute.Robots => {
  // I'm already _so_ over this shit...
  // https://github.com/ai-robots-txt/ai.robots.txt/blob/main/robots.txt
+  // TODO: dynamically fetch this list from the above repo.
  const naughtySpiders = [
    "AI2Bot",
    "Ai2Bot-Dolma",
@ -13,6 +14,7 @@ const robots = (): MetadataRoute.Robots => {
    "anthropic-ai",
    "Applebot",
    "Applebot-Extended",
+    "Brightbot 1.0",
    "Bytespider",
    "CCBot",
    "ChatGPT-User",
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@ -11,33 +11,30 @@ const sitemap = async (): Promise<MetadataRoute.Sitemap> => {
  const routes: MetadataRoute.Sitemap = [
    {
      // homepage
-      url: config.baseUrl,
+      url: `${config.baseUrl}/`,
      priority: 1.0,
-      changeFrequency: "weekly",
      lastModified: new Date(process.env.RELEASE_DATE || Date.now()), // timestamp frozen when a new build is deployed
    },
    { url: `${config.baseUrl}/tweets/` },
+    { url: `${config.baseUrl}/y2k/` },
  ];

  // add each directory in the app folder as a route (excluding special routes)
  const appDir = path.resolve(process.cwd(), "app");
  (
-    await glob("*", {
+    await glob("**/page.{tsx,mdx}", {
      cwd: appDir,
-      deep: 0,
-      onlyDirectories: true,
-      markDirectories: true,
      ignore: [
-        // don't include special routes, see: https://nextjs.org/docs/app/api-reference/file-conventions/metadata
-        "api",
-        "feed.atom",
-        "feed.xml",
+        // homepage already included manually above
+        "page.tsx",
+        // don't include dynamic routes
+        "notes/[slug]/page.tsx",
      ],
    })
  ).forEach((route) => {
    routes.push({
-      // make all URLs absolute
-      url: `${config.baseUrl}/${route}`,
+      // remove matching page.(tsx|mdx) file and make all URLs absolute
+      url: `${config.baseUrl}/${route.replace(/page\.(tsx|mdx)$/, "")}`,
    });
  });

@ -49,7 +46,10 @@ const sitemap = async (): Promise<MetadataRoute.Sitemap> => {
    });
  });

-  return routes;
+  // sort alphabetically by URL, sometimes fast-glob returns results in a different order
+  routes.sort((a, b) => (a.url < b.url ? -1 : 1));
+
+  return [...routes];
 };

 export default sitemap;
--- a/app/uses/page.mdx
+++ b/app/uses/page.mdx
@ -1,5 +1,4 @@
 import PageTitle from "../../components/PageTitle";
-import Content from "../../components/Content";
 import { metadata as defaultMetadata } from "../layout";

 import featuredImage from "./desktop.png";
@ -19,9 +18,7 @@ export const metadata = {
  },
 };

-<PageTitle>/uses</PageTitle>
-
-<Content>
+<PageTitle canonical="/uses">Uses</PageTitle>

 ~~I regularly get messages asking about which tools I use to work.~~

@ -178,5 +175,3 @@ Other geeky stuff:
 - 2x [**ecobee3 lite**](https://www.ecobee.com/en-us/smart-thermostats/smart-wifi-thermostat/)
 - 2x [**Sonos One**](https://www.sonos.com/en-us/shop/one.html) (with Alexa turned off...hopefully? 🤫)
 - 2x [**Apple TV 4K** (2021)](https://www.apple.com/apple-tv-4k/)
-
-</Content>
--- a/app/zip/page.tsx
+++ b/app/zip/page.tsx
@ -1,4 +1,3 @@
-import Content from "../../components/Content";
 import Link from "../../components/Link";
 import CodeBlock from "../../components/CodeBlock/CodeBlock";
 import { metadata as defaultMetadata } from "../layout";
@ -22,7 +21,7 @@ export const metadata: Metadata = {

 export default async function Page() {
  return (
-    <Content
+    <div
      style={{
        backgroundImage: `url(${backgroundImg.src})`,
        backgroundRepeat: "repeat",
@ -72,6 +71,6 @@ export default async function Page() {
        <span style={{ color: "var(--colors-codeAttribute)" }}>~</span>${" "}
        <span style={{ color: "var(--colors-codeLiteral)" }}>reboot</span> 0
      </CodeBlock>
-    </Content>
+    </div>
  );
 }