Add photoswipe captions

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/js/main.js

@@ -1,14 +1,41 @@
 import PhotoSwipeLightbox from "photoswipe/lightbox";
 import Masonry from "masonry-layout";
 
-new PhotoSwipeLightbox({
+const lightboxCaptionHeight = 5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+const lightbox = new PhotoSwipeLightbox({
   gallery: ".lightbox",
-  children: "a",
+  children: ".pswp-image",
   showAnimationDuration: 300,
   hideAnimationDuration: 300,
   initialZoomLevel: "fit",
   pswpModule: () => import("photoswipe"),
-}).init();
+  padding: {
+    top: lightboxCaptionHeight,
+    bottom: lightboxCaptionHeight,
+    left: 0,
+    right: 0,
+  }
+});
+
+lightbox.on("uiRegister", function () {
+  lightbox.pswp.ui.registerElement({
+    name: "caption",
+    order: 9,
+    isButton: false,
+    appendTo: "root",
+    onInit: (el, _) => {
+      lightbox.pswp.on("change", () => {
+        const element = lightbox.pswp.currSlide.data.element;
+        el.innerHTML =
+          element?.parentElement.querySelector(".pswp-caption-content")
+            ?.innerHTML || "";
+      });
+    },
+  });
+});
+
+lightbox.init();
 
 const masonryContainers = document.querySelectorAll(".masonry");
 masonryContainers.forEach((container) => {