Added post-hero-caption component and relevant mdx properties, with e…

…xample usage (#95)
gatsbyjs · Jan 5, 2021 · 6dd2936 · 6dd2936
1 parent fead1c2
commit 6dd2936
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 4 deletions.
diff --git a/packages/gatsby-theme-blog-core/gatsby-node.js b/packages/gatsby-theme-blog-core/gatsby-node.js
@@ -59,6 +59,8 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => {
       excerpt: String!
       image: File
       imageAlt: String
+      imageCaptionText: String
+      imageCaptionLink: String
       socialImage: File
   }`)
 
@@ -98,6 +100,12 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => {
         imageAlt: {
           type: `String`,
         },
+        imageCaptionText: {
+          type: `String`,
+        },
+        imageCaptionLink: {
+          type: `String`,
+        },
         socialImage: {
           type: `File`,
           resolve: async (source, args, context, info) => {
@@ -199,6 +207,8 @@ exports.onCreateNode = async (
       date: node.frontmatter.date,
       image: node.frontmatter.image,
       imageAlt: node.frontmatter.imageAlt,
+      imageCaptionText: node.frontmatter.imageCaptionText,
+      imageCaptionLink: node.frontmatter.imageCaptionLink,
       socialImage: node.frontmatter.socialImage,
     }
 

diff --git a/packages/gatsby-theme-blog-core/src/templates/post-query.js b/packages/gatsby-theme-blog-core/src/templates/post-query.js
@@ -36,6 +36,8 @@ export const query = graphql`
         }
       }
       imageAlt
+      imageCaptionText
+      imageCaptionLink
       socialImage {
         childImageSharp {
           fluid {

diff --git a/packages/gatsby-theme-blog/src/components/post-hero-caption.js b/packages/gatsby-theme-blog/src/components/post-hero-caption.js
@@ -0,0 +1,27 @@
+import React from "react"
+import { Styled, css, Flex } from "theme-ui"
+
+const PostHeroCaption = ({ text, url }) => {
+  console.log(__filename, `text`, { text, url })
+  return (
+    <>
+      {text && (
+        <Flex>
+          {url ? (
+            <Styled.a
+              css={css({ margin: `auto`, fontStyle: `italic` })}
+              href={url}
+              target="_blank"
+            >
+              {text}
+            </Styled.a>
+          ) : (
+            <Styled.i css={css({ margin: `auto` })}>{text}</Styled.i>
+          )}
+        </Flex>
+      )}
+    </>
+  )
+}
+
+export default PostHeroCaption
diff --git a/packages/gatsby-theme-blog/src/components/post-hero.js b/packages/gatsby-theme-blog/src/components/post-hero.js
@@ -1,13 +1,21 @@
 import React from "react"
 import Image from "gatsby-image"
 
+import PostHeroCaption from "./post-hero-caption"
+
 const PostHero = ({ post }) => (
   <>
     {post?.image?.childImageSharp && (
-      <Image
-        fluid={post.image.childImageSharp.fluid}
-        alt={post.imageAlt ? post.imageAlt : post.excerpt}
-      />
+      <>
+        <Image
+          fluid={post.image.childImageSharp.fluid}
+          alt={post.imageAlt ? post.imageAlt : post.excerpt}
+        />
+        <PostHeroCaption
+          text={post.imageCaptionText}
+          url={post.imageCaptionLink}
+        />
+      </>
     )}
   </>
 )

diff --git a/starters/theme/content/posts/hello-world.mdx b/starters/theme/content/posts/hello-world.mdx
@@ -2,6 +2,8 @@
 title: Hello World
 date: 2019-04-15
 image: https://images.unsplash.com/photo-1546488979-08680803296d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2562&q=80
+imageCaptionText: 'Photo by John Kappa ツ on Unsplash'
+imageCaptionLink: 'https://unsplash.com/@johnkappa?utm_source=gatsby-blog-starter&utm_medium=referral' 
 ---
 
 Hello, world! This is a demo post for `gatsby-theme-blog`.

diff --git a/starters/theme/content/posts/my-second-post/index.mdx b/starters/theme/content/posts/my-second-post/index.mdx
@@ -2,6 +2,7 @@
 title: My Second Post!
 date: 2019-05-15
 image: ./computer.jpeg
+imageCaptionText: 'Photo by John Kappa ツ on Unsplash' 
 ---
 
 Wow! I love blogging so much already.