Replace gist links in markdown with an embed using remark in Next.js

GistTransformer.ts

const GistTransformer = {
  name: 'Gist',
  shouldTransform(url) {
    const {host} = new URL(url);

    return ['gist.github.com'].includes(host);
  },
  getHTML(link) {
    const url = new URL(link);
    const id = url.pathname.split('/').pop();
    // If you copy a file-specific URL from the gist, the link ends in #file-lowercasefilename-ext
    // But the gist embed link requires ?file=CorrectlyCasedFilename.ext to target the file
    // There isn't a sensible way to transform the lowercase filename back to CamelCase, kebab-case presumably is fine.
    // So the markdown link will need to be of the form https://gist.github.com/username/id?file=CorrectlyCasedFilename.ext if you want to target a file
    let file;
    if (url.searchParams.get('file')) {
      file = `file="${url.searchParams.get('file')}"`;
    }

    return `<Gist id="${id}" ${file} />`;
  },
};

export default GistTransformer;

Post.tsx

import remarkEmbedder from '@remark-embedder/core';
import {MDXRemote} from 'next-mdx-remote';
import {serialize} from 'next-mdx-remote/serialize';
import Gist from 'react-gist';

import GistTransformer from '../lib/GistTransformer';

const components = (path) => ({
  gist: Gist,
});

function Post({ record }) {
  return (
    <MDXRemote {...record.mdx} components={components(record.frontmatter.path)} lazy />
  );
}

export const getStaticProps = async ({params}) => {
  // your imported markdown object
  record.mdx = await serialize(record.content, {
    scope: record.frontmatter,
    mdxOptions: {
      remarkPlugins: [
        [remarkEmbedder, { transformers: [GistTransformer] }]
      ],
      rehypePlugins: [],
    },
  });
  
  return {
    props: {
      record,
    },
  };
};

export default Post;