allow embedding components in markdown

gatsby-config.js

@@ -14,6 +14,12 @@ module.exports = {
         path: `${__dirname}/src/markdown-pages`,
       },
     },
-    `gatsby-transformer-remark`,
+    {
+      resolve: `gatsby-plugin-mdx`,
+      options: {
+        extensions: [`.mdx`, `.md`],
+        gatsbyRemarkPlugins: [],
+      },
+    },
   ],
 }

gatsby-node.js

@@ -7,7 +7,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
   const result = await graphql(`
     {
-      allMarkdownRemark(
+      allMdx(
         limit: 1000
       ) {
         edges {
@@ -28,7 +28,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     return
   }
 
-  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+  result.data.allMdx.edges.forEach(({ node }) => {
     createPage({
       path: node.frontmatter.path,
       component: blogPostTemplate,

package.json

@@ -14,7 +14,10 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "dependencies": {
+    "@mdx-js/mdx": "^1.5.1",
+    "@mdx-js/react": "^1.5.1",
     "gatsby": "^2.18.8",
+    "gatsby-plugin-mdx": "^1.0.62",
     "gatsby-source-filesystem": "^2.1.42",
     "gatsby-transformer-remark": "^2.6.42",
     "react": "^16.12.0",

src/components/nav.module.css

@@ -24,7 +24,7 @@
   flex-flow: row wrap;
 }
 
-a.navItem {
+a.navItem, a.navItem:visited {
   padding: 1rem;
   color: white;
   font-weight: 900;

src/components/roomState.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react"
-import Layout from "../components/layout"
 
 const roomStateData = {
   loading: { text: "lade…", color: "white" },
@@ -20,13 +19,11 @@ export default () => {
   }, [])
 
   return (
-    <Layout>
     <h2>
       Raumstatus:{" "}
       <span style={{ color: roomStateData[openState].color }}>
         {roomStateData[openState].text}
       </span>
     </h2>
-    </Layout>
   )
 }

src/markdown-pages/treff.mdx

@@ -0,0 +1,8 @@
+---
+path: "/treff"
+title: "Zeiten & Location"
+---
+import RoomState from "../components/roomState"
+
+<RoomState/>
+

src/templates/simpleTemplate.js

@@ -1,12 +1,13 @@
 import React, { useEffect } from "react"
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
+import { MDXRenderer } from "gatsby-plugin-mdx"
 
 export default function Template({
   data, // this prop will be injected by the GraphQL query below.
 }) {
-  const { markdownRemark } = data // data.markdownRemark holds your post data
-  const { frontmatter, html } = markdownRemark
+  const { mdx } = data // data.markdownRemark holds your post data
+  const { frontmatter, body } = mdx
 
   useEffect(() => {
     document.title = frontmatter.title
@@ -14,17 +15,16 @@ export default function Template({
 
   return (
     <Layout>
-      <div dangerouslySetInnerHTML={{ __html: html }}></div>
+      <MDXRenderer>{body}</MDXRenderer>
     </Layout>
   )
 }
 
 export const pageQuery = graphql`
   query($path: String!) {
-    markdownRemark(frontmatter: { path: { eq: $path } }) {
-      html
+    mdx(frontmatter: { path: { eq: $path } }) {
+      body
       frontmatter {
-        path
         title
       }
     }