From 50ea4e509cb11f95bc018f628c0f51963aa59581 Mon Sep 17 00:00:00 2001
From: "Thomas A. Christensen II" <25492070+MillironX@users.noreply.github.com>
Date: Sat, 1 Apr 2023 00:14:32 -0500
Subject: [PATCH] feat: Add thumbnail-smart page listings

---
 assets/styles/mix-twbs.scss |  4 ++++
 layouts/_default/list.html  | 43 +++++++++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/assets/styles/mix-twbs.scss b/assets/styles/mix-twbs.scss
index 034dd8f..0fb7bbf 100644
--- a/assets/styles/mix-twbs.scss
+++ b/assets/styles/mix-twbs.scss
@@ -152,4 +152,8 @@ h1 {
   .fixed-bottom {
     left: 25%;
   }
+
+  .md-max-width-33 {
+    max-width: 33%;
+  }
 }
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index c533ab5..69be6fd 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -6,5 +6,48 @@
         {{ .Content }}
       {{ end }}
     </div>
+
+    <div class="row" data-masonry='{"percentPosition": true}'>
+      {{ range .Pages }}
+        <div class="col-xl-auto mb-4">
+          <div class="card">
+            <div class="card-body">
+              {{/* Thumbnail images should be stored as 'thumbnail'.* in the page bundle, but
+                historically they might have been referenced as 'thumbnail' in the front
+                matter, or (even more historically) as 'cardImage'. Use scratch to
+                normalize all these different systems.
+              */}}
+              {{ $bundleGlob := "thumbnail.*" }}
+              {{ $frontThumbGlob := print "images/" (.Params.thumbnail) ".*" }}
+              {{ $frontCardGlob := print "images/" (.Params.cardImage) ".jpg" }}
+              {{ $allThumbnailGlob := print "{" $frontThumbGlob "," $frontCardGlob "," $bundleGlob "}" }}
+              {{ with .Resources.GetMatch $allThumbnailGlob }}
+                {{ $thumbnail := . }}
+                {{ $thumbnailResized := $thumbnail.Resize "600x" }}
+                <img
+                  class="img img-thumbnail float-start me-3 md-max-width-33"
+                  src="{{ $thumbnailResized.RelPermalink }}"
+                  alt="Thumbnail of {{ .Title }}"
+                />
+              {{ end }}
+              <a href="{{ .RelPermalink }}"
+                ><h3 class="card-title">{{ .Title }}</h3></a
+              >
+              <p class="card-text">
+                {{ .Summary }}
+                <strong
+                  ><small
+                    ><a href="{{ .RelPermalink }}">Read more &raquo;</a></small
+                  ></strong
+                >
+              </p>
+            </div>
+          </div>
+          <!-- </card> -->
+        </div>
+        <!-- </col> -->
+      {{ end }}
+    </div>
+    <!-- </row> -->
   </section>
 {{ end }}