From ae8bd83a0b1468cc3f98bf987e022121dd8c3b36 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Sun, 1 Feb 2026 11:13:20 +0100
Subject: [PATCH] feat: add support for slash pages (root-level pages)

- Add pages collection in eleventy.config.js
- Add page.njk layout for slash pages
- Add /slashes/ listing page showing all site pages
- Pages created via Indiekit go to /{slug}/ instead of /content/pages/

Inspired by https://slashpages.net

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 _includes/layouts/page.njk |  51 ++++++++++++++++++
 eleventy.config.js         |   8 +++
 slashes.njk                | 107 +++++++++++++++++++++++++++++++++++++
 3 files changed, 166 insertions(+)
 create mode 100644 _includes/layouts/page.njk
 create mode 100644 slashes.njk

diff --git a/_includes/layouts/page.njk b/_includes/layouts/page.njk
new file mode 100644
index 0000000..41de18b
--- /dev/null
+++ b/_includes/layouts/page.njk
@@ -0,0 +1,51 @@
+---
+layout: layouts/base.njk
+withSidebar: true
+---
+{# Layout for slash pages (/about, /now, /uses, etc.) #}
+{# These are root-level pages created via Indiekit's page post type #}
+
+<article class="h-entry">
+  <header class="mb-6 sm:mb-8">
+    <h1 class="p-name text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">
+      {{ title }}
+    </h1>
+    {% if summary %}
+    <p class="p-summary text-lg text-surface-600 dark:text-surface-400">
+      {{ summary }}
+    </p>
+    {% endif %}
+    {% if updated %}
+    <p class="text-sm text-surface-500 dark:text-surface-400 mt-2">
+      Last updated: <time class="dt-updated" datetime="{{ updated | isoDate }}">{{ updated | dateDisplay }}</time>
+    </p>
+    {% endif %}
+  </header>
+
+  <div class="e-content prose dark:prose-invert prose-lg max-w-none">
+    {{ content | safe }}
+  </div>
+
+  {# Categories/tags if present #}
+  {% if category %}
+  <footer class="mt-8 pt-6 border-t border-surface-200 dark:border-surface-700">
+    <div class="flex flex-wrap gap-2">
+      {% if category is string %}
+      <a href="/categories/{{ category | slugify }}/" class="p-category text-sm px-3 py-1 bg-surface-100 dark:bg-surface-800 rounded-full hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors">
+        {{ category }}
+      </a>
+      {% else %}
+      {% for cat in category %}
+      <a href="/categories/{{ cat | slugify }}/" class="p-category text-sm px-3 py-1 bg-surface-100 dark:bg-surface-800 rounded-full hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors">
+        {{ cat }}
+      </a>
+      {% endfor %}
+      {% endif %}
+    </div>
+  </footer>
+  {% endif %}
+
+  {# Hidden metadata for microformats #}
+  <a class="u-url hidden" href="{{ page.url }}"></a>
+  <data class="p-author h-card hidden" value="{{ site.author.name }}"></data>
+</article>
diff --git a/eleventy.config.js b/eleventy.config.js
index a6c5238..7dc717a 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -339,6 +339,14 @@ export default function (eleventyConfig) {
       .sort((a, b) => b.date - a.date);
   });
 
+  // Pages collection - root-level slash pages (about, now, uses, etc.)
+  // These are stored in content/pages/ and output to /{slug}/
+  eleventyConfig.addCollection("pages", function (collectionApi) {
+    return collectionApi
+      .getFilteredByGlob("content/pages/**/*.md")
+      .sort((a, b) => (a.data.title || "").localeCompare(b.data.title || ""));
+  });
+
   // All content combined for homepage feed
   eleventyConfig.addCollection("feed", function (collectionApi) {
     return collectionApi
diff --git a/slashes.njk b/slashes.njk
new file mode 100644
index 0000000..3a1de7b
--- /dev/null
+++ b/slashes.njk
@@ -0,0 +1,107 @@
+---
+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>.
+    <span class="text-sm">({{ collections.pages.length }} total)</span>
+  </p>
+
+  {# Static pages (hardcoded in theme) #}
+  <div class="mb-8">
+    <h2 class="text-lg font-semibold text-surface-800 dark:text-surface-200 mb-4">Site Pages</h2>
+    <ul class="post-list">
+      <li class="post-card">
+        <div class="post-header">
+          <h3 class="text-xl font-semibold">
+            <a href="/about/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/about</a>
+          </h3>
+        </div>
+        <p class="text-surface-600 dark:text-surface-400 mt-2">About me and this site</p>
+      </li>
+      <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">What I'm listening to</p>
+      </li>
+      <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">My Funkwhale activity</p>
+      </li>
+      <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">My GitHub activity</p>
+      </li>
+      <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">My YouTube channel</p>
+      </li>
+      <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>
+    </ul>
+  </div>
+
+  {# Dynamic pages (created via Indiekit) #}
+  {% if collections.pages.length > 0 %}
+  <div>
+    <h2 class="text-lg font-semibold text-surface-800 dark:text-surface-200 mb-4">Dynamic Pages</h2>
+    <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>
+  </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>