lukegbcom: fix up images in posts

.hgignore

@@ -24,3 +24,4 @@ db.sqlite3
 node_modules/
 .next/
 out/
+firebase-debug.log

web/lukegbcom/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "lukegbcom"
+  }
+}

web/lukegbcom/default.nix

@@ -1,7 +1,7 @@
 { pkgs, ... }:
 
 let
-  nodejs = pkgs.nodejs-12_x;
+  nodejs = pkgs.nodejs-16_x;
   composition = pkgs.callPackage ./node-overrides.nix { inherit nodejs; };
   inherit (composition.shell) nodeDependencies;
 in
@@ -28,6 +28,9 @@ pkgs.stdenv.mkDerivation {
   '';
   installPhase = ''
     echo Done - moving to output
-    mv out $out
+    mkdir $out
+    cp firebase.json $out/firebase.json
+    cp .firebaserc $out/.firebaserc
+    mv out $out/out
   '';
 }

web/lukegbcom/deploy.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env nix-shell
+#!nix-shell -p nodePackages.firebase-tools -i bash
+
+cd $(nix-build ../.. -A web.lukegbcom)
+exec firebase deploy

web/lukegbcom/firebase.json

@@ -0,0 +1,24 @@
+{
+  "hosting": {
+    "public": "out",
+    "ignore": [
+      "**/.*",
+      "**/*_original"
+    ],
+    "rewrites": [
+      {
+        "source": "/encryptomatic/**",
+        "destination": "/encryptomatic/index.html"
+      }
+    ],
+    "headers": [
+      {
+        "source": "_next/**",
+        "headers": [{
+          "key": "Cache-Control",
+          "value": "public, immutable, max-age=31536000"
+        }]
+      }
+    ]
+  }
+}

web/lukegbcom/lib/HeroImage/index.js

@@ -1,7 +1,8 @@
 import styles from './index.module.scss'
+import { resolveImageURL } from '../images'
 
-function processHeroURL(url) {
+function processHeroURL(url, currentURL) {
-  return url;
+  return resolveImageURL(url, currentURL);
 }
 
 function gradient(gradientName) {
@@ -42,4 +43,4 @@ export default function HeroImage(props) {
       </div>)}
     </div>
   )
-}
+}

web/lukegbcom/lib/PostsList/index.js

@@ -1,4 +1,6 @@
+import { mdxComponents } from '../posts-edge'
 import Link from 'next/link'
+import { MDXRemote } from 'next-mdx-remote'
 import styles from './index.module.scss'
 
 export default function LatestPosts({ posts }) {
@@ -14,7 +16,7 @@ export default function LatestPosts({ posts }) {
                 </a>
               </Link>
               <time className={styles.postTimestamp}>{post.date.toString()}</time>
-              <div className={styles.postBlurb} dangerouslySetInnerHTML={{ __html: post.excerptHtml }}>{post.excerpt}</div>
+              <div className={styles.postBlurb}><MDXRemote {...post.excerptMdx} components={mdxComponents} /></div>
               <Link href={`/posts/${encodeURIComponent(post.slug)}`}>
                 <a className={styles.postReadMoreButtonLink}>
                   <span role="button" className={styles.postReadMoreButton}>Read More →</span>
@@ -26,4 +28,4 @@ export default function LatestPosts({ posts }) {
       </ul>
     </div>
   )
-}
+}

web/lukegbcom/lib/images.js

@@ -0,0 +1,15 @@
+import { useRouter } from 'next/router'
+
+export function resolveImageURL(specifiedURL, currentURL) {
+  if (!currentURL) {
+    const router = useRouter()
+
+    currentURL = router.asPath
+  }
+
+  if (specifiedURL.length > 0 && (specifiedURL.charAt(0) === '/' || specifiedURL.indexOf('//') !== -1)) {
+    return specifiedURL
+  }
+
+  return require(`../public/assets${currentURL}${specifiedURL}`)
+}

web/lukegbcom/lib/posts-edge.js

@@ -0,0 +1,12 @@
+import { resolveImageURL } from './images'
+
+export const mdxComponents = {
+  img: Image
+}
+
+export function Image(props) {
+  props = {...props}
+  props.src = resolveImageURL(props.src)
+  props.style = { maxHeight: "500px", maxWidth: "100%" }
+  return (<img {...props} />)
+}

web/lukegbcom/lib/posts.js

@@ -13,15 +13,10 @@ import rehypeStringify from 'rehype-stringify'
 const fsPromises = fs.promises
 const postsDirectory = path.join(process.cwd(), 'posts')
 
-async function markdownToHtml(content) {
+export const mdxOptions = {
-  return unified()
+  remarkPlugins: [remarkGfm],
-    .use(remarkParse)
+  rehypePlugins: [rehypeHighlight],
-    .use(remarkGfm)
+};
-    .use(remarkRehype)
-    .use(rehypeHighlight)
-    .use(rehypeStringify)
-    .process(content)
-}
 
 export async function getPostSlugs() {
   return (await fsPromises.readdir(postsDirectory)).filter(fileName => fileName.match(/\.md$/)).map(fileName => {
@@ -29,35 +24,48 @@ export async function getPostSlugs() {
   })
 }
 
+function mdxify(serialize) {
+  return async function mdxifyInner(post) {
+    if (post.excerptRaw) {
+      post.excerptMdx = await serialize(post.excerptRaw, { mdxOptions })
+      delete post.excerptRaw
+    }
+    if (post.contentRaw) {
+      post.contentMdx = await serialize(post.contentRaw, { mdxOptions })
+      delete post.contentRaw
+    }
+    return post
+  }
+}
+
 export async function _getPostBySlug(slug) {
   const fileName = `${slug}.md`
   const fullPath = path.join(postsDirectory, fileName)
   const fileContents = await fsPromises.readFile(fullPath, 'utf8')
   const matterResult = matter(fileContents, { excerpt: true })
 
-  const processedContent = await markdownToHtml(matterResult.content)
-  const processedExcerpt = await markdownToHtml(matterResult.excerpt)
-
   return {
     ...matterResult.data,
     slug,
     date: matterResult.data.date.toISOString().substring(0, 10),
-    excerptHtml: processedExcerpt.toString(),
+    excerptRaw: matterResult.excerpt,
-    contentHtml: processedContent.toString(),
+    contentRaw: matterResult.content,
     sortKey: matterResult.data.date,
   }
 }
 
-export async function getPostBySlug(slug) {
+export async function getPostBySlug(slug, serialize) {
   const data = await _getPostBySlug(slug)
   delete data.sortKey
-  return data
+  delete data.excerptRaw
+  return mdxify(serialize)(data)
 }
 
-export async function getSortedPostsData() {
+export async function getSortedPostsData(serialize) {
+  const mdxifyPost = mdxify(serialize)
   const allPostsData = await Promise.all((await getPostSlugs()).map(_getPostBySlug))
 
-  return allPostsData.sort(({ sortKey: a }, { sortKey: b }) => {
+  return Promise.all(allPostsData.sort(({ sortKey: a }, { sortKey: b }) => {
     [a, b] = [Date.parse(a), Date.parse(b)]
     if (a < b) {
       return 1
@@ -67,8 +75,8 @@ export async function getSortedPostsData() {
       return 0
     }
   }).map((x) => {
-    delete x.contentHtml
     delete x.sortKey
+    delete x.contentRaw
     return x
-  })
+  }).map(mdxifyPost))
 }

web/lukegbcom/next.config.js

@@ -4,6 +4,7 @@ const optimizedImages = require('next-optimized-images');
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  trailingSlash: true,
 
   images: {
     loader: 'custom',

web/lukegbcom/node-overrides.nix

@@ -1,6 +1,6 @@
 {pkgs ? import <nixpkgs> {
     inherit system;
-}, system ? builtins.currentSystem, nodejs ? pkgs."nodejs-12_x"}:
+}, system ? builtins.currentSystem, nodejs ? pkgs."nodejs-16_x"}:
 
 let
   nodePackages = import ./node-composition.nix {
@@ -9,6 +9,7 @@ let
   override = orig: {
     buildInputs = (orig.buildInputs or []) ++ (with pkgs; [ pkg-config vips glib ]);
     src = contentFreeSrc;
+    dontNpmInstall = true;
   };
   contentFreeSrc = pkgs.stdenv.mkDerivation {
     name = nodePackages.args.name + "-package-json";

web/lukegbcom/node-packages.nix

@@ -994,6 +994,24 @@ let
         sha512 = "vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==";
       };
     };
+    "@mdx-js/mdx-2.1.1" = {
+      name = "_at_mdx-js_slash_mdx";
+      packageName = "@mdx-js/mdx";
+      version = "2.1.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-2.1.1.tgz";
+        sha512 = "SXC18cChut3F2zkVXwsb2no0fzTQ1z6swjK13XwFbF5QU/SFQM0orAItPypSdL3GvqYyzVJtz8UofzJhPEQtMw==";
+      };
+    };
+    "@mdx-js/react-2.1.1" = {
+      name = "_at_mdx-js_slash_react";
+      packageName = "@mdx-js/react";
+      version = "2.1.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/@mdx-js/react/-/react-2.1.1.tgz";
+        sha512 = "7zlZDf5xmWH8I0kFE4DG91COOkxjaW9DX5f1HWztZpFcVua2gJgMYfIkFaDpO/DH/tWi6Mz+OheW4194r15igg==";
+      };
+    };
     "@next/env-12.1.4" = {
       name = "_at_next_slash_env";
       packageName = "@next/env";
@@ -1003,6 +1021,15 @@ let
         sha512 = "7gQwotJDKnfMxxXd8xJ2vsX5AzyDxO3zou0+QOXX8/unypA6icw5+wf6A62yKZ6qQ4UZHHxS68pb6UV+wNneXg==";
       };
     };
