assets/css/app.css

@@ -50,6 +50,10 @@
   @apply prose-invert;
 }
 
+.prose :where(a):not(:where([class~="not-prose"] *)) {
+  @apply underline decoration-2 decoration-theme-primary;
+}
+
 /* Set width and color for identity icons */
 a[rel] svg { 
   width: 1em;

lib/chiya/notes.ex

@@ -20,7 +20,10 @@ defmodule Chiya.Notes do
 
   """
   def list_notes do
-    Repo.all(Note) |> Repo.preload(@preloads)
+    Note
+    |> order_by([n], [desc: n.updated_at, desc: n.published_at])
+    |> Repo.all()
+    |> Repo.preload(@preloads)
   end
 
   @doc """

lib/chiya/notes/note.ex

@@ -5,7 +5,7 @@ defmodule Chiya.Notes.Note do
   @derive {Jason.Encoder, only: [:id, :name, :content, :slug, :channels]}
   schema "notes" do
     field :content, :string
-    field :kind, Ecto.Enum, values: [:post, :bookmark]
+    field :kind, Ecto.Enum, values: [:post, :bookmark], default: :post
     field :name, :string
     field :published_at, :naive_datetime
     field :slug, :string

lib/chiya_web/components/admin_components.ex

@@ -65,11 +65,20 @@ defmodule ChiyaWeb.AdminComponents do
 
   def admin_bar(assigns) do
     ~H"""
-    <ul class="relative z-10 flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end bg-black">
+    <ul class="relative z-10 flex items-center gap-4 py-1 px-4 sm:px-6 lg:px-8 bg-black">
+      <li>
+        <.link
+          href={~p"/"}
+          class="flex gap-3 text-sm leading-6 text-gray-100 font-semibold hover:text-gray-300"
+        >
+          <span>Chiya</span>
+          <p class="rounded-full bg-theme-primary/10 px-2 text-[0.8125rem] font-medium leading-6 text-theme-primary">
+            v<%= Application.spec(:chiya, :vsn) %>
+          </p>
+        </.link>
+      </li>
+      <li class="flex-1"></li>
       <%= if @current_user do %>
-        <li class="text-xs leading-6 text-gray-100">
-          <%= @current_user.email %>
-        </li>
         <li>
           <.link
             href="#"

lib/chiya_web/components/core_components.ex

@@ -305,6 +305,8 @@ defmodule ChiyaWeb.CoreComponents do
       <.input name="my-input" errors={["oh no!"]} />
   """
   attr :id, :any, default: nil
+  attr :class, :string, default: nil
+
   attr :name, :any
   attr :label, :string, default: nil
   attr :value, :any
@@ -391,6 +393,7 @@ defmodule ChiyaWeb.CoreComponents do
           "phx-no-feedback:border-gray-300 phx-no-feedback:focus:border-gray-400 phx-no-feedback:focus:ring-gray-800/5",
           "border-gray-300 focus:border-gray-400 focus:ring-gray-800/5",
           "dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:focus:border-gray-400",
+          @class,
           @errors != [] && "border-rose-400 focus:border-rose-400 focus:ring-rose-400/10"
         ]}
         {@rest}
@@ -415,6 +418,7 @@ defmodule ChiyaWeb.CoreComponents do
           "phx-no-feedback:border-gray-300 phx-no-feedback:focus:border-gray-400 phx-no-feedback:focus:ring-gray-800/5",
           "border-gray-300 focus:border-gray-400 focus:ring-gray-800/5",
           "dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:focus:border-gray-400",
+          @class,
           @errors != [] && "border-rose-400 focus:border-rose-400 focus:ring-rose-400/10"
         ]}
         {@rest}

lib/chiya_web/components/layouts/app.html.heex

@@ -1,11 +1,5 @@
 <header class="px-4 sm:px-6 lg:px-8">
