From 2064db8624f3696981e495608c7068c7e2385208 Mon Sep 17 00:00:00 2001
From: "James Morris, MS" <96435344+james-a-morris@users.noreply.github.com>
Date: Wed, 13 Nov 2024 09:42:41 -0500
Subject: [PATCH] fix: captions on images (#87)

* fix: captions on images

Signed-off-by: james-a-morris <jaamorris@cs.stonybrook.edu>

* nit: lint

Signed-off-by: james-a-morris <jaamorris@cs.stonybrook.edu>

---------

Signed-off-by: james-a-morris <jaamorris@cs.stonybrook.edu>
---
 .../(routes)/blog/[slug]/_components/article-content.tsx    | 2 +-
 .../(routes)/blog/[slug]/_components/contentful-image.tsx   | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/(routes)/blog/[slug]/_components/article-content.tsx b/src/app/(routes)/blog/[slug]/_components/article-content.tsx
index cd2e746..ff8c8e8 100644
--- a/src/app/(routes)/blog/[slug]/_components/article-content.tsx
+++ b/src/app/(routes)/blog/[slug]/_components/article-content.tsx
@@ -137,7 +137,7 @@ const nodeRenderers: RenderNode = {
     const mimeGroup = file?.contentType.split("/")[0]; // image / video etc
     switch (mimeGroup) {
       case "image":
-        return <ContentfulImage image={data} />;
+        return <ContentfulImage image={data} displayDescription />;
       // TODO: test this, make custom component if necessary
       case "video":
         return (
diff --git a/src/app/(routes)/blog/[slug]/_components/contentful-image.tsx b/src/app/(routes)/blog/[slug]/_components/contentful-image.tsx
index 9a4eef2..1c8a28a 100644
--- a/src/app/(routes)/blog/[slug]/_components/contentful-image.tsx
+++ b/src/app/(routes)/blog/[slug]/_components/contentful-image.tsx
@@ -34,7 +34,7 @@ export default function ContentfulImage({
       };
 
   return (
-    <div className="relative flex h-full w-full flex-col items-center gap-4">
+    <div className="relative flex h-full w-full flex-col items-center gap-2 pb-2">
       <Image
         src={urlWithProtocol}
         alt={description ?? "description"}
@@ -43,7 +43,9 @@ export default function ContentfulImage({
         aria-description={description}
         {...props}
       />
-      {description && displayDescription && <p>{description}</p>}
+      {description && displayDescription && (
+        <p className="font-extralight">{description}</p>
+      )}
     </div>
   );
 }