+    "@next/mdx-12.1.4" = {
+      name = "_at_next_slash_mdx";
+      packageName = "@next/mdx";
+      version = "12.1.4";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/@next/mdx/-/mdx-12.1.4.tgz";
+        sha512 = "AECT8+2j9bhjiF5WIA8xIfBF5Otf5uUFydIP3tf53qz+PNzlhnQvMd1zLsAIZ7+Wvj4WgnPes1Lxl8CHri20WQ==";
+      };
+    };
     "@next/swc-android-arm-eabi-12.1.4" = {
       name = "_at_next_slash_swc-android-arm-eabi";
       packageName = "@next/swc-android-arm-eabi";
@@ -1219,6 +1246,15 @@ let
         sha512 = "V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==";
       };
     };
+    "@types/acorn-4.0.6" = {
+      name = "_at_types_slash_acorn";
+      packageName = "@types/acorn";
+      version = "4.0.6";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz";
+        sha512 = "veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==";
+      };
+    };
     "@types/debug-4.1.7" = {
       name = "_at_types_slash_debug";
       packageName = "@types/debug";
@@ -1228,6 +1264,42 @@ let
         sha512 = "9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==";
       };
     };
+    "@types/estree-0.0.46" = {
+      name = "_at_types_slash_estree";
+      packageName = "@types/estree";
+      version = "0.0.46";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/@types/estree/-/estree-0.0.46.tgz";
+        sha512 = "laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg==";
+      };
+    };
+    "@types/estree-0.0.50" = {
+      name = "_at_types_slash_estree";
+      packageName = "@types/estree";
+      version = "0.0.50";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz";
+        sha512 = "C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==";
+      };
+    };
+    "@types/estree-0.0.51" = {
+      name = "_at_types_slash_estree";
+      packageName = "@types/estree";
+      version = "0.0.51";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz";
+        sha512 = "CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==";
+      };
+    };
+    "@types/estree-jsx-0.0.1" = {
+      name = "_at_types_slash_estree-jsx";
+      packageName = "@types/estree-jsx";
+      version = "0.0.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-0.0.1.tgz";
+        sha512 = "gcLAYiMfQklDCPjQegGn0TBAn9it05ISEsEhlKQUddIk7o2XDokOcTN7HBO8tznM0D9dGezvHEfRZBfZf6me0A==";
+      };
+    };
     "@types/hast-2.3.4" = {
       name = "_at_types_slash_hast";
       packageName = "@types/hast";
@@ -1237,6 +1309,15 @@ let
         sha512 = "wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==";
       };
     };
+    "@types/js-yaml-4.0.5" = {
+      name = "_at_types_slash_js-yaml";
+      packageName = "@types/js-yaml";
+      version = "4.0.5";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz";
+        sha512 = "FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==";
+      };
+    };
     "@types/json-schema-7.0.11" = {
       name = "_at_types_slash_json-schema";
       packageName = "@types/json-schema";
@@ -1264,6 +1345,15 @@ let
         sha512 = "eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==";
       };
     };
+    "@types/mdx-2.0.1" = {
+      name = "_at_types_slash_mdx";
+      packageName = "@types/mdx";
+      version = "2.0.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.1.tgz";
+        sha512 = "JPEv4iAl0I+o7g8yVWDwk30es8mfVrjkvh5UeVR2sYPpZCK44vrAPsbJpIS+rJAUxLgaSAMKTEH5Vn5qd9XsrQ==";
+      };
+    };
     "@types/ms-0.7.31" = {
       name = "_at_types_slash_ms";
       packageName = "@types/ms";
@@ -1282,6 +1372,15 @@ let
         sha512 = "//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==";
       };
     };
+    "@types/prop-types-15.7.4" = {
+      name = "_at_types_slash_prop-types";
+      packageName = "@types/prop-types";
+      version = "15.7.4";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz";
+        sha512 = "rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==";
+      };
+    };
     "@types/q-1.5.5" = {
       name = "_at_types_slash_q";
       packageName = "@types/q";
@@ -1291,6 +1390,24 @@ let
         sha512 = "L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==";
       };
     };
+    "@types/react-17.0.43" = {
+      name = "_at_types_slash_react";
+      packageName = "@types/react";
+      version = "17.0.43";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz";
+        sha512 = "8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==";
+      };
+    };
+    "@types/scheduler-0.16.2" = {
+      name = "_at_types_slash_scheduler";
+      packageName = "@types/scheduler";
+      version = "0.16.2";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz";
+        sha512 = "hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==";
+      };
+    };
     "@types/unist-2.0.6" = {
       name = "_at_types_slash_unist";
       packageName = "@types/unist";
@@ -1327,6 +1444,24 @@ let
         sha512 = "3+kFfX/nVvd96+HKNqX07QOQTMSTU9BMqnty58loVMnwFleORUII0guQh6o+qKv0k6Kl5OO1bsDWkWAO8p+N7w==";
       };
     };
