Import the code and image shortcodes from the old website

Update the styles for code, image, and youtube figures.

assets/css/050_figures.css

@@ -7,31 +7,34 @@
  * FIGURES
  **********/
 
-.figure--code,
-.figure--image {
+.figure {
   grid-column: wide-gutter-start / wide-gutter-end;
+
+  .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;
+  }
+}
+
+.figure--code {
+  grid-column: gutter-start / gutter-end;
 }
 
 .figure--image {
     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;
-    }
-
     img {
         grid-column: wide-gutter-start / wide-gutter-end;
     }
 }
 
 .figure--youtube {
-  grid-column: main-start / main-end;
+  grid-column: wide-gutter-start / wide-gutter-end;
 
   .youtube {
     width: 100%;

layouts/shortcodes/figure/code.html

@@ -0,0 +1,4 @@
+{{- $trimmedInner := trim .Inner "\n " -}}
+<figure class="figure  figure--code">
+{{ $.Page.RenderString $trimmedInner }}
+</figure>

layouts/shortcodes/figure/image.html

@@ -0,0 +1,47 @@
+{{- $imgs := slice -}}
+{{- $class := .Get "class" -}}
+{{- $shouldResize := .Get "shouldResize" | default true -}}
+{{- $shouldShowTitle := (.Get "shouldShowTitle") | default true -}}
+
+{{- if .Get "name" -}}
+  {{- $imgs = $imgs | append (.Page.Resources.GetMatch (.Get "name")) -}}
+{{- else if .Get "names" -}}
+  {{- range (split (.Get "names") ",") -}}
+    {{- $imgs = $imgs | append ($.Page.Resources.GetMatch .) -}}
+  {{- end -}}
+{{- else -}}
+  {{ errorf "Missing name or names parameter to figures/image" }}
+{{- end -}}
+
+{{- if lt (len $imgs) 0 -}}
+  {{ errorf "No images found for name(s) parameter" }}
+{{- end -}}
+
+<figure class="figure  figure--image{{ with $class }}  {{ . }}{{ end }}">
+  <div class="figure__container">
+    {{ range $img := $imgs }}
+      {{- $linkedImg := $img -}}
+      {{- if not $img }}
+        {{ errorf "Found nil in images list for %s" $.Page.Permalink }}
+      {{ end -}}
+
+      {{- if $shouldResize -}}
+        {{ $linkedImg = $img.Fit "1280x1280" }}
+      {{- end -}}
+
+      {{- $altText := $img.Params.alt | default $img.Title -}}
+      <a href="{{ $img.RelPermalink }}">
+        <img src="{{ $linkedImg.RelPermalink }}"
+          {{- with $altText }} alt="{{ . }}"{{- end }}
+          {{- with $img.Title }} title="{{ . }}"{{- end }}>
+      </a>
+    {{- end }}
+  </div>
+  {{ if $shouldShowTitle -}}
+    {{- range $imgs -}}
+      {{- if gt (len .Title) 0 -}}
+        <figcaption>{{ .Title }}</figcaption>
+      {{- end -}}
+    {{- end -}}
+  {{- end }}
+</figure>