pre-render optimizations

lib/config/constants.ts

@@ -0,0 +1,17 @@
+// path to directory with .mdx files, relative to project root
+export const POSTS_DIR = "notes";
+
+// path to an image used in various places to represent the site, relative to project root
+// IMPORTANT: must be included in next.config.ts under "outputFileTracingIncludes"
+export const AVATAR_PATH = "app/opengraph-image.jpg";
+
+// maximum width of content wrapper (e.g. for images) in pixels
+export const MAX_WIDTH = 865;
+
+// same logic as metadataBase: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#default-value
+export const BASE_URL =
+  process.env.NEXT_PUBLIC_VERCEL_ENV === "production" && process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL
+    ? `https://${process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL}`
+    : process.env.NEXT_PUBLIC_VERCEL_ENV === "preview" && process.env.NEXT_PUBLIC_VERCEL_URL
+      ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+      : `http://localhost:${process.env.PORT || 3000}`;

lib/config/index.ts

@@ -1,39 +1,28 @@
-const config = {
-  // Site info
-  siteName: "Jake Jarvis",
-  siteLocale: "en-US",
-  baseUrl:
-    // same logic as metadataBase: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#default-value
-    process.env.NEXT_PUBLIC_VERCEL_ENV === "production" && process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL
-      ? `https://${process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL}`
-      : process.env.NEXT_PUBLIC_VERCEL_ENV === "preview" && process.env.NEXT_PUBLIC_VERCEL_URL
-        ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
-        : `http://localhost:${process.env.PORT || 3000}`,
-  timeZone: "America/New_York", // https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List
-  onionDomain: "http://jarvis2i2vp4j4tbxjogsnqdemnte5xhzyi7hziiyzxwge3hzmh57zad.onion",
-  shortDescription: "Front-End Web Developer in Boston, MA",
-  longDescription:
-    "Hi there! I'm a frontend web developer based in Boston, Massachusetts specializing in the JAMstack, modern JavaScript frameworks, and progressive web apps.",
-  license: "Creative Commons Attribution 4.0 International",
-  licenseAbbr: "CC-BY-4.0",
-  licenseUrl: "https://creativecommons.org/licenses/by/4.0/",
-  copyrightYearStart: 2001,
-  githubRepo: "jakejarvis/jarv.is",
+// Site info
+export const siteName = "Jake Jarvis";
+export const siteLocale = "en-US";
+export const timeZone = "America/New_York"; // https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List
+export const onionDomain = "jarvis2i2vp4j4tbxjogsnqdemnte5xhzyi7hziiyzxwge3hzmh57zad.onion";
+export const shortDescription = "Front-End Web Developer in Boston; MA";
+export const longDescription =
+  "Hi there! I'm a frontend web developer based in Boston, Massachusetts specializing in the JAMstack, modern JavaScript frameworks, and progressive web apps.";
+export const license = "Creative Commons Attribution 4.0 International";
+export const licenseAbbr = "CC-BY-4.0";
+export const licenseUrl = "https://creativecommons.org/licenses/by/4.0/";
+export const copyrightYearStart = 2001;
+export const githubRepo = "jakejarvis/jarv.is";
 
-  // Me info
-  authorName: "Jake Jarvis",
-  authorEmail: "jake@jarv.is",
-  authorSocial: {
-    github: "jakejarvis",
-    twitter: "jakejarvis",
-    facebook: "jakejarvis",
-    keybase: "jakejarvis",
-    medium: "jakejarvis",
-    linkedin: "jakejarvis",
-    instagram: "jakejarvis",
-    mastodon: "fediverse.jarv.is/@jake",
-    bluesky: "jarv.is",
-  },
+// Me info
+export const authorName = "Jake Jarvis";
+export const authorEmail = "jake@jarv.is";
+export const authorSocial = {
+  github: "jakejarvis",
+  twitter: "jakejarvis",
+  facebook: "jakejarvis",
+  keybase: "jakejarvis",
+  medium: "jakejarvis",
+  linkedin: "jakejarvis",
+  instagram: "jakejarvis",
+  mastodon: "fediverse.jarv.is/@jake",
+  bluesky: "jarv.is",
 };
-
-export default config;

lib/helpers/build-feed.ts

@@ -1,26 +1,27 @@
 import { Feed } from "feed";
 import { getAllPosts } from "./posts";
-import config from "../config";
+import * as config from "../config";
+import { BASE_URL } from "../config/constants";
 
-import meJpg from "../../public/static/me.jpg";
+import ogImage from "../../app/opengraph-image.jpg";
 
 export const buildFeed = async (): Promise<Feed> => {
   // https://github.com/jpmonette/feed#example
   const feed = new Feed({
-    id: config.baseUrl,
-    link: config.baseUrl,
+    id: BASE_URL,
+    link: BASE_URL,
     title: config.siteName,
     description: config.longDescription,
     copyright: config.licenseUrl,
     updated: new Date(process.env.RELEASE_DATE || Date.now()),
-    image: `${config.baseUrl}${meJpg.src}`,
+    image: `${BASE_URL}${ogImage.src}`,
     feedLinks: {
-      rss: `${config.baseUrl}/feed.xml`,
-      atom: `${config.baseUrl}/feed.atom`,
+      rss: `${BASE_URL}/feed.xml`,
+      atom: `${BASE_URL}/feed.atom`,
     },
     author: {
       name: config.authorName,
-      link: config.baseUrl,
+      link: BASE_URL,
       email: config.authorEmail,
     },
   });
@@ -35,7 +36,7 @@ export const buildFeed = async (): Promise<Feed> => {
       author: [
         {
           name: config.authorName,
-          link: config.baseUrl,
+          link: BASE_URL,
         },
       ],
       date: new Date(post.date),

lib/helpers/format-date.ts

@@ -5,7 +5,7 @@ import dayjsRelativeTime from "dayjs/plugin/relativeTime";
 import dayjsLocalizedFormat from "dayjs/plugin/localizedFormat";
 import dayjsAdvancedFormat from "dayjs/plugin/advancedFormat";
 import "dayjs/locale/en";
-import config from "../config";
+import * as config from "../config";
 
 const IsomorphicDayJs = (date?: dayjs.ConfigType): dayjs.Dayjs => {
   // plugins

lib/helpers/posts.ts

@@ -3,10 +3,7 @@ import glob from "fast-glob";
 import pMap from "p-map";
 import pMemoize from "p-memoize";
 import { formatDate } from "./format-date";
-import config from "../config";
-
-// path to directory with .mdx files, relative to project root
-const POSTS_DIR = "notes";
+import { BASE_URL, POSTS_DIR } from "../config/constants";
 
 export type FrontMatter = {
   slug: string;
@@ -65,7 +62,7 @@ export const getFrontMatter = async (slug: string): Promise<FrontMatter> => {
     htmlTitle,
     slug,
     date: formatDate(frontmatter.date), // validate/normalize the date string provided from front matter
-    permalink: `${config.baseUrl}/${POSTS_DIR}/${slug}`,
+    permalink: `${BASE_URL}/${POSTS_DIR}/${slug}`,
   };
 };