From 3d8f598eb86987286b49eecbc4fb4d67abf16d93 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sat, 1 Mar 2025 02:33:06 -0600
Subject: [PATCH] Add dynamic templates index page with responsive design

---
 app/src/index.ts     |   5 ++
 templates/index.html | 125 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 130 insertions(+)
 create mode 100644 templates/index.html
diff --git a/app/src/index.ts b/app/src/index.ts
index 1d9946c3..cc5c773f 100644
--- a/app/src/index.ts
+++ b/app/src/index.ts
@@ -3,6 +3,10 @@ import { Hono } from 'hono'
 import { serveStatic } from '@hono/node-server/serve-static'
 import fs from 'node:fs'
 import path from 'node:path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 
 const app = new Hono()
 
@@ -56,6 +60,7 @@ async function generateIndex() {
         .template-links {
             display: flex;
             gap: 0.5rem;
+            flex-wrap: wrap;
         }
         .template-links a {
             text-decoration: none;
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 00000000..f99c4e76
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Templates Directory</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 2rem;
+            background: #f5f5f5;
+        }
+        h1 {
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 0.5rem;
+        }
+        .templates {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 1rem;
+            margin-top: 2rem;
+        }
+        .template-card {
+            background: white;
+            padding: 1.5rem;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            transition: transform 0.2s;
+        }
+        .template-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+        }
+        .template-card h2 {
+            margin: 0 0 1rem 0;
+            color: #2c3e50;
+        }
+        .template-links {
+            display: flex;
+            gap: 0.5rem;
+            flex-wrap: wrap;
+        }
+        .template-links a {
+            text-decoration: none;
+            color: #3498db;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            background: #f8f9fa;
+            transition: background 0.2s;
+        }
+        .template-links a:hover {
+            background: #e9ecef;
+        }
+        .loading {
+            text-align: center;
+            padding: 2rem;
+            color: #666;
+        }
+    </style>
+</head>
+<body>
+    <h1>Available Templates</h1>
+    <div id="templates" class="templates">
+        <div class="loading">Loading templates...</div>
+    </div>
+
+    <script>
+        async function loadTemplates() {
+            const templatesContainer = document.getElementById('templates');
+            const repoPath = window.location.pathname.split('/templates')[0] + '/templates';
+            
+            try {
+                // Obtener la lista de directorios
+                const response = await fetch(repoPath);
+                const html = await response.text();
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(html, 'text/html');
+                
+                // Limpiar el contenedor
+                templatesContainer.innerHTML = '';
+                
+                // Encontrar todos los enlaces que son directorios
+                const links = Array.from(doc.querySelectorAll('a'))
+                    .filter(a => !a.href.endsWith('.html') && !a.href.endsWith('/'))
+                    .map(a => a.textContent)
+                    .filter(name => name !== '..' && name !== '.');
+
+                // Crear una tarjeta para cada directorio
+                for (const dirName of links) {
+                    // Obtener la lista de archivos del directorio
+                    const dirResponse = await fetch(`${repoPath}/${dirName}`);
+                    const dirHtml = await dirResponse.text();
+                    const dirDoc = parser.parseFromString(dirHtml, 'text/html');
+                    
+                    const files = Array.from(dirDoc.querySelectorAll('a'))
+                        .filter(a => !a.href.endsWith('/'))
+                        .map(a => a.textContent)
+                        .filter(name => name !== '..' && name !== '.');
+
+                    const card = document.createElement('div');
+                    card.className = 'template-card';
+                    card.innerHTML = `
+                        <h2>${dirName}</h2>
+                        <div class="template-links">
+                            ${files.map(file => `
+                                <a href="${dirName}/${file}">${file}</a>
+                            `).join('')}
+                        </div>
+                    `;
+                    templatesContainer.appendChild(card);
+                }
+            } catch (error) {
+                console.error('Error loading templates:', error);
+                templatesContainer.innerHTML = '<div class="loading">Error loading templates</div>';
+            }
+        }
+
+        // Cargar los templates cuando la página se cargue
+        window.addEventListener('load', loadTemplates);
+    </script>
+</body>
+</html> 
\ No newline at end of file
