94 lines
3.2 KiB
Text
94 lines
3.2 KiB
Text
<div class="max-w-2xl mx-auto mt-2">
|
|
<!-- Recent Blog Posts -->
|
|
<section class="mb-8 p-4">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-bold">Writing</h2>
|
|
<.link navigate={~p"/blog"} class="text-sm text-gray-500 hover:text-gray-800">
|
|
See all →
|
|
</.link>
|
|
</div>
|
|
|
|
<ul>
|
|
<%= for blog <- @recent_blogs do %>
|
|
<li>
|
|
<article class="h-entry">
|
|
<.link
|
|
navigate={Web.BlogHTML.blog_path(blog)}
|
|
class="flex justify-between items-center hover:bg-gray-50 -mx-2 px-2 py-1 rounded"
|
|
>
|
|
<h3 class="p-name u-url">{blog.title}</h3>
|
|
<div class="text-gray-500 dt-published">
|
|
<.timex value={blog.published_at} format="{Mfull} {D}" />
|
|
</div>
|
|
</.link>
|
|
</article>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Recent Statuses -->
|
|
<div class="max-w-2xl mx-auto">
|
|
<section>
|
|
<div class="flex justify-between items-center mb-4 py-2 px-4">
|
|
<h2 class="text-xl font-bold">Microblog</h2>
|
|
<.link navigate={~p"/microblog"} class="text-sm text-gray-500 hover:text-gray-800">
|
|
See all →
|
|
</.link>
|
|
</div>
|
|
|
|
<div class="border border-gray-200">
|
|
<%= for status <- @recent_statuses do %>
|
|
<.link
|
|
navigate={~p"/status/#{status.id}"}
|
|
class="block border-t first:border-t-0 border-gray-200 hover:bg-gray-50 u-url"
|
|
>
|
|
<article class="h-entry py-4">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 pl-3 pr-2">
|
|
<%= if Core.Author.get(:avatar_url) do %>
|
|
<img
|
|
src={Core.Author.get(:avatar_url)}
|
|
alt={Core.Author.get(:name)}
|
|
class="w-10 h-10 rounded-full u-photo"
|
|
/>
|
|
<% else %>
|
|
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-xl u-photo">
|
|
{Core.Author.get(:avatar_emoji)}
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="flex-grow min-w-0 pl-1 pr-3">
|
|
<div class="flex items-center mb-1">
|
|
<p class="p-name font-bold">
|
|
{Core.Author.get(:name)}
|
|
</p>
|
|
<p class="ml-1 inline">
|
|
<span class="p-nickname font-normal text-gray-600">
|
|
@{Core.Author.get(:username)}
|
|
</span>
|
|
</p>
|
|
<span class="mx-2 text-sm text-gray-500">·</span>
|
|
<div class="text-sm text-gray-500">
|
|
<.timex
|
|
value={status.published_at}
|
|
format="{relative}"
|
|
formatter={:relative}
|
|
class="dt-published"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="e-content">
|
|
<.markdown content={status.body} class="text-gray-900" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</.link>
|
|
<% end %>
|
|
</div>
|
|
</section>
|
|
</div>
|