mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 16:44:56 +02:00
538e94f582
Add eleventyImport.collections to templates that access collections via Nunjucks loops (not pagination frontmatter). Without this, Eleventy's --incremental mode skips these pages when content changes. - index.njk: posts, feed (homepage recent posts widget) - feed.njk: feed (RSS must update with new posts) - feed-json.njk: feed (JSON feed must update with new posts) - slashes.njk: pages (slash pages index) - categories-index.njk: categories (categories index)
154 lines
7.3 KiB
Plaintext
154 lines
7.3 KiB
Plaintext
---
|
|
layout: layouts/base.njk
|
|
title: Slash Pages
|
|
withSidebar: true
|
|
permalink: /slashes/
|
|
eleventyImport:
|
|
collections:
|
|
- pages
|
|
---
|
|
<div class="h-feed">
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Slash Pages</h1>
|
|
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
|
|
Root-level pages on this site. Inspired by <a href="https://slashpages.net" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">slashpages.net</a>.
|
|
</p>
|
|
|
|
{# Dynamic pages (created via Indiekit) #}
|
|
<div class="mb-8">
|
|
<h2 class="text-lg font-semibold text-surface-800 dark:text-surface-200 mb-4">Pages</h2>
|
|
{% if collections.pages.length > 0 %}
|
|
<ul class="post-list">
|
|
{% for page in collections.pages %}
|
|
<li class="h-entry post-card">
|
|
<div class="post-header">
|
|
<h3 class="text-xl font-semibold">
|
|
<a href="{{ page.url }}" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">
|
|
/{{ page.fileSlug }}
|
|
</a>
|
|
</h3>
|
|
</div>
|
|
{% if page.data.summary %}
|
|
<p class="p-summary text-surface-600 dark:text-surface-400 mt-2">{{ page.data.summary }}</p>
|
|
{% elif page.data.title %}
|
|
<p class="text-surface-600 dark:text-surface-400 mt-2">{{ page.data.title }}</p>
|
|
{% endif %}
|
|
{% if page.data.updated %}
|
|
<p class="text-sm text-surface-500 mt-2">
|
|
Updated: <time datetime="{{ page.data.updated | isoDate }}">{{ page.data.updated | dateDisplay }}</time>
|
|
</p>
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<div class="p-4 bg-surface-100 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
|
|
<p class="text-surface-600 dark:text-surface-400 text-sm mb-2">
|
|
No root pages yet. To create pages like <code>/now</code>, <code>/uses</code>, or <code>/colophon</code>, you need two plugins:
|
|
</p>
|
|
<ul class="text-sm text-surface-600 dark:text-surface-400 list-disc list-inside space-y-1">
|
|
<li><code>@rmdes/indiekit-post-type-page</code> — registers the "page" post type with Indiekit, using root-level URL paths (<code>/slug</code> instead of <code>/type/YYYY/MM/DD/slug</code>)</li>
|
|
<li><code>@rmdes/indiekit-endpoint-posts</code> — publishing UI that sends the <code>h=page</code> Micropub type so pages are created at root level</li>
|
|
</ul>
|
|
<p class="text-surface-500 dark:text-surface-500 text-xs mt-3">
|
|
Once both plugins are installed, "Page" appears as a post type in the Indiekit admin UI, and pages are published directly at <code>/slug</code>.
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# Activity pages — only show when their plugin backend is available #}
|
|
{% set hasActivityPages = (funkwhaleActivity and funkwhaleActivity.source == "indiekit") or
|
|
(githubActivity and githubActivity.source != "error") or
|
|
(lastfmActivity and lastfmActivity.source == "indiekit") or
|
|
(newsActivity and newsActivity.source == "indiekit") or
|
|
(youtubeChannel and youtubeChannel.source == "indiekit") or
|
|
(blogrollStatus and blogrollStatus.source == "indiekit") or
|
|
(podrollStatus and podrollStatus.source == "indiekit") %}
|
|
{% if hasActivityPages %}
|
|
<div class="mb-8">
|
|
<h2 class="text-lg font-semibold text-surface-800 dark:text-surface-200 mb-4">Activity Feeds</h2>
|
|
<ul class="post-list">
|
|
{% if blogrollStatus and blogrollStatus.source == "indiekit" %}
|
|
<li class="post-card">
|
|
<div class="post-header">
|
|
<h3 class="text-xl font-semibold">
|
|
<a href="/blogroll/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/blogroll</a>
|
|
</h3>
|
|
</div>
|
|
<p class="text-surface-600 dark:text-surface-400 mt-2">Sites I follow</p>
|
|
</li>
|
|
{% endif %}
|
|
{% if funkwhaleActivity and funkwhaleActivity.source == "indiekit" %}
|
|
<li class="post-card">
|
|
<div class="post-header">
|
|
<h3 class="text-xl font-semibold">
|
|
<a href="/funkwhale/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/funkwhale</a>
|
|
</h3>
|
|
</div>
|
|
<p class="text-surface-600 dark:text-surface-400 mt-2">Funkwhale activity</p>
|
|
</li>
|
|
{% endif %}
|
|
{% if githubActivity and githubActivity.source != "error" %}
|
|
<li class="post-card">
|
|
<div class="post-header">
|
|
<h3 class="text-xl font-semibold">
|
|
<a href="/github/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/github</a>
|
|
</h3>
|
|
</div>
|
|
<p class="text-surface-600 dark:text-surface-400 mt-2">GitHub activity</p>
|
|
</li>
|
|
{% endif %}
|
|
{% if lastfmActivity and lastfmActivity.source == "indiekit" %}
|
|
<li class="post-card">
|
|
<div class="post-header">
|
|
<h3 class="text-xl font-semibold">
|
|
<a href="/listening/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/listening</a>
|
|
</h3>
|
|
</div>
|
|
<p class="text-surface-600 dark:text-surface-400 mt-2">Last.fm scrobbles</p>
|
|
</li>
|
|
{% endif %}
|
|
{% if newsActivity and newsActivity.source == "indiekit" %}
|
|
<li class="post-card">
|
|
<div class="post-header">
|
|
<h3 class="text-xl font-semibold">
|
|
<a href="/news/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/news</a>
|
|
</h3>
|
|
</div>
|
|
<p class="text-surface-600 dark:text-surface-400 mt-2">RSS feed aggregator</p>
|
|
</li>
|
|
{% endif %}
|
|
{% if podrollStatus and podrollStatus.source == "indiekit" %}
|
|
<li class="post-card">
|
|
<div class="post-header">
|
|
<h3 class="text-xl font-semibold">
|
|
<a href="/podroll/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/podroll</a>
|
|
</h3>
|
|
</div>
|
|
<p class="text-surface-600 dark:text-surface-400 mt-2">Podcasts I listen to</p>
|
|
</li>
|
|
{% endif %}
|
|
{% if youtubeChannel and youtubeChannel.source == "indiekit" %}
|
|
<li class="post-card">
|
|
<div class="post-header">
|
|
<h3 class="text-xl font-semibold">
|
|
<a href="/youtube/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/youtube</a>
|
|
</h3>
|
|
</div>
|
|
<p class="text-surface-600 dark:text-surface-400 mt-2">YouTube channel</p>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Inspiration section #}
|
|
<div class="mt-8 p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
|
|
<h2 class="text-lg font-semibold text-surface-800 dark:text-surface-200 mb-2">Want more slash pages?</h2>
|
|
<p class="text-surface-600 dark:text-surface-400 text-sm">
|
|
Check out <a href="https://slashpages.net" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">slashpages.net</a>
|
|
for inspiration on pages like <code>/now</code>, <code>/uses</code>, <code>/colophon</code>, <code>/blogroll</code>, and more.
|
|
</p>
|
|
</div>
|
|
</div>
|