indiekit-blog/slashes.njk

---
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-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">slashpages.net</a>.
  </p>

  {# Dynamic pages (created via Indiekit) #}
  <div class="mb-8 pl-4 border-l-4 border-accent-500 dark:border-accent-400">
    <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-accent-600 dark:hover:text-accent-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-600 dark:text-surface-400 mt-2">
          Updated: <time class="font-mono text-sm" 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 shadow-sm">
      <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-600 dark:text-surface-400 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 pl-4 border-l-4 border-emerald-500 dark:border-emerald-400">
    <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="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/blogroll/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-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="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/funkwhale/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-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="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/github/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-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="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/listening/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-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="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/news/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-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="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/podroll/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-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="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/youtube/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/youtube</a>
          </h3>
        </div>
        <p class="text-surface-600 dark:text-surface-400 mt-2">YouTube channel</p>
      </li>
      {% endif %}
    </ul>
  </div>
  {% endif %}

  {# Site pages — theme-provided .njk pages not in collections.pages or activity feeds #}
  <div class="mb-8 pl-4 border-l-4 border-surface-300 dark:border-surface-600">
    <h2 class="text-lg font-semibold text-surface-800 dark:text-surface-200 mb-4">Site Pages</h2>
    <p class="text-surface-600 dark:text-surface-400 text-sm mb-4">
      Theme-provided pages for content aggregation, search, and site info.
    </p>
    <ul class="post-list">
      <li class="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/blog/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/blog</a>
          </h3>
        </div>
        <p class="text-surface-600 dark:text-surface-400 mt-2">All posts chronologically</p>
      </li>
      <li class="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/til/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/til</a>
          </h3>
        </div>
        <p class="text-surface-600 dark:text-surface-400 mt-2">Today I Learned — small things learnt day to day</p>
      </li>
      <li class="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/cv/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/cv</a>
          </h3>
        </div>
        <p class="text-surface-600 dark:text-surface-400 mt-2">Curriculum vitae</p>
      </li>
      <li class="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/changelog/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/changelog</a>
          </h3>
        </div>
        <p class="text-surface-600 dark:text-surface-400 mt-2">Site changes and updates</p>
      </li>
      <li class="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/digest/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/digest</a>
          </h3>
        </div>
        <p class="text-surface-600 dark:text-surface-400 mt-2">Content digest</p>
      </li>
      <li class="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/featured/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/featured</a>
          </h3>
        </div>
        <p class="text-surface-600 dark:text-surface-400 mt-2">Featured posts</p>
      </li>
      <li class="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/graph/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/graph</a>
          </h3>
        </div>
        <p class="text-surface-600 dark:text-surface-400 mt-2">Content graph visualization</p>
      </li>
      <li class="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/interactions/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/interactions</a>
          </h3>
        </div>
        <p class="text-surface-600 dark:text-surface-400 mt-2">Social interactions (likes, reposts, replies)</p>
      </li>
      <li class="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/where/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/where</a>
          </h3>
        </div>
        <p class="text-surface-600 dark:text-surface-400 mt-2">Location check-ins from OwnYourSwarm</p>
      </li>
      <li class="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/readlater/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/readlater</a>
          </h3>
        </div>
        <p class="text-surface-600 dark:text-surface-400 mt-2">Read later queue</p>
      </li>
      <li class="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/search/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/search</a>
          </h3>
        </div>
        <p class="text-surface-600 dark:text-surface-400 mt-2">Full-text search</p>
      </li>
      <li class="h-entry post-card">
        <div class="post-header">
          <h3 class="text-xl font-semibold">
            <a href="/github/starred/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/github/starred</a>
          </h3>
        </div>
        <p class="text-surface-600 dark:text-surface-400 mt-2">Starred GitHub repositories</p>
      </li>
    </ul>
  </div>

  {# Inspiration section #}
  <div class="mt-8 p-4 bg-surface-100 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
    <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-accent-600 dark:text-accent-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>