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`:

{
  "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:

"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

Publica tu artículo en Medium u otra plataforma
Copia la URL del artículo publicado
Edita blog-articles.json
Agrega el nuevo artículo con todos los campos
Actualiza los metadatos (totalArticles, lastUpdated)
Commit y push los cambios

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

Verifica que blog-articles.json esté en la raíz de /docs/blog/
Revisa la consola del navegador para errores
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:

cd docs/blog
python -m http.server 8000
# o
npx http-server

Luego abre: http://localhost:8000

🎉 Ejemplo Completo

{
  "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. 🚀

README.md

Blog Management System

📁 Estructura de Archivos