Add featured image to template

src/content/blog/my-first-blog-post.md

@@ -2,6 +2,7 @@
 title: "Something New is Brewing"
 date: 2022-03-23
 draft: false
+featured_image: "/Images/techcrunch-gen-art.jpg"
 ---
 
 I created Homebrew nearly 13 years ago out of sheer necessity. I found the tooling available to developers at the time haphazard and difficult to tease into shape. After complaining about it at the pub one evening, I was met with an exasperated “Max, quit whining and do something about it”. So I did. (Thanks Jono).

src/layouts/_default/list.html

@@ -7,7 +7,7 @@
 
 {{ partial "navbar.html" . }}
 
-  <main style="height:100vh;">
+  <main>
     <section class="teal-bg">
       <div class="container one-box">
         <div class="row">
@@ -22,14 +22,18 @@
     <div class="container blog-list two-boxes">
       <div class="row">
             {{ range .Pages }}
-            <div class="col-4 mb-5">
-              <div class="blog-listing">
-                <a class="display-6" href="{{ .RelPermalink }}">{{ .Title }}</a><br>
-                <span class="grid-gray">{{ .Date.Format "2006-01-02" }}</span>
-                <span class="preview-content">{{ .Content }}</span>
+            <div class="col-4 mb-4">
+              <a href="{{ .RelPermalink }}">
+                <div class="blog-listing p-3 pb-5">
+                  {{ if .Params.featured_image }}
+                    <img class="featured-image mb-3" src="{{ .Params.featured_image }}" alt="{{ .Title }}" />
+                  {{ end }}
+                  <a class="display-6" href="{{ .RelPermalink }}">{{ .Title }}</a><br>
+                  <span class="grid-gray">{{ .Date.Format "2006-01-02" }}</span>
+                  <span class="preview-content">{{ .Content }}</span>
+                </div>
+                </a>
               </div>
-
-            </div>
             {{ end }}
           <a href="/">Back to home</a>
       </div>
@@ -51,6 +55,15 @@
     -webkit-box-orient: vertical;
   }
 
+  .featured-image {
+    width: 100%; /* Adjust the width as needed */
+    height: 100px; /* Maintain the image's aspect ratio */
+  }
+
+  .blog-listing{
+    border: 1px solid #949494;
+  }
+
 </style>
 
 </html>