From 9300a794b1b0911baf4cf6e2e6cf1d5240cf8a3a Mon Sep 17 00:00:00 2001
From: Mark Dumay <61946753+markdumay@users.noreply.github.com>
Date: Mon, 6 May 2024 08:14:15 +0200
Subject: [PATCH] Improve image set rendering

---
 data/structures/card.yml                |  8 ++++++
 data/structures/image.yml               |  8 ++++++
 exampleSite/hugo_stats.json             |  9 ------
 layouts/partials/assets/card-group.html | 37 +++++++++++++++++++++----
 layouts/partials/assets/card.html       |  5 ++--
 layouts/partials/assets/image.html      |  6 +++-
 layouts/partials/list/featured.html     | 19 ++++++++++---
 package-lock.json                       |  4 +--
 package.json                            |  2 +-
 9 files changed, 74 insertions(+), 24 deletions(-)

diff --git a/data/structures/card.yml b/data/structures/card.yml
index 10f711a3..f9ca5dac 100644
--- a/data/structures/card.yml
+++ b/data/structures/card.yml
@@ -211,6 +211,14 @@ arguments:
     optional: true
     comment: Render hook for the image partial.
     group: partial
+  sizes:
+    type: string
+    default: 100vw
+    optional: true
+    comment: >-
+      One or more strings separated by commas, indicating the source sizes of an
+      image set.
+    group: partial
 body:
   optional: true
   comment: >-
diff --git a/data/structures/image.yml b/data/structures/image.yml
index ffa1670f..56aedc6f 100644
--- a/data/structures/image.yml
+++ b/data/structures/image.yml
@@ -98,6 +98,14 @@ arguments:
         - low
         - auto
     group: partial
+  sizes:
+    type: string
+    default: 100vw
+    optional: true
+    comment: >-
+      One or more strings separated by commas, indicating the source sizes of an
+      image set.
+    group: partial
   title:
     type: string
     optional: true
diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json
index 1ecfdcbd..5b3e0eff 100644
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -181,10 +181,6 @@
       "fa-2xs",
       "fa-4x",
       "fa-activity",
-      "fa-angle-left",
-      "fa-angle-right",
-      "fa-angles-left",
-      "fa-angles-right",
       "fa-arrow-left",
       "fa-arrow-right",
       "fa-bootstrap",
@@ -331,10 +327,6 @@
       "p-2",
       "p-3",
       "p-4",
-      "page-item",
-      "page-link",
-      "pagination",
-      "pagination-terse",
       "pb-2",
       "pb-3",
       "pb-4",
@@ -351,7 +343,6 @@
       "ps-1",
       "ps-3",
       "pt-1",
-      "pt-3",
       "pt-5",
       "pt-md-3",
       "ptw-3",
diff --git a/layouts/partials/assets/card-group.html b/layouts/partials/assets/card-group.html
index 982e7a4f..4c57029e 100644
--- a/layouts/partials/assets/card-group.html
+++ b/layouts/partials/assets/card-group.html
@@ -78,12 +78,38 @@
 {{- $responsive := .responsive | default true -}}
 {{- $cols := string .cols | default "3" -}}
 
+{{- $sizes := "100vw" }}
 {{- $colGrid := "" -}}
