Add align param

2023-01-15 21:43:13 -08:00
parent c578d235d2
commit ec03a86297
9 changed files with 87 additions and 204 deletions
--- a/layouts/partials/paige/figure.html
+++ b/layouts/partials/paige/figure.html
@@ -1,11 +1,26 @@
+{{ $align := .align | default "center" }}
 {{ $caption := .caption | markdownify }}
+{{ $compact := .compact }}
 {{ $content := .content | markdownify }}
 {{ $float := .float }}
+{{ $gap := .gap | default "2" }}
 {{ $height := .height }}
 {{ $maxheight := .maxheight }}
 {{ $maxwidth := .maxwidth }}
 {{ $width := .width }}

+{{ $bottommargin := true }}
+
+{{ if $compact }}
+    {{ $bottommargin = false }}
+{{ end }}
+
+{{ $table := false }}
+
+{{ if or $compact $float }}
+    {{ $table = true }}
+{{ end }}
+
 {{ $style := "" }}

 {{ if $height }}
@@ -48,27 +63,28 @@
    {{ end }}
 {{ end }}

-{{ $margin := "" }}
+{{ $sidemargin := "" }}
+
 {{ if $float }}
    {{ if eq $float "start" }}
-        {{ $margin = "me-4" }}
+        {{ $sidemargin = "me-4" }}
    {{ else if eq $float "end" }}
-        {{ $margin = "ms-4" }}
+        {{ $sidemargin = "ms-4" }}
    {{ else }}
        {{ errorf "invalid float: %q" $float }}
    {{ end }}
 {{ end }}

-<figure class="{{ with $float }} float-{{ . }} {{ $margin }} {{ end }} align-items-center d-flex flex-column justify-content-center paige-figure" {{ if $float }} {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ end }}>
-    <div class="align-items-center d-flex flex-column justify-content-center {{ if and $float $height }} h-100 {{ end }}" {{ if not $float }} {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ end }}>
-        {{ if $float }}
+<figure class="{{ with $float }} float-{{ . }} {{ $sidemargin }} {{ end }} {{ if not $bottommargin }} mb-0 {{ end }} align-items-{{ $align }} d-flex flex-column justify-content-center paige-figure" {{ if $float }} {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ end }}>
+    <div class="align-items-{{ $align }} d-flex flex-column justify-content-center {{ if and $float $height }} h-100 {{ end }}" {{ if not $float }} {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ end }}>
+        {{ if $table }}
            <div class="d-table">
        {{ end }}
-        <div {{ if $caption }} class="mb-2" {{ end }}>{{ $content }}</div>
+        <div>{{ $content }}</div>
        {{ with $caption }}
-            <figcaption class="figure-caption text-center" {{ if $float }} style="caption-side: bottom; display: table-caption" {{ end }}>{{ . }}</figcaption>
+            <figcaption class="figure-caption mt-{{ $gap }} text-{{ $align }}" {{ if $table }} style="caption-side: bottom; display: table-caption" {{ end }}>{{ . }}</figcaption>
        {{ end }}
-        {{ if $float }}
+        {{ if $table }}
            </div>
        {{ end }}
    </div>
--- a/layouts/partials/paige/image-figure.html
+++ b/layouts/partials/paige/image-figure.html
@@ -1,5 +1,6 @@
 {{ $alt := .alt }}
 {{ $caption := .caption }}
+{{ $compact := .compact }}
 {{ $float := .float }}
 {{ $height := .height }}
 {{ $link := .link }}
@@ -7,7 +8,6 @@
 {{ $maxwidth := .maxwidth }}
 {{ $method := .method }}
 {{ $options := .options }}
-{{ $packed := .packed }}
 {{ $page := .page }}
 {{ $resource := .resource }}
 {{ $src := .src }}
@@ -33,70 +33,13 @@
    ) }}
 {{ end }}

