<div class="max-w-2xl mx-auto">
  <div class="p-4">
    <h1 class="text-2xl font-bold mb-6 mt-2">Writing</h1>

    <div class="h-feed">
      <%= for {year, blogs} <- @blogs_by_year do %>
        <div class="mb-8">
          <h2 class="text-lg font-semibold mb-4">{year}</h2>
          <ul>
            <%= for blog <- blogs do %>
              <li>
                <article class="h-entry">
                  <.link
                    navigate={Web.Paths.public_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>
        </div>
      <% end %>
    </div>

    <.pagination meta={@meta} path={~p"/blog"} schema={Schema.Post} class="my-2" />
  </div>
</div>