Add masonry

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

assets/js/main.js

@@ -0,0 +1,20 @@
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import Masonry from "masonry-layout";
+
+new PhotoSwipeLightbox({
+  gallery: ".lightbox",
+  children: "a",
+  showAnimationDuration: 300,
+  hideAnimationDuration: 300,
+  initialZoomLevel: "fit",
+  pswpModule: () => import("photoswipe"),
+}).init();
+
+const masonryContainers = document.querySelectorAll(".masonry");
+masonryContainers.forEach((container) => {
+  new Masonry(container, {
+    itemSelector: ".grid-item",
+    columnWidth: ".grid-sizer",
+    percentPosition: true,
+  });
+});

assets/js/photoswipe.js

@@ -1,10 +0,0 @@
-import PhotoSwipeLightbox from "js/photoswipe/photoswipe-lightbox.esm.js";
-
-new PhotoSwipeLightbox({
-  gallery: ".gallery",
-  children: "a",
-  showAnimationDuration: 300,
-  hideAnimationDuration: 300,
-  initialZoomLevel: "fit",
-  pswpModule: () => import("js/photoswipe/photoswipe.esm.js"),
-}).init();