111 lines
3.8 KiB
Text
111 lines
3.8 KiB
Text
<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>
|