Add masonry

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

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.html" (dict
-      "path" .path
-      "alt" .alt
-      "caption" .caption
-      )
-    }}
-  {{ end }}
+  {{ partial "image/index.html" .Params.hero }}
 </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">