Merge pull request #286 from dfireBird/mdx-support

feat: Implement MDX

gatsby-config.js

@@ -32,9 +32,11 @@ module.exports = {
     },
     `gatsby-plugin-layout`,
     {
-      resolve: `gatsby-transformer-remark`,
+      resolve: `gatsby-plugin-mdx`,
       options: {
+        extensions: [`.mdx`, `.md`],
         plugins: [`gatsby-remark-auto-headers-improved`],
+        gatsbyRemarkPlugins: [`gatsby-remark-auto-headers-improved`],
       },
     },
     {

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)
 

package.json

@@ -30,12 +30,15 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
   },
   "dependencies": {
+    "@mdx-js/mdx": "^1.6.6",
+    "@mdx-js/react": "^1.6.6",
     "@reach/router": "^1.3.3",
     "classnames": "^2.2.6",
     "gatsby": "^2.22.11",
     "gatsby-plugin-google-fonts": "^1.0.1",
     "gatsby-plugin-layout": "^1.3.2",
     "gatsby-plugin-manifest": "^2.4.9",
+    "gatsby-plugin-mdx": "^1.2.16",
     "gatsby-plugin-polished": "^1.0.4",
     "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
     "gatsby-plugin-react-helmet": "^3.3.2",
@@ -44,7 +47,6 @@
     "gatsby-plugin-styled-components": "^3.3.2",
     "gatsby-remark-auto-headers-improved": "^1.0.4",
     "gatsby-source-filesystem": "^2.3.8",
-    "gatsby-transformer-remark": "^2.8.13",
     "gatsby-transformer-sharp": "^2.5.3",
     "github-slugger": "^1.3.0",
     "lodash": "^4.17.15",

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/content/site/faq.md

@@ -4,7 +4,7 @@ path: /faq
 
 ## What are the roles and what do they mean?
 
-### Community-Member,<br>Active Contributor,<br>Chatterbox,<br>Super-Talky-Guy,<br>Bepis-Drinker,<br>Conke-Commander,<br>and Patriotic-Procrastinator
+### Community-Member,<br />Active Contributor,<br />Chatterbox,<br />Super-Talky-Guy,<br />Bepis-Drinker,<br />Conke-Commander,<br />and Patriotic-Procrastinator
 
 These are the activity roles of the server in the order you will be granted them. Different tiers will grant different perks, such as unlocking hidden channels, voice access, and nicknaming privileges. These roles are assigned automatically as you participate in the server, so don't ask for them.
 

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" } }) {
-      html
+    md: mdx(frontmatter: { path: { eq: "/about" } }) {
+      body
       headings {
         depth
         value

src/pages/faq.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 FaqPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
+function FaqPage({ data }: ComponentQuery<{ md: Mdx }>) {
   const { md } = data
 
   const toc = buildToc(md.headings!)
@@ -22,15 +22,15 @@ function FaqPage({ 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 FaqPage {
-    md: markdownRemark(frontmatter: { path: { eq: "/faq" } }) {
-      html
+    md: mdx(frontmatter: { path: { eq: "/faq" } }) {
+      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" } }) {
-      html
+    md: mdx(frontmatter: { path: { eq: "/rules" } }) {
+      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 {
-        html
+      post: childMdx {
+        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 {
-        html
+      post: childMdx {
+        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 {
-        html
+      post: childMdx {
+        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 []
   }