From e04e7dafa32a5d88c3144311dd66dbb9d8a308dd Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Wed, 6 Nov 2024 09:31:16 -0800
Subject: [PATCH] Render blockquotes in a figure

Render cite and caption too.
---
 assets/css/000_reset.css                      |  2 +-
 assets/css/010_spacing.css                    |  2 +-
 assets/css/050_figures.css                    | 19 +++++++++++++++++++
 assets/css/050_quotations.css                 |  2 +-
 .../_default/_markup/render-blockquote.html   | 11 +++++++++++
 5 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 layouts/_default/_markup/render-blockquote.html

diff --git a/assets/css/000_reset.css b/assets/css/000_reset.css
index 2042fe3..0474e99 100644
--- a/assets/css/000_reset.css
+++ b/assets/css/000_reset.css
@@ -12,7 +12,7 @@
  ********/
 
 
-figure, h1, h2, h3, h4, h5, h6, p, pre {
+blockquote, figure, h1, h2, h3, h4, h5, h6, p, pre {
     margin: 0;
     padding: 0;
 }
diff --git a/assets/css/010_spacing.css b/assets/css/010_spacing.css
index bd5861e..8de79d4 100644
--- a/assets/css/010_spacing.css
+++ b/assets/css/010_spacing.css
@@ -61,7 +61,7 @@ p + p {
 
 /* Figures */
 
-{{- $elementsWithXLBlockMargins := "blockquote, table, .codeblock, .figure--code, .figure--image, .figure--video, .figure--youtube, .highlight" -}}
+{{- $elementsWithXLBlockMargins := "blockquote, table, .codeblock, .figure--main-column, .figure--code, .figure--image, .figure--video, .figure--youtube, .highlight" -}}
 
 p + :is({{ $elementsWithXLBlockMargins }}) {
     margin-block-start: var(--space-xl);
diff --git a/assets/css/050_figures.css b/assets/css/050_figures.css
index 66a1bab..822c4e6 100644
--- a/assets/css/050_figures.css
+++ b/assets/css/050_figures.css
@@ -29,6 +29,25 @@
   > a:has(img:only-child) {
     grid-column: wide-gutter-start / wide-gutter-end;
   }
+
+  .figure__caption--blockquote {
+    font-size: inherit;
+    margin-inline-start: var(--space-m);
+
+    blockquote + & {
+      margin-block-start: var(--space-m);
+    }
+
+    &::before {
+      color: var(--text-color-secondary);
+      content: "--";
+    }
+  }
+}
+
+
+.figure--main-column {
+  grid-column: main-start / main-end;
 }
 
 
diff --git a/assets/css/050_quotations.css b/assets/css/050_quotations.css
index 8154dac..5c4570a 100644
--- a/assets/css/050_quotations.css
+++ b/assets/css/050_quotations.css
@@ -7,7 +7,7 @@
  * QUOTATIONS
  *************/
 
-blockquote {
+.figure--blockquote, :not(.figure--blockquote) > blockquote {
   --border-width: var(--space-xs);
   --inline-padding: var(--space-l);
 
diff --git a/layouts/_default/_markup/render-blockquote.html b/layouts/_default/_markup/render-blockquote.html
new file mode 100644
index 0000000..4398b15
--- /dev/null
+++ b/layouts/_default/_markup/render-blockquote.html
@@ -0,0 +1,11 @@
+<figure class="figure  figure--main-column  figure--blockquote">
+  <blockquote
+    {{- with .Attributes.cite }} cite="{{ . }}"{{ end -}}>
+    {{ .Text }}
+  </blockquote>
+  {{ with .Attributes.caption }}
+    <figcaption class="figure__caption--blockquote">
+      {{ . | safeHTML }}
+    </figcaption>
+  {{ end }}
+</figure>