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

@@ -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>
   <figcaption class="text-center">
     <small>{{ .Text | markdownify }}</small>
   </figcaption>

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 }}

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();
+});

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%;
+  }
+}