-{{- if eq $cols "1" }}{{ $colGrid = "row-cols-1" -}}
-{{- else if eq $cols "2" }}{{ if $responsive }}{{ $colGrid = printf "row-cols-1 row-cols-%s-1 row-cols-%s-2" $breakpoint.prev $breakpoint.current }}{{ else }}{{ $colGrid = "row-cols-2" }}{{ end -}}
-{{- else if eq $cols "3" }}{{ if $responsive }}{{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-3" $breakpoint.prev $breakpoint.current }}{{ else }}{{ $colGrid = "row-cols-3" }}{{ end -}}
-{{- else if eq $cols "4" }}{{ if $responsive }}{{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-4" $breakpoint.prev $breakpoint.current }}{{ else }}{{ $colGrid = "row-cols-4" }}{{ end -}}
-{{- else if eq $cols "5" }}{{ if $responsive }}{{ $colGrid = printf "row-cols-1 row-cols-%s-3 row-cols-%s-5" $breakpoint.prev $breakpoint.current }}{{ else }}{{ $colGrid = "row-cols-5" }}{{ end -}}
+{{- if eq $cols "1" }}
+    {{ $colGrid = "row-cols-1" -}}
+{{- else if eq $cols "2" }}
+    {{ if $responsive }}
+        {{ $colGrid = printf "row-cols-1 row-cols-%s-1 row-cols-%s-2" $breakpoint.prev $breakpoint.current }}
+    {{ else }}
+        {{ $colGrid = "row-cols-2" }}
+    {{ end -}}
+    {{ $sizes = printf "(min-width: %s) 50vw, 100vw" $breakpoint.currentSize }}
+{{- else if eq $cols "3" }}
+    {{ if $responsive }}
+        {{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-3" $breakpoint.prev $breakpoint.current }}
+    {{ else }}
+        {{ $colGrid = "row-cols-3" }}
+    {{ end -}}
+    {{ $sizes = printf "(min-width: %s) 33.3vw, (min-width: %s) 50vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize }}
+{{- else if eq $cols "4" }}
+    {{ if $responsive }}
+        {{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-4" $breakpoint.prev $breakpoint.current }}
+    {{ else }}
+        {{ $colGrid = "row-cols-4" }}
+    {{ end -}}
+    {{ $sizes = printf "(min-width: %s) 25vw, (min-width: %s) 50vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize }}
+{{- else if eq $cols "5" }}
+    {{ if $responsive }}
+        {{ $colGrid = printf "row-cols-1 row-cols-%s-3 row-cols-%s-5" $breakpoint.prev $breakpoint.current }}
+    {{ else }}
+        {{ $colGrid = "row-cols-5" }}
+    {{ end -}}
+    {{ $sizes = printf "(min-width: %s) 20vw, (min-width: %s) 33.3vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize }}
 {{ end -}}
 
 {{- if not $paginate -}}
@@ -102,6 +128,7 @@
                 "footer" $footer
                 "header" $header
                 "loading" $loading
+                "sizes" $sizes
                 "orientation" $orientation
                 "padding" $padding
                 "ratio" $ratio
diff --git a/layouts/partials/assets/card.html b/layouts/partials/assets/card.html
index 7bce69b6..695eaa8c 100644
--- a/layouts/partials/assets/card.html
+++ b/layouts/partials/assets/card.html
@@ -22,6 +22,7 @@
 {{- $iconStyle := "" -}}
 {{- $align := .align | default "start" -}}
 {{- $style := .style | default "" -}}
+{{- $sizes := .sizes | default "100vw" -}}
 {{- $loading := .loading -}}
 {{- $orientation := .orientation | default "stacked" -}}
 {{- $padding := (string .padding) | default "auto" -}}
@@ -131,7 +132,7 @@
         <div class="row g-0 row-cols-1 h-100{{ if $button }} pb-5{{ end }}">
             <div class="{{ if eq $orientation "horizontal-sm" }}col-4 col-md-2{{ else }}col-4{{ end }}">
                 {{- if $thumbnail -}}
-                    {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "1x1") "wrapper" "h-100 card-img-wrap" "class" "rounded-start card-img-h100" "title" $title "loading" $loading) -}}
+                    {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "1x1") "sizes" $sizes "wrapper" "h-100 card-img-wrap" "class" "rounded-start card-img-h100" "title" $title "loading" $loading) -}}
                 {{- else if $icon -}}
                     <div class="card-icon p-{{ $padding }} h-100 fa-wrapper d-flex align-items-{{ $align}} justify-content-center {{ $iconStyle }}">
                         {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
@@ -157,7 +158,7 @@
     <!-- Render stacked / default card -->
     <div class="card {{ $colorStyle }} {{ $class }} text-{{ $align }}">
         {{- if $thumbnail -}}
-            {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "16x9") "wrapper" "card-img-wrap" "class" "card-img-top" "title" (or $alt $title) "loading" $loading) -}}
+            {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "16x9") "sizes" $sizes "wrapper" "card-img-wrap" "class" "card-img-top" "title" (or $alt $title) "loading" $loading) -}}
         {{- else if $icon -}}
             <div class="card-icon p-{{ $padding }} {{ $iconStyle }} text-{{ $align }}">
                 {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
diff --git a/layouts/partials/assets/image.html b/layouts/partials/assets/image.html
index 7dada908..f02e6573 100644
--- a/layouts/partials/assets/image.html
+++ b/layouts/partials/assets/image.html
@@ -35,6 +35,8 @@
 {{- $lazy := eq $loading "lazy" -}}
 {{- $priority := .priority -}}
 {{- if eq $priority "auto" }}{{ $priority = "" }}{{ end -}}
+{{- $sizes := .sizes | default "100vw" -}}
+
 
 {{- define "partials/image-portrait.html" -}}
     {{- $dimensions := slice }}
@@ -168,6 +170,7 @@
     {{- $modes := .modes -}}
     {{- $lazy := .lazy -}}
     {{- $page := .page -}}
+    {{- $sizes := .sizes -}}
     {{- $priority := .priority -}}
     {{- $isVector := false -}}
 
@@ -235,7 +238,7 @@
                 src="{{ $fallbackURL }}"
                 {{ if $lazy }}loading="lazy"{{ end }}
                 {{ with $priority }}fetchpriority="{{ . }}"{{ end }}
-                {{ with $imgset -}}srcset="{{ . }}" sizes="100vw"{{- end }}
+                {{ with $imgset -}}srcset="{{ . }}" sizes="{{ $sizes }}"{{- end }}
                 {{ with $height }}height="{{ . }}"{{ end }}
                 {{ with $width }}width="{{ . }}"{{ end }}
                 {{ with $title }}alt="{{ . }}"{{ end }}>
@@ -263,6 +266,7 @@
     "figclass" $figclass
     "lazy" $lazy
     "priority" $priority
+    "sizes" $sizes
     "page" $page)
 -}}
 
diff --git a/layouts/partials/list/featured.html b/layouts/partials/list/featured.html
index 4b62f3cc..cab76247 100644
--- a/layouts/partials/list/featured.html
+++ b/layouts/partials/list/featured.html
@@ -3,6 +3,7 @@
 {{- $orientation := .orientation | default "stacked" -}}
 {{- $actions := .actions -}}
 {{- $width := .width | default 6 }}
+{{ $sizes := "100vw" }}
 {{- if or (lt $width 1) (gt $width 12) -}}
     {{- $width = 6 -}}
     {{- warnf "partial [list/featured.html] - Invalid column width: %d" $width -}}
@@ -19,6 +20,11 @@
 {{- end -}}
 {{- $breadcrumb := and (not $page.IsHome) site.Params.navigation.breadcrumb -}}
 
+{{- define "partials/list/featured-sizes.html" }}
+    {{ $sizes := printf "(min-width: 768px) %dvw, 50vw" (int (math.Round (div (mul .width 100) 12))) }}
+    {{ return $sizes }}
+{{ end }}
+
 {{- define "partials/list/featured-body.html" }}
     {{- $page := .page -}}
     {{- $headings := .headings -}}
@@ -44,6 +50,7 @@
 {{- define "partials/list/featured-illustration.html" }}
     {{- $page := .page -}}
     {{- $style := printf "img-wrap mx-auto mx-md-0 %s" .style -}}
+    {{ $sizes := .sizes }}
 
     {{ if $page.Params.icon }}
         {{- $icon := (or (and (reflect.IsMap $page.Params.Icon) $page.Params.Icon.url) $page.Params.Icon) -}}
@@ -56,7 +63,7 @@
     {{ else }}
         {{- $thumbnail := (or (and (reflect.IsMap $page.Params.Thumbnail) $page.Params.Thumbnail.url) $page.Params.Thumbnail) -}}
         {{- if $thumbnail }}
-            {{ partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "wrapper" $style "class" "rounded" "title" $page.Site.Title "priority" "high") }}
+            {{ partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "sizes" $sizes "wrapper" $style "class" "rounded" "title" $page.Site.Title "priority" "high") }}
         {{ end }}
     {{ end }}
 {{- end -}}
