Add featuredImageCaption feature

Author: Twixes

package.json

@@ -18,7 +18,7 @@
     "scripts": {
         "build-move": "gatsby build && bash ./src/scripts/move-index.sh",
         "build": "gatsby build",
-        "start": "TAILWIND_MODE=watch NODE_OPTIONS='--max_old_space_size=8192' gatsby develop -H 0.0.0.0 -p 8001",
+        "start": "NODE_TLS_REJECT_UNAUTHORIZED=0 TAILWIND_MODE=watch NODE_OPTIONS='--max_old_space_size=8192' gatsby develop -H 0.0.0.0 -p 8001",
         "serve": "gatsby serve",
         "format": "prettier --write \"**/*.{html,js,ts,tsx,json,yml,css,scss}\"",
         "clean": "gatsby clean",

src/components/ReaderView/index.tsx

@@ -48,6 +48,7 @@ interface ReaderViewProps {
         type: 'mdx' | 'plain'
         content: string
         featuredImage?: any
+        featuredImageCaption?: string
         contributors?: any[]
         date?: string
         featuredVideo?: string
@@ -596,6 +597,7 @@ function ReaderViewContent({
             })
         }
     }, [appWindow?.path, hash])
+    const image = getImage(body.featuredImage)
 
     return (
         <SearchProvider>
@@ -680,12 +682,23 @@ function ReaderViewContent({
                             >
                                 {/* <DebugContainerQuery /> */}
                                 {body.featuredImage && !body.featuredVideo && (
-                                    <div className="not-prose mb-4 text-center">
-                                        <GatsbyImage
-                                            image={getImage(body.featuredImage)}
-                                            alt={title}
-                                            className="rounded"
-                                        />
+                                    <div className="not-prose mb-6 relative">
+                                        <div className="text-center">
+                                            {image ? (
+                                                <GatsbyImage image={image} alt={title} className="rounded" />
+                                            ) : body.featuredImage?.publicURL ? (
+                                                <img
+                                                    src={body.featuredImage.publicURL}
+                                                    alt={title}
+                                                    className="rounded w-full"
+                                                />
+                                            ) : null}
+                                        </div>
+                                        {body.featuredImageCaption && (
+                                            <div className="absolute right-0 bottom-0 m-2 text-sm text-white bg-black bg-opacity-75 font-medium py-1 px-2 rounded-sm italic text-right">
+                                                {body.featuredImageCaption}
+                                            </div>
+                                        )}
                                     </div>
                                 )}
                                 {title && !hideTitle && (
@@ -701,7 +714,7 @@ function ReaderViewContent({
                                 )}
                                 {(body.date || body.contributors || body.tags) && (
                                     <div
-                                        className={`flex items-center space-x-2 mb-4 flex-wrap mx-auto transition-all ${
+                                        className={`flex items-center space-x-2 mt-4 flex-wrap mx-auto transition-all ${
                                             fullWidthContent || body?.type !== 'mdx'
                                                 ? 'max-w-full'
                                                 : contentMaxWidthClass || 'max-w-2xl'

src/templates/BlogPost.tsx

@@ -284,8 +284,17 @@ const Filters = ({ tag, setTag, sort, setSort, activeMenu }) => {
 export default function BlogPost({ data, pageContext, location, mobile = false }) {
     const { postData } = data
     const { body, excerpt, fields } = postData
-    const { date, title, featuredImage, featuredVideo, featuredImageType, contributors, tags, seo } =
-        postData?.frontmatter
+    const {
+        date,
+        title,
+        featuredImage,
+        featuredImageCaption,
+        featuredVideo,
+        featuredImageType,
+        contributors,
+        tags,
+        seo,
+    } = postData?.frontmatter
     const lastUpdated = postData?.parent?.fields?.gitLogLatestDate
     const filePath = postData?.parent?.relativePath
     const category = postData?.parent?.category
@@ -419,6 +428,7 @@ export default function BlogPost({ data, pageContext, location, mobile = false }
                     type: 'mdx',
                     content: body,
                     featuredImage,
+                    featuredImageCaption,
                     contributors,
                     date,
                     featuredVideo,
@@ -477,6 +487,7 @@ export const query = graphql`
                         gatsbyImageData
                     }
                 }
+                featuredImageCaption
                 contributors: authorData {
                     id
                     name

tailwind.config.js

@@ -99,6 +99,7 @@ module.exports = {
             borderRadius: {
                 xs: '2px',
                 sm: '4px',
+                DEFAULT: '6px',
                 lg: '20px',
             },
             borderWidth: {