add post metadata to single blog post template

content/blog/our-new-blog-and-some-project-announcements.md

@@ -3,6 +3,7 @@ title: "Our new blog and some project announcements"
 date: 2021-07-07T13:17:04+05:00
 draft: false
 image: "/img/cc-birds.jpeg"
+imageCredit: '"birds flying near clouds" by Kendrick Mills on Unsplash'
 description: "CoS funding, beta release news, monthly updates and more!"
 ---
 

themes/coopcloud.tech/assets/scss/main.scss

@@ -224,14 +224,26 @@ footer .separator {
     padding: 4rem 6rem;
     @media (max-width: 450px) { padding: 2.5rem  1.4rem 1rem; }
     
-    img.hero {
-        margin-bottom: 2rem;
-        margin-left: auto;
-        margin-right: auto;
-        width: 100%;
-        max-height: 50vh;
-        object-fit: cover;
-        object-position: center;
+    figure {
+        img.hero {
+            margin-left: auto;
+            margin-right: auto;
+            width: 100%;
+            max-height: 50vh;
+            object-fit: cover;
+            object-position: center;
+        }
+
+        figcaption {
+            font-weight: 300;
+            color: white;
+            padding: 5px;
+            background: #00000063;
+            text-align: end;
+            position: relative;
+            bottom: 34px;
+            width: max-content;
+        }
     }
     
     .content {
@@ -241,4 +253,8 @@ footer .separator {
             font-weight: 100;
         }
     }
+    
+    .post-metadata {
+        text-transform: uppercase;
+    }
 }

themes/coopcloud.tech/layouts/_default/single.html

@@ -1,8 +1,15 @@
 {{ define "main" }}
     <article class="blog-post">
         <div class="container">
-            <img src="{{ with .Params.image }}{{ . }}{{ end }}" alt="" class="hero">
+            <figure>
+                <img src="{{ with .Params.image }}{{ . }}{{ end }}" alt="" class="hero">
+                <figcaption>{{ .Params.imageCredit }}</figcaption>
+            </figure>
             <h1 class="title is-uppercase">{{ .Title }}</h1>
+            <div class="post-metadata">
+                <p class="post-date">{{ .PublishDate.Format "January 2, 2006" }}</p>
+                <p class="reading-time">Reading time: {{ .ReadingTime }} minutes</p>
+            </div>
             <hr>
             <div class="content">{{ .Content }}</div>
             <hr>