From fa495b68e9916ae6bb8bb3a1fb1c96e392537290 Mon Sep 17 00:00:00 2001
From: Inhji <johnnie@posteo.de>
Date: Sat, 9 Sep 2023 14:37:26 +0200
Subject: [PATCH] yeah

---
 assets/css/app.css                            |  16 +-
 .../controllers/page_html/bookmarks.html.heex |   8 +-
 .../controllers/page_html/channel.html.heex   |  12 +-
 .../controllers/page_html/note.html.heex      | 188 ++++++++++--------
 .../controllers/page_html/wiki.html.heex      |   8 +-
 5 files changed, 132 insertions(+), 100 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 9b4d6fb..19f0485 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -73,7 +73,7 @@
   /* === PAGE HEADER === */
 
   header.page-header { 
-    @apply border-b border-slate-300;
+    @apply border-b border-slate-300 mb-6;
   }
 
   header.page-header h1 {
@@ -83,6 +83,20 @@
   header.page-header p {
     @apply mb-3;
   }
+
+  /* === PAGE GRID === */
+
+  section.page-grid {
+    @apply grid grid-cols-1 md:grid-cols-3 gap-3;
+
+    > section {
+      @apply col-span-1 md:col-span-2;
+    }
+
+    > aside {
+      @apply print:hidden;
+    }
+  }
 }
 
 /* 
diff --git a/lib/chiya_web/controllers/page_html/bookmarks.html.heex b/lib/chiya_web/controllers/page_html/bookmarks.html.heex
index 7fa0764..a6bd6f2 100644
--- a/lib/chiya_web/controllers/page_html/bookmarks.html.heex
+++ b/lib/chiya_web/controllers/page_html/bookmarks.html.heex
@@ -2,13 +2,13 @@
   <h1><%= Enum.count(@notes) %> Bookmarks</h1>
 </header>
 
-<section class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-3">
-  <section class="col-span-1 md:col-span-2">
+<section class="page-grid">
+  <section>
     <.note_list notes={@notes} layout={@channel.layout} />
   </section>
 
-  <section>
+  <aside>
     <.tag_list notes={@notes} />
-  </section>
+  </aside>
 </section>
 
diff --git a/lib/chiya_web/controllers/page_html/channel.html.heex b/lib/chiya_web/controllers/page_html/channel.html.heex
index f1b51ae..9820a05 100644
--- a/lib/chiya_web/controllers/page_html/channel.html.heex
+++ b/lib/chiya_web/controllers/page_html/channel.html.heex
@@ -3,6 +3,12 @@
   <p><%= Markdown.render(@channel.content) |> raw %></p>
 </header>
 
-<div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
-  <.note_list notes={@channel.notes}/>
-</div>
\ No newline at end of file
+<section class="page-grid">
+  <section>
+    <.note_list notes={@channel.notes} layout={@channel.layout} />
+  </section>
+
+  <aside>
+    <.tag_list notes={@channel.notes} />
+  </aside>
+</section>
diff --git a/lib/chiya_web/controllers/page_html/note.html.heex b/lib/chiya_web/controllers/page_html/note.html.heex
index ccff72d..a7a6baf 100644
--- a/lib/chiya_web/controllers/page_html/note.html.heex
+++ b/lib/chiya_web/controllers/page_html/note.html.heex
@@ -1,99 +1,111 @@
-<article class="h-entry hentry | stack container">
-  <header>
-    <h1 class="p-name | text-3xl leading-10 font-bold text-theme-base1">
-      <%= @note.name %>
-    </h1>
-  </header>
+<section class="page-grid">
+  <section>
+    <article class="h-entry hentry | stack container">
+      <header>
+        <h1 class="p-name | text-3xl leading-10 font-bold text-theme-base1">
+          <%= @note.name %>
+        </h1>
+      </header>
 
-  <section class="print:hidden">
-    <ul class="flex gap-3">
-      <li>
-        <a href={~p"/admin/notes/#{@note}/edit"} class="button">
-          Edit
-        </a>
-      </li>
-      <li>
-        <a href={~p"/admin/notes/#{@note}"} class="button">
-          Show in Admin
-        </a>
-      </li>
-    </ul>
-  </section>
+      <aside>
+        <.featured_images note={@note} />
+      </aside>
 
-  <aside>
-    <.featured_images note={@note} />
-  </aside>
+      <section class="p-summary e-content | prose max-w-none">
+        <%= Markdown.render(@note.content) |> raw %>
+      </section>
 
-  <%= if has_outline?(@note) do %>
-    <aside class="prose max-w-none print:hidden">
-      <div class="bg-theme-background1 rounded p-2">
-        <%= raw(render_outline(@note)) %>
-      </div>
-    </aside>
-  <% end %>
+      <%= if not Enum.empty?(@note.links_to) do %>
+        <section class="prose ">
+          Notes linking here:
+          <ul>
+            <%= for link <- @note.links_to do %>
+              <li><a href={~p"/note/#{link.slug}"}><%= link.name %></a></li>
+            <% end %>
+          </ul>
+        </section>
+      <% end %>
 
-  <section class="p-summary e-content | prose max-w-none">
-    <%= Markdown.render(@note.content) |> raw %>
-  </section>
+      <%= if String.length(@note.url || "") > 0 do %>
+        <section class="text-center">
+          <.icon name="hero-link" /> <a href={@note.url}><%= @note.url %></a>
+        </section>
+      <% end %>
 
-  <%= if not Enum.empty?(@note.links_to) do %>
-    <section class="prose ">
-      Notes linking here:
-      <ul>
-        <%= for link <- @note.links_to do %>
-          <li><a href={~p"/note/#{link.slug}"}><%= link.name %></a></li>
+      <footer>
+        <dl>
+          <dt>
+            <%= if @note.published_at do %>
+              <span>Published</span>
+            <% else %>
+              <span>Unpublished</span>
+            <% end %>
+          </dt>
+          <dd><time class="dt-published"><%= pretty_date(@note.published_at) %></time></dd>
+          <dt>Last updated</dt>
+          <dd>
+            <time class="dt-published"><%= pretty_date(@note.published_at) %></time>
+          </dd>
+          <dt>Tags</dt>
+          <dd><.tags note={@note} /></dd>
+          <dt>Kind</dt>
+          <dd><%= @note.kind %></dd>
+        </dl>  
+
+        <a href={~p"/"} class="hidden | h-card u-author">Inhji</a>
+        <a href={~p"/note/#{@note.slug}"} class="hidden | u-url u-uid"><%= @note.name %></a>
+      </footer>
+
+      <section>
+        <%= if !Enum.empty?(@note.images) do %>
+          <div class="flex flex-wrap 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)}
+                  class="rounded"
+                />
+              </a>
+            <% end %>
+          </div>
         <% end %>
+      </section>
+    </article>
+
+  </section>
+
+  <aside class="prose max-w-none">
+    <h3>Admin</h3>
+
+    <section>
+      <ul>
+        <li>
+          <a href={~p"/admin/notes/#{@note}/edit"} class="button">
+            Edit
+          </a>
+        </li>
+        <li>
+          <a href={~p"/admin/notes/#{@note}"} class="button">
+            Show in Admin
+          </a>
+        </li>
       </ul>
     </section>
-  <% end %>
 
-  <%= if String.length(@note.url || "") > 0 do %>
-    <section class="text-center">
-      <.icon name="hero-link" /> <a href={@note.url}><%= @note.url %></a>
-    </section>
-  <% end %>
+    <h3>Outline</h3>
 
-  <footer>
-    <dl>
-      <dt>
-        <%= if @note.published_at do %>
-          <span>Published</span>
-        <% else %>
-          <span>Unpublished</span>
-        <% end %>
-      </dt>
-      <dd><time class="dt-published"><%= pretty_date(@note.published_at) %></time></dd>
-      <dt>Last updated</dt>
-      <dd>
-        <time class="dt-published"><%= pretty_date(@note.published_at) %></time>
-      </dd>
-      <dt>Tags</dt>
-      <dd><.tags note={@note} /></dd>
-      <dt>Kind</dt>
-      <dd><%= @note.kind %></dd>
-    </dl>  
-
-    <a href={~p"/"} class="hidden | h-card u-author">Inhji</a>
-    <a href={~p"/note/#{@note.slug}"} class="hidden | u-url u-uid"><%= @note.name %></a>
-  </footer>
-
-  <section>
-    <%= if !Enum.empty?(@note.images) do %>
-      <div class="flex flex-wrap 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)}
-              class="rounded"
-            />
-          </a>
-        <% end %>
-      </div>
+    <%= if has_outline?(@note) do %>
+      <aside>
+        <div class="bg-theme-background1 rounded p-2">
+          <%= raw(render_outline(@note)) %>
+        </div>
+      </aside>
     <% end %>
-  </section>
-</article>
+  </aside>
+</section>
+
diff --git a/lib/chiya_web/controllers/page_html/wiki.html.heex b/lib/chiya_web/controllers/page_html/wiki.html.heex
index 00d71e5..ec11e84 100644
--- a/lib/chiya_web/controllers/page_html/wiki.html.heex
+++ b/lib/chiya_web/controllers/page_html/wiki.html.heex
@@ -3,12 +3,12 @@
   <p><%= Markdown.render(@channel.content) |> raw %></p>
 </header>
 
-<section class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-3">
-  <section class="col-span-1 md:col-span-2">
+<section class="page-grid">
+  <section>
     <.note_list notes={@notes} />
   </section>
 
-  <section>
+  <aside>
     <.tag_list notes={@notes} />
-  </section>
+  </aside>
 </section>
\ No newline at end of file