From 502aa408d9775d73c1bd75b199897ddbd71e3e28 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Mon, 25 Nov 2024 09:51:32 -0800
Subject: [PATCH] Refactor all the figures

There are two main sizes of figures: fullwidth and small. Full width figures take
the full content width. Usually they spread into the "wide" content area too.
Main size figures are also full width figures, but they stop at the edges of the
main content area. Small figures shrink to fit and are generally 480pts wide.

Break all these different types of figures down into separate templates for each
variant.

Add the ability for resources to specify a "source" with a link and title.
---
 assets/css/010_structure.css                  |  2 +-
 assets/css/050_figures.css                    | 36 +++++++++++++------
 i18n/en.yaml                                  |  7 +++-
 layouts/partials/page/figures/caption.html    |  6 ++++
 .../page/figures/fullwidth-image.html         | 30 ++++++++++++++++
 .../page/figures/fullwidth-video.html         | 10 ++++++
 layouts/partials/page/figures/fullwidth.html  | 14 ++++++++
 .../page/figures/resource-source.html         | 19 ++++++++++
 .../partials/page/figures/small-image.html    | 29 +++++++++++++++
 layouts/partials/page/figures/small.html      | 12 +++++++
 10 files changed, 153 insertions(+), 12 deletions(-)
 create mode 100644 layouts/partials/page/figures/caption.html
 create mode 100644 layouts/partials/page/figures/fullwidth-image.html
 create mode 100644 layouts/partials/page/figures/fullwidth-video.html
 create mode 100644 layouts/partials/page/figures/fullwidth.html
 create mode 100644 layouts/partials/page/figures/resource-source.html
 create mode 100644 layouts/partials/page/figures/small-image.html
 create mode 100644 layouts/partials/page/figures/small.html

diff --git a/assets/css/010_structure.css b/assets/css/010_structure.css
index 35d8dfa..3b7b888 100644
--- a/assets/css/010_structure.css
+++ b/assets/css/010_structure.css
@@ -106,7 +106,7 @@ body {
   grid-column: main-start / main-end;
 }
 
-.content > :is(.figure--image, .codeblock) {
+.content > .codeblock) {
   grid-column: wide-gutter-start / wide-gutter-end;
 }
 
diff --git a/assets/css/050_figures.css b/assets/css/050_figures.css
index 822c4e6..41691e5 100644
--- a/assets/css/050_figures.css
+++ b/assets/css/050_figures.css
@@ -12,16 +12,7 @@
   display: grid;
   grid-template-columns: subgrid;
 
-  .figure__container {
-    align-items: center;
-    display: flex;
-    gap: var(--body-item-spacing);
-    grid-column: wide-gutter-start / wide-gutter-end;
-    justify-content: center;
-    min-width: fit-content;
-  }
-
-  &:has(> img:only-child, .figure__container > img:only-child) {
+  &:has(> img:only-child, .figure__container:only-child > img:only-child) {
     display: flex;
     justify-content: center;
   }
@@ -46,6 +37,26 @@
 }
 
 
+.figure--image img,
+.figure--video video
+{
+  grid-column: wide-gutter-start / wide-gutter-end;
+}
+
+
+.figure--small {
+  align-items: center;
+  display: flex;
+  grid-column: main-start / main-end;
+  justify-content: center;
+  min-width: fit-content;
+
+  img {
+    width: 480px;
+  }
+}
+
+
 .figure--main-column {
   grid-column: main-start / main-end;
 }
@@ -56,6 +67,11 @@
 }
 
 
