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

View File

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

View File

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

View File

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

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

715
yarn.lock

File diff suppressed because it is too large Load Diff