+    "acorn-8.7.0" = {
+      name = "acorn";
+      packageName = "acorn";
+      version = "8.7.0";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz";
+        sha512 = "V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==";
+      };
+    };
+    "acorn-jsx-5.3.2" = {
+      name = "acorn-jsx";
+      packageName = "acorn-jsx";
+      version = "5.3.2";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz";
+        sha512 = "rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==";
+      };
+    };
     "ajv-6.12.6" = {
       name = "ajv";
       packageName = "ajv";
@@ -1426,6 +1561,24 @@ let
         sha512 = "o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==";
       };
     };
+    "argparse-2.0.1" = {
+      name = "argparse";
+      packageName = "argparse";
+      version = "2.0.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz";
+        sha512 = "8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==";
+      };
+    };
+    "astring-1.8.1" = {
+      name = "astring";
+      packageName = "astring";
+      version = "1.8.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/astring/-/astring-1.8.1.tgz";
+        sha512 = "Aj3mbwVzj7Vve4I/v2JYOPFkCGM2YS7OqQTNSxmUR+LECRpokuPgAYghePgr6SALDo5bD5DlfbSaYjOzGJZOLQ==";
+      };
+    };
     "babel-code-frame-6.26.0" = {
       name = "babel-code-frame";
       packageName = "babel-code-frame";
@@ -1804,6 +1957,15 @@ let
         sha512 = "RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==";
       };
     };
+    "character-reference-invalid-2.0.1" = {
+      name = "character-reference-invalid";
+      packageName = "character-reference-invalid";
+      version = "2.0.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz";
+        sha512 = "iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==";
+      };
+    };
     "chokidar-3.5.3" = {
       name = "chokidar";
       packageName = "chokidar";
@@ -2038,6 +2200,15 @@ let
         sha512 = "wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==";
       };
     };
+    "csstype-3.0.11" = {
+      name = "csstype";
+      packageName = "csstype";
+      version = "3.0.11";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz";
+        sha512 = "sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==";
+      };
+    };
     "debug-2.6.9" = {
       name = "debug";
       packageName = "debug";
@@ -2281,6 +2452,51 @@ let
         sha512 = "eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==";
       };
     };
+    "estree-util-attach-comments-2.0.0" = {
+      name = "estree-util-attach-comments";
+      packageName = "estree-util-attach-comments";
+      version = "2.0.0";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/estree-util-attach-comments/-/estree-util-attach-comments-2.0.0.tgz";
+        sha512 = "kT9YVRvlt2ewPp9BazfIIgXMGsXOEpOm57bK8aa4F3eOEndMml2JAETjWaG3SZYHmC6axSNIzHGY718dYwIuVg==";
+      };
+    };
+    "estree-util-build-jsx-2.0.0" = {
+      name = "estree-util-build-jsx";
+      packageName = "estree-util-build-jsx";
+      version = "2.0.0";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/estree-util-build-jsx/-/estree-util-build-jsx-2.0.0.tgz";
+        sha512 = "d49hPGqBCJF/bF06g1Ywg7zjH1mrrUdPPrixBlKBxcX4WvMYlUUJ8BkrwlzWc8/fm6XqGgk5jilhgeZBDEGwOQ==";
+      };
+    };
+    "estree-util-is-identifier-name-2.0.0" = {
+      name = "estree-util-is-identifier-name";
+      packageName = "estree-util-is-identifier-name";
+      version = "2.0.0";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-2.0.0.tgz";
+        sha512 = "aXXZFVMnBBDRP81vS4YtAYJ0hUkgEsXea7lNKWCOeaAquGb1Jm2rcONPB5fpzwgbNxulTvrWuKnp9UElUGAKeQ==";
+      };
+    };
+    "estree-util-visit-1.1.0" = {
+      name = "estree-util-visit";
+      packageName = "estree-util-visit";
+      version = "1.1.0";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-1.1.0.tgz";
+        sha512 = "3lXJ4Us9j8TUif9cWcQy81t9p5OLasnDuuhrFiqb+XstmKC1d1LmrQWYsY49/9URcfHE64mPypDBaNK9NwWDPQ==";
+      };
+    };
+    "estree-walker-3.0.1" = {
+      name = "estree-walker";
+      packageName = "estree-walker";
+      version = "3.0.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.1.tgz";
+        sha512 = "woY0RUD87WzMBUiZLx8NsYr23N5BKsOMZHhu2hoNRVh6NXGfoiT1KOL8G3UHlJAnEDGmfa5ubNA/AacfG+Kb0g==";
+      };
+    };
     "esutils-2.0.3" = {
       name = "esutils";
       packageName = "esutils";
@@ -2578,6 +2794,15 @@ let
         sha512 = "thjnlGAnwP8ef/GSO1Q8BfVk2gundnc2peGQqEg2kUt/IqesiGg/5mSwN2fE7nLzy61pg88NG6xV+UrGOrx9EA==";
       };
     };
+    "hast-util-to-estree-2.0.2" = {
+      name = "hast-util-to-estree";
+      packageName = "hast-util-to-estree";
+      version = "2.0.2";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-2.0.2.tgz";
+        sha512 = "UQrZVeBj6A9od0lpFvqHKNSH9zvDrNoyWKbveu1a2oSCXEDUI+3bnd6BoiQLPnLrcXXn/jzJ6y9hmJTTlvf8lQ==";
+      };
+    };
     "hast-util-to-html-8.0.3" = {
       name = "hast-util-to-html";
       packageName = "hast-util-to-html";
@@ -2677,6 +2902,15 @@ let
         sha512 = "JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==";
       };
     };
+    "inline-style-parser-0.1.1" = {
+      name = "inline-style-parser";
+      packageName = "inline-style-parser";
+      version = "0.1.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz";
+        sha512 = "7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==";
+      };
+    };
     "internal-slot-1.0.3" = {
       name = "internal-slot";
       packageName = "internal-slot";
@@ -2704,6 +2938,24 @@ let
         sha512 = "Wz91gZKpNKoXtqvY8ScarKYwhXoK4r/b5QuT+uywe/azv0/nUCo7Bh0IRRI7F9DHR06kJNWtzMGLIbXavngbKA==";
       };
     };
+    "is-alphabetical-2.0.1" = {
+      name = "is-alphabetical";
+      packageName = "is-alphabetical";
+      version = "2.0.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz";
+        sha512 = "FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==";
+      };
+    };
+    "is-alphanumerical-2.0.1" = {
+      name = "is-alphanumerical";
+      packageName = "is-alphanumerical";
+      version = "2.0.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz";
+        sha512 = "hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==";
+      };
+    };
     "is-arrayish-0.2.1" = {
       name = "is-arrayish";
       packageName = "is-arrayish";
@@ -2785,6 +3037,15 @@ let
         sha512 = "9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==";
       };
     };
+    "is-decimal-2.0.1" = {
+      name = "is-decimal";
+      packageName = "is-decimal";
+      version = "2.0.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz";
+        sha512 = "AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==";
+      };
+    };
     "is-extendable-0.1.1" = {
       name = "is-extendable";
       packageName = "is-extendable";
@@ -2830,6 +3091,15 @@ let
         sha512 = "xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==";
       };
     };
+    "is-hexadecimal-2.0.1" = {
+      name = "is-hexadecimal";
+      packageName = "is-hexadecimal";
+      version = "2.0.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz";
+        sha512 = "DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==";
+      };
+    };
     "is-negative-zero-2.0.2" = {
       name = "is-negative-zero";
       packageName = "is-negative-zero";
@@ -2866,6 +3136,15 @@ let
         sha512 = "NXRbBtUdBioI73y/HmOhogw/U5msYPC9DAtGkJXeFcFWSFZw0mCUsPxk/snTuJHzNKA8kLBK4rH97RMB1BfCXw==";
       };
     };
+    "is-reference-3.0.0" = {
+      name = "is-reference";
+      packageName = "is-reference";
+      version = "3.0.0";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/is-reference/-/is-reference-3.0.0.tgz";
+        sha512 = "Eo1W3wUoHWoCoVM4GVl/a+K0IgiqE5aIo4kJABFyMum1ZORlPkC+UC357sSQUL5w5QCE5kCC9upl75b7+7CY/Q==";
+      };
+    };
     "is-regex-1.1.4" = {
       name = "is-regex";
       packageName = "is-regex";
@@ -2947,6 +3226,15 @@ let
         sha512 = "okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==";
       };
     };
+    "js-yaml-4.1.0" = {
+      name = "js-yaml";
+      packageName = "js-yaml";
+      version = "4.1.0";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz";
+        sha512 = "wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==";
+      };
+    };
     "jsbn-1.1.0" = {
       name = "jsbn";
       packageName = "jsbn";
@@ -3118,6 +3406,15 @@ let
         sha512 = "Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==";
       };
     };
+    "markdown-extensions-1.1.1" = {
+      name = "markdown-extensions";
+      packageName = "markdown-extensions";
+      version = "1.1.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-1.1.1.tgz";
+        sha512 = "WWC0ZuMzCyDHYCasEGs4IPvLyTGftYwh6wIEOULOF0HXcqZlhwRzrK0w2VUlxWA98xnvb/jszw4ZSkJ6ADpM6Q==";
+      };
+    };
     "markdown-table-3.0.2" = {
       name = "markdown-table";
       packageName = "markdown-table";
@@ -3208,6 +3505,42 @@ let
         sha512 = "KZ4KLmPdABXOsfnM6JHUIjxEvcx2ulk656Z/4Balw071/5qgnhz+H1uGtf2zIGnrnvDC8xR4Fj9uKbjAFGNIeA==";
       };
     };
+    "mdast-util-mdx-2.0.0" = {
+      name = "mdast-util-mdx";
+      packageName = "mdast-util-mdx";
+      version = "2.0.0";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/mdast-util-mdx/-/mdast-util-mdx-2.0.0.tgz";
+        sha512 = "M09lW0CcBT1VrJUaF/PYxemxxHa7SLDHdSn94Q9FhxjCQfuW7nMAWKWimTmA3OyDMSTH981NN1csW1X+HPSluw==";
+      };
+    };
+    "mdast-util-mdx-expression-1.2.0" = {
+      name = "mdast-util-mdx-expression";
+      packageName = "mdast-util-mdx-expression";
+      version = "1.2.0";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-1.2.0.tgz";
+        sha512 = "wb36oi09XxqO9RVqgfD+xo8a7xaNgS+01+k3v0GKW0X0bYbeBmUZz22Z/IJ8SuphVlG+DNgNo9VoEaUJ3PKfJQ==";
+      };
+    };
+    "mdast-util-mdx-jsx-2.0.1" = {
+      name = "mdast-util-mdx-jsx";
+      packageName = "mdast-util-mdx-jsx";
+      version = "2.0.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-2.0.1.tgz";
+        sha512 = "oPC7/smPBf7vxnvIYH5y3fPo2lw1rdrswFfSb4i0GTAXRUQv7JUU/t/hbp07dgGdUFTSDOHm5DNamhNg/s2Hrg==";
+      };
+    };
+    "mdast-util-mdxjs-esm-1.2.0" = {
+      name = "mdast-util-mdxjs-esm";
+      packageName = "mdast-util-mdxjs-esm";
+      version = "1.2.0";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-1.2.0.tgz";
+        sha512 = "IPpX9GBzAIbIRCjbyeLDpMhACFb0wxTIujuR3YElB8LWbducUdMgRJuqs/Vg8xQ1bIAMm7lw8L+YNtua0xKXRw==";
+      };
+    };
     "mdast-util-to-hast-12.1.1" = {
       name = "mdast-util-to-hast";
       packageName = "mdast-util-to-hast";
@@ -3343,6 +3676,51 @@ let
         sha512 = "PpysK2S1Q/5VXi72IIapbi/jliaiOFzv7THH4amwXeYXLq3l1uo8/2Be0Ac1rEwK20MQEsGH2ltAZLNY2KI/0Q==";
       };
     };
+    "micromark-extension-mdx-expression-1.0.3" = {
+      name = "micromark-extension-mdx-expression";
+      packageName = "micromark-extension-mdx-expression";
+      version = "1.0.3";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-1.0.3.tgz";
+        sha512 = "TjYtjEMszWze51NJCZmhv7MEBcgYRgb3tJeMAJ+HQCAaZHHRBaDCccqQzGizR/H4ODefP44wRTgOn2vE5I6nZA==";
+      };
+    };
+    "micromark-extension-mdx-jsx-1.0.3" = {
+      name = "micromark-extension-mdx-jsx";
+      packageName = "micromark-extension-mdx-jsx";
+      version = "1.0.3";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-1.0.3.tgz";
+        sha512 = "VfA369RdqUISF0qGgv2FfV7gGjHDfn9+Qfiv5hEwpyr1xscRj/CiVRkU7rywGFCO7JwJ5L0e7CJz60lY52+qOA==";
+      };
+    };
+    "micromark-extension-mdx-md-1.0.0" = {
+      name = "micromark-extension-mdx-md";
+      packageName = "micromark-extension-mdx-md";
+      version = "1.0.0";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/micromark-extension-mdx-md/-/micromark-extension-mdx-md-1.0.0.tgz";
+        sha512 = "xaRAMoSkKdqZXDAoSgp20Azm0aRQKGOl0RrS81yGu8Hr/JhMsBmfs4wR7m9kgVUIO36cMUQjNyiyDKPrsv8gOw==";
+      };
+    };
+    "micromark-extension-mdxjs-1.0.0" = {
+      name = "micromark-extension-mdxjs";
+      packageName = "micromark-extension-mdxjs";
+      version = "1.0.0";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-1.0.0.tgz";
+        sha512 = "TZZRZgeHvtgm+IhtgC2+uDMR7h8eTKF0QUX9YsgoL9+bADBpBY6SiLvWqnBlLbCEevITmTqmEuY3FoxMKVs1rQ==";
+      };
+    };
+    "micromark-extension-mdxjs-esm-1.0.2" = {
+      name = "micromark-extension-mdxjs-esm";
+      packageName = "micromark-extension-mdxjs-esm";
+      version = "1.0.2";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-1.0.2.tgz";
+        sha512 = "bIaxblNIM+CCaJvp3L/V+168l79iuNmxEiTU6i3vB0YuDW+rumV64BFMxvhfRDxaJxQE1zD5vTPdyLBbW4efGA==";
+      };
+    };
     "micromark-factory-destination-1.0.0" = {
       name = "micromark-factory-destination";
       packageName = "micromark-factory-destination";
@@ -3361,6 +3739,15 @@ let
         sha512 = "CTIwxlOnU7dEshXDQ+dsr2n+yxpP0+fn271pu0bwDIS8uqfFcumXpj5mLn3hSC8iw2MUr6Gx8EcKng1dD7i6hg==";
       };
     };
