compile-mdx-v2.tsx

import React from "react";
import { Link } from "react-router-dom";

import matter from "gray-matter";
import visit from "unist-util-visit";
import renderToString from "next-mdx-remote/render-to-string";
import type { Post, MDXPost } from "../types";
import * as shiki from "shiki";
import setCDN from "shiki";
import langTS from "../content/shiki/languages/ts.tmLanguage.json";
import langTSX from "../content/shiki/languages/tsx.tmLanguage.json";
import langJS from "../content/shiki/languages/javascript.tmLanguage.json";
import langJSX from "../content/shiki/languages/jsx.tmLanguage.json";
import langJSON from "../content/shiki/languages/json.tmLanguage.json";
import langRust from "../content/shiki/languages/rust.tmLanguage.json";
import langPython from "../content/shiki/languages/python.tmLanguage.json";
import langC from "../content/shiki/languages/c.tmLanguage.json";
import langHTML from "../content/shiki/languages/html.tmLanguage.json";
import langCSS from "../content/shiki/languages/css.tmLanguage.json";
import langWASM from "../content/shiki/languages/wasm.tmLanguage.json";
import themeNord from "../content/shiki/themes/nord.json";

async function compilePost(name: string, post: Post) {
  const highlighter = await shiki.getHighlighter({
    themes: [themeNord],
    langs: [
      {
        id: "typescript",
        scopeName: langTS.scopeName,
        grammar: langTS,
        aliases: ["ts"],
      },
      {
        id: "tsx",
        scopeName: langTSX.scopeName,
        grammar: langTSX,
      },
      {
        id: "js",
        scopeName: langJS.scopeName,
        grammar: langJS,
      },
      {
        id: "jsx",
        scopeName: langJSX.scopeName,
        grammar: langJSX,
      },
      {
        id: "json",
        scopeName: langJSON.scopeName,
        grammar: langJSON,
      },
      {
        id: "rust",
        scopeName: langRust.scopeName,
        grammar: langRust,
      },
      {
        id: "python",
        scopeName: langPython.scopeName,
        grammar: langPython,
      },
      {
        id: "c",
        scopeName: langC.scopeName,
        grammar: langC,
      },
      {
        id: "HTML",
        scopeName: langHTML.scopeName,
        grammar: langHTML,
      },
      {
        id: "css",
        scopeName: langCSS.scopeName,
        grammar: langCSS,
      },
      {
        id: "wasm",
        scopeName: langWASM.scopeName,
        grammar: langWASM,
      },
    ],
  });
  const { data, content } = matter(post.content);
  const scope = { React, Link };

  const frontmatter = data as MDXPost["frontmatter"];
  const mdxSource = await renderToString(content, {
    mdxOptions: { remarkPlugins: [[remarkPlugin, { highlighter }]] },
    scope: { data, scope },
  });

  return {
    source: mdxSource,
    frontmatter,
  };
}
export const remarkPlugin = (options) => async (tree) => {
  visit(tree, "code", (node) => {
    node.type = "html";
    node.children = undefined;
    node.value = options.highlighter
      .codeToHtml(node.value, node.lang)
      .replace(
        '<pre class="shiki"',
        `<pre class="shiki font-code" language="${node.lang}" meta="${node.meta}"`
      );
  });
};

export { compilePost };