From 7fe62caf9efcde3dbc30375262b584132546a967 Mon Sep 17 00:00:00 2001
From: Orion Reed <orionreedt@gmail.com>
Date: Mon, 2 Dec 2024 02:58:27 -0500
Subject: [PATCH] add headings from html filenames

---
 ...-perf.html => [tests] distance-field.html} |  0
 demo/{perf.html => [tests] many-shapes.html}  |  0
 demo/index.html                               | 10 ++++-
 src/folk-shape.ts                             |  2 +-
 vite.config.ts                                | 41 +++++++++++++++++--
 5 files changed, 47 insertions(+), 6 deletions(-)
 rename demo/{distance-perf.html => [tests] distance-field.html} (100%)
 rename demo/{perf.html => [tests] many-shapes.html} (100%)

diff --git a/demo/distance-perf.html b/demo/[tests] distance-field.html
similarity index 100%
rename from demo/distance-perf.html
rename to demo/[tests] distance-field.html
diff --git a/demo/perf.html b/demo/[tests] many-shapes.html
similarity index 100%
rename from demo/perf.html
rename to demo/[tests] many-shapes.html
diff --git a/demo/index.html b/demo/index.html
index 00bbbaf..fdfc08a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -29,12 +29,20 @@
       h1 {
         color: #2c3e50;
         margin: 0;
+        margin-bottom: 1em;
+      }
+
+      h2 {
+        color: #2c3e50;
+        font-size: 1.2em;
+        margin: 1em 0 0;
       }
 
       ul {
         list-style-type: none;
         line-height: 1.8;
-        padding-left: 0em;
+        padding-left: 0;
+        margin: 0;
       }
 
       li::before {
diff --git a/src/folk-shape.ts b/src/folk-shape.ts
index 6e3f010..f9b4919 100644
--- a/src/folk-shape.ts
+++ b/src/folk-shape.ts
@@ -1,5 +1,5 @@
 import { css, html } from './common/tags';
-import { ResizeObserverManager } from './resize-observer';
+import { ResizeObserverManager } from './common/resize-observer';
 
 const resizeObserver = new ResizeObserverManager();
 
diff --git a/vite.config.ts b/vite.config.ts
index 716eb63..548bc7d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,7 +4,7 @@ import { defineConfig, IndexHtmlTransformContext, Plugin } from 'vite';
 
 const demoDir = resolve(__dirname, 'demo');
 
-const files: string[] = readdirSync(demoDir).filter((file) => file.endsWith('.html'));
+const files: string[] = readdirSync(demoDir).filter((file) => file.endsWith('.html') && !file.startsWith('_'));
 const input: Record<string, string> = files.reduce((acc, file) => {
   acc[file.replace('.html', '')] = resolve(demoDir, file);
   return acc;
@@ -16,8 +16,22 @@ const linkGenerator = (): Plugin => {
     transformIndexHtml(html: string, ctx: IndexHtmlTransformContext) {
       if (!ctx.filename.endsWith('index.html')) return;
 
-      const links = files
-        .filter((file) => !file.includes('index') && !file.startsWith('_'))
+      // First, handle ungrouped files
+      const ungroupedFiles = files.filter((file) => !file.includes('index') && !file.match(/^\[([^\]]+)\]/));
+
+      // Then handle grouped files
+      const groups = files
+        .filter((file) => !file.includes('index') && file.match(/^\[([^\]]+)\]/))
+        .reduce((acc, file) => {
+          const match = file.match(/^\[([^\]]+)\](.+)\.html$/);
+          const group = match![1];
+          if (!acc[group]) acc[group] = [];
+          acc[group].push(file);
+          return acc;
+        }, {} as Record<string, string[]>);
+
+      // Generate ungrouped HTML first
+      const ungroupedHtml = ungroupedFiles
         .sort()
         .map((file) => {
           const title = file.replace('.html', '').replaceAll('-', ' ');
@@ -25,7 +39,26 @@ const linkGenerator = (): Plugin => {
         })
         .join('\n');
 
-      return html.replace('{{ LINKS }}', links);
+      // Then generate grouped HTML
+      const groupedHtml = Object.entries(groups)
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([group, groupFiles]) => {
+          const groupHtml = groupFiles
+            .sort()
+            .map((file) => {
+              const title = file
+                .replace(/^\[[^\]]+\]/, '')
+                .replace('.html', '')
+                .replaceAll('-', ' ');
+              return `<li><a href="${file}">${title}</a></li>`;
+            })
+            .join('\n');
+
+          return `<h2>${group.replaceAll('-', ' ')}</h2>\n<ul>${groupHtml}</ul>`;
+        })
+        .join('\n');
+
+      return html.replace('{{ LINKS }}', `${ungroupedHtml}\n${groupedHtml}`);
     },
   };
 };