homepage/src/templates/siteTemplate.js

56 lines
1.4 KiB
JavaScript
Raw Normal View History

2019-12-12 21:27:56 +00:00
import React, { useEffect } from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
2019-12-12 23:03:04 +00:00
import { MDXRenderer } from "gatsby-plugin-mdx"
2019-12-17 21:54:47 +00:00
import { MDXProvider } from "@mdx-js/react"
2019-12-12 21:27:56 +00:00
2019-12-14 16:10:54 +00:00
const ide =
"https://repos.ctdo.de/-/ide/project/neri/ctdo-hompage/edit/master/-/src/markdown-pages/"
2019-12-17 21:54:47 +00:00
const MdLeakH1 = props => <h2 {...props}># {props.children}</h2>
const MdLeakH2 = props => <h3 {...props}># {props.children}</h3>
const MdLeakH3 = props => <h4 {...props}># {props.children}</h4>
const MdLeakH4 = props => <h5 {...props}># {props.children}</h5>
const components = {
h1: MdLeakH1,
h2: MdLeakH2,
h3: MdLeakH3,
h4: MdLeakH4,
}
2019-12-12 21:27:56 +00:00
export default function Template({
data, // this prop will be injected by the GraphQL query below.
}) {
2019-12-12 23:03:04 +00:00
const { mdx } = data // data.markdownRemark holds your post data
const { frontmatter, body } = mdx
2019-12-12 21:27:56 +00:00
useEffect(() => {
document.title = frontmatter.title
}, [frontmatter.title])
2019-12-14 17:03:07 +00:00
const editLink = frontmatter.edit ? ide + frontmatter.edit.relativePath : null
2019-12-14 16:10:54 +00:00
2019-12-12 21:27:56 +00:00
return (
2019-12-14 16:10:54 +00:00
<Layout editLink={editLink}>
2019-12-17 21:54:47 +00:00
<MDXProvider components={components}>
<MDXRenderer>{body}</MDXRenderer>
</MDXProvider>
2019-12-12 21:27:56 +00:00
</Layout>
)
}
export const pageQuery = graphql`
query($path: String!) {
2019-12-12 23:03:04 +00:00
mdx(frontmatter: { path: { eq: $path } }) {
body
2019-12-12 21:27:56 +00:00
frontmatter {
title
2019-12-14 17:03:07 +00:00
edit {
relativePath
}
2019-12-12 21:27:56 +00:00
}
}
}
`