Gatsby and MDX

MDX is an interesting concept, in the sense that you can have access to react components from within makrdown text. I think this becomes interesting when you have thinks like polls or comments (although you'd probably use disqus)

Plugins

I started using gatsby-mdx first which was merged in Gatsby's tree as gatsby-plugin-mdx. This implied a couple of changes in the configuration:

module.exports = {
  // ...
  {
    resolve: 'gatsby-plugin-mdx',
    options: {
      extensions: ['.md', '.mdx', '.markdown'],
      gatsbyRemarkPlugins: [
        {
          resolve: 'gatsby-remark-smartypants',
          options: {
            dashes: 'oldschool'
          }
        },
        {
          resolve: 'gatsby-remark-prismjs',
          options: {
            classPrefix: 'language-',
            inlineCodeMarker: {
              tsx: 'tsx'
            },
            aliases: {}
          }
        },
        {
          resolve: 'gatsby-remark-images',
          options: {
            maxWidth: 590
          }
        },
        {
          resolve: 'gatsby-remark-copy-linked-files',
          options: {
            destinationDir: 'data'
          }
        }
      ],
      plugins: [`gatsby-remark-images`]
    }
  }
}

Few notes:

1. At he moment of writing this you need to duplicate the gatsby-remark-images entry in gatsbyRemarkPlugins and plugins. Otherwise, you get some weird behaviour on all blog's images (I got the blurry one and the real image underneath instead of the fade effect),
2. The image plugin has the mas image width specified. This should be added to the config.

Extensions

Migration from wordpress can generate .md, .markdown and nouw you have to also deal with .mdx. Hence the extensions option.

Prismjs

Prism is an excellent code highlighter. I am still searching for an ideal theme :)