Add dynamic photoswipe padding

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,19 +1,14 @@
-.PHONY: all css js font update-inter reset-submodules
+.PHONY: default update update-inter node-modules format
 
-all: css js font reset-submodules
+default: node-modules
 
-css:
-
-js:
-
-font:
+update: update-inter format
 
 update-inter:
 	@tmp_zip=$$(mktemp) && \
 	tmp_dir=$$(mktemp -d) && \
 	curl -s https://api.github.com/repos/rsms/inter/releases/latest \
-	| grep "browser_download_url.*zip" \
-	| cut -d '"' -f 4 \
+	| jq -r '.assets[] | select(.name | test("\\.zip$$")) | .browser_download_url' \
 	| xargs curl -Ls -o $$tmp_zip && \
 	unzip -q -o $$tmp_zip "web/*" -d $$tmp_dir && \
 	rm -rf static/font/inter && \
@@ -21,5 +16,10 @@ update-inter:
 	cp -r $$tmp_dir/web/{InterVariable*.woff2,Inter-*.woff2} static/font/inter && \
 	rm -rf $$tmp_zip $$tmp_dir
 
-reset-submodules:
-	git submodule foreach --recursive 'git reset --hard'
+node-modules:
+	npm install && \
+	cd ../.. && \
+	ln -s ./themes/caldwell/node_modules node_modules
+
+format:
+	nix fmt

assets/js/main.js

