import React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
import bgImage from "../media/phones.png"
import DocsCard from "../components/cards/docs"
import { node2slug } from "../utils";
import rehypeReact from "rehype-react"
function DivMixin(props) {
if (props?.class != null && props.class.includes("gatsby-highlight")) {
props.class = props.class + " mockup-code mb-5"
}
return
}
const componentMap = {
div: DivMixin,
a: (props) => {
return
},
kbd: (props) => {
return
},
ol: (props) => {
return
},
li: (props) => {
return
},
table: (props) => {
return
},
tr: (props) => {
return
},
hr: (props) => {
return
}
}
export default function PageTemplate({ data: { markdownRemark, allMarkdownRemark } }) {
const renderAst = new rehypeReact({
createElement: React.createElement,
components: componentMap,
Fragment: ({ children }) => {
return {children}
}
}).Compiler
const filtered = allMarkdownRemark.nodes.filter(it => it.frontmatter.parent === markdownRemark.frontmatter.title).map(it => {
return
})
return (
- Home
- Documentation
- {markdownRemark.frontmatter.title}
{markdownRemark.frontmatter.title}
{renderAst(markdownRemark.htmlAst)}
Edit on GitHub
If you see a mistake here, you can open a pull request
{filtered.length > 0 && <>
Children
{filtered}
>}
)
}
export function Head({ data }) {
return (
<>
{data.markdownRemark.frontmatter.title}
>
)
}
export const pageQuery = graphql`
query ($id: String!) {
markdownRemark(id: { eq: $id }) {
frontmatter {
title
}
fileAbsolutePath
excerpt
htmlAst
}
allMarkdownRemark(
sort: {fields: frontmatter___order}
filter: {frontmatter: {parent: {ne: null}}}
) {
nodes {
frontmatter {
title
order
parent
}
fileAbsolutePath
excerpt
}
}
}
`