migrate to mdx

[yujinyan]

• fix toc
• fix page style
• smallcaps should not process code blocks
• hide lc posts from main posts bottom nav

I ran into many issues with gatsby remark plugins when migrating to gatsby-plugin-mdx. Issues and solutions are recorded below.

gatsby-remark-autolink-headers

The plugin injected some style into <head/>. Somehow it is missing with mdx. I am copy pasting the style in global.css.

toc

gatsby-plugin-mdx exposes data structure as toc, which is better than gatsby remark's plain html version.

I reworked the toc implementation based on this blog post.

https://www.bram.us/2020/01/10/smooth-scrolling-sticky-scrollspy-navigation/

The scroll spy logic is encapsulated in scroll-spy-hook.js

small cap

With gatsby-remark-smallcaps, the page appears to render correctly in the browser, but there is error in the browser console.

To solve this issue, I rewrote gatsby-remark-smallcaps as a rehype plugin.

Useful resources to start with writing rehype plugins:

• https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins

Remaining issue:

katex

gatsby-remark-katex doesn't seem to work with gatsby-plugin-mdx.

I used solution from the following issue comment and it worked.

gatsbyjs/gatsby#20538 (comment)

remarkPlugins: [require(`remark-math`), require("remark-html-katex"),],
gatsbyRemarkPlugins: [
{
  resolve: `gatsby-remark-katex`,
    options: { strict: `ignore`, },
  },
]

"gatsby-remark-katex": "^3.0.0"
"remark-math": "^4.0.0"
"remark-html-katex": "^3.0.0"
"katex": "^0.10.0"

Note that:

• must use gatsby-remark-katext@^3.0.0, version 4 does not work.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/yujinyan/blog/D75PRU1V1ZayYEGbdn2gGiGnCNWQ
✅ Preview: https://blog-git-mdx-2-yujinyan.vercel.app