Add masonry

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

.gitignore

@@ -12,3 +12,6 @@ hugo.linux
 
 # Temporary lock file while building
 /.hugo_build.lock
+
+# JavaScript
+node_modules/

Makefile

@@ -1,8 +1,8 @@
-.PHONY: default update update-inter update-photoswipe format
+.PHONY: default update update-inter node-modules format
 
-default:
+default: node-modules
 
-update: update-inter update-photoswipe format
+update: update-inter format
 
 update-inter:
 	@tmp_zip=$$(mktemp) && \
@@ -16,19 +16,10 @@ update-inter:
 	cp -r $$tmp_dir/web/{InterVariable*.woff2,Inter-*.woff2} static/font/inter && \
 	rm -rf $$tmp_zip $$tmp_dir
 
-update-photoswipe:
+node-modules:
-	@tmp_zip=$$(mktemp) && \
+	npm install && \
-	tmp_dir=$$(mktemp -d) && \
+	cd ../.. && \
-	curl -s https://api.github.com/repos/dimsemenov/photoswipe/releases/latest \
+	ln -s ./themes/caldwell/node_modules node_modules
-	| jq -r '.zipball_url' \
-	| xargs curl -Ls -o $$tmp_zip && \
-	unzip -q -o $$tmp_zip -d $$tmp_dir && \
-	rm -rf assets/js/photoswipe assets/css/photoswipe && \
-	mkdir -p assets/js/photoswipe assets/css/photoswipe && \
-	cp $$tmp_dir/*PhotoSwipe*/dist/photoswipe-lightbox.esm.js assets/js/photoswipe && \
-	cp $$tmp_dir/*PhotoSwipe*/dist/photoswipe.esm.js assets/js/photoswipe && \
-	cp $$tmp_dir/*PhotoSwipe*/dist/photoswipe.css assets/css/photoswipe && \
-	rm -rf $$tmp_zip $$tmp_dir
 
 format:
 	nix fmt

assets/css/photoswipe/photoswipe.css