+    "micromark-factory-mdx-expression-1.0.6" = {
+      name = "micromark-factory-mdx-expression";
+      packageName = "micromark-factory-mdx-expression";
+      version = "1.0.6";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-1.0.6.tgz";
+        sha512 = "WRQIc78FV7KrCfjsEf/sETopbYjElh3xAmNpLkd1ODPqxEngP42eVRGbiPEQWpRV27LzqW+XVTvQAMIIRLPnNA==";
+      };
+    };
     "micromark-factory-space-1.0.0" = {
       name = "micromark-factory-space";
       packageName = "micromark-factory-space";
@@ -3451,6 +3838,15 @@ let
         sha512 = "U2s5YdnAYexjKDel31SVMPbfi+eF8y1U4pfiRW/Y8EFVCy/vgxk/2wWTxzcqE71LHtCuCzlBDRU2a5CQ5j+mQA==";
       };
     };
+    "micromark-util-events-to-acorn-1.0.4" = {
+      name = "micromark-util-events-to-acorn";
+      packageName = "micromark-util-events-to-acorn";
+      version = "1.0.4";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-1.0.4.tgz";
+        sha512 = "dpo8ecREK5s/KMph7jJ46RLM6g7N21CMc9LAJQbDLdbQnTpijigkSJPTIfLXZ+h5wdXlcsQ+b6ufAE9v76AdgA==";
+      };
+    };
     "micromark-util-html-tag-name-1.0.0" = {
       name = "micromark-util-html-tag-name";
       packageName = "micromark-util-html-tag-name";
@@ -3676,6 +4072,15 @@ let
         sha512 = "OjJ+fV15FXO2uQXQagLD4C0abYErBjyjE0I0FHpOEIB8upw0hg1ldFP6cqHTJBH1cZqy96OeR3u1dJ+Ez2D4Bg==";
       };
     };
+    "next-mdx-remote-4.0.2" = {
+      name = "next-mdx-remote";
+      packageName = "next-mdx-remote";
+      version = "4.0.2";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/next-mdx-remote/-/next-mdx-remote-4.0.2.tgz";
+        sha512 = "1cZM2xm+G1FyYodGt92lCXisP0owPeppVHeH5TIaXUGdt6ENBZYOxLNFaVl9fkS9wP/s2sLcC9m2c1iLH2H4rA==";
+      };
+    };
     "next-optimized-images-3.0.0-canary.10" = {
       name = "next-optimized-images";
       packageName = "next-optimized-images";
@@ -3856,6 +4261,15 @@ let
         sha512 = "GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==";
       };
     };
+    "parse-entities-4.0.0" = {
+      name = "parse-entities";
+      packageName = "parse-entities";
+      version = "4.0.0";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.0.tgz";
+        sha512 = "5nk9Fn03x3rEhGaX1FU6IDwG/k+GxLXlFAkgrbM1asuAFl3BhdQWvASaIsmwWypRNcZKHPYnIuOSfIWEyEQnPQ==";
+      };
+    };
     "parse-json-5.2.0" = {
       name = "parse-json";
       packageName = "parse-json";
@@ -3901,6 +4315,15 @@ let
         sha512 = "gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==";
       };
     };
+    "periscopic-3.0.4" = {
+      name = "periscopic";
+      packageName = "periscopic";
+      version = "3.0.4";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/periscopic/-/periscopic-3.0.4.tgz";
+        sha512 = "SFx68DxCv0Iyo6APZuw/AKewkkThGwssmU0QWtTlvov3VAtPX+QJ4CadwSaz8nrT5jPIuxdvJWB4PnD2KNDxQg==";
+      };
+    };
     "picocolors-1.0.0" = {
       name = "picocolors";
       packageName = "picocolors";
@@ -4009,22 +4432,22 @@ let
         sha512 = "y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==";
       };
     };
-    "react-18.0.0" = {
+    "react-17.0.2" = {
       name = "react";
       packageName = "react";
-      version = "18.0.0";
+      version = "17.0.2";
       src = fetchurl {
-        url = "https://registry.npmjs.org/react/-/react-18.0.0.tgz";
+        url = "https://registry.npmjs.org/react/-/react-17.0.2.tgz";
-        sha512 = "x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==";
+        sha512 = "gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==";
       };
     };
-    "react-dom-18.0.0" = {
+    "react-dom-17.0.2" = {
       name = "react-dom";
       packageName = "react-dom";
-      version = "18.0.0";
+      version = "17.0.2";
       src = fetchurl {
-        url = "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz";
+        url = "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz";
-        sha512 = "XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==";
+        sha512 = "s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==";
       };
     };
     "react-optimized-image-0.4.1" = {
@@ -4171,6 +4594,15 @@ let
         sha512 = "lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==";
       };
     };
+    "remark-mdx-2.1.1" = {
+      name = "remark-mdx";
+      packageName = "remark-mdx";
+      version = "2.1.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/remark-mdx/-/remark-mdx-2.1.1.tgz";
+        sha512 = "0wXdEITnFyjLquN3VvACNLzbGzWM5ujzTvfgOkONBZgSFJ7ezLLDaTWqf6H9eUgVITEP8asp6LJ0W/X090dXBg==";
+      };
+    };
     "remark-parse-10.0.1" = {
       name = "remark-parse";
       packageName = "remark-parse";
@@ -4261,13 +4693,13 @@ let
         sha512 = "NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==";
       };
     };
-    "scheduler-0.21.0" = {
+    "scheduler-0.20.2" = {
       name = "scheduler";
       packageName = "scheduler";
-      version = "0.21.0";
+      version = "0.20.2";
       src = fetchurl {
-        url = "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz";
+        url = "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz";
-        sha512 = "1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==";
+        sha512 = "2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==";
       };
     };
     "schema-utils-2.7.1" = {
@@ -4567,6 +4999,15 @@ let
         sha1 = "3c531942e908c2697c0ec344858c286c7ca0a60a";
       };
     };
+    "style-to-object-0.3.0" = {
+      name = "style-to-object";
+      packageName = "style-to-object";
+      version = "0.3.0";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz";
+        sha512 = "CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==";
+      };
+    };
     "styled-jsx-5.0.1" = {
       name = "styled-jsx";
       packageName = "styled-jsx";
@@ -4594,15 +5035,6 @@ let
         sha512 = "QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==";
       };
     };
-    "supports-color-9.2.2" = {
-      name = "supports-color";
-      packageName = "supports-color";
-      version = "9.2.2";
-      src = fetchurl {
-        url = "https://registry.npmjs.org/supports-color/-/supports-color-9.2.2.tgz";
-        sha512 = "XC6g/Kgux+rJXmwokjm9ECpD6k/smUoS5LKlUCcsYr4IY3rW0XyAympon2RmxGrlnZURMpg5T18gWDP9CsHXFA==";
-      };
-    };
     "supports-preserve-symlinks-flag-1.0.0" = {
       name = "supports-preserve-symlinks-flag";
       packageName = "supports-preserve-symlinks-flag";
@@ -4819,6 +5251,24 @@ let
         sha512 = "p/5EMGIa1qwbXjA+QgcBXaPWjSnZfQ2Sc3yBEEfgPwsEmJd8Qh+DSk3LGnmOM4S1bY2C0AjmMnB8RuEYxpPwXQ==";
       };
     };
