generators/shortcodes: Footnote and image enhancements

Defensive; hash footnote content and mark ids to ensure no conflicts on side-notes and
images.

Decouple PHP from image short-codes.

Add margin images.

Ensure consistency between foot-notes, side-notes, and side-images.

6 files changed, 54 insertions, 44 deletions

diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/image.html b/generators/hugo/themes/tdro/layouts/shortcodes/image.html
index a49ed94..afebef4 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/image.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/image.html
@@ -1,15 +1,15 @@
-{{ safeHTML "<?php" }}
-$width = getimagesize($_SERVER['DOCUMENT_ROOT'] . '{{.Get `source`}}')[0];
-$height = getimagesize($_SERVER['DOCUMENT_ROOT'] . '{{.Get `source`}}')[1];
-$ratio = ((($height / $width) * 100) > 100) ? $height . 'px' : $height / $width * 100 . '%';
-{{ safeHTML "?>" }}
+{{ $imageFile := print "public" (.Get `source`) }}
+{{ $image := imageConfig $imageFile }}
+
+{{ $ratio := 0 }}
+{{ if lt (mul (div (float $image.Height) $image.Width) 100) 100 }}
+{{ $ratio = mul (div (float $image.Height) $image.Width) 100 }}
+{{ end }}
 
 <figure>
-  <a href="{{.Get `source`}}" onclick="return false;">
-    <div {{ safeHTMLAttr `<?php echo 'style=' . '"' . 'padding-bottom:' . $ratio . ';' . '"'; ?>` }}>
-    <img data-image-zoom src="{{.Get `source`}}" alt="{{.Get `title`}}" title="{{.Get `title`}}"
-    {{ safeHTMLAttr `<?php echo 'width=' . '"' . $width . '"'; ?>` }}
-    {{ safeHTMLAttr `<?php echo 'height=' . '"' . $height . '"'; ?>` }} />
+  <a href="{{ .Get `source` }}" onclick="return false;">
+    <div style="padding-bottom: {{ $ratio }}%;">
+      <img data-image-zoom src="{{ .Get `source` }}" alt="{{ .Get `title` }}" title="{{ .Get `title` }}" width="{{ $image.Width }}" height="{{ $image.Height }}"/>
     </div>
   </a>
   <figcaption class="has-text-centered has-text-grey-dark">{{ .Inner }}</figcaption>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/marginimage.html b/generators/hugo/themes/tdro/layouts/shortcodes/marginimage.html
new file mode 100644
index 0000000..b880adb
--- /dev/null
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/marginimage.html
@@ -0,0 +1,14 @@
+{{ $id := md5 (printf (.Get `mark`) .Inner) }}
+{{ $imageFile := print "public" (.Get `source`) }}
+{{ $image := imageConfig $imageFile }}
+
+<span class="marginnote-container">
+  <label for="{{ $id }}" class="marginnote-toggle marginnote-mark" title="{{ .Inner }}"><span>{{ .Get `mark` }}</span></label>
+  <input type="checkbox" id="{{ $id }}" class="marginnote-toggle">
+  <span class="sans-serif marginnote sideimage {{ .Get `set` }}note">
+    <a href="{{.Get `source`}}" onclick="return false;">
+      <img data-image-zoom src="{{ .Get `source`}}" alt="{{ .Inner }}" title="{{ .Get `title`}}" width="{{ $image.Width }}" height="{{ $image.Height }}"/>
+    </a>
+    <span class="sideimage-footer is-block has-text-centered has-text-grey-dark"><mark>{{ .Inner }}</mark></span>
+  </span>
+</span>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/marginnote.html b/generators/hugo/themes/tdro/layouts/shortcodes/marginnote.html
index 12f74be..7718cb3 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/marginnote.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/marginnote.html
@@ -1,7 +1,9 @@
+{{ $id := md5 (printf (.Get `mark`) .Inner) }}
+
 <span class="marginnote-container">
-<label for="{{ .Get `mark` }}" class="marginnote-toggle marginnote-mark" title="{{ .Inner }}">{{ .Get `mark` }}</label>
-<input type="checkbox" id="{{ .Get `mark` }}" class="marginnote-toggle">
-<span class="sans-serif marginnote {{ .Get `set` }}note">
-<mark>{{ .Inner }}</mark>
-</span>
+  <label for="{{ $id }}" class="marginnote-toggle marginnote-mark" title="{{ .Inner }}"><span>{{ .Get `mark` }}</span></label>
+  <input type="checkbox" id="{{ $id }}" class="marginnote-toggle">
+  <span class="sans-serif marginnote {{ .Get `set` }}note">
+    <mark>{{ .Inner }}</mark>
+  </span>
 </span>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html b/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html
