add headings from html filenames

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 {

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();
 

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
+      // First, handle ungrouped files
-        .filter((file) => !file.includes('index') && !file.startsWith('_'))
+      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}`);
     },
   };
 };