allow embedding components in markdown
This commit is contained in:
parent
10513aa23e
commit
179b31d3b9
|
@ -14,6 +14,12 @@ module.exports = {
|
|||
path: `${__dirname}/src/markdown-pages`,
|
||||
},
|
||||
},
|
||||
`gatsby-transformer-remark`,
|
||||
{
|
||||
resolve: `gatsby-plugin-mdx`,
|
||||
options: {
|
||||
extensions: [`.mdx`, `.md`],
|
||||
gatsbyRemarkPlugins: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
a.navItem {
|
||||
a.navItem, a.navItem:visited {
|
||||
padding: 1rem;
|
||||
color: white;
|
||||
font-weight: 900;
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
path: "/treff"
|
||||
title: "Zeiten & Location"
|
||||
---
|
||||
import RoomState from "../components/roomState"
|
||||
|
||||
<RoomState/>
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue