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) => {

assets/sass/common.scss

@@ -12,6 +12,10 @@ a {
   color: var(--text-600);
 }
 
+a:hover {
+  color: var(--text-700);
+}
+
 h1,
 h2,
 h3,

assets/sass/footer.scss

@@ -16,12 +16,11 @@
     color: color-mix(in srgb, var(--text) 30%, var(--background));
 
     a {
-      text-decoration: none;
       color: inherit;
     }
 
     a:hover {
-      color: var(--text-900);
+      color: var(--text-800);
     }
 
     .footer-nav {

assets/sass/header.scss

@@ -12,12 +12,11 @@
     align-items: center;
 
     a {
-      text-decoration: none;
       color: inherit;
     }
 
     a:hover {
-      color: var(--text-900);
+      color: var(--text-800);
     }
 
     .site-title {
@@ -83,7 +82,7 @@
           gap: 2rem;
 
           li a {
-            font-size: 1.25rem;
+            font-size: 1.5rem;
           }
         }
       }

assets/sass/list.scss

@@ -56,7 +56,6 @@ main.with-meta {
   .post {
     display: block;
     color: inherit;
-    text-decoration: none;
 
     &:not(:first-child) {
       margin-top: 4rem;
@@ -81,7 +80,7 @@ main.with-meta {
 
   .post:hover .title,
   .post:hover .summary {
-    color: var(--text-900);
+    color: var(--text-800);
   }
 }
 

assets/sass/photoswipe.scss

@@ -9,3 +9,29 @@
     var(--background)
   );
 }
+
+.pswp-caption-content {
+  display: none;
+}
+
+.pswp__caption {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 5rem;
+  padding: 1rem 2rem;
+  text-align: center;
+  line-height: 1.5rem;
+
+  .meta {
+    font-size: 0.7rem;
+  }
+
+  a {
+    color: inherit;
+  }
+
+  a:hover {
+    color: var(--text-800);
+  }
+}

layouts/partials/components/image/index.html

@@ -3,8 +3,10 @@
   <figure class="captioned-image lightbox">
     <a
       href="{{- .RelPermalink -}}"
+      data-pswp-src="{{- .RelPermalink -}}"
       data-pswp-width="{{- .Width -}}"
       data-pswp-height="{{- .Height -}}"
+      class="pswp-image"
     >
       <img
         src="{{- .RelPermalink -}}"

layouts/partials/gallery/list.html

@@ -2,13 +2,16 @@
   <div class="grid-sizer"></div>
   {{ range sort .Pages "Date" "desc" }}
     {{ if not .Params.private }}
+      {{ $page := . }}
       {{ $imageData := partial "components/image/reflect.html" .Params.hero }}
       {{ with $imageData.image }}
         <div class="image grid-item">
           <a
-            href="{{- .RelPermalink -}}"
+            href="{{- $page.RelPermalink -}}"
+            data-pswp-src="{{- .RelPermalink -}}"
             data-pswp-width="{{- .Width -}}"
             data-pswp-height="{{- .Height -}}"
+            class="pswp-image"
           >
             <img
               src="{{- .RelPermalink -}}"
@@ -19,6 +22,16 @@
               {{ with $imageData.alt }}alt="{{- . -}}"{{ end }}
             />
           </a>
+          <div class="pswp-caption-content">
+            <div>
+              {{ upper $page.Title }}
+              <div class="meta">
+                {{ $page.Date | time.Format ":date_medium" }}
+                &middot;
+                <a href="{{- $page.RelPermalink -}}">View Post</a>
+              </div>
+            </div>
+          </div>
         </div>
       {{ end }}
     {{ end }}