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

<div>
  <header class="mx-auto max-w-xl">
    <h1 class="mt-16 lg:text-5xl md:text-4xl text-3xl font-bold text-theme-base">
      <%= @note.name %>
    </h1>
    <p class="mt-2 leading-6 text-theme-base">
      <%= if @note.published_at do %>
        <span>Published</span>
      <% else %>
        <span>Unpublished</span>
      <% end %>
      <time class="font-semibold"><%= pretty_date(@note.published_at) %></time>
      <.dot />
      <span>Last Updated</span>
      <time class="font-semibold"><%= pretty_date(@note.updated_at) %></time>
      <%= if not Enum.empty?(@note.tags) do %>
        <.dot />
        <span>Tags</span>
        <span>
          <%= for tag <- @note.tags do %>
            <a href={~p"/t/#{tag.slug}"} class="underline-link font-semibold"><%= tag.name %></a>
          <% end %>
        </span>
      <% end %>
      <%= if @current_user do %>
        <.dot />
        <a href={~p"/admin/notes/#{@note}"} class="underline-link font-semibold">Show in Admin</a>
      <% end %>
    </p>
  </header>

  <section class="mx-auto mt-8 prose prose-gruvbox md:prose-lg lg:prose-xl">
    <%= Markdown.render(@note.content) |> raw %>
  </section>

  <section class="mt-8 mx-auto max-w-xl">
    <%= if !Enum.empty?(@note.images) do %>
      <.line />

      <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>

  <section class="mt-8 mx-auto max-w-xl">
    <%= if not Enum.empty?(@note.comments) do %>
      <.line />

      <h2 class="mb-6 text-theme-base"><%= Enum.count(@note.comments) %> Comments</h2>

      <aside id="comments" class="flex flex-col gap-6">
        <%= for comment <- @note.comments do %>
          <article class="text-theme-base bg-theme-base/10 p-1">
            <header class="flex flex-row justify-between">
              <strong class="text-theme-primary"><%= comment.author_name %></strong>
              <span class="text-theme-dim"><%= from_now(comment.inserted_at) %></span>
            </header>
            <p><%= comment.content %></p>
          </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"}
      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"
        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"
        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>
      </:actions>
    </.simple_form>
  </section>
</div>