properly import and optimize/cache images in markdown files

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