claude-code-templates 1.21.13 → 1.21.14

package/docs/api/track-download-supabase.js

@@ -0,0 +1,150 @@
+// Download tracking API endpoint using Supabase client
+import { createClient } from '@supabase/supabase-js';
+
+// Initialize Supabase client
+function getSupabaseClient() {
+  const supabaseUrl = process.env.SUPABASE_URL;
+  const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
+  
+  if (!supabaseUrl || !supabaseServiceKey) {
+    throw new Error('Missing Supabase configuration');
+  }
+  
+  return createClient(supabaseUrl, supabaseServiceKey);
+}
+
+// Validate component data
+function validateComponentData(data) {
+  const { type, name, path, category } = data;
+  
+  if (!type || !name) {
+    return { valid: false, error: 'Component type and name are required' };
+  }
+  
+  const validTypes = ['agent', 'command', 'setting', 'hook', 'mcp', 'skill', 'template'];
+  if (!validTypes.includes(type)) {
+    return { valid: false, error: 'Invalid component type' };
+  }
+  
+  if (name.length > 255) {
+    return { valid: false, error: 'Component name too long' };
+  }
+  
+  return { valid: true };
+}
+
+// Get IP address from request
+function getClientIP(req) {
+  return req.headers['x-forwarded-for']?.split(',')[0] ||
+         req.headers['x-real-ip'] ||
+         req.connection?.remoteAddress ||
+         req.socket?.remoteAddress ||
+         '127.0.0.1';
+}
+
+// Get country from Vercel geo headers
+function getCountry(req) {
+  return req.headers['x-vercel-ip-country'] || null;
+}
+
+export default async function handler(req, res) {
+  // Set CORS headers
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, User-Agent');
+  
+  // Handle preflight requests
+  if (req.method === 'OPTIONS') {
+    return res.status(200).json({ ok: true });
+  }
+  
+  // Only accept POST requests
+  if (req.method !== 'POST') {
+    return res.status(405).json({ 
+      error: 'Method not allowed', 
+      allowed: ['POST'] 
+    });
+  }
+  
+  try {
+    // Validate request body
+    const { type, name, path, category, cliVersion } = req.body;
+    const validation = validateComponentData({ type, name, path, category });
+    
+    if (!validation.valid) {
+      return res.status(400).json({ error: validation.error });
+    }
+    
+    // Get client information
+    const ipAddress = getClientIP(req);
+    const country = getCountry(req);
+    const userAgent = req.headers['user-agent'];
+    
+    // Initialize Supabase client
+    const supabase = getSupabaseClient();
+    
+    // Insert download record
+    const { data: insertData, error: insertError } = await supabase
+      .from('component_downloads')
+      .insert({
+        component_type: type,
+        component_name: name,
+        component_path: path,
+        category: category,
+        user_agent: userAgent,
+        ip_address: ipAddress,
+        country: country,
+        cli_version: cliVersion,
+        download_timestamp: new Date().toISOString(),
+        created_at: new Date().toISOString()
+      });
+    
+    if (insertError) {
+      console.error('Supabase insert error:', insertError);
+      throw new Error(`Database insert failed: ${insertError.message}`);
+    }
+    
+    // Update aggregated stats (upsert)
+    const { error: upsertError } = await supabase
+      .from('download_stats')
+      .upsert(
+        {
+          component_type: type,
+          component_name: name,
+          total_downloads: 1,
+          last_download: new Date().toISOString(),
+          updated_at: new Date().toISOString()
+        },
+        {
+          onConflict: 'component_type,component_name',
+          ignoreDuplicates: false
+        }
+      );
+    
+    if (upsertError) {
+      console.error('Supabase upsert error:', upsertError);
+      // Don't fail the request for stats update errors
+    }
+    
+    // Return success response
+    res.status(200).json({
+      success: true,
+      message: 'Download tracked successfully',
+      data: {
+        type,
+        name,
+        timestamp: new Date().toISOString()
+      }
+    });
+    
+  } catch (error) {
+    console.error('Download tracking error:', error);
+    
+    // Return error response
+    res.status(500).json({
+      error: 'Internal server error',
+      message: 'Failed to track download',
+      details: process.env.NODE_ENV === 'development' ? error.message : undefined
+    });
+  }
+}