-{{ $style := "" }}
-
-{{ if $height }}
-    {{ with printf "height: %v" $height }}
-        {{ if $style }}
-            {{ $style = printf "%v; %v" $style . }}
-        {{ else }}
-            {{ $style = . }}
-        {{ end }}
-    {{ end }}
-{{ end }}
-
-{{ if $maxheight }}
-    {{ with printf "max-height: %v" $maxheight }}
-        {{ if $style }}
-            {{ $style = printf "%v; %v" $style . }}
-        {{ else }}
-            {{ $style = . }}
-        {{ end }}
-    {{ end }}
-{{ end }}
-
-{{ if $maxwidth }}
-    {{ with printf "max-width: %v" $maxwidth }}
-        {{ if $style }}
-            {{ $style = printf "%v; %v" $style . }}
-        {{ else }}
-            {{ $style = . }}
-        {{ end }}
-    {{ end }}
-{{ end }}
-
-{{ if $width }}
-    {{ with printf "width: %v" $width }}
-        {{ if $style }}
-            {{ $style = printf "%v; %v" $style . }}
-        {{ else }}
-            {{ $style = . }}
-        {{ end }}
-    {{ end }}
-{{ end }}
-
-{{ $margin := "" }}
-{{ if $float }}
-    {{ if eq $float "start" }}
-        {{ $margin = "me-4" }}
-    {{ else if eq $float "end" }}
-        {{ $margin = "ms-4" }}
-    {{ else }}
-        {{ errorf "invalid float: %q" $float }}
-    {{ end }}
-{{ end }}
-
-<figure class="{{ if $float }} float-{{ $float }} {{ $margin }} {{ else if $packed }} mb-0 {{ end }} align-items-center d-flex flex-column justify-content-center paige-figure" {{ if $float }} {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ end }}>
-    <div class="align-items-center d-flex flex-column justify-content-center {{ if and $float $height }} h-100 {{ end }}" {{ if not $float }} {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ end }}>
-        {{ if or $float $table }}
-            <div class="d-table">
-        {{ end }}
-        <div {{ if $caption }} class="mb-2" {{ end }}>{{ $content }}</div>
-        {{ with $caption }}
-            <figcaption class="figure-caption text-center" {{ if or $float $table }} style="caption-side: bottom; display: table-caption" {{ end }}>{{ . }}</figcaption>
-        {{ end }}
-        {{ if or $float $table }}
-            </div>
-        {{ end }}
-    </div>
-</figure>
+{{ partial "paige/figure.html" (dict
+    "caption" $caption
+    "compact" $compact
+    "content" $content
+    "float" $float
+    "height" $height
+    "maxheight" $maxheight
+    "maxwidth" $maxwidth
+    "width" $width
+) }}
--- a/layouts/shortcodes/paige/code.html
+++ b/layouts/shortcodes/paige/code.html
@@ -1,3 +1,4 @@
+{{ $align := .Get "align" }}
 {{ $caption := .Get "caption" }}
 {{ $float := .Get "float" }}
 {{ $lang := .Get 0 | default (.Get "lang") | default "plaintext" }}
