feat: added next and last post links

This commit is contained in:
Leyla Becker 2026-02-20 12:16:13 -06:00
parent bf11f1dd39
commit 0a55d89c7c
3 changed files with 86 additions and 1 deletions

View file

@ -15,6 +15,7 @@
--color-text-heading: #2c3e50;
--color-text-muted: #666;
--color-text-link: #3498db;
--color-text-link-muted: #999;
/* Backgrounds */
--color-bg-page: #fff;
--color-bg-surface: #f5f5f5;
@ -65,6 +66,7 @@
--color-text-heading: #f0f0f0;
--color-text-muted: #a0a0a0;
--color-text-link: #5dade2;
--color-text-link-muted: #777;
--color-bg-page: #1a1a1a;
--color-bg-surface: #2d2d2d;
--color-bg-warning: #3d3520;

View file

@ -28,9 +28,45 @@ pageType: post
<h2>Tags</h2>
<ul class="tag-list">
{% for tag in postTags %}
<li><a href="/tags/{{ tag | lower }}/">#{{ tag }}</a></li>
<li><a href="/tags/{{ tag | lower }}/\">#{{ tag }}</a></li>
{% endfor %}
</ul>
</section>
{% endif %}
{% set currentIndex = -1 %}
{% for post in collections.posts %}
{% if post.url == page.url %}
{% set currentIndex = loop.index0 %}
{% endif %}
{% endfor %}
{% if currentIndex >= 0 %}
{% set prevPost = collections.posts[currentIndex - 1] if currentIndex > 0 else null %}
{% set nextPost = collections.posts[currentIndex + 1] if currentIndex < collections.posts.length - 1 else null %}
<nav class="post-navigation" aria-label="Post navigation">
{% if prevPost %}
<a href="{{ prevPost.url }}" class="post-nav-link post-nav-prev">
<span class="post-nav-label">← Previous Post</span>
<span class="post-nav-title">{{ prevPost.data.title }}</span>
</a>
{% else %}
<span class="post-nav-link post-nav-prev post-nav-disabled">
<span class="post-nav-label">← Previous Post</span>
</span>
{% endif %}
{% if nextPost %}
<a href="{{ nextPost.url }}" class="post-nav-link post-nav-next">
<span class="post-nav-label">Next Post →</span>
<span class="post-nav-title">{{ nextPost.data.title }}</span>
</a>
{% else %}
<span class="post-nav-link post-nav-next post-nav-disabled">
<span class="post-nav-label">Next Post →</span>
</span>
{% endif %}
</nav>
{% endif %}
</article>

View file

@ -331,6 +331,53 @@ footer {
font-size: var(--font-size-small);
}
/* Post Navigation */
nav.post-navigation {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-top: var(--space-element);
width: 100%;
}
.post-nav-link {
display: flex;
flex-direction: column;
text-decoration: none;
}
.post-nav-link:hover:not(.post-nav-disabled) .post-nav-title {
text-decoration: underline;
}
.post-nav-prev {
align-items: flex-start;
text-align: left;
}
.post-nav-next {
align-items: flex-end;
text-align: right;
}
.post-nav-label {
font-size: var(--font-size-small);
color: var(--color-text-muted);
}
.post-nav-title {
color: var(--color-text-link);
font-weight: var(--font-weight-medium);
}
.post-nav-disabled {
cursor: not-allowed;
}
.post-nav-disabled .post-nav-label {
color: var(--color-text-link-muted);
}
/* Icon utilities */
.icon-invertible {
transition: filter 0.2s;