add pe-picture and pe-figure shortcodes

2 files changed, 206 insertions, 0 deletions

diff --git a/themes/hugo-pt2021/layouts/shortcodes/pe-figure.html b/themes/hugo-pt2021/layouts/shortcodes/pe-figure.html
new file mode 100644
index 0000000..324d11f
--- /dev/null
+++ b/themes/hugo-pt2021/layouts/shortcodes/pe-figure.html
@@ -0,0 +1,104 @@
+{{/*
+https://github.com/pablotron/hugo-shortcode-ppic
+
+Custom Hugo table shortcode which renders figure elements that support
+progressive enhancement.
+
+This short code exists because the figure shortcode in Hugo does not
+support the picture element and does not support progressive image
+enhancement.
+*/}}
+
+{{/* image mime types */}}
+{{- $MIME_TYPES := (dict ".webp" "image/webp" ".avif" "image/avif" ".png" "image/png") -}}
+
+{{/* get picture data */}}
+{{- $pic := (index $.Page.Params "pics" (.Get 0)) -}}
+
+{{- if (reflect.IsSlice $pic) -}}
+  {{- $pic = (dict "sources" $pic) -}}
+{{- end -}}
+
+<figure
+  id='{{- $pic.id -}}'
+  class='{{- $pic.css -}}'
+  title='{{- $pic.tip -}}'
+>
+  <picture>
+    {{- if $pic.sources -}}
+      {{/* get source count */}}
+      {{- $num_sources := len $pic.sources -}}
+
+      {{/* render sources */}}
+      {{- range $x, $src := $pic.sources -}}
+        {{- $is_map := reflect.IsMap $src -}}
+
+        {{- if $is_map -}}
+          {{/* source is a map, reference keys */}}
+
+          {{- if (lt $x (sub $num_sources 1)) -}}
+            {{/* emit source tag */}}
+            <source
+              {{if $src.src}} src='{{- $src.src -}}'{{- end}}
+              {{if $src.srcset}} srcset='{{- $src.srcset -}}'{{- end}}
+              {{if $src.media}} media='{{- $src.media -}}'{{- end}}
+
+              {{if $src.type}}
+                type='{{- $src.type -}}'
+              {{else}}
+                {{/* get file extension */}}
+                {{- $ext := path.Ext $src.srcset -}}
+
+                {{if (index $MIME_TYPES $ext)}}
+                  type='{{- index $MIME_TYPES $ext -}}'
+                {{end}}
+              {{- end}}
+
+              {{if (or $pic.tip $src.tip)}} title='{{- default $pic.tip $src.tip -}}'{{- end}}
+              {{if (or $pic.tip $src.tip)}} alt='{{- default $pic.tip $src.tip -}}'{{- end}}
+            />
+          {{- else -}}
+            {{/* emit img tag */}}
+            <img
+              {{if $src.src}} src='{{- $src.src -}}'{{- end}}
+              {{if $src.srcset}} srcset='{{- $src.srcset -}}'{{- end}}
+              {{if $src.css}} class='{{- $src.css -}}'{{- end}}
+              {{if $src.width}} width='{{- $src.width -}}'{{- end}}
+              {{if $src.height}} height='{{- $src.height -}}'{{- end}}
+
+              {{if (or $pic.tip $src.tip)}} alt='{{- default $pic.tip $src.tip -}}'{{- end}}
+            />
+          {{- end -}}
+        {{- else -}}
+          {{/* src is a string */}}
+
+          {{- if (lt $x (sub $num_sources 1)) -}}
+            {{/* emit source */}}
+
+            {{/* get file extension */}}
+            {{- $ext := path.Ext $src -}}
+
+            <source
+              srcset='{{- $src -}}'
+
+              {{/* determine type from extension */}}
+              {{if (index $MIME_TYPES $ext) -}}
+                type='{{- index $MIME_TYPES $ext -}}'
+              {{- end -}}
+            />
+          {{- else -}}
+            {{/* emit img */}}
+            <img
+              src='{{- $src -}}'
+              {{if $pic.tip}} alt='{{- $pic.tip -}}'{{end}}
+            />
+          {{- end -}}
+        {{- end -}}
+      {{- end -}}
+    {{- end -}}
+  </picture>
+
+  <figcaption>
+    <p>{{- $pic.tip -}}</p>
+  </figcaption>
+</figure>
diff --git a/themes/hugo-pt2021/layouts/shortcodes/pe-picture.html b/themes/hugo-pt2021/layouts/shortcodes/pe-picture.html
new file mode 100644
index 0000000..3135fcf
--- /dev/null
+++ b/themes/hugo-pt2021/layouts/shortcodes/pe-picture.html
@@ -0,0 +1,102 @@
+{{/*
+https://github.com/pablotron/hugo-shortcode-ppic
+
+Custom Hugo table shortcode which renders progressive picture elements
+from front matter data.
+
+This short code exists because the figure shortcode in Hugo does not
+support the picture element and does not support progressive image
+enhancement.
+
+Features:
+... TODO ...
+
+*/}}
+
+{{/* image mime types */}}
+{{- $MIME_TYPES := (dict ".webp" "image/webp" ".avif" "image/avif" ".png" "image/png") -}}
+
+{{/* get picture data */}}
+{{- $pic := (index $.Page.Params "pics" (.Get 0)) -}}
+
+{{- if (reflect.IsSlice $pic) -}}
+  {{- $pic = (dict "sources" $pic) -}}
+{{- end -}}
+
+<picture
+  id='{{- $pic.id -}}'
+  class='{{- $pic.css -}}'
+  title='{{- $pic.tip -}}'
+>
+  {{- if $pic.sources -}}
+    {{/* get source count */}}
+    {{- $num_sources := len $pic.sources -}}
+
+    {{/* render sources */}}
+    {{- range $x, $src := $pic.sources -}}
+      {{- $is_map := reflect.IsMap $src -}}
+
+      {{- if $is_map -}}
+        {{/* source is a map, reference keys */}}
+
+        {{- if (lt $x (sub $num_sources 1)) -}}
+          {{/* emit source tag */}}
+          <source
+            {{if $src.src}} src='{{- $src.src -}}'{{- end}}
+            {{if $src.srcset}} srcset='{{- $src.srcset -}}'{{- end}}
+            {{if $src.media}} media='{{- $src.media -}}'{{- end}}
+
+            {{if $src.type}}
+              type='{{- $src.type -}}'
+            {{else}}
+              {{/* get file extension */}}
+              {{- $ext := path.Ext $src.srcset -}}
+
+              {{if (index $MIME_TYPES $ext)}}
+                type='{{- index $MIME_TYPES $ext -}}'
+              {{end}}
+            {{- end}}
+
+            {{if (or $pic.tip $src.tip)}} title='{{- default $pic.tip $src.tip -}}'{{- end}}
+            {{if (or $pic.tip $src.tip)}} alt='{{- default $pic.tip $src.tip -}}'{{- end}}
+          />
+        {{- else -}}
+          {{/* emit img tag */}}
+          <img
+            {{if $src.src}} src='{{- $src.src -}}'{{- end}}
+            {{if $src.srcset}} srcset='{{- $src.srcset -}}'{{- end}}
+            {{if $src.css}} class='{{- $src.css -}}'{{- end}}
+            {{if $src.width}} width='{{- $src.width -}}'{{- end}}
+            {{if $src.height}} height='{{- $src.height -}}'{{- end}}
+
+            {{if (or $pic.tip $src.tip)}} alt='{{- default $pic.tip $src.tip -}}'{{- end}}
+          />
+        {{- end -}}
+      {{- else -}}
+        {{/* src is a string */}}
+
+        {{- if (lt $x (sub $num_sources 1)) -}}
+          {{/* emit source */}}
+
+          {{/* get file extension */}}
+          {{- $ext := path.Ext $src -}}
+
+          <source
+            srcset='{{- $src -}}'
+
+            {{/* determine type from extension */}}
+            {{if (index $MIME_TYPES $ext) -}}
+              type='{{- index $MIME_TYPES $ext -}}'
+            {{- end -}}
+          />
+        {{- else -}}
+          {{/* emit img */}}
+          <img
+            src='{{- $src -}}'
+            {{if $pic.tip}} alt='{{- $pic.tip -}}'{{end}}
+          />
+        {{- end -}}
+      {{- end -}}
+    {{- end -}}
+  {{- end -}}
+</picture>