From 64b2edb0d2bf6b668c95c67c4caef10a1ed963ab Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Sun, 1 Feb 2026 14:17:31 +0100
Subject: [PATCH] refactor: reorder slashes page - dynamic pages first

- Move dynamic pages (created via Indiekit) to top
- Rename sections: "Pages" and "Activity Feeds"
- Remove /about from list (already in main nav)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 slashes.njk | 107 ++++++++++++++++++++++++----------------------------
 1 file changed, 49 insertions(+), 58 deletions(-)

diff --git a/slashes.njk b/slashes.njk
index 3a1de7b..df4444c 100644
--- a/slashes.njk
+++ b/slashes.njk
@@ -8,68 +8,12 @@ permalink: /slashes/
   <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>
+  <div class="mb-8">
+    <h2 class="text-lg font-semibold text-surface-800 dark:text-surface-200 mb-4">Pages</h2>
     <ul class="post-list">
       {% for page in collections.pages %}
       <li class="h-entry post-card">
@@ -96,6 +40,53 @@ permalink: /slashes/
   </div>
   {% endif %}
 
+  {# Activity pages (from Indiekit plugins) #}
+  <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">
+      <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="/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>
+      <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="/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>
+
   {# 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>