Migrate to app router (#2254)

2025-11-05 07:05:40 -05:00 · 2025-02-07 11:33:38 -05:00
parent e97613dda5
commit 8aabb4a66f
179 changed files with 4095 additions and 4951 deletions
--- a/lib/config/index.js
+++ b/lib/config/index.js
@@ -15,8 +15,6 @@ const config = {
  licenseUrl: "https://creativecommons.org/licenses/by/4.0/",
  copyrightYearStart: 2001,
  githubRepo: "jakejarvis/jarv.is",
-  verifyGoogle: "qQhmLTwjNWYgQ7W42nSTq63xIrTch13X_11mmxBE9zk",
-  verifyBing: "164551986DA47F7F6FC0D21A93FFFCA6",
  giscusConfig: {
    // https://github.com/giscus/giscus-component/tree/main/packages/react#readme
    repoId: "MDEwOlJlcG9zaXRvcnk1MzM0MDgxMQ==",
@@ -35,6 +33,7 @@ const config = {
    linkedin: "jakejarvis",
    instagram: "jakejarvis",
    mastodon: "fediverse.jarv.is/@jake",
+    bluesky: "jarv.is",
  },
 };

--- a/lib/config/menu.ts
+++ b/lib/config/menu.ts
@@ -3,22 +3,22 @@ import type { MenuItemProps } from "../../components/MenuItem";

 export const menuItems: MenuItemProps[] = [
  {
-    icon: FiHome,
+    Icon: FiHome,
    text: "Home",
    href: "/",
  },
  {
-    icon: FiEdit3,
+    Icon: FiEdit3,
    text: "Notes",
    href: "/notes",
  },
  {
-    icon: FiCode,
+    Icon: FiCode,
    text: "Projects",
    href: "/projects",
  },
  {
-    icon: FiMail,
+    Icon: FiMail,
    text: "Contact",
    href: "/contact",
  },
--- a/lib/config/seo.ts
+++ b/lib/config/seo.ts
@@ -1,123 +0,0 @@
-import config from "./index.js";
-import { meJpg, faviconPng, faviconIco, appleTouchIconPng } from "./favicons";
-
-import type { DefaultSeoProps, SocialProfileJsonLdProps, ArticleJsonLdProps } from "next-seo";
-
-const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || `https://${config.siteDomain}`;
-
-// Most of this file simply takes the data already defined in ./config.js and translates it into objects that are
-// compatible with next-seo's props:
-// https://github.com/garmeeh/next-seo#default-seo-configuration
-export const defaultSeo: DefaultSeoProps = {
-  defaultTitle: `${config.siteName} – ${config.shortDescription}`,
-  titleTemplate: `%s – ${config.siteName}`, // appends `– siteName` to title provided by each page (except home)
-  description: config.longDescription,
-  openGraph: {
-    siteName: config.siteName,
-    title: `${config.siteName} – ${config.shortDescription}`,
-    locale: config.siteLocale?.replace("-", "_"),
-    type: "website",
-    images: [
-      {
-        url: `${baseUrl}${meJpg.src}`,
-        alt: `${config.siteName} – ${config.shortDescription}`,
-      },
-    ],
-  },
-  twitter: {
-    handle: `@${config.authorSocial?.twitter}`,
-    site: `@${config.authorSocial?.twitter}`,
-    cardType: "summary",
-  },
-  additionalMetaTags: [
-    {
-      name: "viewport",
-      content: "width=device-width, initial-scale=1",
-    },
-    {
-      name: "author",
-      content: config.authorName,
-    },
-    {
-      name: "google-site-verification",
-      content: config.verifyGoogle,
-    },
-    {
-      name: "msvalidate.01",
-      content: config.verifyBing,
-    },
-  ],
-  additionalLinkTags: [
-    {
-      rel: "icon",
-      href: faviconIco.src,
-      sizes: "any", // https://twitter.com/subzey/status/1417099064949235712
-    },
-    {
-      rel: "icon",
-      href: faviconPng.src,
-      type: "image/png",
-    },
-    {
-      rel: "apple-touch-icon",
-      href: appleTouchIconPng.src,
-      sizes: `${appleTouchIconPng.width}x${appleTouchIconPng.height}`,
-    },
-    {
-      rel: "manifest",
-      href: "/site.webmanifest",
-    },
-    {
-      rel: "alternate",
-      href: "/feed.xml",
-      type: "application/rss+xml",
-      // @ts-ignore
-      title: `${config.siteName} (RSS)`,
-    },
-    {
-      rel: "alternate",
-      href: "/feed.atom",
-      type: "application/atom+xml",
-      // @ts-ignore
-      title: `${config.siteName} (Atom)`,
-    },
-    {
-      rel: "humans",
-      href: "/humans.txt",
-    },
-    {
-      rel: "pgpkey",
-      href: "/pubkey.asc",
-      type: "application/pgp-keys",
-    },
-  ],
-};
-
-// https://github.com/garmeeh/next-seo#social-profile
-export const socialProfileJsonLd: SocialProfileJsonLdProps = {
-  type: "Person",
-  name: config.authorName,
-  url: `${baseUrl}/`,
-  sameAs: [
-    `${baseUrl}/`,
-    `https://github.com/${config.authorSocial?.github}`,
-    `https://keybase.io/${config.authorSocial?.keybase}`,
-    `https://twitter.com/${config.authorSocial?.twitter}`,
-    `https://medium.com/@${config.authorSocial?.medium}`,
-    `https://www.linkedin.com/in/${config.authorSocial?.linkedin}/`,
-    `https://www.facebook.com/${config.authorSocial?.facebook}`,
-    `https://www.instagram.com/${config.authorSocial?.instagram}/`,
-    `https://${config.authorSocial?.mastodon}`,
-  ],
-};
-
-// Just the basic items applicable to all notes, extended by pages/notes/[slug].tsx
-// https://github.com/garmeeh/next-seo#article-1
-export const articleJsonLd: Pick<ArticleJsonLdProps, "authorName" | "publisherName" | "publisherLogo"> = {
-  authorName: {
-    name: config.authorName,
-    url: `${baseUrl}/`,
-  },
-  publisherName: config.siteName,
-  publisherLogo: `${baseUrl}${meJpg.src}`,
-};
--- a/lib/helpers/build-feed.ts
+++ b/lib/helpers/build-feed.ts
@@ -2,84 +2,58 @@ import { Feed } from "feed";
 import { getAllPosts } from "./posts";
 import config from "../config";
 import { meJpg } from "../config/favicons";
-import type { GetServerSideProps } from "next";
+import { metadata } from "../../app/layout";

-export type GetServerSideFeedProps = GetServerSideProps<Record<string, never>>;
-
-export type BuildFeedOptions = {
-  format: "rss" | "atom" | "json";
-};
-
-// handles literally *everything* about building the server-side rss/atom feeds and writing the response.
-// all the page needs to do is `return buildFeed(context, "rss")` from getServerSideProps.
-export const buildFeed = async (
-  context: Parameters<GetServerSideFeedProps>[0],
-  options: BuildFeedOptions
-): Promise<ReturnType<GetServerSideFeedProps>> => {
-  const { res } = context;
-  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || `https://${config.siteDomain}`;
+export const buildFeed = async (options: { type: "rss" | "atom" | "json" }): Promise<string> => {
+  const baseUrl = metadata.metadataBase?.href || `https://${config.siteDomain}/`;

  // https://github.com/jpmonette/feed#example
  const feed = new Feed({
-    id: `${baseUrl}/`,
-    link: `${baseUrl}/`,
+    id: baseUrl,
+    link: baseUrl,
    title: config.siteName,
    description: config.longDescription,
    copyright: config.licenseUrl,
    updated: new Date(process.env.RELEASE_DATE || Date.now()),
-    image: `${baseUrl}${meJpg.src}`,
+    image: new URL(meJpg.src, baseUrl).href,
    feedLinks: {
-      rss: `${baseUrl}/feed.xml`,
-      atom: `${baseUrl}/feed.atom`,
+      rss: new URL("feed.xml", baseUrl).href,
+      atom: new URL("feed.atom", baseUrl).href,
    },
    author: {
      name: config.authorName,
-      link: `${baseUrl}/`,
+      link: baseUrl,
      email: config.authorEmail,
    },
  });

  // add posts separately using their frontmatter
-  const posts = await getAllPosts();
-  posts.forEach((post) => {
+  (await getAllPosts()).forEach((post) => {
    feed.addItem({
      guid: post.permalink,
      link: post.permalink,
      title: post.title,
      description: post.description,
-      image: post.image && `${baseUrl}${post.image}`,
+      image: post.image || undefined,
      author: [
        {
          name: config.authorName,
-          link: `${baseUrl}/`,
+          link: baseUrl,
        },
      ],
      date: new Date(post.date),
    });
  });

-  // cache on edge for 24 hours by default
-  res.setHeader("cache-control", `public, max-age=0, s-maxage=86400, stale-while-revalidate`);
-
-  // generates RSS by default
-  if (options.format === "rss") {
-    res.setHeader("content-type", "application/rss+xml; charset=utf-8");
-    res.write(feed.rss2());
-  } else if (options.format === "atom") {
-    res.setHeader("content-type", "application/atom+xml; charset=utf-8");
-    res.write(feed.atom1());
-  } else if (options.format === "json") {
+  if (options.type === "rss") {
+    return feed.rss2();
+  } else if (options.type === "atom") {
+    return feed.atom1();
+  } else if (options.type === "json") {
    // rare but including as an option because why not...
    // https://www.jsonfeed.org/
-    res.setHeader("content-type", "application/feed+json; charset=utf-8");
-    res.write(feed.json1());
+    return feed.json1();
  } else {
-    throw new TypeError(`Invalid feed type "${options.format}", must be "rss", "atom", or "json".`);
+    throw new TypeError(`Invalid feed type "${options.type}", must be "rss", "atom", or "json".`);
  }
-
-  res.end();
-
-  return {
-    props: {},
-  };
 };
--- a/lib/helpers/mdx-components.ts
+++ b/lib/helpers/mdx-components.ts
@@ -6,7 +6,7 @@ export { default as Figure } from "../../components/Figure";

 // These (mostly very small) components are direct replacements for HTML tags generated by remark:
 export { default as a } from "../../components/Link";
-export { default as code } from "../../components/CodeHybrid";
+export { default as code } from "../../components/Code";
 export { default as blockquote } from "../../components/Blockquote";
 export { default as hr } from "../../components/HorizontalRule";
 export { H1 as h1, H2 as h2, H3 as h3, H4 as h4, H5 as h5, H6 as h6 } from "../../components/Heading";
--- a/lib/helpers/minifier.ts
+++ b/lib/helpers/minifier.ts
@@ -1,25 +0,0 @@
-import { trimLines } from "trim-lines";
-import stripComments from "strip-comments";
-
-// do some _very_ rudimentary JS minifying.
-export const minifier = (source: string): string => {
-  // save the first line for later, it might be important?
-  const firstLine = source.split("\n")[0];
-
-  // remove JS comments
-  source = stripComments(source, {
-    block: false,
-    keepProtected: true,
-  });
-  // remove indentation
-  source = trimLines(source);
-  // remove newlines
-  source = source.replace(/\n/g, "");
-
-  // restore JSX flags if they were there at the beginning
-  if (firstLine.startsWith("/*@jsx")) {
-    source = `${firstLine}${source}`;
-  }
-
-  return source;
-};
--- a/lib/helpers/posts.ts
+++ b/lib/helpers/posts.ts
@@ -1,13 +1,12 @@
 import path from "path";
 import fs from "fs/promises";
-import { serialize } from "next-mdx-remote/serialize";
 import glob from "fast-glob";
 import pMap from "p-map";
 import pMemoize from "p-memoize";
 import matter from "gray-matter";
 import { formatDate } from "./format-date";
-import { minifier } from "./minifier";
-import type { PostFrontMatter, PostWithSource } from "../../types";
+import type { PostFrontMatter } from "../../types";
+import { metadata as defaultMetadata } from "../../app/layout";

 // path to directory with .mdx files, relative to project root
 export const POSTS_DIR = "notes";
@@ -60,49 +59,14 @@ export const getPostData = async (
      title,
      htmlTitle,
      slug,
-      permalink: `${process.env.NEXT_PUBLIC_BASE_URL || ""}/${POSTS_DIR}/${slug}/`,
      date: formatDate(data.date), // validate/normalize the date string provided from front matter
+      permalink: new URL(`/${POSTS_DIR}/${slug}/`, defaultMetadata.metadataBase || "").href,
+      image: data.image ? new URL(data.image, defaultMetadata.metadataBase || "").href : undefined,
    },
    markdown: content,
  };
 };

-// fully parses MDX into JS and returns *everything* about a post
-export const compilePost = async (slug: string): Promise<PostWithSource> => {
-  const { remarkGfm, remarkSmartypants, rehypeSlug, rehypeUnwrapImages, rehypePrism } = await import(
-    "./remark-rehype-plugins"
-  );
-
-  const { frontMatter, markdown } = await getPostData(slug);
-
-  const { compiledSource } = await serialize(markdown, {
-    parseFrontmatter: false,
-    mdxOptions: {
-      remarkPlugins: [
-        [remarkGfm, { singleTilde: false }],
-        [
-          remarkSmartypants,
-          {
-            quotes: true,
-            dashes: "oldschool",
-            backticks: false,
-            ellipses: false,
-          },
-        ],
-      ],
-      rehypePlugins: [rehypeSlug, rehypeUnwrapImages, [rehypePrism, { ignoreMissing: true }]],
-    },
-  });
-
-  return {
-    frontMatter,
-    source: {
-      // save some bytes
-      compiledSource: minifier(compiledSource),
-    },
-  };
-};
-
 export const getPostSlugs = pMemoize(async (): Promise<string[]> => {
  // list all .mdx files in POSTS_DIR
  const mdxFiles = await glob("*.mdx", {
--- a/lib/styles/fonts/loaders/GeistMono.ts
+++ b/lib/styles/fonts/loaders/GeistMono.ts
@@ -4,17 +4,18 @@ const GeistMono = GeistMonoLoader({
  subsets: ["latin"],
  display: "swap",
  fallback: [
-    // https://github.com/system-fonts/modern-font-stacks#monospace-code
+    // https://github.com/primer/css/blob/4113637b3bb60cad1e2dca82e70d92ad05694399/src/support/variables/typography.scss#L37
    "ui-monospace",
-    "'Cascadia Code'",
-    "'Source Code Pro'",
+    "SFMono-Regular",
+    "'SF Mono'",
    "Menlo",
    "Consolas",
-    "'DejaVu Sans Mono'",
+    "'Liberation Mono'",
    "monospace",
  ],
  adjustFontFallback: false,
  preload: true,
+  variable: "--fonts-mono",
 });

 export default GeistMono;
--- a/lib/styles/fonts/loaders/GeistSans.ts
+++ b/lib/styles/fonts/loaders/GeistSans.ts
@@ -10,6 +10,7 @@ const GeistSans = GeistSansLoader({
  ],
  adjustFontFallback: false,
  preload: true,
+  variable: "--fonts-sans",
 });

 export default GeistSans;
--- a/lib/styles/stitches.config.ts
+++ b/lib/styles/stitches.config.ts
@@ -1,160 +0,0 @@
-import { createStitches } from "@stitches/react";
-import type * as Stitches from "@stitches/react";
-
-// misc. helpers
-import { rgba } from "polished";
-import normalizeCss from "stitches-normalize";
-
-// web fonts
-import { GeistSans, GeistMono } from "./fonts";
-
-// https://stitches.dev/docs/typescript#type-a-css-object
-export type CSS = Stitches.CSS<typeof stitchesConfig>;
-
-export const {
-  styled,
-  css,
-  getCssText,
-  globalCss,
-  keyframes,
-  createTheme,
-  theme,
-  config: stitchesConfig,
-} = createStitches({
-  theme: {
-    fonts: {
-      sans: GeistSans.style.fontFamily,
-      mono: GeistMono.style.fontFamily,
-    },
-
-    colors: {
-      backgroundInner: "#ffffff",
-      backgroundOuter: "#fcfcfc",
-      backgroundHeader: rgba("#fcfcfc", 0.7),
-      text: "#202020",
-      mediumDark: "#515151",
-      medium: "#5e5e5e",
-      mediumLight: "#757575",
-      light: "#d2d2d2",
-      kindaLight: "#e3e3e3",
-      superLight: "#f4f4f4",
-      superDuperLight: "#fbfbfb",
-      link: "#0e6dc2",
-      linkUnderline: rgba("#0e6dc2", 0.4),
-      success: "#44a248",
-      error: "#ff1b1b",
-      warning: "#f78200",
-
-      // Syntax Highlighting (light) - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight
-      codeText: "#313131",
-      codeBackground: "#fdfdfd",
-      codeComment: "#656e77",
-      codeKeyword: "#029cb9",
-      codeAttribute: "#70a800",
-      codeNamespace: "#f92672",
-      codeLiteral: "#ae81ff",
-      codePunctuation: "#111111",
-      codeVariable: "#d88200",
-      codeAddition: "#44a248",
-      codeDeletion: "#ff1b1b",
-    },
-
-    sizes: {
-      maxLayoutWidth: "865px",
-    },
-
-    radii: {
-      corner: "0.6rem",
-    },
-
-    transitions: {
-      // light <-> dark theme fade duration
-      fade: "0.25s ease",
-      // fancy underline animation
-      linkHover: "0.2s ease-in-out",
-    },
-  },
-
-  media: {
-    // most responsive styles will go here:
-    medium: "(max-width: 768px)",
-    // used rarely only for SUPER narrow windows:
-    small: "(max-width: 380px)",
-    // ...note: things then COMPLETELY break at 300px. but it's 2022 let's be real.
-  },
-
-  utils: {
-    // sets locally scoped css variable for both light and dark themes' link hover underlines
-    setUnderlineColor: ({
-      color,
-      alpha = 0.4,
-    }: {
-      color: string; // hex value or one of theme tokens above in stitches `$colors$token` format
-      alpha?: number;
-    }) => ({
-      // allow both pre-set rgba stitches variables and hex values
-      $$underlineColor: color.startsWith("#") ? rgba(color, alpha) : color,
-    }),
-  },
-});
-
-export const darkTheme = createTheme({
-  colors: {
-    backgroundInner: "#1e1e1e",
-    backgroundOuter: "#252525",
-    backgroundHeader: rgba("#252525", 0.85),
-    text: "#f1f1f1",
-    mediumDark: "#d7d7d7",
-    medium: "#b1b1b1",
-    mediumLight: "#959595",
-    light: "#646464",
-    kindaLight: "#535353",
-    superLight: "#272727",
-    superDuperLight: "#1f1f1f",
-    link: "#88c7ff",
-    linkUnderline: rgba("#88c7ff", 0.4),
-    success: "#78df55",
-    error: "#ff5151",
-    warning: "#f2b702",
-
-    // Syntax Highlighting (dark) - modified from Dracula: https://github.com/dracula/pygments
-    codeText: "#e4e4e4",
-    codeBackground: "#212121",
-    codeComment: "#929292",
-    codeKeyword: "#3b9dd2",
-    codeAttribute: "#78df55",
-    codeNamespace: "#f95757",
-    codeLiteral: "#d588fb",
-    codePunctuation: "#cccccc",
-    codeVariable: "#fd992a",
-    codeAddition: "#78df55",
-    codeDeletion: "#ff5151",
-  },
-});
-
-export const globalStyles = globalCss(
-  // @ts-ignore
-  ...normalizeCss({
-    systemFonts: false,
-  }),
-  {
-    html: {
-      fontFamily: theme.fonts.sans,
-    },
-
-    body: {
-      backgroundColor: theme.colors.backgroundInner,
-      transition: `background ${theme.transitions.fade}`,
-    },
-
-    "code, kbd, samp, pre": {
-      fontFamily: theme.fonts.mono,
-    },
-  }
-);
-
-// theme classnames are generated dynamically by stitches, so have ThemeProvider pull them from here
-export const classNames = {
-  light: theme.className,
-  dark: darkTheme.className,
-};