Experiments with MDX

I've decided to integrate MDX into this GatsbyJS site. MDX is Markdown syntax with JSX superpowers!

Hooray, but why?

There are setbacks to using the WordPress Gutenberg Editor or indeed other types of CMS. Originally, my aim was to learn and understand GatsbyJS CMS integrations, and the processes that creators should understand to effectively manage / update their content.

Gutenberg Limitations

A limitation of using the Gutenberg Editor with React is that it's not so simple to 'hydrate' components within the markup returned from the editor. The retuned output is just a string of HTML and this is actually how the WP-Gutenberg Editor is supposed to behave. To 'inject' some kind of state for interactivty means "unwrapping" the content of a large string of html. Edgecase madness.

I would like to be able to demonstrate interactive JavaScript/JSX within the post content. This was my main reasons for trying MDX. I'm hoping it gives me more of an incentive to discuss and experiment with code, perhaps even create a component scrapbook. My first impressions are very good!

Syntax Highlighting

It's really easy to add syntax highlighting using PrismJS & MDX. I did manage to configure this using the WP Gutenberg Editor via clumsy custom HTML blocks. A single keypress could cause a rendering bug. Its also too fiddlesome copy & pasting code into the WPGB editor. It's much better via mdx. Easy to write in VSCode and really neat to view on the frontend.

// creepy crawlies...
const guess = useCallback(
  (e) => {
    const newVal = getRandom();
    let result = "";
    let win = "";
    // bugs live here
    if (newVal > game.currentValue) {
      win = e.currentTarget.name === "high" ? "win" : "lose";
      result = `The next value: ${newVal} is higher, you ${win}`;
    } else if (newVal < game.currentValue) {
      win = e.currentTarget.name === "high" ? "lose" : "win";
      result = `The next value: ${newVal}  is lower, you ${win}`;
    } else {
      result = `new ${newVal}  and old ${game.currentValue} are equal`;
    }

    // bugs live here
    const winning =
      win === "win"
        ? 1 + game.winning
        : game.currentValue === newVal
        ? game.winning
        : 0;
    const losing =
      win !== "win"
        ? 1 + game.losing
        : game.currentValue === newVal
        ? game.losing
        : 0;

    setGame({
      result,
      winning,  // shorthand properties
      losing,  // shorthand properties
      currentValue: newVal,
    });
  },
  [game]
);
//
//

The Content Mesh

It's an example of the so called 'content-mesh'. There are multiple data sources that Gatbsy uses to create the frontend. Organising content and arranging it is not as simple as it first sounds, especially when arranging two independant data sets into one.

Code Splitting

I'm also wondering about the potential for Webpack Bundling and code-splitting, compelling stuff! It's relatively easy to include large components that are only used on a single page into many page's JS bundle. GatsbyJS provides a few escape hatches when it comes to code bundling and loading lazy/server side components. Somewhat a WIP as React18 doesn't look to be shipping with Server components by default, but GatsbyV4 does look to be supporting an early implementaton via their framework.

Learning Markdown

Last but not least I'm hoping to become fluent in Markdown. Many of my Github repos'

.readme

I'd like to change this bad habit and need to simplify the documentation process.