implement gallery layout for channel, first pass

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 """

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.

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
 

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

lib/chiya_web/controllers/page_html/home.html.heex

@@ -23,7 +23,8 @@
     </div>
   </div>
   <%= if @channel do %>
-    <div class="mt-6 sm:w-auto flex flex-col gap-1.5">
+    <%= 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}"}
@@ -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>

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?">