feat: add featured image to posts

src/components/organisms/Layout.tsx

@@ -10,11 +10,12 @@ const pages = [
 ]
 
 type LayoutProps = {
-  pageTitle: string | ReactNode
+  pageTitle: string
+  preTitle?: ReactNode
   children: ReactNode
 }
 
-const Layout = ({ pageTitle, children }: LayoutProps) => {
+const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
   const theme = useTheme()
 
   return (
@@ -58,6 +59,7 @@ const Layout = ({ pageTitle, children }: LayoutProps) => {
       </AppBar>
 
       <Container style={{ marginTop: 68.5, marginBottom: 80, minHeight: "100%" }}>
+        {preTitle}
         <Typography variant="h1">{pageTitle}</Typography>
         {children}
       </Container>

src/pages/blog/index.tsx

@@ -1,8 +1,9 @@
 import { ReactNode } from "react"
 import { GatsbyLinkProps, graphql, Link, PageProps } from "gatsby"
 import Layout from "../../components/organisms/Layout"
-import { Card, CardContent, Grid, Typography } from "@mui/material"
+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"
@@ -21,9 +22,23 @@ const Post = ({ size = "normal", post }: PostProps) => {
     }
   `
 
+  const featuredImage = getImage(post.frontmatter?.featuredImage?.childImageSharp?.gatsbyImageData!)
+
   return (
     <Grid item xs={size === "highlight" ? 12 : 4}>
       <Card>
+        {featuredImage && (
+          <CardMedia
+            objectFit="contain"
+            component={(props) => (
+              <GatsbyImage
+                image={featuredImage}
+                alt={post.frontmatter?.featuredImageAlt ?? ""}
+                {...props}
+              />
+            )}
+          />
+        )}
         <CardContent>
           <Typography variant="h5" gutterBottom>
             <PostLink>
@@ -71,6 +86,12 @@ export const query = graphql`
           frontmatter {
             title
             published
+            featuredImage {
+              childImageSharp {
+                gatsbyImageData(height: 200)
+              }
+            }
+            featuredImageAlt
           }
         }
       }

src/pages/blog/{mdx.slug}.tsx

@@ -1,17 +1,22 @@
 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={
+      pageTitle={mdx?.frontmatter?.title ?? ""}
+      preTitle={
         <>
           <Breadcrumbs
             separator={<NavigateNextIcon fontSize="small" />}
@@ -34,7 +39,14 @@ const BlogPost = ({ data: { mdx }, path }: PageProps<Queries.BlogPostQuery>) =>
               {mdx?.frontmatter?.title}
             </Link>
           </Breadcrumbs>
-          {mdx?.frontmatter?.title ?? ""}
+          {featuredImage && (
+          <Box display="flex" justifyContent="center">
+            <GatsbyImage
+              image={featuredImage}
+              alt={mdx?.frontmatter?.featuredImageAlt ?? ""}
+            />
+          </Box>
+          )}
         </>
       }
     >
@@ -54,6 +66,12 @@ export const query = graphql`
         title
         published
         updated
+        featuredImage {
+          childImageSharp {
+            gatsbyImageData(width: 800)
+          }
+        }
+        featuredImageAlt
       }
     }
   }

src/posts/nixos-restic-backups.mdx

@@ -2,6 +2,8 @@
 title: Optimised Backups on NixOS with restic & fd
 published: 2022-08-01
 updated: 2022-08-01
+featuredImage: ../images/nixos-restic.png
+featuredImageAlt: NixOS plus Restic
 ---
 
 #### UPDATE 2022-07-04