From 7fff13f0abb244592a64faf1774ef57c600b534f Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Fri, 2 Sep 2022 17:18:40 +0100
Subject: [PATCH] Add lightbox for content images

---
 package-lock.json                                     | 11 +++++++++++
 package.json                                          |  1 +
 scripts/copy-npm-contrib.sh                           |  1 +
 static/src/js/lightbox.js                             |  5 +++++
 static/src/scss/_content.scss                         |  8 ++++++++
 .../common/templates/common/blocks/image-caption.html |  4 +++-
 website/common/templates/common/content_page.html     |  2 ++
 .../templates/contrib/blocks/mermaid.html             |  4 +++-
 8 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 static/src/js/lightbox.js

diff --git a/package-lock.json b/package-lock.json
index 6651e64..5273f18 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "elevator.js": "^1.0.1",
         "esbuild": "^0.14.43",
         "firacode": "^6.2.0",
+        "glightbox": "^3.2.0",
         "htmx.org": "^1.8.0",
         "lite-youtube-embed": "^0.2.0",
         "lodash.debounce": "^4.0.8",
@@ -1588,6 +1589,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/glightbox": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/glightbox/-/glightbox-3.2.0.tgz",
+      "integrity": "sha512-iit1xYixqL4YVL+I2YJLfMeyJwvLi6FE6kY3qNKeZHEJgRIz80QU8Rm7YCyw1wOTgXvmNDnXGVhHOHRCwnDltQ=="
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -4911,6 +4917,11 @@
         "get-intrinsic": "^1.1.1"
       }
     },
+    "glightbox": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/glightbox/-/glightbox-3.2.0.tgz",
+      "integrity": "sha512-iit1xYixqL4YVL+I2YJLfMeyJwvLi6FE6kY3qNKeZHEJgRIz80QU8Rm7YCyw1wOTgXvmNDnXGVhHOHRCwnDltQ=="
+    },
     "glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
diff --git a/package.json b/package.json
index c85753f..2c35b64 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "elevator.js": "^1.0.1",
     "esbuild": "^0.14.43",
     "firacode": "^6.2.0",
+    "glightbox": "^3.2.0",
     "htmx.org": "^1.8.0",
     "lite-youtube-embed": "^0.2.0",
     "lodash.debounce": "^4.0.8",
diff --git a/scripts/copy-npm-contrib.sh b/scripts/copy-npm-contrib.sh
index 7394fdf..89dfd1e 100755
--- a/scripts/copy-npm-contrib.sh
+++ b/scripts/copy-npm-contrib.sh
@@ -20,3 +20,4 @@ mkcontrib elevator-js node_modules/elevator.js/demo/music/*
 mkcontrib shareon node_modules/shareon/dist/{shareon.iife.*,shareon.min.css*}
 mkcontrib fira-code node_modules/firacode/distr/{fira_code.css,woff2,woff}
 mkcontrib htmx node_modules/htmx.org/dist/{htmx.min.js,ext}
+mkcontrib glightbox node_modules/glightbox/dist/css/*.min.*
diff --git a/static/src/js/lightbox.js b/static/src/js/lightbox.js
new file mode 100644
index 0000000..9379522
--- /dev/null
+++ b/static/src/js/lightbox.js
@@ -0,0 +1,5 @@
+const GLightbox = require("glightbox");
+
+window.addEventListener("load", () => {
+  GLightbox({});
+});
diff --git a/static/src/scss/_content.scss b/static/src/scss/_content.scss
index 03053ef..b93086f 100644
--- a/static/src/scss/_content.scss
+++ b/static/src/scss/_content.scss
@@ -47,3 +47,11 @@ section.content {
     filter: invert(100%);
   }
 }
+
+.gslide-description {
+  background-color: transparent !important;
+
+  .gslide-title {
+    color: $dark-mode-text !important;
+  }
+}
diff --git a/website/common/templates/common/blocks/image-caption.html b/website/common/templates/common/blocks/image-caption.html
index 76414b5..e70d997 100644
--- a/website/common/templates/common/blocks/image-caption.html
+++ b/website/common/templates/common/blocks/image-caption.html
@@ -2,7 +2,9 @@
 
 <figure>
   <div class="image is-16by9">
-    <img src="{% image_url value.image 'width-1500' %}" alt="{{ value.caption|richtext|extract_text }}" loading="lazy" decoding="async" />
+    <a href="{% image_url value.image 'original' %}" class="glightbox" data-gallery="content" data-title="{{ value.caption|richtext|extract_text }}">
+      <img src="{% image_url value.image 'width-1500' %}" alt="{{ value.caption|richtext|extract_text }}" loading="lazy" decoding="async" />
+    </a>
   </div>
   <figcaption>
     {{ value.caption|richtext }}
diff --git a/website/common/templates/common/content_page.html b/website/common/templates/common/content_page.html
index bd1abaf..1e56f3b 100644
--- a/website/common/templates/common/content_page.html
+++ b/website/common/templates/common/content_page.html
@@ -13,6 +13,7 @@
 {% block extra_css %}
   {% sri_static "css/lite-youtube-embed.css" %}
   {% sri_static "contrib/shareon/shareon.min.css" %}
+  {% sri_static "contrib/glightbox/glightbox.min.css" %}
 
   <link rel="stylesheet" type="text/css" href="{% url 'code-block:styles' %}">
 {% endblock %}
@@ -20,4 +21,5 @@
 {% block extra_js %}
   <script async defer type="text/javascript" src="{% static 'js/lite-youtube-embed.js' %}" integrity="{% sri_integrity_static 'js/lite-youtube-embed.js' %}"></script>
   <script async defer type="text/javascript" src="{% static 'contrib/shareon/shareon.iife.js' %}" integrity="{% sri_integrity_static 'contrib/shareon/shareon.iife.js' %}" init></script>
+  <script async defer type="text/javascript" src="{% static 'js/lightbox.js' %}" integrity="{% sri_integrity_static 'js/lightbox.js' %}"></script>
 {% endblock %}
diff --git a/website/contrib/mermaid_block/templates/contrib/blocks/mermaid.html b/website/contrib/mermaid_block/templates/contrib/blocks/mermaid.html
index 4cb3bdf..dc35aff 100644
--- a/website/contrib/mermaid_block/templates/contrib/blocks/mermaid.html
+++ b/website/contrib/mermaid_block/templates/contrib/blocks/mermaid.html
@@ -2,7 +2,9 @@
 
 <figure>
   <div class="image">
-    <img src="https://mermaid.ink/svg/{{ value.pako }}" referrerpolicy="no-referrer" alt="{{ value.caption|richtext|extract_text }}" loading="lazy" decoding="async" />
+    <a href="https://mermaid.ink/img/{{ value.pako }}" data-gallery="content" class="glightbox" data-glightbox="type: image" data-width="50vw" data-title="{{ value.caption|richtext|extract_text }}">
+      <img src="https://mermaid.ink/svg/{{ value.pako }}" referrerpolicy="no-referrer" alt="{{ value.caption|richtext|extract_text }}" loading="lazy" decoding="async" />
+    </a>
   </div>
   <figcaption>
     {{ value.caption|richtext }}