Files
blog-eleventy-indiekit/articles.njk
rmdes 32aea5ace9 feat: neutralize theme for fresh deployments
Strip personal data from templates so the theme ships clean for any
deployer. Collection pages now use generatePageOnEmptyData so empty
post types show encouraging placeholders instead of 404s. Navigation
is conditional on enabled post types and installed plugins. Sidebar
widgets split into individual components with plugin-aware visibility.
Slashes page explains required plugins for root-level page creation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-08 15:16:29 +01:00

95 lines
3.6 KiB
Plaintext

---
layout: layouts/base.njk
title: Articles
withSidebar: true
pagination:
data: collections.articles
size: 20
alias: paginatedArticles
generatePageOnEmptyData: true
permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
---
<div class="h-feed">
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Articles</h1>
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
Long-form posts and essays.
<span class="text-sm">({{ collections.articles.length }} total)</span>
</p>
{% if paginatedArticles.length > 0 %}
<ul class="post-list">
{% for post in paginatedArticles %}
<li class="h-entry post-card">
<div class="post-header">
<h2 class="text-xl font-semibold mb-1 flex-1">
<a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">
{{ post.data.title or "Untitled" }}
</a>
</h2>
</div>
<div class="post-meta mt-2">
<time class="dt-published" datetime="{{ post.date | isoDate }}">
{{ post.date | dateDisplay }}
</time>
{% if post.data.category %}
<span class="post-categories">
{% if post.data.category is string %}
<span class="p-category">{{ post.data.category }}</span>
{% else %}
{% for cat in post.data.category %}
<span class="p-category">{{ cat }}</span>
{% endfor %}
{% endif %}
</span>
{% endif %}
</div>
<p class="p-summary text-surface-700 dark:text-surface-300 mt-3">
{{ post.templateContent | striptags | truncate(250) }}
</p>
<a href="{{ post.url }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block">
Read more &rarr;
</a>
</li>
{% endfor %}
</ul>
{# Pagination controls #}
{% if pagination.pages.length > 1 %}
<nav class="pagination" aria-label="Articles pagination">
<div class="pagination-info">
Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
</div>
<div class="pagination-links">
{% if pagination.href.previous %}
<a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
Previous
</a>
{% else %}
<span class="pagination-link disabled">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
Previous
</span>
{% endif %}
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
Next
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
{% else %}
<span class="pagination-link disabled">
Next
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</span>
{% endif %}
</div>
</nav>
{% endif %}
{% else %}
{% set postType = "article" %}
{% include "components/empty-collection.njk" %}
{% endif %}
</div>