+    "unist-util-position-from-estree-1.1.1" = {
+      name = "unist-util-position-from-estree";
+      packageName = "unist-util-position-from-estree";
+      version = "1.1.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/unist-util-position-from-estree/-/unist-util-position-from-estree-1.1.1.tgz";
+        sha512 = "xtoY50b5+7IH8tFbkw64gisG9tMSpxDjhX9TmaJJae/XuxQ9R/Kc8Nv1eOsf43Gt4KV/LkriMy9mptDr7XLcaw==";
+      };
+    };
+    "unist-util-remove-position-4.0.1" = {
+      name = "unist-util-remove-position";
+      packageName = "unist-util-remove-position";
+      version = "4.0.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-4.0.1.tgz";
+        sha512 = "0yDkppiIhDlPrfHELgB+NLQD5mfjup3a8UYclHruTJWmY74je8g+CIFr79x5f6AkmzSwlvKLbs63hC0meOMowQ==";
+      };
+    };
     "unist-util-stringify-position-3.0.2" = {
       name = "unist-util-stringify-position";
       packageName = "unist-util-stringify-position";
@@ -4927,6 +5377,15 @@ let
         sha512 = "w0PLIugRY3Crkgw89TeMvHCzqCs/zpreR31hl4D92y6SOE07+bfJe+dK5Q2akwS+i/c801kzjoOr9gMcTe6IAA==";
       };
     };
+    "vfile-matter-3.0.1" = {
+      name = "vfile-matter";
+      packageName = "vfile-matter";
+      version = "3.0.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/vfile-matter/-/vfile-matter-3.0.1.tgz";
+        sha512 = "CAAIDwnh6ZdtrqAuxdElUqQRQDQgbbIrYtDYI8gCjXS1qQ+1XdLoK8FIZWxJwn0/I+BkSSZpar3SOgjemQz4fg==";
+      };
+    };
     "vfile-message-3.1.2" = {
       name = "vfile-message";
       packageName = "vfile-message";
@@ -5151,7 +5610,10 @@ let
       sources."@jridgewell/resolve-uri-3.0.5"
       sources."@jridgewell/sourcemap-codec-1.4.11"
       sources."@jridgewell/trace-mapping-0.3.4"
+      sources."@mdx-js/mdx-2.1.1"
+      sources."@mdx-js/react-2.1.1"
       sources."@next/env-12.1.4"
+      sources."@next/mdx-12.1.4"
       sources."@next/swc-android-arm-eabi-12.1.4"
       sources."@next/swc-android-arm64-12.1.4"
       sources."@next/swc-darwin-arm64-12.1.4"
@@ -5176,18 +5638,28 @@ let
       sources."@svgr/core-5.5.0"
       sources."@svgr/hast-util-to-babel-ast-5.5.0"
       sources."@svgr/plugin-jsx-5.5.0"
+      sources."@types/acorn-4.0.6"
       sources."@types/debug-4.1.7"
+      sources."@types/estree-0.0.51"
+      sources."@types/estree-jsx-0.0.1"
       sources."@types/hast-2.3.4"
+      sources."@types/js-yaml-4.0.5"
       sources."@types/json-schema-7.0.11"
       sources."@types/mdast-3.0.10"
       sources."@types/mdurl-1.0.2"
+      sources."@types/mdx-2.0.1"
       sources."@types/ms-0.7.31"
       sources."@types/parse-json-4.0.0"
+      sources."@types/prop-types-15.7.4"
       sources."@types/q-1.5.5"
+      sources."@types/react-17.0.43"
+      sources."@types/scheduler-0.16.2"
       sources."@types/unist-2.0.6"
       sources."@wasm-codecs/gifsicle-1.0.0"
       sources."@wasm-codecs/mozjpeg-1.0.1"
       sources."@wasm-codecs/oxipng-1.0.1"
+      sources."acorn-8.7.0"
+      sources."acorn-jsx-5.3.2"
       sources."ajv-6.12.6"
       sources."ajv-keywords-3.5.2"
       sources."any-promise-1.3.0"
@@ -5195,6 +5667,8 @@ let
       sources."app-root-path-3.0.0"
       sources."aproba-1.2.0"
       sources."are-we-there-yet-1.1.7"
+      sources."argparse-2.0.1"
+      sources."astring-1.8.1"
       (sources."babel-code-frame-6.26.0" // {
         dependencies = [
           sources."ansi-regex-2.1.1"
@@ -5282,6 +5756,7 @@ let
       sources."character-entities-2.0.1"
       sources."character-entities-html4-2.1.0"
       sources."character-entities-legacy-3.0.0"
+      sources."character-reference-invalid-2.0.1"
       (sources."chokidar-3.5.3" // {
         dependencies = [
           sources."glob-parent-5.1.2"
@@ -5337,6 +5812,7 @@ let
           sources."source-map-0.6.1"
         ];
       })
+      sources."csstype-3.0.11"
       sources."debug-4.3.4"
       sources."decode-named-character-reference-1.0.1"
       sources."decompress-response-4.2.1"
@@ -5363,6 +5839,15 @@ let
       sources."es-to-primitive-1.2.1"
       sources."escalade-3.1.1"
       sources."esprima-4.0.1"
+      (sources."estree-util-attach-comments-2.0.0" // {
+        dependencies = [
+          sources."@types/estree-0.0.46"
+        ];
+      })
+      sources."estree-util-build-jsx-2.0.0"
+      sources."estree-util-is-identifier-name-2.0.0"
+      sources."estree-util-visit-1.1.0"
+      sources."estree-walker-3.0.1"
       sources."esutils-2.0.3"
       sources."expand-template-2.0.3"
       sources."extend-3.0.2"
@@ -5406,6 +5891,7 @@ let
       sources."has-tostringtag-1.0.0"
       sources."has-unicode-2.0.1"
       sources."hast-util-is-element-2.1.2"
+      sources."hast-util-to-estree-2.0.2"
       sources."hast-util-to-html-8.0.3"
       sources."hast-util-to-text-3.1.1"
       sources."hast-util-whitespace-2.0.0"
@@ -5417,6 +5903,7 @@ let
       sources."import-fresh-3.3.0"
       sources."inherits-2.0.4"
       sources."ini-1.3.8"
+      sources."inline-style-parser-0.1.1"
       sources."internal-slot-1.0.3"
       sources."invariant-2.2.4"
       (sources."ip-address-8.1.0" // {
@@ -5424,6 +5911,8 @@ let
           sources."sprintf-js-1.1.2"
         ];
       })
+      sources."is-alphabetical-2.0.1"
+      sources."is-alphanumerical-2.0.1"
       sources."is-arrayish-0.2.1"
       sources."is-bigint-1.0.4"
       sources."is-binary-path-2.1.0"
@@ -5432,15 +5921,18 @@ let
       sources."is-callable-1.2.4"
       sources."is-core-module-2.8.1"
       sources."is-date-object-1.0.5"
+      sources."is-decimal-2.0.1"
       sources."is-extendable-0.1.1"
       sources."is-extglob-2.1.1"
       sources."is-finite-1.1.0"
       sources."is-fullwidth-code-point-1.0.0"
       sources."is-glob-4.0.3"
+      sources."is-hexadecimal-2.0.1"
       sources."is-negative-zero-2.0.2"
       sources."is-number-7.0.0"
       sources."is-number-object-1.0.7"
       sources."is-plain-obj-4.0.0"
+      sources."is-reference-3.0.0"
       sources."is-regex-1.1.4"
       sources."is-shared-array-buffer-1.0.2"
       sources."is-string-1.0.7"
@@ -5448,6 +5940,7 @@ let
       sources."is-weakref-1.0.2"
       sources."isarray-1.0.0"
       sources."js-tokens-4.0.0"
