From 24d40c1573ffefc83f82658c9523c66d7940e2a6 Mon Sep 17 00:00:00 2001
From: tdro <tdro@noreply.example.com>
Date: Sun, 4 Sep 2022 11:13:55 -0400
Subject: themes/default/layouts/shortcodes: Add reaction short-code

---
 assets/css/default.css                          | 31 +++++++++++++++++++++++++
 themes/default/layouts/shortcodes/react.html    | 29 +++++++++++++++++++++++
 themes/default/layouts/shortcodes/react.rss.xml | 18 ++++++++++++++
 3 files changed, 78 insertions(+)
 create mode 100644 themes/default/layouts/shortcodes/react.html
 create mode 100644 themes/default/layouts/shortcodes/react.rss.xml

diff --git a/assets/css/default.css b/assets/css/default.css
index 9c19d03..958aa7c 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -1743,6 +1743,37 @@ twitter-tweet iframe {
   border: none;
 }
 
+reaction-hover {
+  text-decoration: underline;
+  text-decoration-style: wavy;
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+}
+
+reaction-hover:hover {
+  text-decoration-thickness: 0.15rem;
+}
+
+reaction-hover:hover img {
+  visibility: visible;
+  opacity: 1;
+}
+
+reaction-hover img {
+  position: absolute;
+  z-index: 99;
+  visibility: hidden;
+  opacity: 0;
+  height: 80px;
+  width: 80px;
+  object-fit: cover;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: fit-content;
+}
+
 /* ----- Attributes ----- */
 
 [tabindex="-1"]:focus {
diff --git a/themes/default/layouts/shortcodes/react.html b/themes/default/layouts/shortcodes/react.html
new file mode 100644
index 0000000..7eb7920
--- /dev/null
+++ b/themes/default/layouts/shortcodes/react.html
@@ -0,0 +1,29 @@
+{{- $text      := default "react" (.Get "text"      | default (.Get 0)) -}}
+{{- $source    := default ""      (.Get "source"    | default (.Get 1)) -}}
+{{- $title     := default $text   (.Get "title"     | default (.Get 2)) -}}
+{{- $alternate := default $title  (.Get "alternate" | default (.Get 3)) -}}
+
+{{- $author := .Page.Section -}}
+
+{{- $image := partial "function-caches-images.html"
+  (dict
+    "Source"        $source
+    "Fit"           "100x100"
+    "Target"        (print (partial "function-paths.html" "media") "/" $author "/")
+    "Copy"          (print (partial "function-paths.html" "media") "/" $author "/react-" (path.Base $source))
+    "AlternateCopy" (print (partial "function-paths.html" "media") "/" $author "/react-" (path.BaseName $source) ".webp")
+  )
+-}}
+
+<reaction-hover title="{{ $title }}">
+  {{ $text | markdownify }}
+  <a href="{{ $image.Permalink }}">
+    <img
+      width="{{ $image.Width }}"
+      height="{{ $image.Height }}"
+      title="{{ $title }}"
+      alt="{{ $alternate }}"
+      src="{{ $image.Permalink }}"
+    />
+  </a>
+</reaction-hover>
diff --git a/themes/default/layouts/shortcodes/react.rss.xml b/themes/default/layouts/shortcodes/react.rss.xml
new file mode 100644
index 0000000..5ed5f80
--- /dev/null
+++ b/themes/default/layouts/shortcodes/react.rss.xml
@@ -0,0 +1,18 @@
+{{- $text      := default "react" (.Get "text"      | default (.Get 0)) -}}
+{{- $source    := default ""      (.Get "source"    | default (.Get 1)) -}}
+{{- $title     := default $text   (.Get "title"     | default (.Get 2)) -}}
+{{- $alternate := default $title  (.Get "alternate" | default (.Get 3)) -}}
+
+{{- $author := .Page.Section -}}
+
+{{- $image := partial "function-caches-images.html"
+  (dict
+    "Source"        $source
+    "Fit"           "100x100"
+    "Target"        (print (partial "function-paths.html" "media") "/" $author "/")
+    "Copy"          (print (partial "function-paths.html" "media") "/" $author "/react-" (path.Base $source))
+    "AlternateCopy" (print (partial "function-paths.html" "media") "/" $author "/react-" (path.BaseName $source) ".webp")
+  )
+-}}
+
+{{ $text | markdownify }} (<a title="{{ $title }}" href="{{ $image.Permalink }}">reaction</a>)
-- 
cgit v1.2.3