@@ -0,0 +1,49 @@
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import Masonry from "masonry-layout";
+
+const lightbox = new PhotoSwipeLightbox({
+  gallery: ".lightbox",
+  children: ".pswp-image",
+  showAnimationDuration: 300,
+  hideAnimationDuration: 300,
+  initialZoomLevel: "fit",
+  pswpModule: () => import("photoswipe"),
+  paddingFn: () => {
+    const captionHeight =
+      5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return {
+      top: captionHeight,
+      bottom: captionHeight,
+      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) => {
+  new Masonry(container, {
+    itemSelector: ".grid-item",
+    columnWidth: ".grid-sizer",
+    percentPosition: true,
+  });
+});

assets/sass/common.scss

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

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/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/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

@@ -2,7 +2,7 @@
   padding: 2rem;
 
   .header-container {
-    max-width: $width-max;
+    max-width: $width-wide;
 
     width: 100%;
     margin: 0 auto;
@@ -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 {
@@ -59,10 +58,11 @@
 
     .header-container {
       .site-title {
-        z-index: 1;
+        z-index: 2;
       }
 
       .nav {
+        z-index: 1;
         position: fixed;
         inset: 0;
 
@@ -82,13 +82,13 @@
           gap: 2rem;
 
           li a {
-            font-size: 1.25rem;
+            font-size: 1.5rem;
           }
         }
       }
 
       .nav-toggle-label {
-        z-index: 1;
+        z-index: 2;
 
         display: flex;
         flex-direction: column;

assets/sass/hero.scss

@@ -3,6 +3,10 @@
   margin: 0 auto;
   padding: 2rem 2rem 0 2rem;
 
+  h1 {
+    font-size: 2.5rem;
+  }
+
   .meta {
     font-size: 0.8rem;
 
@@ -14,6 +18,10 @@
       color: color-mix(in srgb, var(--text) 50%, var(--background));
     }
   }
+
+  .captioned-image {
+    padding-top: 1.5rem;
+  }
 }
 
 .hero + .content {

assets/sass/image.scss

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

assets/sass/list.scss

@@ -0,0 +1,95 @@
+main.with-meta {
+  max-width: $width-wide;
+  margin: 0 auto;
+  padding: 2rem;
+
+  > .content {
+    padding: 0;
+  }
+
+  $width-sidebar: ($width-wide - $width-content) / 2 - 2rem;
+  display: grid;
+  grid-template-columns: $width-sidebar $width-content $width-sidebar;
+  column-gap: 2rem;
+
+  h1 {
+    font-size: 1.75rem;
+  }
+
+  .length {
+    color: color-mix(in srgb, var(--text) 50%, var(--background));
+    margin: 0.25rem 0;
+    font-size: 0.8rem;
+  }
+}
+
+@media (max-width: $width-wide) {
+  main.with-meta {
+    display: block;
+    padding: 0;
+
+    > .meta {
+      max-width: $width-content;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+
+    > .content {
+      padding: 2rem;
+    }
+  }
+}
+
+@media (max-width: $width-mobile) {
+  main.with-meta {
+    > .meta {
+      padding: 1rem;
+    }
+
+    > .content {
+      padding: 0 1rem 1rem 1rem;
+    }
+  }
+}
+
+.list {
+  .post {
+    display: block;
+    color: inherit;
+
+    &:not(:first-child) {
+      margin-top: 4rem;
+    }
+
+    .title {
+      font-size: 2.25rem;
+    }
+
+    .meta {
+      font-size: 0.8rem;
+
+      .date {
+        color: var(--text-600);
+      }
+
+      .duration {
+        color: color-mix(in srgb, var(--text) 50%, var(--background));
+      }
+    }
+  }
+
+  .post:hover .title,
+  .post:hover .summary {
+    color: var(--text-800);
+  }
+}
+
+@media (max-width: $width-mobile) {
+  .list {
+    .post {
+      &:not(:first-child) {
+        margin-top: 2rem;
+      }
+    }
+  }
+}

assets/sass/main.scss

@@ -1,6 +1,6 @@
 $width-mobile: 30rem;
 $width-content: 45rem;
-$width-max: 60rem;
+$width-wide: 75rem;
 
 @import "colors";
 @import "fonts";
@@ -9,8 +9,12 @@ $width-max: 60rem;
 @import "heading";
 @import "image";
 
+@import "list";
+@import "gallery";
+
 @import "header";
-@import "posts";
 @import "content";
 @import "hero";
 @import "footer";
+
+@import "photoswipe";

assets/sass/photoswipe.scss

@@ -0,0 +1,37 @@
+@import "photoswipe/dist/photoswipe";
+
+.pswp {
+  --pswp-bg: var(--background);
+  --pswp-icon-color: var(--text);
+  --pswp-icon-color-secondary: color-mix(
+    in srgb,
+    var(--text) 30%,
+    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);
+  }
+}

assets/sass/posts.scss

@@ -1,42 +0,0 @@
-.posts-list {
-  .post {
-    display: block;
-    color: inherit;
-    text-decoration: none;
-
-    &:not(:first-child) {
-      margin-top: 4rem;
-    }
-
-    .title {
-      font-size: 2.25rem;
-    }
-
-    .meta {
-      font-size: 0.8rem;
-
-      .date {
-        color: var(--text-600);
-      }
-
-      .duration {
-        color: color-mix(in srgb, var(--text) 50%, var(--background));
-      }
-    }
-  }
-
-  .post:hover .title,
-  .post:hover .summary {
-    color: var(--text-900);
-  }
-}
-
-@media (max-width: $width-mobile) {
-  .posts-list {
-    .post {
-      &:not(:first-child) {
-        margin-top: 2rem;
-      }
-    }
-  }
-}

flake.nix

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

layouts/404.html

@@ -4,8 +4,7 @@
       <h1>404</h1>
       <p>This is a dead link. Whatever was here, it&apos;s gone now.</p>
       <p>
-        <a href="{{ .Site.BaseURL }}">Let&apos;s pretend this never happened</a
-        >.
+        <a href="{{- relURL "" -}}">Let&apos;s pretend this never happened</a>.
       </p>
     </div>
   </main>

layouts/_default/_markup/render-image.html

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

layouts/_default/baseof.html

@@ -1,53 +1,14 @@
 <!doctype html>
 <html lang="{{- .Site.LanguageCode -}}">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  {{ partial "components/head/index.html" . }}
 
-    <title>
-      {{- if .IsHome -}}
-        {{ .Site.Title }}
-      {{- else -}}
-        {{ .Site.Title }} &middot;
-        {{ .Title }}
-      {{- end -}}
-    </title>
-
-    {{ with .Site.Params.description }}
-      <meta name="description" content="{{- . -}}" />
-    {{ end }}
-
-
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="robots" content="all,follow" />
-    <meta name="googlebot" content="index,follow,snippet,archive" />
-
-    {{ with resources.Get "sass/main.scss" }}
-      {{ with . | toCSS (dict "targetPath" "css/main.css") | fingerprint }}
-        <link
-          rel="stylesheet"
-          href="{{- .RelPermalink -}}"
-          integrity="{{- .Data.Integrity -}}"
-        />
-      {{ end }}
-    {{ end }}
-
-    {{ with .OutputFormats.Get "RSS" }}
-      {{ printf `
-        <link href="%s" rel="%s" type="%s" title="%s" />` .Permalink .Rel .MediaType.Type $.Site.Title | safeHTML
-      }}
-    {{ end }}
-
-    {{ partial "opengraph.html" . }}
-    {{ partial "twitter.html" . }}
-  </head>
 
   <body>
-    {{ partial "header.html" . }}
+    {{ partial "components/header.html" . }}
 
     {{ block "main" . }}
     {{ end }}
 
-    {{ partial "footer.html" . }}
+    {{ partial "components/footer.html" . }}
   </body>
 </html>

layouts/_default/list.html

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

layouts/_default/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
   <main>
-    {{ partial (printf "posts/%s.html" (.Params.heroType | default "hero")) . }}
+    {{ partial "components/hero/default.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 "components/list/meta.html" . }}
+    {{ end }}
+    <div class="{{- if $withMeta -}}content{{- else -}}content wide{{- end -}}">
+      {{ partial "gallery/list.html" . }}
+    </div>
+  </main>
+{{ end }}

layouts/partials/components/footer.html

@@ -1,7 +1,7 @@
 <footer class="footer">
   <div class="footer-container">
     <div class="copyright">
-      <a href="{{- "/" | relURL -}}">{{ .Site.Title }}</a> &copy;
+      <a href="{{- relURL "" -}}">{{ .Site.Title }}</a> &copy;
       {{ now.Year }}
     </div>
 
@@ -10,7 +10,7 @@
         {{ $len := len .Site.Params.footer }}
         {{ range $i, $el := .Site.Params.footer }}
           <li>
-            <a href="{{- $el.url -}}">{{ $el.name }}</a>
+            <a href="{{- $el.url | safeURL -}}">{{ $el.name }}</a>
           </li>
           {{ if lt (add $i 1) $len }}
             <span class="middot">&middot;</span>

layouts/partials/components/head/bots.html

@@ -0,0 +1,2 @@
+<meta name="robots" content="all,follow" />
+<meta name="googlebot" content="index,follow,snippet,archive" />

layouts/partials/components/head/css.html

@@ -0,0 +1,8 @@
+{{ $opts := dict "targetPath" "css/main.css" "includePaths" (slice "node_modules") }}
+{{ with resources.Get "sass/main.scss" | css.Sass $opts | minify | fingerprint }}
+  <link
+    rel="stylesheet"
+    href="{{- .RelPermalink -}}"
+    integrity="{{- .Data.Integrity -}}"
+  />
+{{ end }}

layouts/partials/components/head/index.html

@@ -0,0 +1,29 @@
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+  <title>
+    {{- if .IsHome -}}
+      {{ .Site.Title }}
+    {{- else -}}
+      {{ .Site.Title }} &middot;
+      {{ .Title }}
+    {{- end -}}
+  </title>
+
+  {{ with .Site.Params.description }}
+    <meta name="description" content="{{- . -}}" />
+  {{ end }}
+
+
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  {{ partial "components/head/bots.html" . }}
+  {{ partial "components/head/rss.html" . }}
+
+  {{ partial "components/head/opengraph.html" . }}
+  {{ partial "components/head/twitter.html" . }}
+
+  {{ partial "components/head/js.html" . }}
+  {{ partial "components/head/css.html" . }}
+</head>

layouts/partials/components/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/components/head/opengraph.html

@@ -58,12 +58,11 @@
   {{ end }}
 {{ end }}
 
-{{ $permalink := .Permalink }}
 {{ $siteSeries := .Site.Taxonomies.series }}{{ with .Params.series }}
   {{ range $name := . }}
     {{ $series := index $siteSeries $name }}
     {{ range $page := first 6 $series.Pages }}
-      {{ if ne $page.Permalink $permalink }}
+      {{ if ne $page.Permalink .Permalink }}
         <meta property="og:see_also" content="{{- $page.Permalink -}}" />
       {{ end }}
     {{ end }}

layouts/partials/components/head/rss.html

@@ -0,0 +1,8 @@
+{{ with .OutputFormats.Get "RSS" }}
+  <link
+    href="{{- .Permalink -}}"
+    rel="{{- .Rel -}}"
+    type="{{- .MediaType.Type -}}"
+    title="{{- $.Site.Title -}}"
+  />
+{{ end }}

layouts/partials/components/head/twitter.html

@@ -1,13 +1,3 @@
-{{ with .Params.image }}
-  {{ $image := $.Resources.GetMatch . }}
-  {{ with $image }}
-    {{ $thumb := .Resize "400x" }}
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:image" content="{{- $thumb.Permalink -}}" />
-  {{ end }}
-{{ end }}
-
-
 <meta name="twitter:title" content="{{- .Title -}}" />
 <meta
   name="twitter:description"
@@ -21,3 +11,12 @@
     {{- end -}}
   {{- end -}}"
 />
+
+{{ with .Params.image }}
+  {{ $image := $.Resources.GetMatch . }}
+  {{ with $image }}
+    {{ $thumb := .Resize "400x" }}
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content="{{- $thumb.Permalink -}}" />
+  {{ end }}
+{{ end }}

layouts/partials/components/header.html

@@ -1,7 +1,7 @@
 <header class="header">
   <div class="header-container">
     <div class="site-title">
-      <a href="{{- "/" | relURL -}}">{{ .Site.Title }}</a>
+      <a href="{{- relURL "" -}}">{{ .Site.Title }}</a>
     </div>
 
     <input
@@ -18,7 +18,7 @@
     <nav class="nav">
       <ul>
         {{ range .Site.Params.navigation }}
-          <li><a href="{{- .url -}}">{{ .name }}</a></li>
+          <li><a href="{{- .url | safeURL -}}">{{ .name }}</a></li>
         {{ end }}
       </ul>
     </nav>

layouts/partials/components/hero/default.html

@@ -5,12 +5,5 @@
     ·
     <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 "components/image/index.html" .Params.hero }}
 </section>

layouts/partials/components/image/index.html

@@ -0,0 +1,24 @@
+{{ $imageData := partial "components/image/reflect.html" . }}
+{{- with $imageData.image -}}
+  <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 -}}"
+        width="{{- .Width -}}"
+        height="{{- .Height -}}"
+        loading="lazy"
+        {{ with $imageData.title }}title="{{- . -}}"{{ end }}
+        {{ with $imageData.alt }}alt="{{- . -}}"{{ end }}
+      />
+    </a>
+    {{ with $imageData.caption }}
+      <figcaption>{{ . }}</figcaption>
+    {{ end }}
+  </figure>
+{{- end -}}

layouts/partials/components/image/reflect.html

@@ -0,0 +1,31 @@
+{{- $input := . -}}
+
+{{- $src := $input -}}
+{{- $caption := "" -}}
+{{- $title := "" -}}
+{{- $alt := "" -}}
+
+{{- if reflect.IsMap $input -}}
+  {{- $src = $input.src | default "" -}}
+  {{- $caption = $input.caption | default "" -}}
+  {{- $title = $input.title | default $caption | default "" -}}
+  {{- $alt = $input.alt | default $title | default "" -}}
+{{- end -}}
+
+{{ $result := dict "image" nil "caption" $caption "title" $title "alt" $alt }}
+
+{{- if $src -}}
+  {{- $isRemote := strings.HasPrefix $src "http" -}}
+  {{- $image := "" -}}
+
+  {{- if $isRemote -}}
+    {{- $remote := resources.GetRemote $src -}}
+    {{- $image = resources.Copy (printf "static/3rd-party/%s" $remote.Name) $remote -}}
+  {{- else -}}
+    {{- $image = resources.Get $src -}}
+  {{- end -}}
+
+  {{- $result = (dict "image" $image "caption" $caption "title" $title "alt" $alt) -}}
+{{- end -}}
+
+{{- return $result -}}

layouts/partials/components/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/gallery/list.html

@@ -0,0 +1,39 @@
+<div class="gallery masonry lightbox">
+  <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="{{- $page.RelPermalink -}}"
+            data-pswp-src="{{- .RelPermalink -}}"
+            data-pswp-width="{{- .Width -}}"
+            data-pswp-height="{{- .Height -}}"
+            class="pswp-image"
+          >
+            <img
+              src="{{- .RelPermalink -}}"
+              width="{{- .Width -}}"
+              height="{{- .Height -}}"
+              loading="lazy"
+              {{ with $imageData.title }}title="{{- . -}}"{{ end }}
+              {{ 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 }}
+  {{ end }}
+</div>

layouts/partials/image.html

@@ -1,16 +0,0 @@
-{{- $path := .path -}}
-{{- $caption := .caption -}}
-{{- $alt := default .caption .alt -}}
-
-{{ if $path }}
-  <figure class="image">
-    <img
-      src="{{- $path | absURL -}}"
-      {{ with $caption }}title="{{- . -}}"{{ end }}
-      {{ with $alt }}alt="{{- . -}}"{{ end }}
-    />
-    {{ with $caption }}
-      <figcaption>{{ . }}</figcaption>
-    {{ end }}
-  </figure>
-{{ end }}

layouts/partials/posts/list.html

@@ -1,7 +1,7 @@
-<div class="posts-list">
+<div class="list">
   {{ range sort .Pages "Date" "desc" }}
     {{ if not .Params.private }}
-      <a href="{{ .Permalink }}" class="post">
+      <a href="{{- .RelPermalink -}}" class="post">
         <h1 class="title">{{ .Title }}</h1>
         <div class="summary">{{ .Summary }}</div>
         <div class="meta">

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"
+  }
+}