properly import and optimize/cache images in markdown files

lib/config/favicons.ts

@@ -1,13 +0,0 @@
-// here we simply import some common image files and re-export them as StaticImageData.
-
-// favicons
-export { default as faviconIco } from "../../public/static/favicons/favicon.ico";
-export { default as faviconPng } from "../../public/static/favicons/favicon.png";
-export { default as appleTouchIconPng } from "../../public/static/favicons/apple-touch-icon.png";
-export { default as chrome512Png } from "../../public/static/favicons/android-chrome-512x512.png";
-export { default as chrome192Png } from "../../public/static/favicons/android-chrome-192x192.png";
-export { default as maskable512Png } from "../../public/static/favicons/maskable-512x512.png";
-export { default as maskable192Png } from "../../public/static/favicons/maskable-192x192.png";
-
-// other
-export { default as meJpg } from "../../public/static/images/me.jpg";

lib/config/index.js

@@ -3,8 +3,13 @@
 const config = {
   // Site info
   siteName: "Jake Jarvis",
-  siteDomain: "jarv.is",
   siteLocale: "en-US",
+  baseUrl:
+    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",

lib/config/menu.ts

@@ -3,23 +3,23 @@ import type { MenuItemProps } from "../../components/MenuItem";
 
 export const menuItems: MenuItemProps[] = [
   {
-    Icon: FiHome,
     text: "Home",
     href: "/",
+    icon: FiHome,
   },
   {
-    Icon: FiEdit3,
     text: "Notes",
     href: "/notes",
+    icon: FiEdit3,
   },
   {
-    Icon: FiCode,
     text: "Projects",
     href: "/projects",
+    icon: FiCode,
   },
   {
-    Icon: FiMail,
     text: "Contact",
     href: "/contact",
+    icon: FiMail,
   },
 ];

lib/helpers/build-feed.ts

@@ -1,28 +1,26 @@
 import { Feed } from "feed";
 import { getAllPosts } from "./posts";
 import config from "../config";
-import { meJpg } from "../config/favicons";
-import { metadata } from "../../app/layout";
+
+import meJpg from "../../public/static/images/me.jpg";
 
 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: config.baseUrl,
+    link: config.baseUrl,
     title: config.siteName,
     description: config.longDescription,
     copyright: config.licenseUrl,
     updated: new Date(process.env.RELEASE_DATE || Date.now()),
-    image: new URL(meJpg.src, baseUrl).href,
+    image: `${config.baseUrl}${meJpg.src}`,
     feedLinks: {
-      rss: new URL("feed.xml", baseUrl).href,
-      atom: new URL("feed.atom", baseUrl).href,
+      rss: `${config.baseUrl}/feed.xml`,
+      atom: `${config.baseUrl}/feed.atom`,
     },
     author: {
       name: config.authorName,
-      link: baseUrl,
+      link: config.baseUrl,
       email: config.authorEmail,
     },
   });
@@ -38,7 +36,7 @@ export const buildFeed = async (options: { type: "rss" | "atom" | "json" }): Pro
       author: [
         {
           name: config.authorName,
-          link: baseUrl,
+          link: config.baseUrl,
         },
       ],
       date: new Date(post.date),

lib/helpers/mdx-components.ts

@@ -1,25 +0,0 @@
-import dynamic from "next/dynamic";
-
-// Bundle these components by default:
-export { default as Image } from "../../components/Image";
-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/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";
-export { UnorderedList as ul, OrderedList as ol, ListItem as li } from "../../components/List";
-
-// ...and these components are technically passed into all posts, but next/dynamic ensures they're loaded only
-// when they're referenced in the individual mdx files.
-export const IFrame = dynamic(() => import("../../components/IFrame"));
-export const Video = dynamic(() => import("../../components/Video"));
-export const YouTube = dynamic(() => import("../../components/YouTubeEmbed"));
-export const Tweet = dynamic(() => import("../../components/TweetEmbed"));
-export const Gist = dynamic(() => import("../../components/GistEmbed"));
-export const CodePen = dynamic(() => import("../../components/CodePenEmbed"));
-
-// One-offs for specific posts:
-export const OctocatLink = dynamic(() => import("../../components/OctocatLink"));

lib/helpers/posts.ts

@@ -5,7 +5,7 @@ import pMap from "p-map";
 import pMemoize from "p-memoize";
 import matter from "gray-matter";
 import { formatDate } from "./format-date";
-import { metadata as defaultMetadata } from "../../app/layout";
+import config from "../config";
 
 // path to directory with .mdx files, relative to project root
 const POSTS_DIR = "notes";
@@ -71,8 +71,8 @@ export const getPostData = async (
       htmlTitle,
       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,
+      permalink: `${config.baseUrl}/${POSTS_DIR}/${slug}/`,
+      image: data.image ? `${config.baseUrl}${data.image}` : undefined,
     },
     markdown: content,
   };

lib/helpers/remark-rehype-plugins.ts

@@ -3,7 +3,11 @@ export { default as rehypeSanitize } from "rehype-sanitize";
 export { default as rehypeSlug } from "rehype-slug";
 export { default as rehypeStringify } from "rehype-stringify";
 export { default as rehypeUnwrapImages } from "rehype-unwrap-images";
+export { default as remarkFrontmatter } from "remark-frontmatter";
 export { default as remarkGfm } from "remark-gfm";
 export { default as remarkParse } from "remark-parse";
 export { default as remarkRehype } from "remark-rehype";
 export { default as remarkSmartypants } from "remark-smartypants";
+
+// @ts-ignore
+export { default as rehypeMdxImportMedia } from "rehype-mdx-import-media";