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