index 39e22a4..3e4966c 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html
@@ -1,23 +1,14 @@
-<span class="sidenote-container">
-
-<label for="{{ .Get `mark` }}" class="sidenote-toggle sidenote-mark" title="{{ .Inner }}">{{ .Get `mark` }}</label>
-<input type="checkbox" id="{{ .Get `mark` }}" class="sidenote-toggle">
-
-<span class="sans-serif sidenote sideimage {{ .Get `set` }}note">
-
-{{ safeHTML "<?php" }}
-$width = getimagesize($_SERVER['DOCUMENT_ROOT'] . '{{.Get `source`}}')[0];
-$height = getimagesize($_SERVER['DOCUMENT_ROOT'] . '{{.Get `source`}}')[1];
-$ratio = ((($height / $width) * 100) > 100) ? $height . 'px' : $height / $width * 100 . '%';
-{{ safeHTML "?>" }}
-
-  <a href="{{.Get `source`}}" onclick="return false;">
-    <img data-image-zoom src="{{.Get `source`}}" alt="{{ .Inner }}" title="{{.Get `title`}}"
-    {{ safeHTMLAttr `<?php echo 'width=' . '"' . $width . '"'; ?>` }}
-    {{ safeHTMLAttr `<?php echo 'height=' . '"' . $height . '"'; ?>` }} />
-  </a>
-
-  <span class="sideimage-footer is-block has-text-centered has-text-grey-dark"><mark>{{ .Inner }}</mark></span>
-</span>
+{{ $id := md5 (printf (.Get `mark`) .Inner) }}
+{{ $imageFile := print "public" (.Get `source`) }}
+{{ $image := imageConfig $imageFile }}
 
+<span class="sidenote-container">
+  <label for="{{ $id }}" class="sidenote-toggle sidenote-mark" title="{{ .Inner }}"><span>{{ .Get `mark` }}</span></label>
+  <input type="checkbox" id="{{ $id }}" class="sidenote-toggle">
+  <span class="sans-serif sidenote sideimage {{ .Get `set` }}note">
+    <a href="{{.Get `source`}}" onclick="return false;">
+      <img data-image-zoom src="{{ .Get `source`}}" alt="{{ .Inner }}" title="{{ .Get `title`}}" width="{{ $image.Width }}" height="{{ $image.Height }}"/>
+    </a>
+    <span class="sideimage-footer is-block has-text-centered has-text-grey-dark"><mark>{{ .Inner }}</mark></span>
+  </span>
 </span>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/sidenote.html b/generators/hugo/themes/tdro/layouts/shortcodes/sidenote.html
index 40d602a..f4c994c 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/sidenote.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/sidenote.html
@@ -1,7 +1,9 @@
+{{ $id := md5 (printf (.Get `mark`) .Inner) }}
+
 <span class="sidenote-container">
-<label for="{{ .Get `mark` }}" class="sidenote-toggle sidenote-mark" title="{{ .Inner }}"><span>{{ .Get `mark` }}</span></label>
-<input type="checkbox" id="{{ .Get `mark` }}" class="sidenote-toggle">
-<span class="sans-serif sidenote {{ .Get `set` }}note">
-<mark>{{ .Inner }}</mark>
-</span>
+  <label for="{{ $id }}" class="sidenote-toggle sidenote-mark" title="{{ .Inner }}"><span>{{ .Get `mark` }}</span></label>
+  <input type="checkbox" id="{{ $id }}" class="sidenote-toggle">
+  <span class="sans-serif sidenote {{ .Get `set` }}note">
+    <mark>{{ .Inner }}</mark>
+  </span>
 </span>
diff --git a/public/css/tdro.css b/public/css/tdro.css
index 84f3f09..842814c 100644
--- a/public/css/tdro.css
+++ b/public/css/tdro.css
@@ -4168,9 +4168,10 @@ input.sidenote-toggle, input.marginnote-toggle  { display: none; }
 mark { background-color: transparent; color: unset; }
 
 .sidenote-container:hover .sidenote-mark span,
-.sidenote-container:hover .sidenote mark { background-color: #fefe98; color: #000; }
-.sidenote-container:hover .sidenote a { background-color: #fefe98; color: #000; border-color: dodgerblue; }
-
+.sidenote-container:hover .sidenote mark,
+.marginnote-container:hover .marginnote-mark span,
+.marginnote-container:hover .marginnote mark { background-color: #fefe98; color: #000; }
+.sidenote-container:hover .sidenote a, .marginnote-container:hover .marginnote a { background-color: #fefe98; color: #000; border-color: dodgerblue; }
 .sideimage > a, .sideimage a:focus { border-bottom: 1px solid transparent !important; background-color: transparent !important; }
 
 @media (max-width: 768px) {