add microblog layout, fix theming for comment form

lib/chiya/channels/channel.ex

@@ -8,8 +8,17 @@ defmodule Chiya.Channels.Channel do
     field :content, :string
     field :name, :string
     field :slug, ChannelSlug.Type
-    field :visibility, Ecto.Enum, values: [:public, :private, :unlisted]
+    field :visibility, Ecto.Enum, values: [
-    field :layout, Ecto.Enum, values: [:default, :gallery]
+      :public, 
+      :private, 
+      :unlisted
+    ]
+    field :layout, Ecto.Enum, values: [
+      :default,
+      :microblog,
+      :photoblog,
+      :gallery
+    ]
 
     many_to_many :notes, Chiya.Notes.Note,
       join_through: "channels_notes",
@@ -28,10 +37,10 @@ defmodule Chiya.Channels.Channel do
     |> validate_exclusion(:slug, ~w(admin user dev))
   end
 
-  def icon(%Chiya.Channels.Channel{visibility: vis}) do
+  def icon(%Chiya.Channels.Channel{visibility: visibility}) do
-    case(vis) do
+    case(visibility) do
-      :public -> "🌍"
       :private -> "🔒"
+      :public -> "🌍"
       :unlisted -> "👁️"
     end
   end

lib/chiya_web/components/core_components.ex

@@ -238,6 +238,7 @@ defmodule ChiyaWeb.CoreComponents do
   """
   attr :for, :any, required: true, doc: "the datastructure for the form"
   attr :as, :any, default: nil, doc: "the server side parameter to collect all input under"
+  attr :class, :string, default: "shadow rounded mt-10 bg-white dark:bg-gray-900"
 
   attr :rest, :global,
     include: ~w(autocomplete name rel action enctype method novalidate target multipart),
@@ -248,8 +249,8 @@ defmodule ChiyaWeb.CoreComponents do
 
   def simple_form(assigns) do
     ~H"""
-    <.form :let={f} for={@for} as={@as} {@rest}>
+    <.form :let={f} for={@for} as={@as} {@rest} class={@class}>
-      <div class="space-y-8 p-3 shadow rounded bg-white dark:bg-gray-900 mt-10">
+      <div class="space-y-8 p-3">
         <%= render_slot(@inner_block, f) %>
         <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
           <%= render_slot(action, f) %>
@@ -323,8 +324,7 @@ defmodule ChiyaWeb.CoreComponents do
   attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs"
 
   attr :rest, :global,
-    include: ~w(autocomplete accept cols disabled form max maxlength min minlength
+    include: ~w(autocomplete accept cols disabled form max maxlength min minlength pattern placeholder readonly required rows size step)
-                                   pattern placeholder readonly required rows size step)
 
   slot :inner_block
 

lib/chiya_web/components/public_components.ex

@@ -7,6 +7,8 @@ defmodule ChiyaWeb.PublicComponents do
     statics: ChiyaWeb.static_paths()
 
   import ChiyaWeb.Format
+  import ChiyaWeb.Markdown, only: [render: 1]
+  import Phoenix.HTML, only: [raw: 1]
 
   @doc """
   Renders a horizontal line
@@ -90,9 +92,31 @@ defmodule ChiyaWeb.PublicComponents do
         </section>
         """
 
-      _ ->
+      :microblog ->
         ~H"""
-        <section class="default | mt-6 sm:w-auto flex flex-col gap-1.5">
+        <section class="note-list microblog | mt-6 text-theme-base">
+          <%= for note <- assigns.notes do %>
+            <article class="mt-8 first:mt-0">
+              <div class="prose prose-gruvbox">
+                <%= raw render(note.content) %>
+              </div>
+              <time class="text-theme-base/75">
+                <%= pretty_datetime(note.published_at) %>
+              </time>
+              <span>·</span>
+              <a href={~p"/#{note.slug}"} class="text-theme-base/75">Permalink</a>
+            </article>
+          <% end %>
+        </section>
+        """
+
+      :photoblog ->
+        ~H"""
+        """
+
+      _ -> # default, show headings only
+        ~H"""
+        <section class="note-list default | mt-6 sm:w-auto flex flex-col gap-1.5">
           <%= for note <- assigns.notes do %>
             <a
               href={~p"/#{note.slug}"}

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

@@ -69,16 +69,20 @@
         </article>
       <% end %>
     </aside>
+  <% else %>
+    <.line />
+
+    <h2 class="mb-6 text-theme-base">No comments yet.</h2>
   <% end %>
 
   <.line />
 
-  <.simple_form :let={f} for={@changeset} action={~p"/#{@note.slug}/comment"}>
+  <.simple_form :let={f} for={@changeset} action={~p"/#{@note.slug}/comment"} class="bg-theme-background -m-3">
     <.error :if={@changeset.action}>
       Oops, something went wrong! Please check the errors below.
     </.error>
-    <.input field={f[:author_name]} type="text" placeholder="Name" />
+    <.input field={f[:author_name]} type="text" placeholder="Name" class="bg-theme-background dark:bg-theme-background border-theme-base/20 dark:border-theme-base/20 text-theme-base dark:text-theme-base placeholder-theme-base/40 dark:placeholder-theme-base/60 dark:focus:border-theme-base/60 dark:focus:border-theme-base/60" />
-    <.input field={f[:content]} type="textarea" placeholder="Content" rows="3" />
+    <.input field={f[:content]} type="textarea" placeholder="Content" rows="3" class="bg-theme-background dark:bg-theme-background border-theme-base/20 dark:border-theme-base/20 text-theme-base dark:text-theme-base placeholder-theme-base/60 dark:placeholder-theme-base/60 focus:border-theme-base/60 dark:focus:border-theme-base/60" />
     <.input field={f[:note_id]} type="hidden" />
     <:actions>
       <.button>Submit Comment</.button>