+      sources."js-yaml-4.1.0"
       sources."jsbn-1.1.0"
       sources."jsesc-2.5.2"
       sources."json-parse-even-better-errors-2.3.1"
@@ -5467,6 +5960,7 @@ let
       sources."loose-envify-1.4.0"
       sources."lowlight-2.6.1"
       sources."lru-cache-6.0.0"
+      sources."markdown-extensions-1.1.1"
       sources."markdown-table-3.0.2"
       (sources."mdast-util-definitions-5.1.0" // {
         dependencies = [
@@ -5487,6 +5981,10 @@ let
       sources."mdast-util-gfm-strikethrough-1.0.1"
       sources."mdast-util-gfm-table-1.0.4"
       sources."mdast-util-gfm-task-list-item-1.0.1"
+      sources."mdast-util-mdx-2.0.0"
+      sources."mdast-util-mdx-expression-1.2.0"
+      sources."mdast-util-mdx-jsx-2.0.1"
+      sources."mdast-util-mdxjs-esm-1.2.0"
       sources."mdast-util-to-hast-12.1.1"
       sources."mdast-util-to-markdown-1.3.0"
       sources."mdast-util-to-string-3.1.0"
@@ -5501,8 +5999,14 @@ let
       sources."micromark-extension-gfm-table-1.0.5"
       sources."micromark-extension-gfm-tagfilter-1.0.1"
       sources."micromark-extension-gfm-task-list-item-1.0.3"
+      sources."micromark-extension-mdx-expression-1.0.3"
+      sources."micromark-extension-mdx-jsx-1.0.3"
+      sources."micromark-extension-mdx-md-1.0.0"
+      sources."micromark-extension-mdxjs-1.0.0"
+      sources."micromark-extension-mdxjs-esm-1.0.2"
       sources."micromark-factory-destination-1.0.0"
       sources."micromark-factory-label-1.0.2"
+      sources."micromark-factory-mdx-expression-1.0.6"
       sources."micromark-factory-space-1.0.0"
       sources."micromark-factory-title-1.0.2"
       sources."micromark-factory-whitespace-1.0.0"
@@ -5513,6 +6017,11 @@ let
       sources."micromark-util-decode-numeric-character-reference-1.0.0"
       sources."micromark-util-decode-string-1.0.2"
       sources."micromark-util-encode-1.0.1"
+      (sources."micromark-util-events-to-acorn-1.0.4" // {
+        dependencies = [
+          sources."@types/estree-0.0.50"
+        ];
+      })
       sources."micromark-util-html-tag-name-1.0.0"
       sources."micromark-util-normalize-identifier-1.0.0"
       sources."micromark-util-resolve-all-1.0.0"
@@ -5535,6 +6044,7 @@ let
       sources."napi-build-utils-1.0.2"
       sources."next-12.1.4"
       sources."next-compose-plugins-2.2.1"
+      sources."next-mdx-remote-4.0.2"
       sources."next-optimized-images-3.0.0-canary.10"
       (sources."node-abi-2.30.1" // {
         dependencies = [
@@ -5563,11 +6073,13 @@ let
       sources."os-homedir-1.0.2"
       sources."os-tmpdir-1.0.2"
       sources."parent-module-1.0.1"
+      sources."parse-entities-4.0.0"
       sources."parse-json-5.2.0"
       sources."path-exists-3.0.0"
       sources."path-is-absolute-1.0.1"
       sources."path-parse-1.0.7"
       sources."path-type-4.0.0"
+      sources."periscopic-3.0.4"
       sources."picocolors-1.0.0"
       sources."picomatch-2.3.1"
       sources."postcss-8.4.5"
@@ -5588,8 +6100,8 @@ let
           sources."strip-json-comments-2.0.1"
         ];
       })
-      sources."react-18.0.0"
+      sources."react-17.0.2"
-      sources."react-dom-18.0.0"
+      sources."react-dom-17.0.2"
       sources."react-optimized-image-0.4.1"
       sources."read-file-async-1.0.0"
       sources."readable-stream-2.3.7"
@@ -5608,6 +6120,7 @@ let
       sources."rehype-highlight-5.0.2"
       sources."rehype-stringify-9.0.3"
       sources."remark-gfm-3.0.1"
+      sources."remark-mdx-2.1.1"
       sources."remark-parse-10.0.1"
       sources."remark-rehype-10.1.0"
       sources."repeating-2.0.1"
@@ -5618,7 +6131,7 @@ let
       sources."safe-buffer-5.1.2"
       sources."sass-1.49.11"
       sources."sax-1.2.4"
-      sources."scheduler-0.21.0"
+      sources."scheduler-0.20.2"
       sources."schema-utils-3.1.1"
       sources."section-matter-1.0.0"
       sources."semver-7.3.5"
@@ -5656,8 +6169,8 @@ let
       sources."stringify-entities-4.0.2"
       sources."strip-bom-string-1.0.0"
       sources."strip-indent-2.0.0"
+      sources."style-to-object-0.3.0"
       sources."styled-jsx-5.0.1"
