manually minify JS outputted by next-mdx-remote v4

components/Image/Image.tsx

@@ -4,7 +4,17 @@ import type { ImageProps as NextImageProps } from "next/image";
 
 import styles from "./Image.module.css";
 
-const Image = ({ src, width, height, placeholder, alt, quality, priority, className, ...rest }: NextImageProps) => {
+const CustomImage = ({
+  src,
+  width,
+  height,
+  placeholder,
+  alt,
+  quality,
+  priority,
+  className,
+  ...rest
+}: NextImageProps) => {
   // passed directly into next/image: https://nextjs.org/docs/api-reference/next/image
   const imageProps: Partial<NextImageProps> = {
     width,
@@ -36,4 +46,4 @@ const Image = ({ src, width, height, placeholder, alt, quality, priority, classN
   );
 };
 
-export default Image;
+export default CustomImage;

lib/parse-notes.ts

@@ -3,6 +3,7 @@ import path from "path";
 import { renderToStaticMarkup } from "react-dom/server";
 import matter from "gray-matter";
 import { serialize } from "next-mdx-remote/serialize";
+import { minify } from "terser";
 import { compiler } from "markdown-to-jsx";
 import removeMarkdown from "remove-markdown";
 import sanitizeHtml from "sanitize-html";
@@ -62,6 +63,7 @@ export const getNoteData = (slug: string): { frontMatter: NoteMetaType; content:
   };
 };
 
+// fully parses MDX into JS and returns *everything* about a note
 export const getNote = async (slug: string): Promise<NoteType> => {
   const { frontMatter, content } = getNoteData(slug);
   const source = await serialize(content, {
@@ -78,7 +80,17 @@ export const getNote = async (slug: string): Promise<NoteType> => {
 
   return {
     frontMatter,
-    source,
+    source: {
+      // next-mdx-remote v4 doesn't (yet?) minify compiled JSX output, see:
+      // https://github.com/hashicorp/next-mdx-remote/pull/211#issuecomment-1013658514
+      // ...so do it manually (and conservatively) with terser for now.
+      compiledSource: (
+        await minify(source.compiledSource, {
+          parse: { bare_returns: true },
+          mangle: false,
+        })
+      ).code,
+    },
   };
 };
 

package.json

@@ -20,8 +20,7 @@
     "lint": "run-s lint:*",
     "lint:next": "eslint .",
     "lint:css": "stylelint '**/*.css'",
-    "lint:prettier": "prettier --check .",
+    "lint:prettier": "prettier --check ."
-    "postinstall": "next telemetry disable"
   },
   "dependencies": {
     "@fontsource/comic-neue": "4.5.1",
@@ -36,12 +35,12 @@
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",
     "date-fns": "^2.28.0",
+    "escape-goat": "^4.0.0",
     "fathom-client": "^3.3.1",
     "faunadb": "^4.4.1",
     "feed": "^4.2.2",
     "formik": "^2.2.9",
     "gray-matter": "^4.0.3",
-    "html-escaper": "^3.0.3",
     "is-absolute-url": "^4.0.1",
     "is-email-like": "^2.0.0",
     "markdown-to-jsx": "^7.1.6",
@@ -72,12 +71,12 @@
     "sanitize-html": "^2.6.1",
     "simple-icons": "^6.7.0",
     "swr": "^1.1.2",
+    "terser": "^5.10.0",
     "twemoji": "github:twitter/twemoji#v13.1.0"
   },
   "devDependencies": {
     "@jakejarvis/eslint-config": "github:jakejarvis/eslint-config#main",
     "@svgr/webpack": "^6.2.0",
-    "@types/html-escaper": "^3.0.0",
     "@types/node": "^17.0.10",
     "@types/prop-types": "^15.7.4",
     "@types/react": "^17.0.38",

pages/notes/[slug].tsx

@@ -1,7 +1,7 @@
 import { InView } from "react-intersection-observer";
 import { NextSeo, ArticleJsonLd } from "next-seo";
 import { MDXRemote } from "next-mdx-remote";
-import { escape } from "html-escaper";
+import { htmlEscape } from "escape-goat";
 import Content from "../../components/Content/Content";
 import NoteMeta from "../../components/NoteMeta/NoteMeta";
 import NoteTitle from "../../components/NoteTitle/NoteTitle";
@@ -42,8 +42,8 @@ const Note = ({ frontMatter, source }: NoteType) => {
       />
       <ArticleJsonLd
         url={frontMatter.permalink}
-        title={escape(frontMatter.title)}
+        title={htmlEscape(frontMatter.title)}
-        description={escape(frontMatter.description)}
+        description={htmlEscape(frontMatter.description)}
         datePublished={frontMatter.date}
         dateModified={frontMatter.date}
         images={frontMatter.image && [`${config.baseUrl}${frontMatter.image}`]}

yarn.lock

@@ -1497,11 +1497,6 @@
   dependencies:
     "@types/unist" "*"
 
-"@types/html-escaper@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/html-escaper/-/html-escaper-3.0.0.tgz#97d7df443c0fc86e3abdd0971f4814a58e3ca762"
-  integrity sha512-OcJcvP3Yk8mjYwf/IdXZtTE1tb/u0WF0qa29ER07ZHCYUBZXSN29Z1mBS+/96+kNMGTFUAbSz9X+pHmHpZrTCw==
-
 "@types/js-yaml@^4.0.0":
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.5.tgz#738dd390a6ecc5442f35e7f03fa1431353f7e138"
@@ -2006,6 +2001,11 @@ btoa-lite@^1.0.0:
   resolved "https://registry.yarnpkg.com/btoa-lite/-/btoa-lite-1.0.0.tgz#337766da15801210fdd956c22e9c6891ab9d0337"
   integrity sha1-M3dm2hWAEhD92VbCLpxokaudAzc=
 
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
@@ -2199,6 +2199,11 @@ comma-separated-tokens@^2.0.0:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.2.tgz#d4c25abb679b7751c880be623c1179780fe1dd98"
   integrity sha512-G5yTt3KQN4Yn7Yk4ed73hlZ1evrFKXeUW3086p3PRFNp7m2vIjI6Pg+Kgb+oyzhd9F2qdcoj67+y3SdxL5XWsg==
 
+commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 commander@^6.2.0:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
@@ -2602,6 +2607,11 @@ escalade@^3.1.1:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
+escape-goat@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-4.0.0.tgz#9424820331b510b0666b98f7873fe11ac4aa8081"
+  integrity sha512-2Sd4ShcWxbx6OY1IHyla/CVNwvg7XwZVoXZHcSu9w9SReNP1EzzD5T8NWKIR38fIqEns9kDWKUQTXXAmlDrdPg==
+
 escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -3409,11 +3419,6 @@ hosted-git-info@^4.0.1:
   dependencies:
     lru-cache "^6.0.0"
 
-html-escaper@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-3.0.3.tgz#4d336674652beb1dcbc29ef6b6ba7f6be6fdfed6"
-  integrity sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==
-
 html-tags@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
@@ -6060,16 +6065,29 @@ source-map-js@^1.0.1:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+source-map-support@~0.5.20:
+  version "0.5.21"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
 source-map@^0.5.0:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.1:
+source-map@^0.6.0, source-map@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+source-map@~0.7.2:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
 space-separated-tokens@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.1.tgz#43193cec4fb858a2ce934b7f98b7f2c18107098b"
@@ -6405,6 +6423,15 @@ table@^6.8.0:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
+terser@^5.10.0:
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.10.0.tgz#b86390809c0389105eb0a0b62397563096ddafcc"
+  integrity sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.7.2"
+    source-map-support "~0.5.20"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"