feat: Implement mdx

gatsby-config.js

@@ -31,12 +31,6 @@ module.exports = {
       },
     },
     `gatsby-plugin-layout`,
-    {
-      resolve: `gatsby-transformer-remark`,
-      options: {
-        plugins: [`gatsby-remark-auto-headers-improved`],
-      },
-    },
     {
       resolve: `gatsby-plugin-mdx`,
       options: {

gatsby-node.js

@@ -161,7 +161,7 @@ exports.onCreateNode = async ({ node, getNode, actions }) => {
   const { createPage, createNodeField } = actions
   // TODO: find a better way to avoid handling non-resources
   // or better, attach authors to what-is archives
-  if (node.internal.type === "MarkdownRemark" && node.frontmatter.authors) {
+  if (node.internal.type === "Mdx" && node.frontmatter.authors) {
     const { frontmatter } = node
     const isDoc = Boolean(!frontmatter.path)
 

src/components/Markdown/index.tsx

@@ -14,6 +14,7 @@ import "prismjs/components/prism-python"
 import "prismjs/components/prism-yaml"
 import "prismjs/plugins/line-numbers/prism-line-numbers.css"
 import React, { FC, useEffect } from "react"
+import { MDXRenderer } from "gatsby-plugin-mdx"
 import * as SC from "./styles"
 
 interface IMarkdownProps {
@@ -30,8 +31,9 @@ export const Markdown: FC<IMarkdownProps> = ({ content, ...restProps }) => {
   }, [])
   return (
     <SC.MarkdownWrapper
-      dangerouslySetInnerHTML={{ __html: content }}
       {...restProps}
-    />
+    >
+      <MDXRenderer>{content}</MDXRenderer>
+    </SC.MarkdownWrapper>
   )
 }

src/components/ResourcesHomeContent/index.tsx

@@ -6,7 +6,7 @@ import * as SC from "./styles"
 
 interface IResourcesHomeContent extends HTMLAttributes<HTMLDivElement> {
   language: string
-  html: any
+  body: any
 }
 
 export const ResourcesHomeContent: FC<IResourcesHomeContent> = (props) => {
@@ -20,7 +20,7 @@ export const ResourcesHomeContent: FC<IResourcesHomeContent> = (props) => {
       <ResourcesList relativeDirectory={props.language} />
       <SC.Box>
         <SC.Title>Extra resources</SC.Title>
-        <Markdown content={props.html} />
+        <Markdown content={props.body} />
       </SC.Box>
       <Footer />
     </>

src/components/ResourcesList/index.tsx

@@ -15,7 +15,7 @@ const ALL_RESOURCES = graphql`
         node {
           relativePath
           relativeDirectory
-          childMarkdownRemark {
+          childMdx {
             frontmatter {
               authors
               title

src/components/ResourcesSidebar/index.tsx

@@ -18,7 +18,7 @@ const ALL_RESOURCES = graphql`
       edges {
         node {
           relativePath
-          childMarkdownRemark {
+          childMdx {
             frontmatter {
               authors
               title
@@ -31,7 +31,7 @@ const ALL_RESOURCES = graphql`
       edges {
         node {
           relativePath
-          childMarkdownRemark {
+          childMdx {
             frontmatter {
               authors
               title

src/pages/about.tsx

@@ -1,7 +1,7 @@
 import { graphql } from "gatsby"
 import React, { Fragment } from "react"
 import cx from "classnames"
-import { MarkdownRemark } from "../../generated/graphql"
+import { Mdx } from "../../generated/graphql"
 import { ComponentQuery } from "../../typings"
 import { Markdown } from "../components/Markdown"
 import { SEO } from "../components/SEO"
@@ -9,7 +9,7 @@ import { PageContent } from "../components/PageContent"
 import { HeaderBarebone } from "../components/HeaderBarebone"
 import { buildToc } from "../utils"
 
-function AboutPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
+function AboutPage({ data }: ComponentQuery<{ md: Mdx }>) {
   const { md } = data
 
   const toc = buildToc(md.headings!)
@@ -22,15 +22,15 @@ function AboutPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
         className={cx({ shifted: toc.length })}
       />
 
-      <PageContent content={<Markdown content={md.html!} />} toc={toc} />
+      <PageContent content={<Markdown content={md.body!} />} toc={toc} />
     </Fragment>
   )
 }
 
 export const query = graphql`
   query AboutPage {
-    md: markdownRemark(frontmatter: { path: { eq: "/about" } }) {
+    md: mdx(frontmatter: { path: { eq: "/about" } }) {
-      html
+      body
       headings {
         depth
         value

src/pages/rules.tsx

@@ -1,7 +1,7 @@
 import { graphql } from "gatsby"
 import React, { Fragment } from "react"
 import cx from "classnames"
-import { MarkdownRemark } from "../../generated/graphql"
+import { Mdx } from "../../generated/graphql"
 import { ComponentQuery } from "../../typings"
 import { HeaderBarebone } from "../components/HeaderBarebone"
 import { Markdown } from "../components/Markdown"
@@ -9,7 +9,7 @@ import { PageContent } from "../components/PageContent"
 import { SEO } from "../components/SEO"
 import { buildToc } from "../utils"
 
-function RulesPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
+function RulesPage({ data }: ComponentQuery<{ md: Mdx }>) {
   const { md } = data
 
   const toc = buildToc(md.headings!)
@@ -19,15 +19,15 @@ function RulesPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
       <SEO title="Rules" />
       <HeaderBarebone title="Rules" className={cx({ shifted: toc.length })} />
 
-      <PageContent content={<Markdown content={md.html!} />} toc={toc} />
+      <PageContent content={<Markdown content={md.body!} />} toc={toc} />
     </Fragment>
   )
 }
 
 export const query = graphql`
   query RulesPage {
-    md: markdownRemark(frontmatter: { path: { eq: "/rules" } }) {
+    md: mdx(frontmatter: { path: { eq: "/rules" } }) {
-      html
+      body
       headings {
         depth
         value

src/templates/archive.tsx

@@ -9,7 +9,7 @@ import { PageContent } from "../components/PageContent"
 // @todo maybe find alternative type for data
 const Archive: FC<any> = ({ data }) => {
   const { relativePath, ctime } = data.file
-  const { html, excerpt, timeToRead } = data.file.post
+  const { body, excerpt, timeToRead } = data.file.post
 
   const title = humanize(relativePath)
 
@@ -24,7 +24,7 @@ const Archive: FC<any> = ({ data }) => {
         timeToRead={timeToRead}
         shifted={false}
       />
-      <PageContent content={<Markdown content={html} />} />
+      <PageContent content={<Markdown content={body} />} />
     </Fragment>
   )
 }
@@ -36,8 +36,8 @@ export const query = graphql`
     file(relativePath: { eq: $file }) {
       relativePath
       ctime
-      post: childMarkdownRemark {
+      post: childMdx {
-        html
+        body
         excerpt
         timeToRead
       }

src/templates/resourceHome.tsx

@@ -10,7 +10,7 @@ import useSidebar from "../hooks/useSidebar"
 const ResourceHome: FC<any> = ({ data, pageContext }) => {
   const { current: language } = useSidebar()
   const { relativePath } = data.file
-  const { html, excerpt, fields, frontmatter, timeToRead } = data.file.post
+  const { body, excerpt, fields, frontmatter, timeToRead } = data.file.post
 
   const shiftLayout = Boolean(
     frontmatter.recommended_reading || frontmatter.external_resources
@@ -34,7 +34,7 @@ const ResourceHome: FC<any> = ({ data, pageContext }) => {
       />
       <PageContent
         content={
-          <ResourcesHomeContent language={pageContext.language} html={html} />
+          <ResourcesHomeContent language={pageContext.language} body={body} />
         }
         recommendedReading={frontmatter.recommended_reading}
         externalResources={frontmatter.external_resources}
@@ -53,8 +53,8 @@ export const query = graphql`
       base: { eq: "intro.md" }
     ) {
       relativePath
-      post: childMarkdownRemark {
+      post: childMdx {
-        html
+        body
         excerpt
         fields {
           authors {

src/templates/resourcePage.tsx

@@ -14,7 +14,7 @@ const ResourcePage: FC<any> = ({ data }) => {
   const { current: language } = useSidebar()
   const { relativePath } = data.file
   const {
-    html,
+    body,
     headings,
     excerpt,
     fields,
@@ -49,7 +49,7 @@ const ResourcePage: FC<any> = ({ data }) => {
       <PageContent
         content={
           <>
-            <Markdown content={html} />
+            <Markdown content={body} />
             <Footer />
           </>
         }
@@ -67,8 +67,8 @@ export const query = graphql`
   query ResourcePage($file: String!) {
     file(relativePath: { eq: $file }) {
       relativePath
-      post: childMarkdownRemark {
+      post: childMdx {
-        html
+        body
         headings {
           depth
           value

src/types/index.d.ts

@@ -23,7 +23,7 @@ export interface IFileResourceQuery {
   node: {
     relativePath: string
     relativeDirectory: string
-    childMarkdownRemark: {
+    childMdx: {
       frontmatter: {
         author: string
         date: string

src/utils/index.ts

@@ -5,7 +5,7 @@ import pipe from "ramda/es/pipe"
 import sort from "ramda/es/sort"
 
 import { IFile, IFileOrFolder, IFolder, ITocItem } from "../types"
-import { MarkdownRemark } from "../../generated/graphql"
+import { Mdx } from "../../generated/graphql"
 
 const slugger = new GithubSlugger()
 
@@ -141,7 +141,7 @@ export function join([head, ...tail]: IFileOrFolder[]): IFileOrFolder[] {
   return [current, ...join(remaining)]
 }
 
-export function buildToc(headings: MarkdownRemark["headings"]): ITocItem[] {
+export function buildToc(headings: Mdx["headings"]): ITocItem[] {
   if (!headings) {
     return []
   }