-      sources."supports-color-9.2.2"
       sources."supports-preserve-symlinks-flag-1.0.0"
       sources."svg-parser-2.0.4"
       (sources."svgo-1.3.2" // {
@@ -5702,6 +6215,8 @@ let
       sources."unist-util-generated-2.0.0"
       sources."unist-util-is-5.1.1"
       sources."unist-util-position-4.0.3"
+      sources."unist-util-position-from-estree-1.1.1"
+      sources."unist-util-remove-position-4.0.1"
       sources."unist-util-stringify-position-3.0.2"
       sources."unist-util-visit-4.1.0"
       sources."unist-util-visit-parents-5.1.0"
@@ -5712,6 +6227,7 @@ let
       sources."util.promisify-1.0.1"
       sources."uvu-0.5.3"
       sources."vfile-5.3.2"
+      sources."vfile-matter-3.0.1"
       sources."vfile-message-3.1.2"
       sources."which-boxed-primitive-1.0.2"
       sources."which-pm-runs-1.1.0"

web/lukegbcom/node2nix-regen.sh

@@ -2,6 +2,7 @@
 #!nix-shell -p nodePackages.node2nix -i bash
 
 exec node2nix \
+  -16 \
   -i package.json \
   -l package-lock.json \
   -o node-packages.nix \

web/lukegbcom/package.json

@@ -11,14 +11,16 @@
   "dependencies": {
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
+    "@next/mdx": "^12.1.4",
     "gray-matter": "^4.0.3",
     "ip-address": "^8.1.0",
     "jsbn": "^1.1.0",
     "next": "12.1.4",
     "next-compose-plugins": "^2.2.1",
+    "next-mdx-remote": "^4.0.2",
     "next-optimized-images": "^3.0.0-canary.10",
-    "react": "18.0.0",
+    "react": "^17.0.2",
-    "react-dom": "18.0.0",
+    "react-dom": "^17.0.2",
     "rehype-highlight": "^5.0.2",
     "rehype-stringify": "^9.0.3",
     "remark-gfm": "^3.0.1",

web/lukegbcom/pages/index.js

@@ -4,9 +4,10 @@ import HeaderNav from '../lib/HeaderNav'
 import HeroImage from '../lib/HeroImage'
 import PostsList from '../lib/PostsList'
 import { getSortedPostsData } from '../lib/posts'
+import { serialize } from 'next-mdx-remote/serialize'
 
 export async function getStaticProps() {
-  const allPostsData = await getSortedPostsData()
+  const allPostsData = await getSortedPostsData(serialize)
   return {
     props: {
       allPostsData: allPostsData.slice(0, 3)

web/lukegbcom/pages/posts.js

@@ -4,12 +4,13 @@ import HeaderNav from '../lib/HeaderNav'
 import HeroImage from '../lib/HeroImage'
 import PostsList from '../lib/PostsList'
 import { getSortedPostsData } from '../lib/posts'
+import { serialize } from 'next-mdx-remote/serialize'
 
 export async function getStaticProps() {
-  const allPostsData = await getSortedPostsData()
+  const allPostsData = await getSortedPostsData(serialize)
   return {
     props: {
-      allPostsData
+      allPostsData,
     }
   }
 }

web/lukegbcom/pages/posts/[slug].js

@@ -3,6 +3,9 @@ import styles from '../../styles/Post.module.scss'
 import HeaderNav from '../../lib/HeaderNav'
 import HeroImage from '../../lib/HeroImage'
 import { getPostSlugs, getPostBySlug } from '../../lib/posts'
+import { mdxComponents } from '../../lib/posts-edge'
+import { MDXRemote } from 'next-mdx-remote'
+import { serialize } from 'next-mdx-remote/serialize'
 
 export async function getStaticPaths() {
   return {
@@ -18,7 +21,7 @@ export async function getStaticPaths() {
 export async function getStaticProps({ params }) {
   return {
     props: {
-      postData: await getPostBySlug(params.slug),
+      postData: await getPostBySlug(params.slug, serialize),
     }
   }
 }
@@ -35,7 +38,7 @@ export default function Post({ postData }) {
   return (
     <div className={styles.container}>
       <HeaderNav />
-      <HeroImage image={postData.hero} credit={generateCredit(postData)} withGradient={true}>
+      <HeroImage image={postData.hero} credit={generateCredit(postData)} withGradient="top-black">
         {postData.title}
       </HeroImage>
       <Head>
@@ -44,7 +47,9 @@ export default function Post({ postData }) {
       </Head>
 
       <main className={styles.main}>
-        <div className={styles.post} dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
+        <div className={styles.post}>
+          <MDXRemote {...postData.contentMdx} components={mdxComponents} />
+        </div>
       </main>
     </div>
   )

web/lukegbcom/posts/2016-01-25-setting-the-scene.md

@@ -2,9 +2,9 @@
 title: Setting the Scene
 date: 2016-01-25T16:44:00Z
 layout: Post
-hero: https://source.unsplash.com/7P_2hzKryQE/1270x952
+hero: https://picsum.photos/id/866/1920/400
-hero credit: https://unsplash.com/photos/7P_2hzKryQE
+hero credit: https://unsplash.com/photos/9RqA6tnT0gA
-hero credit text: Luis Llerena
+hero credit text: Samuel Zeller
 classes:
   header: header-black-gradient
 tags:

web/lukegbcom/posts/2016-02-09-fixing-my-desktop-again.md

@@ -20,7 +20,7 @@ because, again, my displays switch themselves off.
 
 Rebooting yields this:
 
-![Will this ever reboot?](/assets/2016-02-09-linux-on-the-desktop.9b0ec6532b5e.jpg)
+![Will this ever reboot?](linux-on-the-desktop.jpg)
 
 (and clicking the reboot button does nothing)
 

web/lukegbcom/posts/2016-02-15-ard-installers.md

@@ -8,7 +8,7 @@ hero-align: center 65%
 classes:
   header: header-no-gradient
 # hero credit: https://www.flickr.com/photos/pslee999/15589950511/
-date: 2016-01-25
+date: 2016-02-15
 layout: Post
 tags:
   - university tech
@@ -25,7 +25,7 @@ As a followup to my previous post, I was trying to create an Apple Remote Deskto
 
 However, on trying this on my 10.11 Server install, I was instead presented with this:
 
-![Apple Remote Desktop error](/assets/2016-01-25-ard-error.6f44efe96257.png)
+![Apple Remote Desktop error](ard-error.png)
 
 In theory, ARD is supposed to automatically download components (like the client) which it doesn't have, and I actually managed to coax my local install of ARD, which had previously been giving the same error message, to do so.
 

web/lukegbcom/posts/2016-11-11-secure-boot-shenanigans.md

@@ -4,7 +4,7 @@ date: 2016-11-11T16:30:00Z
 layout: Post
 tags:
   - linux
-hero: /assets/2016-11-11/banner.a6acff235ea8.jpg
+hero: banner.jpg
 classes:
   header: header-black-gradient
 ---
@@ -31,7 +31,7 @@ Razer have hidden the option to get to the key management options on the Razer B
 for some reason. I'm too lazy to contact Razer support to get a modified firmware, and I don't know
 if they would even oblige, or just tell me to disable Secure Boot.
 
-![Where's my Key Management option?](/assets/2016-11-11/firmware-secure-boot-before.35da7f6fed59.jpg)
+![Where's my Key Management option?](firmware-secure-boot-before.jpg)
 
 *Note that I went back and took this picture afterwards, which is why this is already in User mode and the Vendor Keys are not active.*
 
@@ -112,8 +112,8 @@ Again using AFUWIN you can take your freshly unlocked ROM and flash it to your s
 Once that's done, cross your fingers and reboot! Hopefully you should now seen the `Key Management`
 options under `Secure Boot` in the options :)
 
-![Secure Boot menu after doing some dangerous hacks](/assets/2016-11-11/firmware-secure-boot-after.c50a7559d0be.jpg)
+![Secure Boot menu after doing some dangerous hacks](firmware-secure-boot-after.jpg)
-![The newly-unhidden Secure Boot Key Management menu](/assets/2016-11-11/firmware-secure-boot-keys-after.bfbe6608b071.jpg)
+![The newly-unhidden Secure Boot Key Management menu](firmware-secure-boot-keys-after.jpg)
 
 ## Drive Encryption
 
@@ -148,12 +148,12 @@ from the boot order.
 
 Before:
 
-![Advanced menu before](/assets/2016-11-11/firmware-advanced-before.e8758168cdad.jpg)
+![Advanced menu before](firmware-advanced-before.jpg)
 
 ...and after:
 
-![Advanced menu after](/assets/2016-11-11/firmware-advanced-after.a32bd6fe67aa.jpg)
+![Advanced menu after](firmware-advanced-after.jpg)
 
 As well as my new boot splash:
 
-![Boot splash](/assets/2016-11-11/firmware-bootsplash-after.6bc3fe7087f9.jpg)
+![Boot splash](firmware-bootsplash-after.jpg)

web/lukegbcom/posts/2017-02-17-yubikey-neo-gnupg.md

@@ -2,7 +2,7 @@
 title: YubiKey Neo GnuPG on Linux
 date: 2017-02-17
 layout: Post
-hero: https://www.yubico.com/wp-content/uploads/2013/02/YubiKey-NEO-+-finger.jpg
+hero: banner.jpg
 hero credit: https://www.yubico.com/press/images/
 hero credit text: Yubico
 classes:

web/lukegbcom/styles/Post.module.scss

@@ -1,11 +1,11 @@
-.container {
-  margin-bottom: 2rem;
-}
-
 .main {
   display: flex;
   flex-direction: column;
   align-items: center;
+
+  max-width: 100%;
+  overflow-x: auto;
+  margin-bottom: 2rem;
 }
 .post {
   max-width: var(--maxWidth);