From 34a15d5fff26eca6b55858847badf1a78c84f211 Mon Sep 17 00:00:00 2001
From: Inhji <johnnie@posteo.de>
Date: Thu, 13 Apr 2023 23:52:01 +0200
Subject: [PATCH] implement gallery layout for channel, first pass

---
 lib/chiya/channels.ex                         |  6 ++--
 lib/chiya/notes.ex                            |  1 +
 lib/chiya_web.ex                              | 15 ++++----
 lib/chiya_web/components/public_components.ex | 29 ++++++++++++++-
 .../controllers/page_html/home.html.heex      | 35 +++++++++++++++++--
 lib/chiya_web/live/note_show_live.ex          |  2 +-
 6 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/lib/chiya/channels.ex b/lib/chiya/channels.ex
index c06e0db..f3afefd 100644
--- a/lib/chiya/channels.ex
+++ b/lib/chiya/channels.ex
@@ -10,11 +10,13 @@ defmodule Chiya.Channels do
 
   @preloads [:notes]
   @public_preloads [
-    notes:
+    notes: {
       from(n in Note,
         where: not is_nil(n.published_at),
         order_by: [desc: n.published_at]
-      )
+      ),
+      Chiya.Notes.note_preloads()
+    }
   ]
 
   @doc """
diff --git a/lib/chiya/notes.ex b/lib/chiya/notes.ex
index 124ed4c..e4110a4 100644
--- a/lib/chiya/notes.ex
+++ b/lib/chiya/notes.ex
@@ -8,6 +8,7 @@ defmodule Chiya.Notes do
   alias Chiya.Notes.{Note, NoteImage, NoteNote, NoteTag}
 
   @preloads [:channels, :images, :links_from, :links_to, :tags]
+  def note_preloads(), do: @preloads
 
   @doc """
   Returns the list of notes.
diff --git a/lib/chiya_web.ex b/lib/chiya_web.ex
index 330ed59..6de6716 100644
--- a/lib/chiya_web.ex
+++ b/lib/chiya_web.ex
@@ -68,6 +68,9 @@ defmodule ChiyaWeb do
     quote do
       use Phoenix.LiveComponent
 
+      # Import admin components
+      import ChiyaWeb.AdminComponents
+
       unquote(html_helpers())
     end
   end
@@ -80,11 +83,11 @@ defmodule ChiyaWeb do
       import Phoenix.Controller,
         only: [get_csrf_token: 0, view_module: 1, view_template: 1]
 
-      # Include general helpers for rendering HTML
-      unquote(html_helpers())
-
       # Import admin components
       import ChiyaWeb.AdminComponents
+
+      # Include general helpers for rendering HTML
+      unquote(html_helpers())
     end
   end
 
@@ -96,11 +99,11 @@ defmodule ChiyaWeb do
       import Phoenix.Controller,
         only: [get_csrf_token: 0, view_module: 1, view_template: 1]
 
-      # Include general helpers for rendering HTML
-      unquote(html_helpers())
-
       # Import public components
       import ChiyaWeb.PublicComponents
+
+      # Include general helpers for rendering HTML
+      unquote(html_helpers())
     end
   end
 
diff --git a/lib/chiya_web/components/public_components.ex b/lib/chiya_web/components/public_components.ex
index ef5689d..b9acf55 100644
--- a/lib/chiya_web/components/public_components.ex
+++ b/lib/chiya_web/components/public_components.ex
@@ -11,7 +11,34 @@ defmodule ChiyaWeb.PublicComponents do
   """
   def line(assigns) do
     ~H"""
-    <hr class="my-6 border-theme-dim" />
+    <hr class="my-6 border-theme-base/20" />
+    """
+  end
+
+  @doc """
+  Renders a header with title.
+  """
+  attr :class, :string, default: nil
+  attr :inline, :boolean, default: false
+
+  slot :inner_block, required: true
+  slot :subtitle
+  slot :actions
+
+  def header(assigns) do
+    ~H"""
+    <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
+      <div>
+        <h1 class="text-lg font-semibold leading-8 text-gray-800 dark:text-gray-200">
+          <%= render_slot(@inner_block) %>
+          <span :if={@inline} class="text-sm leading-6 font-normal text-gray-600 dark:text-gray-400"><%= render_slot(@subtitle) %></span>
+        </h1>
+        <p :if={@subtitle != [] && @inline == false} class="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-400">
+          <%= render_slot(@subtitle) %>
+        </p>
+      </div>
+      <div class="flex-none"><%= render_slot(@actions) %></div>
+    </header>
     """
   end
 end
diff --git a/lib/chiya_web/controllers/page_html/home.html.heex b/lib/chiya_web/controllers/page_html/home.html.heex
index 6ae7819..4069e5e 100644
--- a/lib/chiya_web/controllers/page_html/home.html.heex
+++ b/lib/chiya_web/controllers/page_html/home.html.heex
@@ -23,8 +23,9 @@
     </div>
   </div>
   <%= if @channel do %>
-    <div class="mt-6 sm:w-auto flex flex-col gap-1.5">
-      <%= for note <- @channel.notes do %>
+    <%= if @channel.layout == :default do %>
+    <section class="default | mt-6 sm:w-auto flex flex-col gap-1.5">
+      <%= for note <- @channel.notes do %>     
         <a
           href={~p"/#{note.slug}"}
           class="rounded-lg -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-primary/10 transition"
@@ -35,6 +36,34 @@
           <span class="text-theme-base text-sm"><%= pretty_date(note.published_at) %></span>
         </a>
       <% end %>
-    </div>
+    </section>
+    <% end %>
+
+    <%= if @channel.layout == :gallery do %>
+    <section class="gallery | mt-6">
+      <%= for note <- @channel.notes do %>
+        <article>
+          <section class="flex flex-wrap justify-start gap-3">
+            <%= for image <- note.images do %>
+              <a
+                href={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)}
+                class="lightbox | w-28"
+                data-gallery="note"
+                data-description={ChiyaWeb.Markdown.render(image.content)}
+              >
+                <img
+                  src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)}
+                  loading="lazy"
+                />
+              </a>
+            <% end %>
+          </section>
+          <a href={~p"/#{note.slug}"} class="text-theme-primary text-lg/10 font-semibold rounded-lg -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-primary/10 transition"><%= note.name %> <span class="text-theme-muted font-normal text-sm"><%= pretty_date(note.published_at) %></span></a>
+        </article>
+
+        <.line />
+      <% end %>
+    </section>
+    <% end %>
   <% end %>
 </div>
diff --git a/lib/chiya_web/live/note_show_live.ex b/lib/chiya_web/live/note_show_live.ex
index c14909a..7c5f535 100644
--- a/lib/chiya_web/live/note_show_live.ex
+++ b/lib/chiya_web/live/note_show_live.ex
@@ -48,7 +48,7 @@ defmodule ChiyaWeb.NoteShowLive do
           <article>
             <a href={"/admin/notes/#{@note.id}/image/#{image.id}"}>
               <img
-                class="rounded-lg border border-theme-dim w-28"
+                class="rounded-lg border border-theme-dim w-28 mb-3"
                 src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)}
               />
               <.button phx-click="delete_image" phx-value-id={image.id} data-confirm="Are you sure?">