package/docs/blog/README.md

@@ -0,0 +1,199 @@
+# Blog Management System
+
+Este blog utiliza un sistema dinámico de gestión de artículos basado en JSON.
+
+## 📁 Estructura de Archivos
+
+```
+docs/blog/
+├── index.html              # Página principal del blog
+├── blog-articles.json      # Base de datos de artículos
+├── js/
+│   └── blog-loader.js      # Cargador dinámico de artículos
+└── assets/                 # Imágenes y recursos
+```
+
+## 🚀 Cómo Agregar Nuevos Artículos
+
+Para agregar un nuevo artículo al blog, simplemente edita el archivo `blog-articles.json`:
+
+### 1. Abre el archivo `blog-articles.json`
+
+### 2. Agrega un nuevo objeto en el array `articles`:
+
+```json
+{
+  "id": "unique-article-id",
+  "title": "Título del Artículo",
+  "description": "Descripción breve del artículo (1-2 líneas)",
+  "url": "https://medium.com/@tu-usuario/url-del-articulo",
+  "image": "https://www.aitmpl.com/blog/assets/imagen-cover.png",
+  "category": "Categoría",
+  "publishDate": "2025-02-10",
+  "readTime": "5 min read",
+  "tags": ["Tag1", "Tag2", "Tag3"],
+  "platform": "medium",
+  "order": 5
+}
+```
+
+### 3. Actualiza los metadatos al final del archivo:
+
+```json
+"metadata": {
+  "lastUpdated": "2025-02-10",
+  "totalArticles": 5,
+  "platforms": {
+    "medium": 5,
+    "local": 0
+  }
+}
+```
+
+## 📝 Campos Explicados
+
+| Campo | Tipo | Descripción | Ejemplo |
+|-------|------|-------------|---------|
+| `id` | string | Identificador único del artículo | `"supabase-integration"` |
+| `title` | string | Título completo del artículo | `"Claude Code + Supabase Integration"` |
+| `description` | string | Descripción breve (1-2 líneas) | `"Learn how to integrate..."` |
+| `url` | string | URL completa del artículo | `"https://medium.com/@..."` |
+| `image` | string | URL de la imagen de portada | `"https://www.aitmpl.com/blog/assets/..."` |
+| `category` | string | Categoría del artículo | `"Database"`, `"Development"`, etc. |
+| `publishDate` | string | Fecha de publicación (YYYY-MM-DD) | `"2025-02-10"` |
+| `readTime` | string | Tiempo estimado de lectura | `"5 min read"` |
+| `tags` | array | Array de tags/etiquetas | `["Supabase", "Database", "MCP"]` |
+| `difficulty` | string | Nivel de dificultad del artículo | `"basic"`, `"intermediate"`, `"advanced"` |
+| `order` | number | Orden de aparición (menor = primero) | `1`, `2`, `3`, etc. |
+
+## 🎨 Categorías Recomendadas
+
+- **Database** - Artículos sobre bases de datos
+- **Development** - Desarrollo general
+- **Cloud & AI** - Cloud computing e inteligencia artificial
+- **Documentation** - Documentación y guías
+- **Frontend** - Desarrollo frontend
+- **Backend** - Desarrollo backend
+- **DevOps** - DevOps y CI/CD
+- **Security** - Seguridad
+
+## 🎓 Niveles de Dificultad
+
+Clasifica cada artículo según su complejidad:
+
+- **`basic`** - Verde (#00D084): Artículos introductorios, tutoriales para principiantes
+- **`intermediate`** - Naranja (#FFA500): Requiere conocimientos previos, configuraciones más avanzadas
+- **`advanced`** - Rojo (#FF4444): Temas complejos, integraciones avanzadas, arquitecturas elaboradas
+
+El badge de dificultad se muestra automáticamente en la metadata del artículo.
+
+## 🏷️ Tags Recomendados
+
+Usa tags específicos y relevantes:
+- Tecnologías: `Supabase`, `Next.js`, `React`, `Node.js`
+- Conceptos: `Agents`, `Commands`, `MCP`, `Automation`
+- Herramientas: `Git`, `Docker`, `Kubernetes`
+- Plataformas: `Vercel`, `Google Cloud`, `AWS`
+
+## 📊 Orden de Artículos
+
+Los artículos se muestran según el campo `order`:
+- **Menor número = Aparece primero**
+- Usa números consecutivos: 1, 2, 3, 4, 5...
+- Para reordenar, simplemente cambia los números
+
+## 🔄 Proceso de Publicación
+
+1. **Publica tu artículo** en Medium u otra plataforma
+2. **Copia la URL** del artículo publicado
+3. **Edita** `blog-articles.json`
+4. **Agrega** el nuevo artículo con todos los campos
+5. **Actualiza** los metadatos (totalArticles, lastUpdated)
+6. **Commit y push** los cambios
+
+```bash
+git add docs/blog/blog-articles.json
+git commit -m "Add new blog article: [Título]"
+git push
+```
+
+## 🎯 Badges de Dificultad
+
+El sistema automáticamente muestra un badge de dificultad con colores específicos:
+- **Basic** (Verde): Para artículos introductorios y guías básicas
+- **Intermediate** (Naranja): Para configuraciones más avanzadas
+- **Advanced** (Rojo): Para temas complejos y arquitecturas avanzadas
+
+## ✨ Características
+
+- **Carga Dinámica**: Los artículos se cargan automáticamente desde JSON
+- **Ordenamiento**: Controla el orden con el campo `order`
+- **Seguridad**: HTML escapado automáticamente (prevención XSS)
+- **Performance**: Lazy loading de imágenes
+- **Responsive**: Diseño adaptable a móviles
+- **Loading States**: Indicadores de carga mientras se obtienen los datos
+
+## 🐛 Troubleshooting
+
+### Los artículos no se cargan
+1. Verifica que `blog-articles.json` esté en la raíz de `/docs/blog/`
+2. Revisa la consola del navegador para errores
+3. Asegúrate de que el JSON sea válido (usa un validador JSON online)
+
+### Error de JSON inválido
+- Verifica que todas las comillas sean dobles (`"`)
+- Asegúrate de que no falten comas entre objetos
+- El último elemento del array no debe tener coma final
+
+### Las imágenes no se muestran
+- Verifica que las URLs de las imágenes sean accesibles
+- Usa URLs completas (no relativas)
+- Asegúrate de que las imágenes estén en `/docs/blog/assets/`
+
+## 📱 Testing Local
+
+Para probar localmente:
+
+```bash
+cd docs/blog
+python -m http.server 8000
+# o
+npx http-server
+```
+
+Luego abre: `http://localhost:8000`
+
+## 🎉 Ejemplo Completo
+
+```json
+{
+  "articles": [
+    {
+      "id": "my-new-article",
+      "title": "Amazing New Feature in Claude Code",
+      "description": "Discover how to use the latest feature that will revolutionize your workflow.",
+      "url": "https://medium.com/@dan.avila7/amazing-new-feature-12345",
+      "image": "https://www.aitmpl.com/blog/assets/new-feature-cover.png",
+      "category": "Development",
+      "publishDate": "2025-02-10",
+      "readTime": "6 min read",
+      "tags": ["Claude Code", "Productivity", "Automation"],
+      "difficulty": "intermediate",
+      "order": 1
+    }
+  ],
+  "metadata": {
+    "lastUpdated": "2025-02-10",
+    "totalArticles": 5,
+    "difficultyLevels": {
+      "basic": 2,
+      "intermediate": 2,
+      "advanced": 1
+    }
+  }
+}
+```
+
+---
+
+**¡Eso es todo!** Ahora puedes agregar artículos fácilmente sin tocar el HTML. 🚀

package/docs/blog/blog-articles.json

@@ -0,0 +1,133 @@
+{
+  "articles": [
+    {
+      "id": "supabase-integration",
+      "title": "Claude Code + Supabase Integration: Complete Guide with Agents, Commands and MCP",
+      "description": "Learn how to integrate Supabase with Claude Code using MCP, Agents, and Commands for faster database development.",
+      "url": "https://medium.com/@dan.avila7/claude-code-supabase-integration-complete-guide-with-agents-commands-and-mcp-427613d9051e",
+      "image": "https://miro.medium.com/v2/resize:fit:720/format:webp/1*UkD_4OChMB5_x50ZPledvw.png",
+      "category": "Database",
+      "publishDate": "2025-10-14",
+      "readTime": "5 min read",
+      "tags": ["Supabase", "Database", "Agents", "Commands", "MCP"],
+      "difficulty": "basic",
+      "featured": true,
+      "order": 1
+    },
+    {
+      "id": "git-flow-guide",
+      "title": "Complete Guide to Setting Up Git Flow in Claude Code",
+      "description": "Step-by-step guide to implementing Git Flow workflow in Claude Code for better version control and team collaboration.",
+      "url": "https://medium.com/@dan.avila7/complete-guide-to-setting-up-git-flow-in-claude-code-616477941f78",
+      "image": "https://miro.medium.com/v2/resize:fit:720/format:webp/1*hY3wY-RvsuF4aIFopX9cMg.png",
+      "category": "Development",
+      "publishDate": "2025-10-02",
+      "readTime": "7 min read",
+      "tags": ["Git", "Workflow", "Version Control", "Automation"],
+      "difficulty": "intermediate",
+      "order": 2
+    },
+    {
+      "id": "google-cloud-vertex-ai",
+      "title": "Step-by-Step Guide to Connect Claude Code with Google Cloud Vertex AI",
+      "description": "Complete guide to integrate Claude Code with Google Cloud Vertex AI for enhanced AI capabilities and scalable cloud infrastructure.",
+      "url": "https://medium.com/@dan.avila7/step-by-step-guide-to-connect-claude-code-with-google-cloud-vertex-ai-17e7916e711e",
+      "image": "https://miro.medium.com/v2/resize:fit:720/format:webp/1*1mhKnj46P_xCxovKsQqBuQ.png",
+      "category": "Cloud & AI",
+      "publishDate": "2025-09-27",
+      "readTime": "8 min read",
+      "tags": ["Google Cloud", "Vertex AI", "Integration", "Cloud"],
+      "difficulty": "advanced",
+      "order": 3
+    },
+    {
+      "id": "automated-documentation",
+      "title": "Automated Documentation with Claude Code: Building Self-Updating Docs Using Docusaurus Agent",
+      "description": "Learn how to create self-updating documentation systems using Claude Code and the Docusaurus agent for automatic content generation.",
+      "url": "https://medium.com/@dan.avila7/automated-documentation-with-claude-code-building-self-updating-docs-using-docusaurus-agent-2c85d3ec0e19",
+      "image": "https://miro.medium.com/v2/resize:fit:720/format:webp/1*Qxn21wqw6J4QACgoZkWWpg.png",
+      "category": "Documentation",
+      "publishDate": "2025-09-17",
+      "readTime": "6 min read",
+      "tags": ["Documentation", "Docusaurus", "Automation", "Agents"],
+      "difficulty": "advanced",
+      "order": 4
+    },
+    {
+      "id": "claude-code-templates-guide",
+      "title": "Complete Guide to Claude Code Templates",
+      "description": "Comprehensive introduction to Claude Code Templates, covering installation, configuration, and best practices for AI-powered development.",
+      "url": "https://medium.com/latinxinai/complete-guide-to-claude-code-templates-4e53d6688b34",
+      "image": "https://miro.medium.com/v2/resize:fit:1400/format:webp/1*YwxsC2eeW5fW1K6E8VBZpA.png",
+      "category": "Getting Started",
+      "publishDate": "2025-08-27",
+      "readTime": "5 min read",
+      "tags": ["Getting Started", "Templates", "Installation", "Configuration"],
+      "difficulty": "basic",
+      "featured": true,
+      "order": 5
+    },
+    {
+      "id": "tunnel-vision-fix",
+      "title": "Fixed Claude Code's 2024 Tunnel Vision with a Simple Hook",
+      "description": "Learn how to solve Claude Code's tunnel vision problem using a simple automation hook for better context awareness.",
+      "url": "https://medium.com/@dan.avila7/fixed-claude-codes-2024-tunnel-vision-with-a-simple-hook-cb32cfaf9b27",
+      "image": "https://miro.medium.com/v2/resize:fit:720/format:webp/1*T5gG6RGS-4dpD0K6mhnkHA.png",
+      "category": "Automation",
+      "publishDate": "2025-09-13",
+      "readTime": "3 min read",
+      "tags": ["Hooks", "Automation", "Context", "Problem Solving"],
+      "difficulty": "basic",
+      "order": 6
+    },
+    {
+      "id": "telegram-integration",
+      "title": "Step-by-Step Guide: Connect Telegram with Claude Code Hooks",
+      "description": "Complete tutorial for integrating Telegram notifications with Claude Code using automation hooks.",
+      "url": "https://medium.com/@dan.avila7/step-by-step-guide-connect-telegram-with-claude-code-hooks-1686fadcee65",
+      "image": "https://miro.medium.com/v2/resize:fit:720/format:webp/1*CMFx_4KLxgIbv8xZ6UCpQw.png",
+      "category": "Integrations",
+      "publishDate": "2025-08-18",
+      "readTime": "4 min read",
+      "tags": ["Telegram", "Hooks", "Notifications", "Integration"],
+      "difficulty": "basic",
+      "featured": true,
+      "order": 7
+    },
+    {
+      "id": "vercel-statusline",
+      "title": "Vercel Statusline Tutorial for Claude Code",
+      "description": "Learn how to create a custom Vercel statusline for Claude Code to monitor deployments and project status.",
+      "url": "https://medium.com/@dan.avila7/vercel-statusline-tutorial-for-claude-code-14755f113d76",
+      "image": "https://miro.medium.com/v2/resize:fit:720/format:webp/1*dGIs0XoRdrs9STzM-BWDSA.png",
+      "category": "Customization",
+      "publishDate": "2025-08-16",
+      "readTime": "3 min read",
+      "tags": ["Vercel", "Statusline", "Deployment", "Monitoring"],
+      "difficulty": "basic",
+      "order": 8
+    },
+    {
+      "id": "prepare-codebase",
+      "title": "Step-by-Step Guide: Prepare Your Codebase for Claude Code",
+      "description": "Advanced guide to structuring and optimizing your codebase for maximum efficiency with Claude Code.",
+      "url": "https://medium.com/@dan.avila7/step-by-step-guide-prepare-your-codebase-for-claude-code-3e14262566e9",
+      "image": "https://miro.medium.com/v2/resize:fit:720/format:webp/1*lV1ujaM_2kDSJXNlmLIg2A.png",
+      "category": "Best Practices",
+      "publishDate": "2025-08-06",
+      "readTime": "4 min read",
+      "tags": ["Best Practices", "Code Organization", "Optimization", "Setup"],
+      "difficulty": "advanced",
+      "order": 9
+    }
+  ],
+  "metadata": {
+    "lastUpdated": "2025-02-03",
+    "totalArticles": 9,
+    "difficultyLevels": {
+      "basic": 5,
+      "intermediate": 1,
+      "advanced": 3
+    }
+  }
+}