@@ -70,7 +77,8 @@
         {{ if eq $orientation "stacked" }}
             <div class="row justify-content-center flex-fill">
                 <div class="col-12 col-md-{{ $width }} m-auto text-center">
-                    {{ partial "partials/list/featured-illustration.html" (dict "page" $page "style" "pb-4") }}
+                    {{ $sizes = partial "partials/list/featured-sizes.html" (dict "width" $width) }}
+                    {{ partial "partials/list/featured-illustration.html" (dict "page" $page "sizes" $sizes "style" "pb-4") }}
                     {{ partial "partials/list/featured-body.html" (dict "page" $page "headings" $headings "orientation" $orientation "actions" $actions) }}
                 </div>
             </div>
@@ -79,8 +87,11 @@
                 <div class="col col-12 col-md-{{ $width }} order-1 order-md-0 my-md-auto">
                     {{ partial "partials/list/featured-body.html" (dict "page" $page "headings" $headings "orientation" $orientation "actions" $actions "align" $align) }}
                 </div>
-                <div class="col col-12 col-md-{{ if gt $width 6 }}{{ sub 12 $width }}{{ else }}{{ $width }}{{ end }} order-0 order-md-1 text-center my-md-auto align-self-end">
-                    {{ partial "partials/list/featured-illustration.html" (dict "page" $page "style" "pb-4 pb-md-0") }}
+                {{ $newWidth := $width }}
+                {{ if gt $width 6 }}{{ $newWidth = sub 12 $width }}{{ end }}
+                {{ $sizes = partial "partials/list/featured-sizes.html" (dict "width" $newWidth) }}
+                <div class="col col-12 col-md-{{ $newWidth }} order-0 order-md-1 text-center my-md-auto align-self-end">
+                    {{ partial "partials/list/featured-illustration.html" (dict "page" $page "sizes" $sizes "style" "pb-4 pb-md-0") }}
                 </div>
             </div>
         {{ end }}
diff --git a/package-lock.json b/package-lock.json
index 4ea6a499..f313b845 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.12",
+  "version": "0.23.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.23.12",
+      "version": "0.23.13",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^6.0.0",
diff --git a/package.json b/package.json
index e8d95ab2..3b2ef8c0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.12",
+  "version": "0.23.13",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",