86 lines
3.7 KiB
Text
86 lines
3.7 KiB
Text
---
|
|
pagination:
|
|
data: collections.posts
|
|
size: 9
|
|
alias: posts
|
|
reverse: true
|
|
---
|
|
|
|
{% extends "baselayout.njk" %}
|
|
|
|
{% block main %}
|
|
<main class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
|
|
{%- for post in posts -%}
|
|
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
|
<div class="flex-shrink-0">
|
|
<a href="{{ post.url }}" tabindex="-1">
|
|
<img class="h-48 w-full object-cover" src="{{ post.data.coverImage if post.data.coverImage else '/images/default-thumb.png'}}" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
|
<div class="flex-1">
|
|
<a href="{{ post.url }}" class="block mt-2">
|
|
<h3 class="text-xl font-semibold text-gray-900">
|
|
{{ post.data.title }}
|
|
</h3>
|
|
<p class="mt-3 text-base text-gray-500">
|
|
{{ post.data.description }}
|
|
</p>
|
|
</a>
|
|
</div>
|
|
<div class="mt-6 flex justify-between">
|
|
<div class="text-sm text-gray-500">
|
|
<time datetime="{{ post.data.date.toISOString() }}">
|
|
{{ post.data.date.toDateString() }}
|
|
</time>
|
|
</div>
|
|
<div class="text-sm text-gray-500">
|
|
<span>
|
|
{{ post.templateContent | emojiReadTime }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{%- endfor -%}
|
|
</main>
|
|
{% endblock %}
|
|
|
|
{% block footer %}
|
|
<nav class="mt-8 border-t border-slate-800 px-4 flex items-center justify-between sm:px-0">
|
|
<div class="-mt-px w-0 flex-1 flex">
|
|
{% if pagination.href.previous %}
|
|
<a href="{{ pagination.href.previous }}" class="border-t-2 border-transparent pt-4 pr-1 inline-flex items-center text-sm font-medium text-slate-300 hover:text-slate-100 hover:border-slate-100">
|
|
<!-- Heroicon name: solid/arrow-narrow-left -->
|
|
<svg class="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
|
|
</svg>
|
|
Previous
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
<div class="hidden md:-mt-px md:flex">
|
|
{%- for pageEntry in pagination.pages %}
|
|
<a
|
|
href="{{ pagination.hrefs[ loop.index0 ] }}"
|
|
class="{{ 'border-yellow-300 text-white' if page.url == pagination.hrefs[ loop.index0 ] else 'border-transparent text-slate-300'}} hover:text-slate-100 hover:border-slate-100 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium"
|
|
{% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page"{% endif %}
|
|
>
|
|
{{ loop.index }}
|
|
</a>
|
|
{%- endfor %}
|
|
</div>
|
|
<div class="-mt-px w-0 flex-1 flex justify-end">
|
|
{% if pagination.href.next %}
|
|
<a href="{{ pagination.href.next }}" class="border-t-2 border-transparent pt-4 pl-1 inline-flex items-center text-sm font-medium text-slate-300 hover:text-slate-100 hover:border-slate-100">
|
|
Next
|
|
<!-- Heroicon name: solid/arrow-narrow-right -->
|
|
<svg class="ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
</svg>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</nav>
|
|
{% endblock %}
|