tags

assets/css/app.css

@@ -104,7 +104,11 @@
 */
 @layer components {
   .divider {
-    @apply flex items-center my-8 before:flex-1 after:flex-1 before:content-[''] after:content-[''] before:p-[0.5px] after:p-[0.5px] w-full mx-auto last:hidden;
+    @apply flex items-center my-8 before:flex-1 after:flex-1 before:content-[''] after:content-[''] before:p-[0.5px] after:p-[0.5px] w-full mx-auto last:hidden before:bg-slate-500/25 after:bg-slate-500/25 before:mr-2 after:ml-2;
+  }
+
+  .dot {
+    @apply before:content-['·']
   }
 }
 

lib/chiya_web/components/public_components.ex

@@ -35,16 +35,6 @@ defmodule ChiyaWeb.PublicComponents do
     """
   end
 
-  @doc """
-  Renders a middot as divider
-  """
-  attr :class, :string, default: "text-theme-primary"
-
-  def dot(assigns),
-    do: ~H"""
-    <span class={["font-bold", @class]}>·</span>
-    """
-
   @doc """
   Renders a horizontal line
   """
@@ -52,29 +42,6 @@ defmodule ChiyaWeb.PublicComponents do
     do: ~H"""
     <hr class="my-6 border-theme-base/20" />
     """
-  
-  attr :note, :map, required: true
-  attr :class_tag, :string, default: ""
-  attr :linked, :boolean, default: true
-
-  def tags(assigns) do
-    ~H"""
-    <span class="inline-flex flex-row gap-1">
-      <%= for tag <- @note.tags do %>
-        <%= if assigns.linked do %>
-          <a class={["p-category", @class_tag]} href={~p"/tagged-with/#{tag.slug}"}>
-            <%= tag.name %>
-          </a>
-        <% else %>
-          <span class={["p-category", @class_tag]}>
-            <%= tag.name %>
-          </span>
-        <% end %>
-        <.dot class="last:hidden" />
-      <% end %>
-    </span>
-    """
-  end
 
   @doc """
   Renders a note-header with title.

lib/chiya_web/controllers/page_html.ex

@@ -22,8 +22,9 @@ defmodule ChiyaWeb.PageHTML do
   attr :show_content, :boolean, default: true
   def note_list_gallery(assigns)
 
-  def tag_list([]), do: "No Tags"
-  def tag_list(tags), do: Enum.map_join(tags, ", ", fn t -> t.name end)
+  attr :note, :map, required: true
+  attr :linked, :boolean, default: true
+  def tag_list(assigns)
 
   def render_outline(note) do
     note.content

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

@@ -8,7 +8,7 @@
   </section>
 
   <aside>
-    <.tag_list notes={@notes} />
+    <.tag_bar notes={@notes} />
   </aside>
 </section>
 

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

@@ -9,6 +9,6 @@
   </section>
 
   <aside>
-    <.tag_list notes={@channel.notes} />
+    <.tag_bar notes={@channel.notes} />
   </aside>
 </section>

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

@@ -33,25 +33,6 @@
       <% end %>
 
       <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>
@@ -80,6 +61,33 @@
   </section>
 
   <aside class="prose max-w-none">
+    <h3>Outline</h3>
+
+    <%= if has_outline?(@note) do %>
+      <section>
+        <%= raw(render_outline(@note)) %>
+      </section>
+    <% end %>
+
+    <h3>Properties</h3>
+
+    <section>
+      <ul>
+        <li>
+          <%= if @note.published_at do %>
+            <strong>Published</strong>
+          <% else %>
+            <strong>Unpublished</strong>
+          <% end %> <time class="dt-published"><%= pretty_date(@note.published_at) %></time>
+        </li>
+        <li>
+          <strong>Last updated</strong> <time class="dt-published"><%= pretty_date(@note.published_at) %></time>
+        </li>
+        <li><strong>Tags</strong> <.tag_list note={@note} /></li>
+        <li><strong>Kind</strong> <%= @note.kind %></li>
+      </ul>  
+    </section>
+
     <h3>Admin</h3>
 
     <section>
