From 27fd7daf4e6c38d1e70f12c98118cd5a4d63b400 Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Wed, 11 Feb 2026 17:56:20 +0100
Subject: [PATCH] chore: list themes

---
 src/_components/themes.vto | 17 +++++++++++++++++
 src/facets/index.vto       |  2 +-
 src/index.vto              | 17 -----------------
 src/themes/index.vto       | 34 ++++++++++++++++++++++++++++++----
 4 files changed, 48 insertions(+), 22 deletions(-)
 create mode 100644 src/_components/themes.vto

diff --git a/src/_components/themes.vto b/src/_components/themes.vto
new file mode 100644
index 00000000..11c8ac5e
--- /dev/null
+++ b/src/_components/themes.vto
@@ -0,0 +1,17 @@
+<ul>
+  {{ for item of items }}
+    <li data-url="{{item.url}}" data-name="{{item.title}}">
+      <span>{{item.title}}</span>
+      <div class="list-description">
+        <div class="button-row">
+          <a href="themes/l/?url={{encodeURIComponent(item.url)}}" class="button button--bg-twist-1">Try</a>
+          <button rel="save" class="button--bg-twist-2">Save</button>
+          <button rel="fork" class="button--bg-twist-4">Fork</button>
+        </div>
+        <div>
+          {{item.desc |> md(true)}}
+        </div>
+      </div>
+    </li>
+  {{ /for }}
+</ul>
diff --git a/src/facets/index.vto b/src/facets/index.vto
index c6f00e54..d46f2615 100644
--- a/src/facets/index.vto
+++ b/src/facets/index.vto
@@ -1,5 +1,5 @@
 ---
-layout: layouts/facet.vto
+layout: layouts/diffuse.vto
 base: ../
 
 styles:
diff --git a/src/index.vto b/src/index.vto
index b0a4b5ea..4f60978f 100644
--- a/src/index.vto
+++ b/src/index.vto
@@ -10,23 +10,6 @@ styles:
 scripts:
   - index.js
 
-# THEMES
-
-themes:
-  - url: "themes/blur/"
-    title: "Blur"
-    todo: true
-    desc: >
-      **A theme with an Apple-inspired playback view.** Features two audio players instead of the usual one.
-  - title: "Loader"
-    todo: true
-    desc: >
-      **A theme that loads other themes!** _If you're taking the first steps to customize, checkout the [facets loader](#facets) first!_
-  - url: "themes/webamp/"
-    title: "Webamp"
-    desc: >
-      **Winamp 2 + Windows 98**. Uses Webamp as the audio player connected to various Diffuse elements. Also features a desktop-like Windows 98 environment in which you can open "programs" that control the used Diffuse elements.
-
 # ELEMENTS
 
 configurators:
diff --git a/src/themes/index.vto b/src/themes/index.vto
index 176a3d58..bd6e856a 100644
--- a/src/themes/index.vto
+++ b/src/themes/index.vto
@@ -1,5 +1,5 @@
 ---
-layout: layouts/facet.vto
+layout: layouts/diffuse.vto
 base: ../
 
 styles:
@@ -10,6 +10,19 @@ styles:
 
 scripts:
   - themes/index.js
+
+# THEMES
+
+builtIn:
+  - url: "themes/blur/"
+    title: "Blur"
+    todo: true
+    desc: >
+      **A theme with an Apple-inspired playback view.** Features two audio players instead of the usual one.
+  - url: "themes/webamp/"
+    title: "Webamp"
+    desc: >
+      **Winamp 2 + Windows 98**. Uses Webamp as the audio player connected to various Diffuse elements. Also features a desktop-like Windows 98 environment in which you can open "programs" that control the used Diffuse elements.
 ---
 
 <header>
@@ -19,9 +32,11 @@ scripts:
         {{ await comp.diffuse.logo() }}
       </a>
     </div>
+
     <p class="construct dither-mask" style="margin-top: 0">
       Themes
     </p>
+
     <p>
       Themes are element compositions and provide a traditional browser web application way of
       using them. In other words, pretty much the whole thing, besides your data, lives inside a single browser tab.
@@ -33,11 +48,22 @@ scripts:
         Each theme is unique, not just a skin; each one might have a totally different feature set.
       </small>
     </p>
+
+    <ul class="table-of-contents">
+      <li><a href="themes/#built-in">Built-in</a></li>
+    </ul>
   </div>
   <div class="dither-mask filler"></div>
 </header>
 <main>
-  <p>
-    TODO
-  </p>
+  <!-- BUILT-IN -->
+  <div class="columns">
+    <section class="flex">
+      <h2 id="built-in">Built-in</h2>
+
+      {{ await comp.list({ items: builtIn }) }}
+    </section>
+
+    <section class="flex"></section>
+  </div>
 </main>
-- 
2.51.2