fix: fix page & post issues

This commit is contained in:
Felix Schröter 2022-11-15 22:52:33 +01:00
parent 20cc481ca4
commit 7ceda0bc7a
Signed by: felschr
GPG key ID: 671E39E6744C807D
4 changed files with 71 additions and 13 deletions

View file

@ -1,80 +0,0 @@
import React from "react"
import { graphql, Link as GatsbyLink, PageProps } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
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";
import { Box } from "@mui/system"
deckDeckGoHighlightElement();
const BlogPost = ({ data: { mdx }, path }: PageProps<Queries.BlogPostQuery>) => {
const featuredImage = getImage(mdx?.frontmatter?.featuredImage?.childImageSharp?.gatsbyImageData!)
return (
<Layout
pageTitle={mdx?.frontmatter?.title ?? ""}
preTitle={
<>
<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>
{featuredImage && (
<Box display="flex" justifyContent="center">
<GatsbyImage
image={featuredImage}
alt={mdx?.frontmatter?.featuredImageAlt ?? ""}
/>
</Box>
)}
</>
}
>
<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
featuredImage {
childImageSharp {
gatsbyImageData(width: 800)
}
}
featuredImageAlt
}
}
}
`
export default BlogPost

View file

@ -11,7 +11,7 @@ Germany
## Contact Information
Telephone: +491723956877
Telephone: +49 172 3956877
E-Mail: admin@felschr.com
Website: [felschr.com](https://felschr.com)

View file

@ -1,29 +0,0 @@
import React from "react"
import { graphql, PageProps } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import Layout from "../components/organisms/Layout"
const Page = ({ data: { mdx }, path }: PageProps<Queries.PageQuery>) => {
console.log("Page...", { path, mdx })
return (
<Layout pageTitle={mdx?.frontmatter?.title ?? ""}>
<MDXRenderer>
{mdx?.body ?? ""}
</MDXRenderer>
</Layout>
)
}
export const query = graphql`
query Page($id: String) {
mdx(fields: { source: { eq: "pages" } }, id: { eq: $id }) {
id
body
frontmatter {
title
}
}
}
`
export default Page