mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 16:44:56 +02:00
32aea5ace9
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>
151 lines
7.2 KiB
Plaintext
151 lines
7.2 KiB
Plaintext
---
|
|
layout: layouts/base.njk
|
|
title: Slash Pages
|
|
withSidebar: true
|
|
permalink: /slashes/
|
|
---
|
|
<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>
|