+.figure--video video {
+  width: 100%;
+}
+
+
 .figure--youtube {
   grid-column: wide-gutter-start / wide-gutter-end;
 
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 5d80a99..01d4a5f 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -5,10 +5,15 @@ draftYes: "YES"
 draftNo: "NO"
 
 home: Home
-tableOfContents: Table of Contents
+
+instagram: Instagram
 
 # Title of section of a list page where years older than
 # .Site.Params.blog.yearLimit are collapsed into a bulleted list.
 olderPagesSectionTitle: Older
 
+source: Source
+
+tableOfContents: Table of Contents
+
 yearsTagTitle: Years
diff --git a/layouts/partials/page/figures/caption.html b/layouts/partials/page/figures/caption.html
new file mode 100644
index 0000000..f3ccf29
--- /dev/null
+++ b/layouts/partials/page/figures/caption.html
@@ -0,0 +1,6 @@
+<figcaption>
+  {{ .resource.Title | markdownify }}
+  {{ with .resource.Params.source -}}
+    {{ partial "page/figures/resource-source.html" . }}
+  {{- end -}}
+</figcaption>
diff --git a/layouts/partials/page/figures/fullwidth-image.html b/layouts/partials/page/figures/fullwidth-image.html
new file mode 100644
index 0000000..da98420
--- /dev/null
+++ b/layouts/partials/page/figures/fullwidth-image.html
@@ -0,0 +1,30 @@
+{{- $image := .resource -}}
+
+{{-
+  $resizedImages := dict
+    "full"    ($image.Fit "2560x2560")
+    "half"    ($image.Fit "1280x1280")
+    "quarter" ($image.Fit "640x640")
+-}}
+
+<figure class="figure  figure--image
+  {{- if eq .size "main" }}figure--main-column{{ end }}">
+  {{ if .linksToFullSizeImage -}}
+    <a href="{{ $image.RelPermalink }}">
+  {{- end -}}
+    <img
+      src="{{ (index $resizedImages "full").RelPermalink }}"
+      srcset="
+        {{ (index $resizedImages "full").RelPermalink }} 2560w,
+        {{ (index $resizedImages "half").RelPermalink }} 1280w,
+        {{ (index $resizedImages "quarter").RelPermalink }} 640w,
+      "
+      {{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }}
+      {{ with $image.Title }} title="{{ . }}"{{ end }}>
+  {{ if .linksToFullSizeImage -}}
+    </a>
+  {{- end -}}
+  {{ if .shouldShowTitle }}
+    {{ partial "page/figures/caption.html" . }}
+  {{ end }}
+</figure>
diff --git a/layouts/partials/page/figures/fullwidth-video.html b/layouts/partials/page/figures/fullwidth-video.html
new file mode 100644
index 0000000..017f4a5
--- /dev/null
+++ b/layouts/partials/page/figures/fullwidth-video.html
@@ -0,0 +1,10 @@
+{{- $video := .resource -}}
+
+<figure class="figure  figure--video">
+  <video controls>
+    <source src="{{ $video.RelPermalink }}" type="{{ $video.MediaType.Type }}">
+  </video>
+  {{ if .shouldShowTitle }}
+    {{ partial "page/figures/caption.html" . }}
+  {{ end }}
+</figure>
diff --git a/layouts/partials/page/figures/fullwidth.html b/layouts/partials/page/figures/fullwidth.html
new file mode 100644
index 0000000..282f180
--- /dev/null
+++ b/layouts/partials/page/figures/fullwidth.html
@@ -0,0 +1,14 @@
+{{- $page := .page -}}
+
+{{- $shouldShowTitle := .shouldShowTitle -}}
+
+{{- $resource := $page.Resources.GetMatch .name -}}
+{{- if not $resource }}
+  {{ errorf "No resource named '%s'. %s" .name .page.Permalink }}
+{{ end -}}
+
+{{- if eq $resource.ResourceType "image" -}}
+  {{ partial "page/figures/fullwidth-image.html" (merge . (dict "resource" $resource))  }}
+{{- else if eq $resource.ResourceType "video" -}}
+  {{ partial "page/figures/fullwidth-video.html" (merge . (dict "resource" $resource)) }}
+{{- end -}}
diff --git a/layouts/partials/page/figures/resource-source.html b/layouts/partials/page/figures/resource-source.html
new file mode 100644
index 0000000..ca992c6
--- /dev/null
+++ b/layouts/partials/page/figures/resource-source.html
@@ -0,0 +1,19 @@
+<span class="figure__source">
+  {{ if and .title .url }}
+    {{ i18n "source" }}: <a href="{{ .url }}">{{ .title }}</a>.
+  {{ else if .title }}
+    {{ .title }}
+  {{ else }}
+    {{ $sourceTitle := "" }}
+    {{ $parsedURL := urls.Parse .url }}
+    {{ if strings.Contains $parsedURL.Hostname "instagram.com" }}
+      {{ $sourceTitle = i18n "instagram" }}
+    {{ end }}
+
+    {{ if gt (len $sourceTitle) 0 }}
+      {{ i18n "source" }}: <a href="{{ .url }}">{{ $sourceTitle }}</a>
+    {{ else }}
+      <a href="{{ .url }}">{{ i18n "source" }}</a>
+    {{ end }}
+  {{ end }}
+</span>
diff --git a/layouts/partials/page/figures/small-image.html b/layouts/partials/page/figures/small-image.html
new file mode 100644
index 0000000..2166fcf
--- /dev/null
+++ b/layouts/partials/page/figures/small-image.html
@@ -0,0 +1,29 @@
+{{- $image := .resource -}}
+
+{{-
+  $resizedImages := dict
+    "2x" ($image.Fit "960x960")
+    "1x" ($image.Fit "480x480")
+-}}
+
+<figure class="figure  figure--image  figure--small">
+  <div class="figure__container">
+    {{ if .linksToFullSizeImage -}}
+      <a href="{{ $image.RelPermalink }}">
+    {{- end -}}
+      <img
+        src="{{ (index $resizedImages "2x").RelPermalink }}"
+        srcset="
+          {{ (index $resizedImages "2x").RelPermalink }} 960w,
+          {{ (index $resizedImages "1x").RelPermalink }} 480w,
+        "
+        {{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }}
+        {{ with $image.Title }} title="{{ . }}"{{ end }}>
+    {{ if .linksToFullSizeImage -}}
+      </a>
+    {{- end -}}
+    {{ if .shouldShowTitle }}
+      {{ partial "page/figures/caption.html" . }}
+    {{ end }}
+  </div>
+</figure>
diff --git a/layouts/partials/page/figures/small.html b/layouts/partials/page/figures/small.html
new file mode 100644
index 0000000..6b39a92
--- /dev/null
+++ b/layouts/partials/page/figures/small.html
@@ -0,0 +1,12 @@
+{{- $page := .page -}}
+
+{{- $shouldShowTitle := .shouldShowTitle -}}
+
+{{- $resource := $page.Resources.GetMatch .name -}}
+{{- if not $resource }}
+  {{ errorf "No resource named '%s'. %s" .name .page.Permalink }}
+{{ end -}}
+
+{{- if eq $resource.ResourceType "image" -}}
+  {{ partial "page/figures/small-image.html" (merge . (dict "resource" $resource))  }}
+{{- end -}}