allow embedding components in markdown

This commit is contained in:
neri 2019-12-13 00:03:04 +01:00
parent 10513aa23e
commit 179b31d3b9
9 changed files with 713 additions and 54 deletions

View File

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

View File

@ -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,

View File

@ -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",

View File

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

View File

@ -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>
<h2>
Raumstatus:{" "}
<span style={{ color: roomStateData[openState].color }}>
{roomStateData[openState].text}
</span>
</h2>
)
}

View File

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

View File

@ -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
}
}

715
yarn.lock

File diff suppressed because it is too large Load Diff