From fd8f9788ac7c168b606149871547d439b4182b6b Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Sun, 12 Dec 2021 18:58:05 +0000
Subject: [PATCH] Add a very basic lightbox to all content images

It's a bit nicer than just opening the image in a new tab
---
 layouts/_default/_markup/render-image.html |  4 +---
 layouts/partials/content.html              |  8 ++++++++
 static/src/js/app.js                       | 10 ++++++++++
 static/src/scss/style.scss                 | 11 +++++++++++
 4 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index fdbb9b5..531aacc 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -7,9 +7,7 @@
 {{ end }}
 
 <figure class="text-center">
-  <a href="{{ $destination | safeURL }}" target="_blank">
-    <img src="{{ $destination | safeURL }}" alt="{{ .Text | plainify }}" style='max-width: {{ default "90" .Title }}%;' referrerpolicy="no-referrer" loading="lazy" decoding="async" />
-  </a>
+  <img src="{{ $destination | safeURL }}" alt="{{ .Text | plainify }}" style='max-width: {{ default "90" .Title }}%;' referrerpolicy="no-referrer" loading="lazy" decoding="async" />
   <figcaption class="text-center">
     <small>{{ .Text | markdownify }}</small>
   </figcaption>
diff --git a/layouts/partials/content.html b/layouts/partials/content.html
index f89e9b7..a67e88a 100644
--- a/layouts/partials/content.html
+++ b/layouts/partials/content.html
@@ -32,4 +32,12 @@
     {{ end }}
     {{ .Content }}
   </div>
+
+  <div class="modal fade" tabindex="-1" id="lightbox-modal" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-xl">
+      <div class="modal-content">
+        <!-- Image tag will be added here -->
+      </div>
+    </div>
+  </div>
 {{ end }}
diff --git a/static/src/js/app.js b/static/src/js/app.js
index 6e22a9d..7018c28 100644
--- a/static/src/js/app.js
+++ b/static/src/js/app.js
@@ -67,3 +67,13 @@ $('a[href^="#"] ').on('click', function(event) {
     scrollTo(target.offset().top);
   }
 });
+
+$('.content img').on('click', function(event) {
+  event.preventDefault();
+  const lightbox = $('#lightbox-modal');
+  lightbox.find('img').remove();
+  $(this)
+    .clone()
+    .appendTo(lightbox.find('.modal-content'));
+  lightbox.modal();
+});
diff --git a/static/src/scss/style.scss b/static/src/scss/style.scss
index 93de117..a774c1b 100644
--- a/static/src/scss/style.scss
+++ b/static/src/scss/style.scss
@@ -194,6 +194,7 @@ pre.chroma {
   }
 
   img {
+    cursor: zoom-in;
     width: 100%;
   }
 
@@ -360,3 +361,13 @@ a.no-color-change {
     color: $body-color;
   }
 }
+
+#lightbox-modal {
+  img {
+    max-width: initial !important;
+  }
+
+  .modal-dialog {
+    max-width: 75%;
+  }
+}