How to programatically process markdown?

[ilg-ul]

I'm generating a table using several fields retrieved from the blog post front matter. The code to fill in the array looks like this:

type ChronologyEvent = {
  interval: string,
  description: JSX.Element
}

...

const chronologyRows = ((ctx) => {
  const keys: string[] = ctx.keys();

  // Array of modules extracted from context.
  const chronologyModules = [];

  // Keep only posts with eventDate.
  keys.forEach((key) => {
    const module = ctx(key);
    const { frontMatter } = module.metadata;
    logger.info(frontMatter.eventDate);
    if (frontMatter.eventDate !== undefined) {
      chronologyModules.push(module);
    }
  })

  # ...

  return chronologyModules.map((module) => {
    const { permalink, frontMatter } = module.metadata;
    // logger.info(module.metadata)
    const row: ChronologyEvent = {
      interval: formatInterval(frontMatter.eventDate, frontMatter.eventEndDate),
      description: (<a href={permalink}>{frontMatter.eventSummary}</a>)
    }
    // logger.info(row)
    return row;
  })

  // @ts-ignore
})(require.context('../../blog', true, /.*.md/));

The table is rendered by a simple component:

function ChronologyRow({interval, description}: ChronologyEvent) {
  return (
    <tr>
      <td>{interval}</td>
      <td>{description}</td>
    </tr>
  )
}

The result looks ok.

Now I would like to be able to enter some formatting (bold, italics, etc) in the frontMatter.eventSummary field.

I tried both HTML and markdown syntax, with **...**, <b>...</b>, and none were rendered. I also tried <MDXContent>... </MDXContent>, but to no avail.

Is there any way to achieve this?

[slorber]

Weird I thought I already answered this one 🤪

If you want to put markdown in frontmatter (as a string then), you would have to use a runtime markdown lib (like react-markdown?) to render that string in your React code.

MDX won't process your frontmatter at compilation time, it only sees a string