From 7a9ba59529b4c8004a80bfcaa9e6add91b3ccbf4 Mon Sep 17 00:00:00 2001
From: Paul Duncan <pabs@pablotron.org>
Date: Thu, 27 Jan 2022 22:42:17 -0500
Subject: add pe-picture and pe-figure shortcodes
---
themes/hugo-pt2021/README.md | 1 +
.../hugo-pt2021/layouts/shortcodes/pe-figure.html | 104 +++++++++++++++++++++
.../hugo-pt2021/layouts/shortcodes/pe-picture.html | 102 ++++++++++++++++++++
3 files changed, 207 insertions(+)
create mode 100644 themes/hugo-pt2021/layouts/shortcodes/pe-figure.html
create mode 100644 themes/hugo-pt2021/layouts/shortcodes/pe-picture.html
(limited to 'themes/hugo-pt2021')
diff --git a/themes/hugo-pt2021/README.md b/themes/hugo-pt2021/README.md
index a2063de..29e89e8 100644
--- a/themes/hugo-pt2021/README.md
+++ b/themes/hugo-pt2021/README.md
@@ -1,2 +1,3 @@
bulma-0.9.3
icons from feathericons https://feathericons.com/?query=key
+includes hugo-shortcode-table and hugo-shortcode-pe
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>
--
cgit v1.2.3