n_u/nathanupchurch.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add next / previous cards to posts

Browse Source
This commit is contained in:
Nathan Upchurch
2024-01-02 16:43:56 -06:00
parent bd2b505a5e
commit 3140ef0b72
16 changed files with 233 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
_includes/layouts/base.njk
View File

@ -6,6 +6,7 @@
<title>{{ title or metadata.title }}</title>
<link rel="icon" type="image/x-icon" href="/img/logo_favicon.svg">
<meta name="description" content="{{ description or metadata.description }}">
<meta name="robots" content="noai, noimageai">
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">

12
_includes/layouts/post.njk
View File

@ -17,14 +17,4 @@ layout: layouts/base.njk
{{ content | safe }}
{%- if collections.posts %}
{%- set previousPost = collections.posts | getPreviousCollectionItem %}
{%- set nextPost = collections.posts | getNextCollectionItem %}
{%- if nextPost or previousPost %}
<ul class="links-nextprev">
{%- if previousPost %}<li>Previous: <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a></li>{% endif %}
{%- if nextPost %}<li>Next: <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a></li>{% endif %}
</ul>
<p>Questions? Comments? <a href="../../me">contact me</a>.</p>
{%- endif %}
{%- endif %}
{% include "nextLast.njk" %}

47
_includes/nextLast.njk Normal file
View File

@ -0,0 +1,47 @@
{%- if collections.posts %}
{%- set previousPost = collections.posts | getPreviousCollectionItem %}
{%- set nextPost = collections.posts | getNextCollectionItem %}
{%- if nextPost or previousPost %}
<section class="links-nextprev">
{%- if previousPost %}
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
<a href="{{ previousPost.url }}" class="postlist-link">
<div class="post-image-container">
<img class="post-image" {% if previousPost.data.imageURL %} src="{{ previousPost.data.imageURL }}" alt="{{ previousPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
</div>
</a>
<div class="post-copy">
<a href="{{ previousPost.url }}" class="postlist-link">
<h3>
{% if previousPost.data.title %}<span>Previous Article:</span><br>{{ previousPost.data.title }}{% else %}<code>{{ previousPost.url }}</code>{% endif %}
</h3>
</a>
<time class="postlist-date" datetime="{{ previousPost.date | htmlDateString }}">{{ previousPost.date | readableDate("LLLL yyyy") }}</time>
{% if previousPost.data.synopsis %}<p>{{ previousPost.data.synopsis | truncate(150) | safe }}</p>{% else %}{{ previousPost.content | truncate(150) | safe }}{% endif %}
</div>
</article>
{% endif %}
{%- if nextPost %}
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
<a href="{{ nextPost.url }}" class="postlist-link">
<div class="post-image-container">
<img class="post-image" {% if nextPost.data.imageURL %} src="{{ nextPost.data.imageURL }}" alt="{{ nextPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
</div>
</a>
<div class="post-copy">
<a href="{{ nextPost.url }}" class="postlist-link">
<h3>
{% if nextPost.data.title %}<span>Next Article:</span><br>{{ nextPost.data.title }}{% else %}<code>{{ nextPost.url }}</code>{% endif %}
</h3>
</a>
<time class="postlist-date" datetime="{{ nextPost.date | htmlDateString }}">{{ nextPost.date | readableDate("LLLL yyyy") }}</time>
{% if nextPost.data.synopsis %}<p>{{ nextPost.data.synopsis | truncate(150) | safe }}</p>{% else %}{{ nextPost.content | truncate(150) | safe }}{% endif %}
</div>
</section>
{% endif %}
</div>
<p>Questions? Comments? <a href="../../me">contact me</a>.</p>
{%- endif %}
{%- endif %}