Merge pull request #134 from chnm/preview

Merge preview site into main for blog post deployment

bom-website/themes/dbn/layouts/partials/head.html

@@ -10,35 +10,48 @@
     href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Work+Sans:ital,wght@0,300;0,400;1,300&display=swap"
     rel="stylesheet"
   />
-  <link rel="shortcut icon" href="/images/favicon.ico">
+  <link rel="shortcut icon" href="/images/favicon.ico" />
 
-  <link rel="alternate" type="application/rss+xml" href="{{.Site.BaseURL }}/index.xml" title="{{ .Site.Title }}">
+  <link
+    rel="alternate"
+    type="application/rss+xml"
+    href="{{.Site.BaseURL }}/index.xml"
+    title="{{ .Site.Title }}"
+  />
 
   <title>Death by Numbers</title>
 
   {{ $style := resources.Get "style.css" }}
   <link rel="stylesheet" href="{{ $style.Permalink }}" />
 
   {{ if ne hugo.Environment "development" }}
-    <!-- Matomo -->
-    <script>
-      var _paq = window._paq = window._paq || [];
-      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-      _paq.push(['trackPageView']);
-      _paq.push(['enableLinkTracking']);
-      (function() {
-        var u="https://stats.rrchnm.org/";
-        _paq.push(['setTrackerUrl', u+'matomo.php']);
-        _paq.push(['setSiteId', '95']);
-        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-      })();
-    </script>
-    <!-- End Matomo Code -->
+  <!-- Matomo -->
+  <script>
+    var _paq = (window._paq = window._paq || []);
+    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+    _paq.push(["trackPageView"]);
+    _paq.push(["enableLinkTracking"]);
+    (function () {
+      var u = "https://stats.rrchnm.org/";
+      _paq.push(["setTrackerUrl", u + "matomo.php"]);
+      _paq.push(["setSiteId", "95"]);
+      var d = document,
+        g = d.createElement("script"),
+        s = d.getElementsByTagName("script")[0];
+      g.async = true;
+      g.src = u + "matomo.js";
+      s.parentNode.insertBefore(g, s);
+    })();
+  </script>
+  <!-- End Matomo Code -->
   {{ end }}
 
   <link
     rel="stylesheet"
     href="https://unpkg.com/littlefoot/dist/littlefoot.css"
   />
+  <script
+    defer
+    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
+  ></script>
 </head>

bom-website/themes/dbn/layouts/shortcodes/fig.html

@@ -1,25 +1,37 @@
-<figure>
-	{{ $raw := .Get "src" | $.Page.Resources.Get }}
-	{{ $ext := path.Ext (.Get "src") }}
-	{{ $link := .Get "link" }}
-	{{ $title := .Get "title" }}
-	{{ if $title }}
-	<h5>{{ $title }}</h5>
-	{{ end }}
-	{{ if ne $raw.MediaType.SubType "svg" }}
-	{{ $regular := $raw.Resize "750x webp"}}
-	{{ $retina := $raw.Resize "1500x webp"}}
-	<a href="{{ $link | default $raw.Permalink }}">
-		<img src='{{ $regular.Permalink }}' srcset="{{ $regular.Permalink }}, {{ $retina.Permalink }} 2x" alt='{{ .Get "caption" | markdownify | plainify }}' style="box-shadow:none;">
-	</a>
-	{{ else }}
-	<a href="{{ $link | default $raw.Permalink }}">
-		<img src='{{ $raw.Permalink }}' alt='{{ .Get "caption" | markdownify | plainify }}' style="box-shadow:none;">
-	</a>
-	{{ end }}
-	<figcaption>
-		<p>
-			Figure. {{ .Get "caption" | markdownify }}
-		</p>
-	</figcaption>
-</figure>
+<div x-data="{ open: false, imageUrl: '', caption: '' }">
+    <figure>
+        {{ $raw := .Get "src" | $.Page.Resources.Get }}
+        {{ $ext := path.Ext (.Get "src") }}
+        {{ $link := .Get "link" }}
+        {{ $title := .Get "title" }}
+        {{ if $title }}
+        <h5>{{ $title }}</h5>
+        {{ end }}
+        {{ if ne $raw.MediaType.SubType "svg" }}
+        {{ $regular := $raw.Resize "750x webp"}}
+        {{ $retina := $raw.Resize "1500x webp"}}
+        <a href="javascript:void(0);" @click="open = true; imageUrl = '{{ $regular.Permalink }}'; caption = '{{ .Get "caption" | markdownify | plainify }}'">
+            <img src='{{ $regular.Permalink }}' srcset="{{ $regular.Permalink }}, {{ $retina.Permalink }} 2x" alt='{{ .Get "caption" | markdownify | plainify }}' style="box-shadow:none;">
+        </a>
+        {{ else }}
+        <a href="javascript:void(0);" @click="open = true; imageUrl = '{{ $raw.Permalink }}'; caption = '{{ .Get "caption" | markdownify | plainify }}'">
+            <img src='{{ $raw.Permalink }}' alt='{{ .Get "caption" | markdownify | plainify }}' style="box-shadow:none;">
+        </a>
+        {{ end }}
+        <figcaption>
+            <p>
+                Figure. {{ .Get "caption" | markdownify }}
+            </p>
+        </figcaption>
+    </figure>
+
+    <!-- Lightbox Modal -->
+    <div x-show="open" x-transition @click.away="open = false" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-75 z-50">
+        <div class="relative max-w-3xl mx-auto p-4">
+            <button @click="open = false" class="absolute top-0 right-0 mt-2 mr-2 text-white text-3xl font-bold">&times;</button>
+            <img :src="imageUrl" alt="Expanded Image" class="rounded-lg shadow-lg">
+            <p class="text-white text-center mt-2" x-text="caption"></p>
+        </div>
+    </div>
+</div>
+