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

<div class="mx-auto max-w-xl mx-4 lg:mx-0">
  <header>
    <h1 class="mt-16 text-3xl font-semibold leading-8 text-theme-heading font-serif">
      <%= @note.name %>
    </h1>
    <p class="mt-2 text-sm leading-6 text-theme-base">
      <%= if @note.published_at do %>
        <span>Published</span>
      <% else %>
        <span>Unpublished</span>
      <% end %>
      <time class="text-theme-primary font-semibold"><%= pretty_date(@note.published_at) %></time>
      <span>·</span>
      <span>Last Updated</span>
      <time class="text-theme-primary font-semibold"><%= pretty_date(@note.updated_at) %></time>
      <span>·</span>
      <span>Tags</span>
      <span class="text-theme-primary font-semibold">
        <%= for tag <- @note.tags do %>
          <a href={~p"/t/#{tag.slug}"}><%= tag.name %></a>
        <% end %>
      </span>
      <%= if @current_user do %>
        <span>·</span>
        <a href={~p"/admin/notes/#{@note}/edit"} class="text-theme-primary font-semibold">Edit</a>
      <% end %>
    </p>
  </header>

  <section class="prose mt-8">
    <%= Markdown.render(@note.content) |> raw %>
  </section>

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

  <%= 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>
  <% end %>

  <.line />

  <.simple_form :let={f} for={@changeset} action={~p"/#{@note.slug}/comment"}>
    <.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[:content]} type="textarea" placeholder="Content" rows="3" />
    <.input field={f[:note_id]} type="hidden" />
    <:actions>
      <.button>Submit Comment</.button>
    </:actions>
  </.simple_form>
</div>