index.ejs

<%- include("/document/head.ejs") %>
  <div class='divide-y divide-gray-200 dark:divide-gray-700'>
    <div class='pt-6 pb-8 space-y-2 md:space-y-5'>
      <h1
        class='text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14'>
        <%= _i("latest") %>
      </h1>
      <p class='text-lg leading-7 text-gray-500 dark:text-gray-400'>
        <%= config.seo.description %>
      </p>
    </div>
    <ul class='divide-y divide-gray-200 dark:divide-gray-700'>
      <% for (item of page.docs) { %>
        <li class='py-12'>
          <article>
            <div class='space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline'>
              <dl>
                <dt class='sr-only'>Published on</dt>
                <dd class='text-base font-medium leading-6 text-gray-500 dark:text-gray-400'>
                  <time>
                    <%= item.created.split('T')[0] %>
                  </time>
                </dd>
              </dl>
              <div class='space-y-5 xl:col-span-3'>
                <div class='space-y-6'>
                  <div>
                    <h2 class='text-2xl font-bold leading-8 tracking-tight'>
                      <a href="/posts/<%= item.category.slug %>/<%= item.slug %>" aria-label="<%= item.title %>"
                        class='text-gray-900 dark:text-gray-100'>
                        <%= item.title %>
                      </a>
                    </h2>
                    <div class='flex flex-wrap'>
                      <a href="/category/<%= item.category.slug %>" grayaria-label="post's category name"
                        class='mr-3 text-sm font-medium uppercase text-gray-500 hover:text-gray-600 dark:hover:text-gray-400'>
                        <%= item.category.name %>
                      </a>
                    </div>
                  </div>
                  <div class='prose text-gray-500 max-w-none dark:text-gray-400' />
                </div>
                <div class='text-base font-[300] leading-6'>
                  <a href="/posts/<%= item.category.slug %>/<%= item.slug %>"
                    class='text-gray-500 hover:text-gray-600 dark:hover:text-gray-400' aria-label="read more">Read more
                    →</a>
                </div>
              </div>
            </div>
          </article>
        </li>
        <% } %>
    </ul>
    <div class='flex text-base font-medium leading-6' style="justify-content: space-between;">
      <% if (page.hasPrevPage) { %>
        <a href='/posts/<%= page.page - 1 %>' class='text-gray-500 hover:text-primary-600 dark:hover:text-gray-400 mt-5'>上 ←</a>
      <% } %>
      <% if (page.hasNextPage) { %>
        <a href='/posts/<%= page.page + 1 %>' class='text-gray-500 hover:text-primary-600 dark:hover:text-gray-400 mt-5'>下 →</a>
      <% } %>
    </div>
  </div>

  <%- include("/document/foot.ejs") %>