From 27b1162e228d0ec0badf97c34d862588bde12276 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Tue, 22 Oct 2024 18:41:23 +0200
Subject: [PATCH] feat: :sparkles: add image credit if blogpost has an image

---
 src/layouts/blogpost.njk | 5 ++++-
 src/posts.njk            | 9 ++++++++-
 tailwind.config.js       | 2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/layouts/blogpost.njk b/src/layouts/blogpost.njk
index 4195f5f..1e32eca 100644
--- a/src/layouts/blogpost.njk
+++ b/src/layouts/blogpost.njk
@@ -7,7 +7,10 @@ layout: base.njk
     {% if image and image.src != '' %}
       style="background-image: image-set({% bgimgset image.src %})"
     {% endif %}
-    class="relative mb-8 grid h-96 grid-flow-row grid-rows-article-header place-items-center space-y-6 bg-cover bg-center pb-8 pt-20 px-safe-offset-4 *:z-10 before:absolute before:inset-0 before:bg-slate-300 before:bg-opacity-65 sm:h-128 sm:pt-28 md:pt-32 md:px-safe-offset-6 lg:mb-12 lg:h-160 lg:pb-12 2xl:h-192 before:dark:bg-slate-900 before:dark:bg-opacity-65"
+    {% if image and image.credit != '' %}
+      data-credit="{{ image.credit }}"
+    {% endif %}
+    class="relative mb-8 grid min-h-96 grid-flow-row grid-rows-article-header place-items-center space-y-6 bg-cover bg-center pb-8 pt-20 px-safe-offset-8 *:z-10 before:absolute before:inset-0 before:bg-slate-300 before:bg-opacity-65 after:absolute after:bottom-0 after:right-0 after:z-10 after:rounded-tl-md after:bg-black after:px-2 after:py-1 after:text-xs after:text-white after:content-[attr(data-credit)] sm:min-h-128 sm:pt-28 md:pt-32 after:md:text-sm lg:mb-12 lg:min-h-160 lg:pb-12 lg:px-safe-offset-12 2xl:min-h-192 before:dark:bg-slate-900 before:dark:bg-opacity-65"
   >
     <div class="prose prose-slate mx-auto md:prose-lg lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal">
       <h1 class="text-balance text-center">{{ title }}</h1>
diff --git a/src/posts.njk b/src/posts.njk
index 9cebc3b..71feff1 100644
--- a/src/posts.njk
+++ b/src/posts.njk
@@ -20,7 +20,14 @@ pagination:
     </div>
 
     {% if post.data.image and post.data.image.src != '' %}
-      <img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
+      <figure class="relative">
+        <img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
+        {% if post.data.image and post.data.image.credit != '' %}
+          <figcaption class="absolute bottom-0 right-0 rounded-tl-md rounded-br-3xl bg-black px-2 py-1 pe-4 text-xs text-white md:text-sm">
+            {{ post.data.image.credit }}
+          </figcaption>
+        {% endif %}
+      </figure>
     {% endif %}
 
     <p>{{ post.data.description }}</p>
diff --git a/tailwind.config.js b/tailwind.config.js
index d66ba55..57a2853 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,7 @@ export default {
       gridTemplateRows: {
         'article-header': '1fr auto 0'
       },
-      height: {
+      minHeight: {
         '128': '32rem',
         '160': '40rem',
         '192': '48rem'