chore: upgrade to Gatsby 5
This commit is contained in:
parent
dfa445770b
commit
385fd7adcc
GPG key ID:
671E39E6744C807D
8 changed files with 4826 additions and 3173 deletions
|
|
@ -1 +1,3 @@
|
|||
import "./src/global.css"
|
||||
import "./src/global.css";
|
||||
|
||||
require("prism-themes/themes/prism-one-dark.css");
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@ const config: GatsbyConfig = {
|
|||
{
|
||||
resolve: "gatsby-plugin-manifest",
|
||||
options: {
|
||||
"icon": "src/images/icon.png"
|
||||
}
|
||||
icon: "src/images/icon.png",
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: "gatsby-plugin-mdx",
|
||||
|
|
@ -25,12 +25,10 @@ const config: GatsbyConfig = {
|
|||
extensions: [".mdx", ".md"],
|
||||
gatsbyRemarkPlugins: [
|
||||
{
|
||||
resolve: "gatsby-remark-highlight-code",
|
||||
resolve: "gatsby-remark-prismjs",
|
||||
options: {
|
||||
terminal: "carbon",
|
||||
theme: "one-dark",
|
||||
lineNumbers: true,
|
||||
}
|
||||
showLineNumbers: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -43,14 +41,14 @@ const config: GatsbyConfig = {
|
|||
resolve: "gatsby-source-filesystem",
|
||||
options: {
|
||||
name: "images",
|
||||
path: "./src/images/"
|
||||
path: "./src/images/",
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: "gatsby-source-filesystem",
|
||||
options: {
|
||||
name: "pages",
|
||||
path: "./src/content/pages/"
|
||||
path: "./src/content/pages/",
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -59,8 +57,8 @@ const config: GatsbyConfig = {
|
|||
name: "posts",
|
||||
path: "./src/content/posts/",
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
|
|||
101
gatsby-node.mjs
Normal file
101
gatsby-node.mjs
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
import path from "path";
|
||||
import slugify from "@sindresorhus/slugify";
|
||||
|
||||
/**
|
||||
* @typedef {import('gatsby').GatsbyNode} GatsbyNode
|
||||
*/
|
||||
|
||||
/** @type GatsbyNode["onCreateNode"] */
|
||||
export const onCreateNode = ({ node, actions }) => {
|
||||
const { createNodeField } = actions;
|
||||
if (node.internal.type === "Mdx") {
|
||||
createNodeField({
|
||||
node,
|
||||
name: "slug",
|
||||
value: slugify(node.frontmatter.title),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/** @type GatsbyNode["createPages"] */
|
||||
export const createPages = async ({
|
||||
graphql,
|
||||
actions,
|
||||
/* createNodeId,
|
||||
createContentDigest, */
|
||||
}) => {
|
||||
const { createPage, createRedirect } = actions;
|
||||
|
||||
const results = await graphql(`
|
||||
query {
|
||||
allMdx {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
fields {
|
||||
slug
|
||||
source
|
||||
}
|
||||
internal {
|
||||
contentFilePath
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
/** @type any[] */
|
||||
const allEdges = results.data.allMdx.edges;
|
||||
|
||||
const blogEdges = allEdges.filter(
|
||||
(edge) => edge.node.fields.source === "posts"
|
||||
);
|
||||
const pageEdges = allEdges.filter(
|
||||
(edge) => edge.node.fields.source === "pages"
|
||||
);
|
||||
|
||||
blogEdges.forEach((edge, index) => {
|
||||
const previous =
|
||||
index === blogEdges.length - 1 ? null : blogEdges[index + 1].node;
|
||||
const next = index === 0 ? null : blogEdges[index - 1].node;
|
||||
|
||||
createPage({
|
||||
path: `/blog/${edge.node.fields.slug}`,
|
||||
component: `${path.resolve("./src/layouts/Post.tsx")}?__contentFilePath=${
|
||||
edge.node.internal.contentFilePath
|
||||
}`,
|
||||
context: {
|
||||
id: edge.node.id,
|
||||
slug: edge.node.fields.slug,
|
||||
previous,
|
||||
next,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
pageEdges.forEach((edge, index) => {
|
||||
createPage({
|
||||
path: `/${edge.node.fields.slug}`,
|
||||
component: path.resolve("./src/layouts/Page.tsx"),
|
||||
context: {
|
||||
id: edge.node.id,
|
||||
slug: edge.node.slug,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// redirects due to changed slugs
|
||||
createRedirect({
|
||||
fromPath: "/blog/nixos-restic-backups",
|
||||
toPath: "/blog/optimised-backups-on-nix-os-with-restic-and-fd/",
|
||||
isPermanent: true,
|
||||
redirectInBrowser: true,
|
||||
});
|
||||
createRedirect({
|
||||
fromPath: "/blog/nixos-restic-backups/",
|
||||
toPath: "/blog/optimised-backups-on-nix-os-with-restic-and-fd/",
|
||||
isPermanent: true,
|
||||
redirectInBrowser: true,
|
||||
});
|
||||
};
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
import path from "path";
|
||||
import type { GatsbyNode } from "gatsby"
|
||||
|
||||
export const createPages: GatsbyNode["createPages"] = async ({
|
||||
graphql,
|
||||
actions,
|
||||
/* createNodeId,
|
||||
createContentDigest, */
|
||||
}) => {
|
||||
const { createPage } = actions
|
||||
|
||||
const results = await graphql<any>(`
|
||||
query {
|
||||
allMdx {
|
||||
edges {
|
||||
node {
|
||||
slug
|
||||
fields {
|
||||
source
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`)
|
||||
|
||||
const allEdges: any[] = results.data.allMdx.edges
|
||||
|
||||
const blogEdges = allEdges.filter(
|
||||
(edge) => edge.node.fields.source === "posts"
|
||||
)
|
||||
const pageEdges = allEdges.filter(
|
||||
(edge) => edge.node.fields.source === "pages"
|
||||
)
|
||||
|
||||
blogEdges.forEach((edge, index) => {
|
||||
const previous =
|
||||
index === blogEdges.length - 1 ? null : blogEdges[index + 1].node
|
||||
const next = index === 0 ? null : blogEdges[index - 1].node
|
||||
|
||||
createPage({
|
||||
path: `/blog/${edge.node.slug}`,
|
||||
component: path.resolve("./src/layouts/Post.tsx"),
|
||||
context: {
|
||||
slug: edge.node.slug,
|
||||
previous,
|
||||
next
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
pageEdges.forEach((edge, index) => {
|
||||
createPage({
|
||||
path: `/${edge.node.slug}`,
|
||||
component: path.resolve("./src/layouts/Page.tsx"),
|
||||
context: {
|
||||
slug: edge.node.slug
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
7629
package-lock.json
generated
7629
package-lock.json
generated
File diff suppressed because it is too large
Load diff
39
package.json
39
package.json
|
|
@ -5,9 +5,7 @@
|
|||
"description": "felschr.com",
|
||||
"author": "Felix Schröter",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"gatsby"
|
||||
],
|
||||
"keywords": ["gatsby"],
|
||||
"scripts": {
|
||||
"develop": "gatsby develop",
|
||||
"start": "gatsby develop",
|
||||
|
|
@ -17,29 +15,30 @@
|
|||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@deckdeckgo/highlight-code": "^3.6.0",
|
||||
"@emotion/react": "^11.10.4",
|
||||
"@emotion/styled": "^11.10.4",
|
||||
"@mdx-js/mdx": "^1.6.22",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@mdx-js/mdx": "^2.0.0",
|
||||
"@mdx-js/react": "^2.0.0",
|
||||
"@mui/icons-material": "^5.10.6",
|
||||
"@mui/material": "^5.10.8",
|
||||
"gatsby": "^4.19.2",
|
||||
"gatsby-plugin-emotion": "^7.19.0",
|
||||
"gatsby-plugin-image": "^2.19.0",
|
||||
"gatsby-plugin-manifest": "^4.19.0",
|
||||
"gatsby-plugin-mdx": "^3.19.0",
|
||||
"@sindresorhus/slugify": "^2.2.1",
|
||||
"gatsby": "^5.14.0",
|
||||
"gatsby-plugin-emotion": "^8.14.0",
|
||||
"gatsby-plugin-image": "^3.14.0",
|
||||
"gatsby-plugin-manifest": "^5.14.0",
|
||||
"gatsby-plugin-mdx": "^5.14.0",
|
||||
"gatsby-plugin-mdx-frontmatter": "^0.0.4",
|
||||
"gatsby-plugin-mdx-source-name": "^1.0.1",
|
||||
"gatsby-plugin-react-helmet": "^5.19.0",
|
||||
"gatsby-plugin-sharp": "^4.19.0",
|
||||
"gatsby-plugin-sitemap": "^5.19.0",
|
||||
"gatsby-remark-highlight-code": "^3.2.0",
|
||||
"gatsby-source-filesystem": "^4.19.0",
|
||||
"gatsby-transformer-remark": "^5.19.0",
|
||||
"gatsby-transformer-sharp": "^4.19.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"gatsby-plugin-react-helmet": "^6.14.0",
|
||||
"gatsby-plugin-sharp": "^5.14.0",
|
||||
"gatsby-plugin-sitemap": "^6.14.0",
|
||||
"gatsby-remark-prismjs": "^7.14.0",
|
||||
"gatsby-source-filesystem": "^5.14.0",
|
||||
"gatsby-transformer-remark": "^6.14.0",
|
||||
"gatsby-transformer-sharp": "^5.14.0",
|
||||
"prism-themes": "^1.9.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-icons": "^4.7.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -50,18 +56,15 @@ const BlogPost = ({ data: { mdx }, path }: PageProps<Queries.BlogPostQuery>) =>
|
|||
</>
|
||||
}
|
||||
>
|
||||
<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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue