From 856e488541044c10fa8073bf813e9d65e07aadca Mon Sep 17 00:00:00 2001
From: Julian Köpke <julian.koepke@gmail.com>
Date: Sat, 30 Aug 2025 13:27:56 +0000
Subject: [PATCH] all page mode for print layout

---
 assets/css/app.css | 1 +
 lib/alchemy_pub_web/page_live.ex | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------
 lib/alchemy_pub_web/page_live.html.heex | 18 ++++++++++--------
 3 file(s) changed, 63 insertion(s)(+), 31 deletion(s)(-)

diff --git a/assets/css/app.css b/assets/css/app.css
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -58,6 +58,7 @@ @source inline("badge-outline");
 @source inline("print:hidden");
 @source inline("print:border-0");
 @source inline("print:w-[50rem]");
+@source inline("print:break-after-page");
 
 /* Add variants based on LiveView classes */
 @custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
diff --git a/lib/alchemy_pub_web/page_live.ex b/lib/alchemy_pub_web/page_live.ex
--- a/lib/alchemy_pub_web/page_live.ex
+++ b/lib/alchemy_pub_web/page_live.ex
@@ -57,27 +57,32 @@
     {:noreply, socket |> assign(url: uri)}
   end
 
+  defp apply_keypress(param, %{a: a, f: f, m: m, p: p} = params) do
+    case param["key"] do
+      "a" -> %{params | a: not a}
+      "f" -> %{params | f: not f}
+      "m" -> %{params | m: not m}
+      "ArrowRight" -> %{params | p: p + 1}
+      "ArrowLeft" -> %{params | p: max(0, p - 1)}
+      "Escape" -> %{params | f: false}
+      _ -> params
+    end
+  end
+
   @impl true
   def handle_event("key", param, socket) do
     p = get_in(socket.assigns.subpage) || 0
     f = get_in(socket.assigns.fullscreen) || false
     m = get_in(socket.assigns.mute) || false
-    params = %{p: p, f: f, m: m}
+    a = get_in(socket.assigns.all_pages) || false
 
-    params =
-      case param["key"] do
-        "f" -> %{params | f: not f}
-        "m" -> %{params | m: not m}
-        "ArrowRight" -> %{params | p: p + 1}
-        "ArrowLeft" -> %{params | p: max(0, p - 1)}
-        _ -> nil
-      end
+    params = apply_keypress(param, %{a: a, p: p, f: f, m: m})
 
     socket =
       if params && socket.assigns.meta["rank"] == :deck do
         socket
         |> push_patch(
-          to: "/#{socket.assigns.title}?p=#{params[:p]}&f=#{params[:f]}&m=#{params[:m]}",
+          to: "/#{socket.assigns.title}?#{URI.encode_query(params)}",
           replace: true
         )
       else
@@ -142,20 +147,44 @@ end
 
           fullscreen = params["f"] == "true"
           mute = params["m"] == "true"
+          all_pages = params["a"] == "true"
 
-          socket
-          |> assign(
-            page_title: meta |> Map.get("title"),
-            meta: meta,
-            title: title,
-            content: "",
-            tag: nil,
-            track_valid: true,
-            subpage: subpage,
-            fullscreen: fullscreen,
-            mute: mute
-          )
-          |> stream_insert(:deck, paginate(content, subpage, direction, mute), at: -1, limit: -2)
+          socket =
+            socket
+            |> assign(
+              page_title: meta |> Map.get("title"),
+              meta: meta,
+              title: title,
+              content: "",
+              tag: nil,
+              track_valid: true,
+              subpage: subpage,
+              fullscreen: fullscreen && !all_pages,
+              mute: mute && !all_pages,
+              all_pages: all_pages
+            )
+
+          if all_pages do
+            Enum.reduce(content, socket, fn p, socket ->
+              stream_insert(
+                socket,
+                :deck,
+                %{
+                  id: "deck-page-#{Ulid.generate()}",
+                  slide: p,
+                  animation: [],
+                },
+                at: -1,
+                limit: -Enum.count(content)
+              )
+            end)
+          else
+            socket
+            |> stream_insert(:deck, paginate(content, subpage, direction, mute),
+              at: -1,
+              limit: -2
+            )
+          end
 
         {title, _rank, _date, meta, content} ->
           socket
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
@@ -112,7 +112,7 @@ </div>
       <div id="top" class="flex flex-col gap-0.5">
         <div
           :if={Map.get(@meta, "header", true)}
-          class="flex flex-row gap-2 p-2 justify-end content-center bg-base-200 rounded-lg"
+          class="flex flex-row gap-2 p-2 justify-end content-center bg-base-200 rounded-lg print:hidden"
         >
           <div class="text-xl font-extrabold content-center">{@page_title}</div>
           <img
@@ -141,10 +141,10 @@ :if={@meta["rank"] == :deck}
           id="deck"
           phx-update="stream"
           class={
-            if @fullscreen do
-              "absolute top-0 left-0 w-full h-full z-1 deck overflow-hidden"
-            else
-              "relative md:w-[34rem] lg:min-w-[42rem] print:min-w-[50rem] aspect-16/10 deck"
+            cond do
+              @all_pages -> "flex flex-col md:w-[34rem] lg:min-w-[42rem] print:min-w-[50rem] deck"
+              @fullscreen -> "absolute top-0 left-0 w-full h-full z-1 deck overflow-hidden"
+              true -> "relative md:w-[34rem] lg:min-w-[42rem] print:min-w-[50rem] aspect-16/10 deck"
             end
           }
           phx-window-keyup="key"
@@ -154,9 +154,10 @@ <div
             :for={{id, content} <- @streams.deck}
             id={id}
             class={[
-              "p-4 absolute top-0 left-0 bg-base-200 border-1 border-accent rounded-box",
-              "overflow-hidden w-full h-full duration-250 ease-in-out transform transition",
+              "p-4 bg-base-200 border-1 border-accent rounded-box",
+              "overflow-hidden duration-250 ease-in-out transform transition",
               "@container",
+              if @all_pages do "aspect-16/10 print:break-after-page" else "w-full h-full absolute top-0 left-0" end,
               content.animation
             ]}
             phx-mounted={remove_animation(content.animation, id)}
@@ -166,8 +167,9 @@ {raw(content.slide)}
             </div>
           </div>
         </div>
-        <div :if={@meta["rank"] == :deck} class="flex flex-row justify-between">
+        <div :if={@meta["rank"] == :deck && !@all_pages} class="flex flex-row justify-between">
           <div class="btn btn-ghost" phx-click="key" phx-value-key="ArrowLeft">Prev</div>
+          <div class="btn btn-ghost" phx-click="key" phx-value-key="f">Full</div>
           <div class="btn btn-ghost" phx-click="key" phx-value-key="ArrowRight">Next</div>
         </div>
       </div>

--
tangled.sh