@@ -1,417 +0,0 @@
-/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
-
-.pswp {
-  --pswp-bg: #000;
-  --pswp-placeholder-bg: #222;
-
-  --pswp-root-z-index: 100000;
-
-  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
-  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
-
-  /* defined via js:
-  --pswp-transition-duration: 333ms; */
-
-  --pswp-icon-color: #fff;
-  --pswp-icon-color-secondary: #4f4f4f;
-  --pswp-icon-stroke-color: #4f4f4f;
-  --pswp-icon-stroke-width: 2px;
-
-  --pswp-error-text-color: var(--pswp-icon-color);
-}
-
-/*
-	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
-*/
-
-.pswp {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: var(--pswp-root-z-index);
-  display: none;
-  touch-action: none;
-  outline: 0;
-  opacity: 0.003;
-  contain: layout style size;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-/* Prevents focus outline on the root element,
-  (it may be focused initially) */
-.pswp:focus {
-  outline: 0;
-}
-
-.pswp * {
-  box-sizing: border-box;
-}
-
-.pswp img {
-  max-width: none;
-}
-
-.pswp--open {
-  display: block;
-}
-
-.pswp,
-.pswp__bg {
-  transform: translateZ(0);
-  will-change: opacity;
-}
-
-.pswp__bg {
-  opacity: 0.005;
-  background: var(--pswp-bg);
-}
-
-.pswp,
-.pswp__scroll-wrap {
-  overflow: hidden;
-}
-
-.pswp__scroll-wrap,
-.pswp__bg,
-.pswp__container,
-.pswp__item,
-.pswp__content,
-.pswp__img,
-.pswp__zoom-wrap {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.pswp__img,
-.pswp__zoom-wrap {
-  width: auto;
-  height: auto;
-}
-
-.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
-  cursor: -webkit-zoom-in;
-  cursor: -moz-zoom-in;
-  cursor: zoom-in;
-}
-
-.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
-  cursor: move;
-  cursor: -webkit-grab;
-  cursor: -moz-grab;
-  cursor: grab;
-}
-
-.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
-  cursor: -webkit-grabbing;
-  cursor: -moz-grabbing;
-  cursor: grabbing;
-}
-
-/* :active to override grabbing cursor */
-.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
-.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
-.pswp__img {
-  cursor: -webkit-zoom-out;
-  cursor: -moz-zoom-out;
-  cursor: zoom-out;
-}
-
-/* Prevent selection and tap highlights */
-.pswp__container,
-.pswp__img,
-.pswp__button,
-.pswp__counter {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.pswp__item {
-  /* z-index for fade transition */
-  z-index: 1;
-  overflow: hidden;
-}
-
-.pswp__hidden {
-  display: none !important;
-}
-
-/* Allow to click through pswp__content element, but not its children */
-.pswp__content {
-  pointer-events: none;
-}
-.pswp__content > * {
-  pointer-events: auto;
-}
-
-/*
-
-  PhotoSwipe UI
-
-*/
-
-/*
-	Error message appears when image is not loaded
-	(JS option errorMsg controls markup)
-*/
-.pswp__error-msg-container {
-  display: grid;
-}
-.pswp__error-msg {
-  margin: auto;
-  font-size: 1em;
-  line-height: 1;
-  color: var(--pswp-error-text-color);
-}
-
-/*
-class pswp__hide-on-close is applied to elements that
-should hide (for example fade out) when PhotoSwipe is closed
-and show (for example fade in) when PhotoSwipe is opened
- */
-.pswp .pswp__hide-on-close {
-  opacity: 0.005;
-  will-change: opacity;
-  transition: opacity var(--pswp-transition-duration)
-    cubic-bezier(0.4, 0, 0.22, 1);
-  z-index: 10; /* always overlap slide content */
-  pointer-events: none; /* hidden elements should not be clickable */
-}
-
-/* class pswp--ui-visible is added when opening or closing transition starts */
-.pswp--ui-visible .pswp__hide-on-close {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-/* <button> styles, including css reset */
-.pswp__button {
-  position: relative;
-  display: block;
-  width: 50px;
-  height: 60px;
-  padding: 0;
-  margin: 0;
-  overflow: hidden;
-  cursor: pointer;
-  background: none;
-  border: 0;
-  box-shadow: none;
-  opacity: 0.85;
-  -webkit-appearance: none;
-  -webkit-touch-callout: none;
-}
-
-.pswp__button:hover,
-.pswp__button:active,
-.pswp__button:focus {
-  transition: none;
-  padding: 0;
-  background: none;
-  border: 0;
-  box-shadow: none;
-  opacity: 1;
-}
-
-.pswp__button:disabled {
-  opacity: 0.3;
-  cursor: auto;
-}
-
-.pswp__icn {
-  fill: var(--pswp-icon-color);
-  color: var(--pswp-icon-color-secondary);
-}
-
-.pswp__icn {
-  position: absolute;
-  top: 14px;
-  left: 9px;
-  width: 32px;
-  height: 32px;
-  overflow: hidden;
-  pointer-events: none;
-}
-
-.pswp__icn-shadow {
-  stroke: var(--pswp-icon-stroke-color);
-  stroke-width: var(--pswp-icon-stroke-width);
-  fill: none;
-}
-
-.pswp__icn:focus {
-  outline: 0;
-}
-
-/*
-	div element that matches size of large image,
-	large image loads on top of it,
-	used when msrc is not provided
-*/
-div.pswp__img--placeholder,
-.pswp__img--with-bg {
-  background: var(--pswp-placeholder-bg);
-}
-
-.pswp__top-bar {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 60px;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  z-index: 10;
-
-  /* allow events to pass through top bar itself */
-  pointer-events: none !important;
-}
-.pswp__top-bar > * {
-  pointer-events: auto;
-  /* this makes transition significantly more smooth,
-     even though inner elements are not animated */
-  will-change: opacity;
-}
-
-/*
-
-  Close button
-
-*/
-.pswp__button--close {
-  margin-right: 6px;
-}
-
-/*
-
-  Arrow buttons
-
-*/
-.pswp__button--arrow {
-  position: absolute;
-  top: 0;
-  width: 75px;
-  height: 100px;
-  top: 50%;
-  margin-top: -50px;
-}
-
-.pswp__button--arrow:disabled {
-  display: none;
-  cursor: default;
-}
-
-.pswp__button--arrow .pswp__icn {
-  top: 50%;
-  margin-top: -30px;
-  width: 60px;
-  height: 60px;
-  background: none;
-  border-radius: 0;
-}
-
-.pswp--one-slide .pswp__button--arrow {
-  display: none;
-}
-
-/* hide arrows on touch screens */
-.pswp--touch .pswp__button--arrow {
-  visibility: hidden;
-}
-
-/* show arrows only after mouse was used */
-.pswp--has_mouse .pswp__button--arrow {
-  visibility: visible;
-}
-
-.pswp__button--arrow--prev {
-  right: auto;
-  left: 0px;
-}
-
-.pswp__button--arrow--next {
-  right: 0px;
-}
-.pswp__button--arrow--next .pswp__icn {
-  left: auto;
-  right: 14px;
-  /* flip horizontally */
-  transform: scale(-1, 1);
-}
-
-/*
-
-  Zoom button
-
-*/
-.pswp__button--zoom {
-  display: none;
-}
-
-.pswp--zoom-allowed .pswp__button--zoom {
-  display: block;
-}
-
-/* "+" => "-" */
-.pswp--zoomed-in .pswp__zoom-icn-bar-v {
-  display: none;
-}
-
-/*
-
-  Loading indicator
-
-*/
-.pswp__preloader {
-  position: relative;
-  overflow: hidden;
-  width: 50px;
-  height: 60px;
-  margin-right: auto;
-}
-
-.pswp__preloader .pswp__icn {
-  opacity: 0;
-  transition: opacity 0.2s linear;
-  animation: pswp-clockwise 600ms linear infinite;
-}
-
-.pswp__preloader--active .pswp__icn {
-  opacity: 0.85;
-}
-
-@keyframes pswp-clockwise {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/*
-
-  "1 of 10" counter
-
-*/
-.pswp__counter {
-  height: 30px;
-  margin-top: 15px;
-  margin-inline-start: 20px;
-  font-size: 14px;
-  line-height: 30px;
-  color: var(--pswp-icon-color);
-  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
-  opacity: 0.85;
-}
-
-.pswp--one-slide .pswp__counter {
-  display: none;
-}

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

assets/sass/content.scss

@@ -4,6 +4,10 @@
   padding: 2rem;
 }
 
+.content.wide {
+  max-width: $width-wide;
+}
+
 @media (max-width: $width-mobile) {
   .content {
     padding: 1rem;

assets/sass/gallery.scss

@@ -0,0 +1,45 @@
+.gallery {
+  margin: -0.75rem;
+
+  .grid-sizer {
+    width: calc(25% - 1.5rem);
+    margin: 0 0.75rem;
+  }
+
+  .grid-item {
+    width: calc(25% - 1.5rem);
+    margin: 0.75rem;
+  }
+}
+
+@media (max-width: $width-content) {
+  .gallery {
+    margin: -0.5rem;
+
+    .grid-sizer {
+      width: calc(33% - 1rem);
+      margin: 0 0.5rem;
+    }
+
+    .grid-item {
+      width: calc(33% - 1rem);
+      margin: 0.5rem;
+    }
+  }
+}
+
+@media (max-width: $width-mobile) {
+  .gallery {
+    margin: -0.375rem;
+
+    .grid-sizer {
+      width: calc(50% - 0.75rem);
+      margin: 0 0.375rem;
+    }
+
+    .grid-item {
+      width: calc(50% - 0.75rem);
+      margin: 0.375rem;
+    }
+  }
+}

assets/sass/header.scss

@@ -59,10 +59,11 @@
 
     .header-container {
       .site-title {
-        z-index: 1;
+        z-index: 2;
       }
 
       .nav {
+        z-index: 1;
         position: fixed;
         inset: 0;
 
@@ -88,7 +89,7 @@
       }
 
       .nav-toggle-label {
-        z-index: 1;
+        z-index: 2;
 
         display: flex;
         flex-direction: column;

assets/sass/hero.scss

@@ -19,7 +19,7 @@
     }
   }
 
-  .image {
+  .captioned-image {
     padding-top: 1.5rem;
   }
 }

assets/sass/image.scss

@@ -1,12 +1,12 @@
-.image {
+img {
-  width: 100%;
-  padding: 1rem 0;
-
-  img {
   width: 100%;
   height: auto;
   display: block;
-  }
+}
+
+.captioned-image {
+  width: 100%;
+  padding: 1rem 0;
 
   figcaption {
     text-align: center;

assets/sass/list.scss

@@ -52,7 +52,7 @@ main.with-meta {
   }
 }
 
-.posts-list {
+.list {
   .post {
     display: block;
     color: inherit;
@@ -86,7 +86,7 @@ main.with-meta {
 }
 
 @media (max-width: $width-mobile) {
-  .posts-list {
+  .list {
     .post {
       &:not(:first-child) {
         margin-top: 2rem;

assets/sass/main.scss

@@ -10,6 +10,7 @@ $width-wide: 75rem;
 @import "image";
 
 @import "list";
+@import "gallery";
 
 @import "header";
 @import "content";

assets/sass/photoswipe.scss

@@ -1,3 +1,5 @@
+@import "photoswipe/dist/photoswipe";
+
 .pswp {
   --pswp-bg: var(--background);
   --pswp-icon-color: var(--text);

flake.nix

@@ -27,6 +27,7 @@
         devShells.${system}.default = pkgs.mkShell {
           packages = with pkgs; [
             hugo
+            nodejs
             jq
             unzip
           ];

layouts/_default/_markup/render-image.html

@@ -1,4 +1,4 @@
-{{ partial "image.html" (dict
+{{ partial "image/index.html" (dict
   "path" .Destination
   "caption" .Text
   "alt" .Title

layouts/_default/baseof.html

@@ -20,12 +20,14 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    {{ partial "head/bots.html" }}
+    {{ partial "head/bots.html" . }}
-    {{ partial "head/rss.html" }}
+    {{ partial "head/rss.html" . }}
+
     {{ partial "head/opengraph.html" . }}
     {{ partial "head/twitter.html" . }}
-    {{ partial "head/photoswipe.html" }}
+
-    {{ partial "head/styles.html" }}
+    {{ partial "head/js.html" . }}
+    {{ partial "head/css.html" . }}
   </head>
 
   <body>

layouts/_default/list.html

@@ -1,10 +1,9 @@
 {{ define "main" }}
-  <main class="with-meta">
+  {{ $withMeta := default true .Params.withMeta }}
-    <section class="meta">
+  <main class="{{- if $withMeta -}}with-meta{{- end -}}">
-      <h1>{{ .Page.Title }}</h1>
+    {{ if $withMeta }}
-      <p class="length">A {{ .Kind }} with {{ len .Pages }} items</p>
+      {{ partial "list/meta.html" . }}
-      {{ .Content }}
+    {{ end }}
-    </section>
     <div class="content">
       {{ partial "posts/list.html" . }}
     </div>

layouts/_default/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
   <main>
-    {{ partial (printf "posts/%s.html" (.Params.heroType | default "hero")) . }}
+    {{ partial "posts/hero.html" . }}
     <div class="content">
       {{ .Content }}
     </div>

layouts/gallery/list.html

@@ -0,0 +1,11 @@
+{{ define "main" }}
+  {{ $withMeta := default true .Params.withMeta }}
+  <main class="{{- if $withMeta -}}with-meta{{- end -}}">
+    {{ if $withMeta }}
+      {{ partial "list/meta.html" . }}
+    {{ end }}
+    <div class="{{- if $withMeta -}}content{{- else -}}content wide{{- end -}}">
+      {{ partial "gallery/list.html" . }}
+    </div>
+  </main>
+{{ end }}

layouts/partials/gallery/list.html

@@ -0,0 +1,25 @@
+<div class="gallery masonry lightbox">
+  <div class="grid-sizer"></div>
+  {{ range sort .Pages "Date" "desc" }}
+    {{ if not .Params.private }}
+      {{ $imageData := partial "image/reflect.html" .Params.hero }}
+      {{ with $imageData.image }}
+        <div class="image grid-item">
+          <a
+            href="{{- .RelPermalink -}}"
+            data-pswp-width="{{- .Width -}}"
+            data-pswp-height="{{- .Height -}}"
+          >
+            <img
+              src="{{- .RelPermalink -}}"
+              width="{{- .Width -}}"
+              height="{{- .Height -}}"
+              {{ with $imageData.title }}title="{{- . -}}"{{ end }}
+              {{ with $imageData.alt }}alt="{{- . -}}"{{ end }}
+            />
+          </a>
+        </div>
+      {{ end }}
+    {{ end }}
+  {{ end }}
+</div>

layouts/partials/head/css.html

@@ -1,4 +1,4 @@
-{{ $opts := dict "targetPath" "css/main.css" }}
+{{ $opts := dict "targetPath" "css/main.css" "includePaths" (slice "node_modules") }}
 {{ with resources.Get "sass/main.scss" | css.Sass $opts | minify | fingerprint }}
   <link
     rel="stylesheet"

layouts/partials/head/js.html

@@ -0,0 +1,9 @@
+{{ $opts := dict "minify" true }}
+{{ with resources.Get "js/main.js" | js.Build $opts | minify | fingerprint }}
+  <script
+    src="{{ .RelPermalink }}"
+    integrity="{{ .Data.Integrity }}"
+    crossorigin="anonymous"
+    defer
+  ></script>
+{{ end }}

layouts/partials/head/photoswipe.html

@@ -1,17 +0,0 @@
-{{ with resources.Get "css/photoswipe/photoswipe.css" | minify | fingerprint }}
-  <link
-    rel="stylesheet"
-    href="{{- .RelPermalink -}}"
-    integrity="{{- .Data.Integrity -}}"
-  />
-{{ end }}
-
-{{ $opts := dict "minify" true }}
-{{ with resources.Get "js/photoswipe.js" | js.Build $opts | minify | fingerprint }}
-  <script
-    src="{{ .RelPermalink }}"
-    integrity="{{ .Data.Integrity }}"
-    crossorigin="anonymous"
-    async
-  ></script>
-{{ end }}

layouts/partials/image.html

@@ -1,29 +0,0 @@
-{{- $path := .path -}}
-{{- $caption := .caption -}}
-{{- $alt := default .caption .alt -}}
-
-{{- if $path -}}
-  {{- $isRemote := strings.HasPrefix $path "http" -}}
-  {{- $image := cond $isRemote (resources.GetRemote $path) (resources.Get $path) -}}
-
-  {{- if $image -}}
-    <figure class="image gallery">
-      <a
-        href="{{- $image.RelPermalink -}}"
-        data-pswp-width="{{- $image.Width -}}"
-        data-pswp-height="{{- $image.Height -}}"
-      >
-        <img
-          src="{{- $image.RelPermalink -}}"
-          width="{{- $image.Width -}}"
-          height="{{- $image.Height -}}"
-          {{ with $caption }}title="{{- . -}}"{{ end }}
-          {{ with $alt }}alt="{{- . -}}"{{ end }}
-        />
-      </a>
-      {{ with $caption }}
-        <figcaption>{{ . }}</figcaption>
-      {{ end }}
-    </figure>
-  {{- end -}}
-{{- end -}}

layouts/partials/image/index.html

@@ -0,0 +1,21 @@
+{{ $imageData := partial "image/reflect.html" . }}
+{{- with $imageData.image -}}
+  <figure class="captioned-image lightbox">
+    <a
+      href="{{- .RelPermalink -}}"
+      data-pswp-width="{{- .Width -}}"
+      data-pswp-height="{{- .Height -}}"
+    >
+      <img
+        src="{{- .RelPermalink -}}"
+        width="{{- .Width -}}"
+        height="{{- .Height -}}"
+        {{ with $imageData.title }}title="{{- . -}}"{{ end }}
+        {{ with $imageData.alt }}alt="{{- . -}}"{{ end }}
+      />
+    </a>
+    {{ with $imageData.title }}
+      <figcaption>{{ . }}</figcaption>
+    {{ end }}
+  </figure>
+{{- end -}}

layouts/partials/image/reflect.html

@@ -0,0 +1,22 @@
+{{- $input := . -}}
+
+{{- $src := $input -}}
+{{- $title := "" -}}
+{{- $alt := "" -}}
+
+{{- if reflect.IsMap $input -}}
+  {{- $src = $input.src | default $input.path | default "" -}}
+  {{- $title = $input.title | default $input.caption | default "" -}}
+  {{- $alt = $input.alt | default $title -}}
+{{- end -}}
+
+{{ $result := dict "image" nil "title" $title "alt" $alt }}
+
+{{- if $src -}}
+  {{- $isRemote := strings.HasPrefix $src "http" -}}
+  {{- $image := cond $isRemote (resources.GetRemote $src) (resources.Get $src) -}}
+
+  {{- $result = (dict "image" $image "title" $title "alt" $alt) -}}
+{{- end -}}
+
+{{- return $result -}}

layouts/partials/list/meta.html

@@ -0,0 +1,5 @@
+<section class="meta">
+  <h1>{{ .Page.Title }}</h1>
+  <p class="length">A {{ .Kind }} with {{ len .Pages }} items</p>
+  {{ .Content }}
+</section>

layouts/partials/posts/hero.html

@@ -5,12 +5,5 @@
     ·
     <span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
   </div>
-  {{ with .Params.heroImage }}
+  {{ partial "image/index.html" .Params.hero }}
-    {{ partial "image.html" (dict
-      "path" .path
-      "alt" .alt
-      "caption" .caption
-      )
-    }}
-  {{ end }}
 </section>

layouts/partials/posts/list.html

@@ -1,4 +1,4 @@
-<div class="posts-list">
+<div class="list">
   {{ range sort .Pages "Date" "desc" }}
     {{ if not .Params.private }}
       <a href="{{- .RelPermalink -}}" class="post">

package-lock.json

@@ -0,0 +1,104 @@
+{
+  "name": "caldwell",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "caldwell",
+      "version": "1.0.0",
+      "license": "GPL-3.0-or-later",
+      "dependencies": {
+        "masonry-layout": "^4.2.2",
+        "photoswipe": "^5.4.4"
+      },
+      "devDependencies": {
+        "@types/masonry-layout": "^4.2.8"
+      }
+    },
+    "node_modules/@types/jquery": {
+      "version": "3.5.32",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.32.tgz",
+      "integrity": "sha512-b9Xbf4CkMqS02YH8zACqN1xzdxc3cO735Qe5AbSUFmyOiaWAbcpqh9Wna+Uk0vgACvoQHpWDg2rGdHkYPLmCiQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/sizzle": "*"
+      }
+    },
+    "node_modules/@types/masonry-layout": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/@types/masonry-layout/-/masonry-layout-4.2.8.tgz",
+      "integrity": "sha512-Et2to22C31FG1UFaHRBL6BznMOhrur3Ckr9gvR7fRVmPgxqiwCEKZtV8GpFscHyNAKhZ0QlkwXJRPnJvxZUKQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/jquery": "*"
+      }
+    },
+    "node_modules/@types/sizzle": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.9.tgz",
+      "integrity": "sha512-xzLEyKB50yqCUPUJkIsrVvoWNfFUbIZI+RspLWt8u+tIW/BetMBZtgV2LY/2o+tYH8dRvQ+eoPf3NdhQCcLE2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/desandro-matches-selector": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz",
+      "integrity": "sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg==",
+      "license": "MIT"
+    },
+    "node_modules/ev-emitter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
+      "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==",
+      "license": "MIT"
+    },
+    "node_modules/fizzy-ui-utils": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz",
+      "integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==",
+      "license": "MIT",
+      "dependencies": {
+        "desandro-matches-selector": "^2.0.0"
+      }
+    },
+    "node_modules/get-size": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/get-size/-/get-size-2.0.3.tgz",
+      "integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==",
+      "license": "MIT"
+    },
+    "node_modules/masonry-layout": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/masonry-layout/-/masonry-layout-4.2.2.tgz",
+      "integrity": "sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==",
+      "license": "MIT",
+      "dependencies": {
+        "get-size": "^2.0.2",
+        "outlayer": "^2.1.0"
+      }
+    },
+    "node_modules/outlayer": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz",
+      "integrity": "sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==",
+      "license": "MIT",
+      "dependencies": {
+        "ev-emitter": "^1.0.0",
+        "fizzy-ui-utils": "^2.0.0",
+        "get-size": "^2.0.2"
+      }
+    },
+    "node_modules/photoswipe": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.4.tgz",
+      "integrity": "sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.12.0"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "caldwell",
+  "main": "main.js",
+  "dependencies": {
+    "masonry-layout": "^4.2.2",
+    "photoswipe": "^5.4.4"
+  },
+  "version": "1.0.0",
+  "description": "A minimal Hugo theme",
+  "repository": {
+    "type": "git",
+    "url": "https://git.karaolidis.com/karaolidis/caldwell.git"
+  },
+  "author": "Nikolaos Karaolidis <nick@karaolidis.com>",
+  "license": "GPL-3.0-or-later",
+  "devDependencies": {
+    "@types/masonry-layout": "^4.2.8"
+  }
+}