@@ -6,6 +7,7 @@
 {{ $content := highlight (.Inner | replaceRE "^\n" "") $lang $options }}

 {{ partial "paige/figure.html" (dict
+    "align" $align
    "caption" $caption
    "content" $content
    "float" $float
--- a/layouts/shortcodes/paige/figure.html
+++ b/layouts/shortcodes/paige/figure.html
@@ -1,3 +1,4 @@
+{{ $align := .Get "align" }}
 {{ $caption := .Get 0 | default (.Get "caption") }}
 {{ $float := .Get "float" }}
 {{ $height := .Get "height" }}
@@ -8,6 +9,7 @@
 {{ $content := .Inner }}

 {{ partial "paige/figure.html" (dict
+    "align" $align
    "caption" $caption
    "content" $content
    "float" $float
--- a/layouts/shortcodes/paige/gallery.html
+++ b/layouts/shortcodes/paige/gallery.html
@@ -19,13 +19,13 @@

    {{ partial "paige/image-figure.html" (dict
        "caption" $caption
+        "compact" true
        "height" $height
        "link" $resource.RelPermalink
        "maxheight" $maxheight
        "maxwidth" $maxwidth
        "method" $method
        "options" $options
-        "packed" true
        "page" .Page
        "resource" $resource
        "src" $image
--- a/layouts/shortcodes/paige/image.html
+++ b/layouts/shortcodes/paige/image.html
@@ -1,3 +1,4 @@
+{{ $align := .Get "align" }}
 {{ $alt := .Get "alt" }}
 {{ $caption := .Get "caption" }}
 {{ $float := .Get "float" }}
@@ -12,6 +13,7 @@
 {{ $width := .Get "width" }}

 {{ partial "paige/image-figure.html" (dict
+    "align" $align
    "alt" $alt
    "caption" $caption
    "float" $float
--- a/layouts/shortcodes/paige/quote.html
+++ b/layouts/shortcodes/paige/quote.html
@@ -1,87 +1,22 @@
-{{ $align := .Get "align" | default "center" }}
+{{ $align := .Get "align" }}
 {{ $caption := .Get "caption" | markdownify }}
-{{ $cite := (.Get 0 | default (.Get "cite")) | markdownify }}
+{{ $content := .Inner | markdownify }}
 {{ $float := .Get "float" }}
 {{ $height := .Get "height" }}
 {{ $maxheight := .Get "maxheight" }}
 {{ $maxwidth := .Get "maxwidth" }}
 {{ $width := .Get "width" }}

-{{ $content := .Inner | markdownify }}
+{{ $content = printf `<blockquote class="blockquote mb-0 text-%v">%v</blockquote>` $align $content | safeHTML }}

-{{ $style := "" }}
-
-{{ if $height }}
-    {{ with printf "height: %v" $height }}
-        {{ if $style }}
-            {{ $style = printf "%v; %v" $style . }}
-        {{ else }}
-            {{ $style = . }}
-        {{ end }}
-    {{ end }}
-{{ end }}
-
-{{ if $maxheight }}
-    {{ with printf "max-height: %v" $maxheight }}
-        {{ if $style }}
-            {{ $style = printf "%v; %v" $style . }}
-        {{ else }}
-            {{ $style = . }}
-        {{ end }}
-    {{ end }}
-{{ end }}
-
-{{ if $maxwidth }}
-    {{ with printf "max-width: %v" $maxwidth }}
-        {{ if $style }}
-            {{ $style = printf "%v; %v" $style . }}
-        {{ else }}
-            {{ $style = . }}
-        {{ end }}
-    {{ end }}
-{{ end }}
-
-{{ if $width }}
-    {{ with printf "width: %v" $width }}
-        {{ if $style }}
-            {{ $style = printf "%v; %v" $style . }}
-        {{ else }}
-            {{ $style = . }}
-        {{ end }}
-    {{ end }}
-{{ end }}
-
-{{ $margin := "" }}
-{{ if $float }}
-    {{ if eq $float "start" }}
-        {{ $margin = "me-4" }}
-    {{ else if eq $float "end" }}
-        {{ $margin = "ms-4" }}
-    {{ else }}
-        {{ errorf "invalid float: %q" $float }}
-    {{ end }}
-{{ end }}
-
-<figure class="{{ with $float }} float-{{ . }} {{ $margin }} {{ end }} align-items-center d-flex flex-column justify-content-center paige-figure" {{ if $float }} {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ end }}>
-    <div class="align-items-center d-flex flex-column justify-content-center {{ if and $float $height }} h-100 {{ end }}" {{ if not $float }} {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ end }}>
-        {{ if $float }}
-            <div class="d-table">
-        {{ end }}
-        {{ if $caption }}
-            <div class="mb-2">
-        {{ end }}
-            <blockquote class="blockquote {{ if not $cite }} mb-0 {{ end }} text-{{ $align }}">{{ $content }}</blockquote>
-        {{ if $caption }}
-            </div>
-        {{ end }}
-        {{ with $caption }}
-            <figcaption class="figure-caption text-center" {{ if $float }} style="caption-side: bottom; display: table-caption" {{ end }}>{{ . }}</figcaption>
-        {{ end }}
-        {{ with $cite }}
-            <figcaption class="blockquote-footer figure-caption mb-0 text-{{ $align }}">{{ . }}</figcaption>
-        {{ end }}
-        {{ if $float }}
-            </div>
-        {{ end }}
-    </div>
-</figure>
+{{ partial "paige/figure.html" (dict
+    "align" $align
+    "caption" $caption
+    "content" $content
+    "float" $float
+    "gap" "0"
+    "height" $height
+    "maxheight" $maxheight
+    "maxwidth" $maxwidth
+    "width" $width
+) }}