-  <div class="flex items-center justify-between border-b border-gray-100 dark:border-gray-800 py-3">
-    <div class="flex items-center gap-4">
-      <a href="/" class="text-gray-900 font-semibold dark:text-gray-100">Chiya</a>
-      <p class="rounded-full bg-emerald-500/5 px-2 text-[0.8125rem] font-medium leading-6 text-emerald-500">
-        v<%= Application.spec(:chiya, :vsn) %>
-      </p>
-    </div>
+  <div class="flex items-center justify-end border-b border-gray-100 dark:border-gray-800 py-3">
     <div class="flex items-center gap-4">
       <.link
         href={~p"/admin/notes"}

lib/chiya_web/components/layouts/public.html.heex

@@ -1,8 +1,5 @@
 <header class="px-4 sm:px-6 lg:px-8">
-  <div class="flex items-center justify-between border-b border-theme-dim py-3">
-    <div class="flex items-center gap-4">
-      <a href="/" class="text-theme-base font-semibold">Chiya</a>
-    </div>
+  <div class="flex items-center justify-end border-b border-theme-dim/50 py-3">
     <div class="flex items-center gap-4">
       <.link
         href={~p"/n/about"}
@@ -13,6 +10,7 @@
     </div>
   </div>
 </header>
+
 <main class="px-4 py-20 sm:px-6 lg:px-8">
   <div class="mx-auto max-w-2xl">
     <.flash_group flash={@flash} />

lib/chiya_web/controllers/note_html/index.html.heex

@@ -9,8 +9,8 @@
 
 <.table id="notes" rows={@notes} row_click={&JS.navigate(~p"/admin/notes/#{&1}")}>
   <:col :let={note} label="Name"><%= note.name %></:col>
+  <:col :let={note} label="Updated at"><%= from_now(note.updated_at) %></:col>
   <:col :let={note} label="Published at"><%= from_now(note.published_at) %></:col>
-  <:col :let={note} label="Kind"><%= note.kind %></:col>
   <:action :let={note}>
     <div class="sr-only">
       <.link navigate={~p"/admin/notes/#{note}"}>Show</.link>

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

@@ -15,7 +15,7 @@
               rel={identity.rel}
               href={identity.url}
               target="_blank"
-              class="group -mx-2 -my-0.5 inline-flex items-center gap-3 rounded-lg px-2 py-0.5 hover:bg-theme-dim"
+              class="group -mx-2 -my-0.5 inline-flex items-center gap-3 rounded-lg px-2 py-0.5 hover:bg-theme-primary/10 transition"
             >
               <%= raw identity.icon %>
               <%= identity.name %>
@@ -27,9 +27,9 @@
     <%= if @channel do %>
       <div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
         <%= for note <- @channel.notes do %>
-          <a href={~p"/n/#{note.slug}"} class="group rounded -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-dim">
-            <span class="text-theme-heading text-lg font-semibold leading-8 group-hover:text-theme-heading/75"><%= note.name %></span>
-            <span class="text-theme-muted text-sm group-hover:text-theme-muted/75"><%= pretty_date(note.published_at) %></span>
+          <a href={~p"/n/#{note.slug}"} class="rounded -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-primary/10 transition">
+            <span class="text-theme-heading text-lg font-semibold leading-8"><%= note.name %></span>
+            <span class="text-theme-base text-sm"><%= pretty_date(note.published_at) %></span>
           </a>
         <% end %>
       </div>

lib/chiya_web/controllers/setting_html/setting_form.html.heex

@@ -12,8 +12,8 @@
     options={Ecto.Enum.values(Chiya.Site.Setting, :theme)}
   />
   <.input field={f[:user_agent]} type="text" label="User agent" />
-  <.input field={f[:custom_css]} type="textarea" label="Custom css" />
-  <.input field={f[:custom_html]} type="textarea" label="Custom html" />
+  <.input field={f[:custom_css]} type="textarea" label="Custom css" class="font-mono" />
+  <.input field={f[:custom_html]} type="textarea" label="Custom html" class="font-mono" />
   <.input field={f[:home_channel_id]} type="select" label="Home Channel" options={@channels} />
   <:actions>
     <.button>Save Setting</.button>