initial

Author: LekoArts

.changeset/config.json

@@ -15,7 +15,7 @@
     ]
   ],
   "access": "public",
-  "baseBranch": "master",
+  "baseBranch": "main",
   "updateInternalDependencies": "patch",
   "ignore": []
 }

.changeset/thin-wasps-kneel.md

@@ -0,0 +1,7 @@
+---
+"@lekoarts/gatsby-theme-minimal-blog": minor
+---
+
+**Feature:** The `<Post />` component now has a `<PostFooter />` component at the bottom of the page (between the end of the post content and the global footer). You can shadow this to e.g. display a comment section below a post. The component receives its data through the `post` prop which holds the same data as what `<Post />` receives.
+
+Fixes https://github.com/LekoArts/gatsby-themes/discussions/698.

examples/minimal-blog/README.md

@@ -200,14 +200,18 @@ defer: false
 ---
 ```
 
-#### Changing the "Hero" text
+### Changing the "Hero" text
 
 To edit the hero text ("Hi, I'm Lupin...), create a file at `src/@lekoarts/gatsby-theme-minimal-blog/texts/hero.mdx` to edit the text.
 
-#### Changing the "Projects" part
+### Changing the "Projects" part
 
 To edit the projects part below "Latest posts", create a file at `src/@lekoarts/gatsby-theme-minimal-blog/texts/bottom.mdx` to edit the contents.
 
+### Extending the footer of the post
+
+Inside the [`<Post />` component](https://github.com/LekoArts/gatsby-themes/blob/main/themes/gatsby-theme-minimal-blog/src/components/post.tsx) there's also a `<PostFooter />` component that you can shadow to display elements between the end of the post and the global footer. By default it returns `null`. Create a file at `src/@lekoarts/gatsby-theme-minimal-blog/components/post-footer.jsx` to edit this section. The `<PostFooter />` component receives the complete `post` prop that `<Post />` also receives.
+
 ### Changing your fonts
 
 By default, the underlying theme and thus this starter uses "IBM Plex Sans" as its font. It's used throughout the site and set as a `font-family` on the `html` element.

themes/gatsby-theme-minimal-blog/README.md

@@ -275,14 +275,18 @@ defer: false
 ---
 ```
 
-#### Changing the "Hero" text
+### Changing the "Hero" text
 
 To edit the hero text ("Hi, I'm Lupin...), create a file at `src/@lekoarts/gatsby-theme-minimal-blog/texts/hero.mdx` to edit the text.
 
-#### Changing the "Projects" part
+### Changing the "Projects" part
 
 To edit the projects part below "Latest posts", create a file at `src/@lekoarts/gatsby-theme-minimal-blog/texts/bottom.mdx` to edit the contents.
 
+### Extending the footer of the post
+
+Inside the [`<Post />` component](https://github.com/LekoArts/gatsby-themes/blob/main/themes/gatsby-theme-minimal-blog/src/components/post.tsx) there's also a `<PostFooter />` component that you can shadow to display elements between the end of the post and the global footer. By default it returns `null`. Create a file at `src/@lekoarts/gatsby-theme-minimal-blog/components/post-footer.jsx` to edit this section. The `<PostFooter />` component receives the complete `post` prop that `<Post />` also receives.
+
 ## Changelog
 
 You can find the extensive [changelog of changes on GitHub](https://github.com/LekoArts/gatsby-themes/blob/main/themes/gatsby-theme-minimal-blog/CHANGELOG.md). You'll be able to see each patch, minor, and major changes and what pull requests contributed to them.

themes/gatsby-theme-minimal-blog/src/components/post-footer.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+
+type PostFooterProps = {
+  post: {
+    slug: string
+    title: string
+    date: string
+    tags?: {
+      name: string
+      slug: string
+    }[]
+    description?: string
+    canonicalUrl?: string
+    body: string
+    excerpt: string
+    timeToRead?: number
+    banner?: {
+      childImageSharp: {
+        resize: {
+          src: string
+        }
+      }
+    }
+  }
+}
+
+const PostFooter = ({ post }: PostFooterProps) => null
+
+export default PostFooter

themes/gatsby-theme-minimal-blog/src/components/post.tsx

@@ -5,6 +5,7 @@ import { MDXRenderer } from "gatsby-plugin-mdx"
 import Layout from "./layout"
 import ItemTags from "./item-tags"
 import Seo from "./seo"
+import PostFooter from "./post-footer"
 
 type PostProps = {
   data: {
@@ -40,7 +41,7 @@ const Post = ({ data: { post } }: PostProps) => (
     <Seo
       title={post.title}
       description={post.description ? post.description : post.excerpt}
-      image={post.banner ? post.banner.childImageSharp.resize.src : undefined}
+      image={post.banner ? post.banner?.childImageSharp?.resize?.src : undefined}
       pathname={post.slug}
       canonicalUrl={post.canonicalUrl}
     />
@@ -67,6 +68,7 @@ const Post = ({ data: { post } }: PostProps) => (
     >
       <MDXRenderer>{post.body}</MDXRenderer>
     </section>
+    <PostFooter post={post} />
   </Layout>
 )