From df27f03db17bfc11a3f13d4336ae430e34d49d88 Mon Sep 17 00:00:00 2001
From: Inhji <johnnie@posteo.de>
Date: Sun, 7 May 2023 10:30:32 +0200
Subject: [PATCH] add note_list component

---
 lib/chiya_web/components/public_components.ex | 64 +++++++++++++++++++
 .../controllers/page_html/channel.html.heex   | 10 +--
 .../controllers/page_html/home.html.heex      | 51 +--------------
 3 files changed, 66 insertions(+), 59 deletions(-)

diff --git a/lib/chiya_web/components/public_components.ex b/lib/chiya_web/components/public_components.ex
index 4a364b5..d0d3342 100644
--- a/lib/chiya_web/components/public_components.ex
+++ b/lib/chiya_web/components/public_components.ex
@@ -6,6 +6,8 @@ defmodule ChiyaWeb.PublicComponents do
     router: ChiyaWeb.Router,
     statics: ChiyaWeb.static_paths()
 
+  import ChiyaWeb.Format
+
   @doc """
   Renders a horizontal line
   """
@@ -46,4 +48,66 @@ defmodule ChiyaWeb.PublicComponents do
     </header>
     """
   end
+
+  attr :layout, :atom, default: :list
+  attr :notes, :list, required: true
+
+  def note_list(assigns) do
+    case assigns.layout do
+      :gallery ->
+        ~H"""
+        <section class="note-list gallery | mt-6">
+          <%= for note <- assigns.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={gallery_name(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>
+        """
+
+      _ ->
+        ~H"""
+        <section class="default | mt-6 sm:w-auto flex flex-col gap-1.5">
+          <%= for note <- assigns.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"
+            >
+              <span class="text-theme-primary text-lg font-semibold leading-8">
+                <%= note.name %>
+              </span>
+              <span class="text-theme-base text-sm"><%= pretty_date(note.published_at) %></span>
+            </a>
+          <% end %>
+        </section>
+        """
+    end
+  end
+
+  defp gallery_name(note), do: "gallery-#{note.id}"
 end
diff --git a/lib/chiya_web/controllers/page_html/channel.html.heex b/lib/chiya_web/controllers/page_html/channel.html.heex
index 668ed3a..48743a0 100644
--- a/lib/chiya_web/controllers/page_html/channel.html.heex
+++ b/lib/chiya_web/controllers/page_html/channel.html.heex
@@ -7,14 +7,6 @@
   </p>
 
   <div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
-    <%= for note <- @channel.notes do %>
-      <a
-        href={~p"/#{note.slug}"}
-        class="rounded -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-primary/10 transition"
-      >
-        <span class="text-theme-primary text-lg font-semibold leading-8"><%= note.name %></span>
-        <span class="text-theme-base text-sm"><%= pretty_date(note.published_at) %></span>
-      </a>
-    <% end %>
+    <.note_list notes={@channel.notes} layout={@channel.layout} />
   </div>
 </div>
diff --git a/lib/chiya_web/controllers/page_html/home.html.heex b/lib/chiya_web/controllers/page_html/home.html.heex
index 80a7851..b2b39b5 100644
--- a/lib/chiya_web/controllers/page_html/home.html.heex
+++ b/lib/chiya_web/controllers/page_html/home.html.heex
@@ -23,55 +23,6 @@
     </div>
   </div>
   <%= if @channel 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"
-          >
-            <span class="text-theme-primary text-lg font-semibold leading-8">
-              <%= note.name %>
-            </span>
-            <span class="text-theme-base text-sm"><%= pretty_date(note.published_at) %></span>
-          </a>
-        <% end %>
-      </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 %>
+    <.note_list notes={@channel.notes} layout={@channel.layout} />
   <% end %>
 </div>