Add masonry

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2025-08-08 23:41:28 +02:00
parent 9d160b6890
commit 30f4d8d1e8
34 changed files with 328 additions and 9933 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -12,3 +12,6 @@ hugo.linux

 # Temporary lock file while building
 /.hugo_build.lock
+
+# JavaScript
+node_modules/
--- a/23
+++ b/23
@@ -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:
-	@tmp_zip=$$(mktemp) && \
-	tmp_dir=$$(mktemp -d) && \
-	curl -s https://api.github.com/repos/dimsemenov/photoswipe/releases/latest \
-	| 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
+node-modules:
+	npm install && \
+	cd ../.. && \
+	ln -s ./themes/caldwell/node_modules node_modules

 format:
 	nix fmt
--- a/assets/css/photoswipe/photoswipe.css
+++ b/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;
-}
--- a/assets/js/main.js
+++ b/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,
+  });
+});
--- a/assets/js/photoswipe.js
+++ b/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();
--- a/assets/js/photoswipe/photoswipe-lightbox.esm.js
+++ b/assets/js/photoswipe/photoswipe-lightbox.esm.js
--- a/assets/js/photoswipe/photoswipe.esm.js
+++ b/assets/js/photoswipe/photoswipe.esm.js
--- a/assets/sass/content.scss
+++ b/assets/sass/content.scss
@@ -4,6 +4,10 @@
  padding: 2rem;
 }

+.content.wide {
+  max-width: $width-wide;
+}
+
@media (max-width: $width-mobile) {
  .content {
    padding: 1rem;
--- a/assets/sass/gallery.scss
+++ b/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;
+    }
+  }
+}
--- a/assets/sass/header.scss
+++ b/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;
--- a/assets/sass/hero.scss
+++ b/assets/sass/hero.scss
@@ -19,7 +19,7 @@
    }
  }

-  .image {
+  .captioned-image {
    padding-top: 1.5rem;
  }
 }
--- a/assets/sass/image.scss
+++ b/assets/sass/image.scss
@@ -1,13 +1,13 @@
-.image {
+img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.captioned-image {
  width: 100%;
  padding: 1rem 0;

-  img {
-    width: 100%;
-    height: auto;
-    display: block;
-  }
-
  figcaption {
    text-align: center;
    padding-top: 0.5rem;
--- a/assets/sass/list.scss
+++ b/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;
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -10,6 +10,7 @@ $width-wide: 75rem;
@import "image";

@import "list";
+@import "gallery";

@import "header";
@import "content";
--- a/assets/sass/photoswipe.scss
+++ b/assets/sass/photoswipe.scss
@@ -1,3 +1,5 @@
+@import "photoswipe/dist/photoswipe";
+
 .pswp {
  --pswp-bg: var(--background);
  --pswp-icon-color: var(--text);
--- a/flake.nix
+++ b/flake.nix
@@ -27,6 +27,7 @@
        devShells.${system}.default = pkgs.mkShell {
          packages = with pkgs; [
            hugo
+            nodejs
            jq
            unzip
          ];
--- a/layouts/_default/_markup/render-image.html
+++ b/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
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -20,12 +20,14 @@

    <meta name="viewport" content="width=device-width, initial-scale=1" />

-    {{ partial "head/bots.html" }}
-    {{ partial "head/rss.html" }}
+    {{ partial "head/bots.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>
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,10 +1,9 @@
 {{ define "main" }}
-  <main class="with-meta">
-    <section class="meta">
-      <h1>{{ .Page.Title }}</h1>
-      <p class="length">A {{ .Kind }} with {{ len .Pages }} items</p>
-      {{ .Content }}
-    </section>
+  {{ $withMeta := default true .Params.withMeta }}
+  <main class="{{- if $withMeta -}}with-meta{{- end -}}">
+    {{ if $withMeta }}
+      {{ partial "list/meta.html" . }}
+    {{ end }}
    <div class="content">
      {{ partial "posts/list.html" . }}
    </div>
--- a/layouts/_default/single.html
+++ b/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>
--- a/layouts/gallery/list.html
+++ b/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 }}
--- a/layouts/partials/gallery/hero.html
+++ b/layouts/partials/gallery/hero.html
--- a/layouts/partials/gallery/list.html
+++ b/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>
--- a/layouts/partials/head/styles.html
+++ b/layouts/partials/head/styles.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"
--- a/layouts/partials/head/js.html
+++ b/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 }}
--- a/layouts/partials/head/photoswipe.html
+++ b/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 }}
--- a/layouts/partials/image.html
+++ b/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 -}}
--- a/layouts/partials/image/index.html
+++ b/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 -}}
--- a/layouts/partials/image/reflect.html
+++ b/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 -}}
--- a/layouts/partials/list/meta.html
+++ b/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>
--- a/layouts/partials/posts/hero.html
+++ b/layouts/partials/posts/hero.html
@@ -5,12 +5,5 @@
    &middot;
    <span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
  </div>
-  {{ with .Params.heroImage }}
-    {{ partial "image.html" (dict
-      "path" .path
-      "alt" .alt
-      "caption" .caption
-      )
-    }}
-  {{ end }}
+  {{ partial "image/index.html" .Params.hero }}
 </section>
--- a/layouts/partials/posts/list.html
+++ b/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">
--- a/package-lock.json
+++ b/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"
+      }
+    }
+  }
+}
--- a/package.json
+++ b/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"
+  }
+}