migrate to mdx (#35)

* working mdx

* fix feed

* mostly working toc

* fix autolink headers & smcp clash

* remove log in scroll-spy-hook.js

* working smcp and katex

* fix toc null pointer

* cleanup: remove unused toc style

* add missing gatsby-remark-autolink-headers style

* add lc component

* add data.json

* update lc color

* disable smallcap in code

* exclude lc posts from bottom nav, cleanup

* add problem card

content/blog/leetcode/longest-increasing-subsequence.md → content/blog/leetcode/longest-increasing-subsequence.mdx

@@ -1,15 +1,19 @@
 ---
-title: 300. Longest Increasing Subsequence
+title: Longest Increasing Subsequence
 date: 2021-02-11T15:49:03.284Z
 url: https://leetcode-cn.com/problems/longest-increasing-subsequence/
 english: true
 ---
 
-https://leetcode-cn.com/problems/longest-increasing-subsequence/
+import LeetCode from "components/LeetCode"
+
+<LeetCode.ProblemCard id={300} />
 
 Given an integer array nums, return the length of the longest strictly increasing subsequence.
 
-A subsequence is a sequence that can be derived from an array by deleting some or no elements without changing the order of the remaining elements. For example, `[3,6,2,7]` is a subsequence of the array `[0,3,1,6,2,2,7]`.
+A subsequence is a sequence that can be derived from an array by deleting some or no elements without changing the
+order of the remaining elements. For example, `[3,6,2,7]` is a subsequence of the array `[0,3,1,6,2,2,7]`.
+
 
 ## Key Intuition
 

content/blog/leetcode/reverse-linked-list/index.md

@@ -3,6 +3,9 @@ title: Reverse Linked List
 date: 2021-02-11T15:49:03.284Z
 url: https://leetcode-cn.com/problems/reverse-linked-list
 ---
+import LeetCode from "components/LeetCode"
+
+<LeetCode.ProblemCard id={206} />
 
 Given the head of a singly linked list, reverse the list, and return the reversed list.
 

content/blog/posts/analysis-jetpack-datastore.md

@@ -286,6 +286,6 @@ I hope this post does justice to Jetpack DataStore by highlighting its transacti
 - [`SharedPreferencesImpl.java` source code](https://cs.android.com/android/platform/superproject/+/master:frameworks/base/core/java/android/app/SharedPreferencesImpl.java)
 - [`SingleProcessDataStore.kt` source code](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:datastore/datastore-core/src/main/java/androidx/datastore/core/SingleProcessDataStore.kt)
 - [Prefer Storing Data with Jetpack DataStore](https://android-developers.googleblog.com/2020/09/prefer-storing-data-with-jetpack.html)
-- <cite>[Designing Data-Intensive Applications](https://dataintensive.net/)</cite> has an excellent presentation of various concurrency pitfalls in the context of database transactions.
+- [<cite>Designing Data-Intensive Applications</cite>](https://dataintensive.net/) has an excellent presentation of various concurrency pitfalls in the context of database transactions.
 - [《反思｜官方也无力回天？ Android SharedPreferences 的设计与实现》](https://juejin.cn/post/6884505736836022280) is a nice post that calls attention to the rationale behind some of SharedPreferences' API, as well as its shortcomings.
-- <cite>[Actor-based Concurrency](https://berb.github.io/diploma-thesis/original/054_actors.html)</cite>
+- [<cite>Actor-based Concurrency</cite>](https://berb.github.io/diploma-thesis/original/054_actors.html)

gatsby-config.js

@@ -27,10 +27,17 @@ module.exports = {
  },
  },
  {
- resolve: `gatsby-transformer-remark`,
+ // https://github.com/gatsbyjs/gatsby/issues/21866
+ resolve: `gatsby-plugin-mdx`,
  options: {
- plugins: [
- `gatsby-remark-embed-svg`,
+ extensions: [".md", ".mdx"],
+ remarkPlugins: [
+ require(`remark-math`), require("remark-html-katex"),
+ ],
+ gatsbyRemarkPlugins: [
+ { // https://github.com/gatsbyjs/gatsby/issues/21592
+ resolve: require.resolve("./plugins/gatsby-remark-embed-svg"),
+ },
  {
  resolve: `gatsby-remark-images`,
  options: {
@@ -43,18 +50,18 @@ module.exports = {
  wrapperStyle: `margin-bottom: 1.0725rem`,
  },
  },
+ // need to put before `gatsby-remark-prismjs`
+ `gatsby-remark-autolink-headers`,
  {
-
- resolve: `gatsby-remark-smallcaps`,
+ resolve: `gatsby-remark-katex`,
  options: {
- className: "smcp"
- }
+ strict: `ignore`,
+ },
  },
- `gatsby-remark-katex`,
- // need to put before `gatsby-remark-prismjs`
- `gatsby-remark-autolink-headers`,
  // need to put after `gatsby-remark-autolink-headers`
- `gatsby-remark-hanzi-nowrap`,
+ {
+ resolve: require.resolve("./plugins/gatsby-remark-hanzi-nowrap"),
+ },
  `gatsby-remark-prismjs`,
  `gatsby-remark-copy-linked-files`,
  `gatsby-remark-smartypants`,
@@ -64,20 +71,26 @@ module.exports = {
  blocks: {
  tip: {
  classes: "tip",
- title: "optional"
+ title: "optional",
  },
  fig: {
  classes: "svg",
  title: "optional",
- containerElement: 'figure',
- titleElement: 'figcaption'
- }
- }
- }
+ containerElement: "figure",
+ titleElement: "figcaption",
+ },
+ },
+ },
  },
- `gatsby-remark-figure-block`,
+ {
+ resolve: require.resolve(`./plugins/gatsby-remark-figure-block`),
+ },
+ ],
+ rehypePlugins: [
+ require(`./plugins/rehype-smallcap`),
+ require(`./plugins/rehype-leetcode`),
  ],
- excerpt_separator: `<!-- excerpt end -->`
+ // excerpt_separator: `<!-- excerpt end -->`,
  },
  },
  `gatsby-transformer-sharp`,
@@ -88,7 +101,7 @@ module.exports = {
  //trackingId: `ADD YOUR TRACKING ID HERE`,
  },
  },
- `gatsby-plugin-feed`,
+ `gatsby-plugin-feed-mdx`,
  {
  resolve: `gatsby-plugin-manifest`,
  options: {

gatsby-node.js

@@ -8,7 +8,7 @@ exports.createPages = async ({ graphql, actions }) => {
  const result = await graphql(
  `
  {
- allMarkdownRemark(
+ allMdx(
  sort: { fields: [frontmatter___date], order: DESC }
  limit: 1000
  ) {
@@ -24,15 +24,15 @@ exports.createPages = async ({ graphql, actions }) => {
  }
  }
  }
- `
+ `,
  )
 
  if (result.errors) {
  throw result.errors
  }
 
  // Create blog posts pages.
- const posts = result.data.allMarkdownRemark.edges
+ const posts = result.data.allMdx.edges
 
  posts.forEach((post, index) => {
  const previous = index === posts.length - 1 ? null : posts[index + 1].node
@@ -43,17 +43,23 @@ exports.createPages = async ({ graphql, actions }) => {
  component: blogPost,
  context: {
  slug: post.node.fields.slug,
- previous,
- next,
+ previous: excludingLeetCodePosts(previous),
+ next: excludingLeetCodePosts(next),
  },
  })
  })
 }
 
+function excludingLeetCodePosts(post) {
+ if (!post) return post
+ if (post.fields.slug.includes("leetcode")) return null
+ return post
+}
+
 exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
 
- if (node.internal.type === `MarkdownRemark`) {
+ if (node.internal.type === `Mdx`) {
  const value = createFilePath({ node, getNode })
  createNodeField({
  name: `slug`,
@@ -62,3 +68,11 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
  })
  }
 }
+
+exports.onCreateWebpackConfig = ({ stage, actions }) => {
+ actions.setWebpackConfig({
+ resolve: {
+ modules: [path.resolve(__dirname, "src"), "node_modules"],
+ },
+ })
+}