felschr/felschr.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: upgrade to Gatsby 5

Browse source
This commit is contained in:
Felix Schröter 2024-12-15 16:54:13 +01:00
parent dfa445770b
commit 385fd7adcc
Signed by: felschr
GPG key ID: 671E39E6744C807D
8 changed files with 4826 additions and 3173 deletions
Download patch file Download diff file Expand all files Collapse all files

53
src/layouts/Post.tsx
View file

@ -1,17 +1,23 @@
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 React from "react";
import { graphql, Link as GatsbyLink, PageProps } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import { MDXProvider } from "@mdx-js/react";
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();
import { Box } from "@mui/system";
const BlogPost = ({ data: { mdx }, path }: PageProps<Queries.BlogPostQuery>) => {
const featuredImage = getImage(mdx?.frontmatter?.featuredImage?.childImageSharp?.gatsbyImageData!)
const mdxComponents = {};
const BlogPost = ({
data: { mdx },
path,
children,
}: PageProps<Queries.BlogPostQuery>) => {
const featuredImage = getImage(
mdx?.frontmatter?.featuredImage?.childImageSharp?.gatsbyImageData!
);
return (
<Layout
@ -40,28 +46,25 @@ const BlogPost = ({ data: { mdx }, path }: PageProps<Queries.BlogPostQuery>) =>
</Link>
</Breadcrumbs>
{featuredImage && (
<Box display="flex" justifyContent="center">
<GatsbyImage
image={featuredImage}
alt={mdx?.frontmatter?.featuredImageAlt ?? ""}
/>
</Box>
<Box display="flex" justifyContent="center">
<GatsbyImage
image={featuredImage}
alt={mdx?.frontmatter?.featuredImageAlt ?? ""}
/>
</Box>
)}
</>
}
>
<MDXRenderer>
{mdx?.body ?? ""}
</MDXRenderer>
<MDXProvider components={mdxComponents}>{children}</MDXProvider>
</Layout>
)
}
);
};
export const query = graphql`
query BlogPost($id: String) {
mdx(fields: { source: { eq: "posts" } }, id: { eq: $id }) {
id
body
frontmatter {
title
published
@ -75,6 +78,6 @@ export const query = graphql`
}
}
}
`
`;
export default BlogPost
export default BlogPost;

70
src/pages/blog/index.tsx
View file

@ -1,19 +1,19 @@
import * as React from "react"
import { ReactNode } from "react"
import { GatsbyLinkProps, graphql, Link, PageProps } from "gatsby"
import Layout from "../../components/organisms/Layout"
import { Card, CardContent, CardMedia, Grid, Typography } from "@mui/material"
import styled from "@emotion/styled"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import * as React from "react";
import { ReactNode } from "react";
import { GatsbyLinkProps, graphql, Link, PageProps } from "gatsby";
import Layout from "../../components/organisms/Layout";
import { Card, CardContent, CardMedia, Grid, Typography } from "@mui/material";
import styled from "@emotion/styled";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
type PostProps = {
size?: "normal" | "highlight"
post: Queries.BlogQuery["allMdx"]["edges"][0]["node"]
}
size?: "normal" | "highlight";
post: Queries.BlogQuery["allMdx"]["edges"][0]["node"];
};
const Post = ({ size = "normal", post }: PostProps) => {
const PostLink = styled((props: { children: ReactNode }) => (
<Link to={`/blog/${post.slug}`} {...props} />
<Link to={`/blog/${post.fields.slug}`} {...props} />
))`
color: inherit;
text-decoration: inherit;
@ -21,18 +21,15 @@ const Post = ({ size = "normal", post }: PostProps) => {
&:hover {
opacity: 0.8;
}
`
`;
const featuredImage = getImage(post.frontmatter?.featuredImage?.childImageSharp?.gatsbyImageData!)
const isHighlight = size === "highlight"
const featuredImage = getImage(
post.frontmatter?.featuredImage?.childImageSharp?.gatsbyImageData!
);
const isHighlight = size === "highlight";
return (
<Grid
item
xs={12}
sm={isHighlight ? 12 : 6}
md={isHighlight ? 12 : 4}
>
<Grid item xs={12} sm={isHighlight ? 12 : 6} md={isHighlight ? 12 : 4}>
<Card>
{featuredImage && (
<CardMedia
@ -48,24 +45,20 @@ const Post = ({ size = "normal", post }: PostProps) => {
)}
<CardContent>
<Typography variant="h5" gutterBottom>
<PostLink>
{post.frontmatter?.title}
</PostLink>
<PostLink>{post.frontmatter?.title}</PostLink>
</Typography>
<Typography fontStyle="normal" color="GrayText">
<PostLink>
{post.excerpt}
</PostLink>
<PostLink>{post.excerpt}</PostLink>
</Typography>
</CardContent>
</Card>
</Grid>
)
}
);
};
const Blog = ({ data: { allMdx } }: PageProps<Queries.BlogQuery>) => {
const [highlight, ...posts] = allMdx.edges
const [highlight, ...posts] = allMdx.edges;
return (
<Layout pageTitle="Blog">
@ -76,20 +69,25 @@ const Blog = ({ data: { allMdx } }: PageProps<Queries.BlogQuery>) => {
))}
</Grid>
</Layout>
)
}
);
};
export const query = graphql`
query Blog {
allMdx(
sort: { fields: [frontmatter___published], order: DESC }
filter: { fields: { source: { eq: "posts" } }, frontmatter: { published: { ne: null } } }
sort: { frontmatter: { published: DESC } }
filter: {
fields: { source: { eq: "posts" } }
frontmatter: { published: { ne: "" } }
}
) {
edges {
node {
id
slug
excerpt(pruneLength: 400)
fields {
slug
}
frontmatter {
title
published
@ -104,6 +102,6 @@ export const query = graphql`
}
}
}
`
`;
export default Blog
export default Blog;