@toastdotdev/mdx

A toast package that sources, and optionally creates pages for, MDX files

Get Started

npm i @toastdotdev/mdx

Then in your toast.js use it:

import { sourceMdx } from "@toastdotdev/mdx";

export const sourceData = async ({ setDataForSlug }) => {
  await sourceMdx({
    setDataForSlug,
    directory: "./content",
    slugPrefix: "/posts",
  });
  return;
};

or take a more manual approach and compile the mdx yourself

import { fetchMdxFromDisk, processMdx } from "@toastdotdev/mdx";

export const sourceData = async ({ setDataForSlug }) => {
  const files = await fetchMdxFromDisk({ directory: "./content" });
  Promise.all(
    files.map(async ({ filename, file }) => {
      const { content: compiledMdx, data } = await processMdx(file, {
        filepath: filename,
      });

      await setDataForSlug(`/${data.exports.meta.slug}`, {
        component: {
          mode: "source",
          value: compiledMdx,
        },
        data: mdxExports,
      });
    })
  );
  return;
};