62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import React from "react"
|
|
import { graphql, Link as GatsbyLink, PageProps } from "gatsby"
|
|
import { MDXRenderer } from "gatsby-plugin-mdx"
|
|
import NavigateNextIcon from "@mui/icons-material/NavigateNext"
|
|
import Layout from "../../components/organisms/Layout"
|
|
|
|
import { defineCustomElements as deckDeckGoHighlightElement } from "@deckdeckgo/highlight-code/dist/loader";
|
|
import { Breadcrumbs, Link } from "@mui/material";
|
|
deckDeckGoHighlightElement();
|
|
|
|
const BlogPost = ({ data: { mdx }, path }: PageProps<Queries.BlogPostQuery>) => {
|
|
return (
|
|
<Layout
|
|
pageTitle={
|
|
<>
|
|
<Breadcrumbs
|
|
separator={<NavigateNextIcon fontSize="small" />}
|
|
aria-label="breadcrumb"
|
|
>
|
|
<Link
|
|
underline="hover"
|
|
color="inherit"
|
|
to="/blog"
|
|
component={GatsbyLink}
|
|
>
|
|
Blog
|
|
</Link>
|
|
<Link
|
|
underline="hover"
|
|
color="inherit"
|
|
to={path}
|
|
component={GatsbyLink}
|
|
>
|
|
{mdx?.frontmatter?.title}
|
|
</Link>
|
|
</Breadcrumbs>
|
|
{mdx?.frontmatter?.title ?? ""}
|
|
</>
|
|
}
|
|
>
|
|
<MDXRenderer>
|
|
{mdx?.body ?? ""}
|
|
</MDXRenderer>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
export const query = graphql`
|
|
query BlogPost($id: String) {
|
|
mdx(fields: { source: { eq: "posts" } }, id: { eq: $id }) {
|
|
id
|
|
body
|
|
frontmatter {
|
|
title
|
|
published
|
|
updated
|
|
}
|
|
}
|
|
}
|
|
`
|
|
|
|
export default BlogPost
|