fix: resolver problema de URLs sin extensión .html en producción (#44)

* fix(config): agregar use_directory_urls para manejar URLs sin extensión

- Configurar use_directory_urls: true en mkdocs.yml
- Permite que URLs como /meetups/ funcionen correctamente
- Mantiene compatibilidad con estructura de directorios de MkDocs

* feat(infra): implementar CloudFront Function para URLs sin extensión

- Agregar CloudFront Function url_rewrite para manejar URLs sin .html
- Función redirige /meetups/ a /meetups/index.html automáticamente
- Asociar función con todos los cache behaviors para consistencia
- Soluciona problema de enlaces que no funcionan en producción

* docs: agregar documentación para fix de URLs sin extensión

- Documentar problema de URLs que no funcionan en producción
- Explicar solución implementada con CloudFront Function
- Incluir pasos de despliegue y verificación
- Agregar notas técnicas sobre funcionamiento de la solución

Author: pixelead0

docs/URL_FIX_DOCUMENTATION.md

@@ -0,0 +1,85 @@
+# Fix para URLs sin extensión .html en producción
+
+## Problema
+Los enlaces funcionaban correctamente en local pero no en producción. Por ejemplo:
+- ❌ `https://pythoncdmx.org/meetups/` no funcionaba
+- ✅ `https://pythoncdmx.org/meetups/index.html` sí funcionaba
+
+## Causa
+El problema se debía a que CloudFront no estaba configurado para manejar URLs sin extensión `.html`. Cuando MkDocs genera el sitio con `use_directory_urls: true`, crea URLs como `/meetups/` que apuntan a `/meetups/index.html`, pero CloudFront no sabía cómo resolver estas URLs.
+
+## Solución Implementada
+
+### 1. Configuración en mkdocs.yml
+```yaml
+# URL configuration
+use_directory_urls: true
+```
+
+### 2. CloudFront Function
+Se agregó una función CloudFront que maneja automáticamente las URLs sin extensión:
+
+```javascript
+function handler(event) {
+    var request = event.request;
+    var uri = request.uri;
+
+    // If the URI ends with a slash, try to serve index.html
+    if (uri.endsWith('/')) {
+        request.uri = uri + 'index.html';
+    }
+    // If the URI doesn't have an extension, try to add .html
+    else if (!uri.includes('.') && !uri.endsWith('/')) {
+        request.uri = uri + '.html';
+    }
+
+    return request;
+}
+```
+
+### 3. Asociación con Cache Behaviors
+La función se asoció con todos los cache behaviors de CloudFront para asegurar consistencia.
+
+## Archivos Modificados
+
+1. **mkdocs.yml**: Agregada configuración `use_directory_urls: true`
+2. **terraform/cloudfront.tf**:
+   - Agregada CloudFront Function `url_rewrite`
+   - Asociada la función con todos los cache behaviors
+
+## Despliegue
+
+Para aplicar estos cambios:
+
+1. **Aplicar cambios de Terraform**:
+   ```bash
+   cd terraform
+   terraform plan
+   terraform apply
+   ```
+
+2. **Desplegar el sitio**:
+   ```bash
+   # Los cambios se aplicarán automáticamente en el próximo deploy
+   git push origin main
+   ```
+
+## Verificación
+
+Después del despliegue, verificar que funcionen:
+- ✅ `https://pythoncdmx.org/meetups/`
+- ✅ `https://pythoncdmx.org/meetups/index.html`
+- ✅ `https://pythoncdmx.org/about/`
+- ✅ `https://pythoncdmx.org/about/index.html`
+
+## Notas Técnicas
+
+- La CloudFront Function se ejecuta en el edge, por lo que tiene latencia mínima
+- La función solo modifica la URI si es necesario, sin afectar assets estáticos
+- Los cache behaviors mantienen sus configuraciones originales de TTL
+- La solución es compatible con el comportamiento existente de MkDocs
+
+## Referencias
+
+- [MkDocs use_directory_urls documentation](https://www.mkdocs.org/user-guide/configuration/#use_directory_urls)
+- [CloudFront Functions documentation](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cloudfront-functions.html)

mkdocs.yml

@@ -11,6 +11,9 @@ repo_url: https://github.com/PythonMexico/pythonCDMX/
 # Copyright
 copyright: Copyright © 2025 Python CDMX
 
+# URL configuration
+use_directory_urls: true
+
 # Theme configuration
 theme:
   name: material

terraform/cloudfront.tf

@@ -7,6 +7,31 @@ resource "aws_cloudfront_origin_access_control" "website" {
   signing_protocol                  = "sigv4"
 }
 
+# CloudFront Function to handle URLs without .html extension
+resource "aws_cloudfront_function" "url_rewrite" {
+  name    = "pythoncdmx-url-rewrite"
+  runtime = "cloudfront-js-1.0"
+  comment = "Rewrite URLs without .html extension"
+  publish = true
+  code    = <<-EOT
+function handler(event) {
+    var request = event.request;
+    var uri = request.uri;
+
+    // If the URI ends with a slash, try to serve index.html
+    if (uri.endsWith('/')) {
+        request.uri = uri + 'index.html';
+    }
+    // If the URI doesn't have an extension, try to add .html
+    else if (!uri.includes('.') && !uri.endsWith('/')) {
+        request.uri = uri + '.html';
+    }
+
+    return request;
+}
+EOT
+}
+
 # CloudFront distribution
 resource "aws_cloudfront_distribution" "website" {
   enabled             = true
@@ -42,6 +67,12 @@ resource "aws_cloudfront_distribution" "website" {
     default_ttl            = 3600    # 1 hour
     max_ttl                = 86400   # 24 hours
     compress               = true
+
+    # Associate CloudFront Function for URL rewriting
+    function_association {
+      event_type   = "viewer-request"
+      function_arn = aws_cloudfront_function.url_rewrite.arn
+    }
   }
 
   # Cache behavior for static assets (images, CSS, JS)
@@ -63,6 +94,12 @@ resource "aws_cloudfront_distribution" "website" {
     default_ttl            = 86400   # 24 hours
     max_ttl                = 31536000 # 1 year
     compress               = true
+
+    # Associate CloudFront Function for URL rewriting
+    function_association {
+      event_type   = "viewer-request"
+      function_arn = aws_cloudfront_function.url_rewrite.arn
+    }
   }
 
   ordered_cache_behavior {
@@ -83,6 +120,12 @@ resource "aws_cloudfront_distribution" "website" {
     default_ttl            = 86400   # 24 hours
     max_ttl                = 31536000 # 1 year
     compress               = true
+
+    # Associate CloudFront Function for URL rewriting
+    function_association {
+      event_type   = "viewer-request"
+      function_arn = aws_cloudfront_function.url_rewrite.arn
+    }
   }
 
   ordered_cache_behavior {
@@ -103,6 +146,12 @@ resource "aws_cloudfront_distribution" "website" {
     default_ttl            = 604800  # 7 days
     max_ttl                = 31536000 # 1 year
     compress               = true
+
+    # Associate CloudFront Function for URL rewriting
+    function_association {
+      event_type   = "viewer-request"
+      function_arn = aws_cloudfront_function.url_rewrite.arn
+    }
   }
 
   # Custom error responses for SPA-like behavior