From b1321544f2aab14febd59b36ae4e86760bbfd7ae Mon Sep 17 00:00:00 2001
From: Julian Köpke <julian.koepke@gmail.com>
Date: Fri, 26 Jun 2026 16:29:41 +0000
Subject: [PATCH] image list gallery

---
 README.md | 2 +-
 assets/css/app.css | 25 +++++++++++++++++++++++++
 lib/alchemy_pub/application.ex | 2 ++
 lib/alchemy_pub_web/page_live.html.heex | 9 +++++++--
 priv/pages/Gallery.md | 15 +++++++++++++++
 priv/static/images/cross.jpg | 0 
 priv/static/images/donkey.jpg | 0 
 priv/static/images/grain.jpg | 0 
 priv/static/images/growth.jpg | 0 
 9 file(s) changed, 50 insertion(s)(+), 3 deletion(s)(-)

diff --git a/README.md b/README.md
--- a/README.md
+++ b/README.md
@@ -81,5 +81,5 @@ - [x] Keyboard navigation
 - [x] Onesheet layout
 - [x] Forward / redirect pages
 - [x] Tracker visualization
-- [ ] Static content updates (images)
+- [x] Static content updates (images)
 - [ ] LiveView patch tag navigation support
diff --git a/assets/css/app.css b/assets/css/app.css
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -37,6 +37,7 @@ @source inline("hero-code-bracket");
 @source inline("hero-envelope");
 @source inline("hero-globe-alt");
 @source inline("hero-calendar-days");
+@source inline("hero-photo");
 @source inline("prose");
 @source inline("not-prose");
 @source inline("whitespace-nowrap");
@@ -60,6 +61,7 @@ @source inline("badge-outline");
 @source inline("onesheet");
 @source inline("onesheet-col");
 @source inline("onesheet-avatar");
+@source inline("gallery-grid");
 @source inline("print:hidden");
 @source inline("print:border-0");
 @source inline("print:w-[50rem]");
@@ -523,6 +525,29 @@ height: 8rem;
         object-fit: cover;
         border-radius: 0.75rem;
         margin: 0.5rem;
+    }
+
+    .gallery {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.5rem;
+
+        a {
+            overflow: hidden;
+            border-radius: 0.5rem;
+            flex: 0 0 auto;
+        }
+
+        img {
+            height: 14em;
+            width: auto;
+            transition: transform 0.2s ease;
+        }
+    }
+
+    .gallery a:hover img {
+        transform: scale(1.05);
     }
 }
 
diff --git a/lib/alchemy_pub/application.ex b/lib/alchemy_pub/application.ex
--- a/lib/alchemy_pub/application.ex
+++ b/lib/alchemy_pub/application.ex
@@ -7,6 +7,8 @@ use Application
 
   @impl true
   def start(_type, _args) do
+    if Mix.env() == :dev, do: Application.ensure_all_started(:volt)
+
     children = [
       AlchemyPubWeb.Telemetry,
       {DNSCluster, query: Application.get_env(:alchemy_pub, :dns_cluster_query) || :ignore},
diff --git a/lib/alchemy_pub_web/page_live.html.heex b/lib/alchemy_pub_web/page_live.html.heex
--- a/lib/alchemy_pub_web/page_live.html.heex
+++ b/lib/alchemy_pub_web/page_live.html.heex
@@ -120,7 +120,7 @@ </div>
           </div>
         </div>
       </div>
-      <div id="top" class="flex flex-col gap-0.5">
+      <div id="top" class="flex flex-col gap-0.5 grow min-w-0">
         <div
           :if={Map.get(@meta, "header", @meta["rank"] != nil)}
           class="flex flex-row gap-2 p-2 justify-end content-center bg-base-200 rounded-lg print:hidden"
@@ -163,9 +163,14 @@ class="prose self-center md:w-136 lg:w-2xl print:min-w-200 p-4 flex flex-col"
         >
           {raw(@content)}
         </div>
+        <div :if={is_list(@meta["images"])} class="gallery p-4 self-center w-full max-w-3xl">
+          <a :for={name <- @meta["images"]} href={"/images/#{name}"} target="_blank">
+            <img src={"/images/#{name}"} alt={Path.rootname(name)} loading="lazy" />
+          </a>
+        </div>
         <div
           :if={@meta["onesheet"]}
-          class="onesheet self-center w-full max-w-5xl p-4"
+          class="onesheet self-center w-full max-w-2xl p-4"
         >
           {raw(@content)}
         </div>
diff --git a/priv/pages/Gallery.md b/priv/pages/Gallery.md
new file mode 100644
--- /dev/null
+++ b/priv/pages/Gallery.md
@@ -0,0 +1,15 @@
+---
+title: Gallery
+rank: 2
+icon: photo
+images:
+  - grain.jpg
+  - Tärnättholmarna.jpg
+  - cross.jpg
+  - growth.jpg
+  - donkey.jpg
+---
+
+# Gallery
+
+Add an `images` list to the frontmatter to pick which images appear and in what order.
diff --git a/priv/static/images/cross.jpg b/priv/static/images/cross.jpg
new file mode 100644
--- /dev/null
+++ b/priv/static/images/cross.jpg
diff --git a/priv/static/images/donkey.jpg b/priv/static/images/donkey.jpg
new file mode 100644
--- /dev/null
+++ b/priv/static/images/donkey.jpg
diff --git a/priv/static/images/grain.jpg b/priv/static/images/grain.jpg
new file mode 100644
--- /dev/null
+++ b/priv/static/images/grain.jpg
diff --git a/priv/static/images/growth.jpg b/priv/static/images/growth.jpg
new file mode 100644
--- /dev/null
+++ b/priv/static/images/growth.jpg

--
tangled.sh