@@ -96,16 +104,6 @@
         </li>
       </ul>
     </section>
-
-    <h3>Outline</h3>
-
-    <%= if has_outline?(@note) do %>
-      <aside>
-        <div class="bg-theme-background1 rounded p-2">
-          <%= raw(render_outline(@note)) %>
-        </div>
-      </aside>
-    <% end %>
   </aside>
 </section>
 

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

@@ -22,7 +22,7 @@
 
         <%= if not Enum.empty?(note.tags) do %>
           <span class="inline-block">
-            <.tags note={note} linked={false} />
+            <.tag_list note={note} linked={false} />
           </span>
         <% end %>
       </a>

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

@@ -13,17 +13,19 @@
         <%= raw(Markdown.render(note.content)) %>
       </div>
 
-      <footer>
+      <footer class="text-slate-700">
         <a href={~p"/note/#{note.slug}"}>
           <time>
             <%= pretty_datetime(note.published_at) %>
           </time>
         </a>
         <%= if not Enum.empty?(note.tags) do %>
-          <.dot />
-          <.tags note={note} />
+          <span class="dot" />
+          <.tag_list note={note} />
         <% end %>
       </footer>
     </article>
+
+    <div class="divider">⌘</div>
   <% end %>
 </section>

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

@@ -9,6 +9,6 @@
   </section>
 
   <section>
-    <.tag_list notes={@tag.notes} />
+    <.tag_bar notes={@tag.notes} />
   </section>
 </section>

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

@@ -0,0 +1,18 @@
+<ul>
+  <%= for {letter, tag_group} <- group_tags(@notes) do %>
+    <li class="mb-2">
+      <span class="capitalize text-theme-primary border border-theme-background1 rounded font-sm px-2 py-1 inline-block mb-2">
+        <%= letter %>
+      </span>
+
+      <%= for tag <- tag_group do %>
+        <a
+          href={~p"/tagged-with/#{tag.slug}"}
+          class="border border-theme-background1 rounded font-sm px-2 py-1 inline-block mb-2 hover:bg-theme-background1 transition"
+        >
+          <%= tag.name %> <span class="text-theme-base text-xs font-mono bg-theme-primary/25 rounded-full py-0.5 px-1 align-middle"><%= Enum.count(tag.notes) %></span>
+        </a>
+      <% end %>
+    </li>
+  <% end %>
+</ul>

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

@@ -1,18 +1,20 @@
-<ul>
-  <%= for {letter, tag_group} <- group_tags(@notes) do %>
-    <li class="mb-2">
-      <span class="capitalize text-theme-primary border border-theme-background1 rounded font-sm px-2 py-1 inline-block mb-2">
-        <%= letter %>
+<span class="tags | inline-flex flex-row gap-1 whitespace-normal">
+  <%= for tag <- @note.tags do %>
+    <%= if @linked do %>
+      <a class="tag | flex gap-0" href={~p"/tagged-with/#{tag.slug}"}>
+        <span>#</span>
+        <span class="p-category" >
+          <%= tag.name %>
+        </span>
+      </a>
+    <% else %>
+      <span class="tag | flex gap-0">
+        <span>#</span>
+        <span class="p-category">
+          <%= tag.name %>
+        </span>
       </span>
-
-      <%= for tag <- tag_group do %>
-        <a
-          href={~p"/tagged-with/#{tag.slug}"}
-          class="border border-theme-background1 rounded font-sm px-2 py-1 inline-block mb-2 hover:bg-theme-background1 transition"
-        >
-          <%= tag.name %> <span class="text-theme-base text-xs font-mono bg-theme-primary/25 rounded-full py-0.5 px-1 align-middle"><%= Enum.count(tag.notes) %></span>
-        </a>
-      <% end %>
-    </li>
+    <% end %>
+    <span class="dot last:hidden" />
   <% end %>
-</ul>
+</span>

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

@@ -9,6 +9,6 @@
   </section>
 
   <aside>
-    <.tag_list notes={@notes} />
+    <.tag_bar notes={@notes} />
   </aside>
 </section>