# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Proyecto Overview

**Libre-marker** es un visor/editor de archivos Markdown que funciona completamente en el navegador usando Nginx + JavaScript vanilla. El objetivo es servir archivos `.md` de forma transparente renderizándolos como HTML sin necesidad de PHP o bases de datos.

### Arquitectura de Dos Fases

1. **FASE 1 - Visor simple**: Nginx intercepta peticiones a archivos `.md` y las redirige transparentemente a `visor.html`, que usa la librería [Marked.js](https://github.com/markedjs/marked/) para renderizar Markdown a HTML en el cliente.

2. **FASE 2 - Editor live** (planificado): Añadir capacidad de edición online con preview en tiempo real, similar a la demo de Marked.js (ver `Screenshots/markedJS-demo.png`).

## Componentes Clave

### visor.html
Archivo HTML autocontenido que:
- Recibe parámetro `?file=nombre.md` en la URL
- Hace fetch del archivo Markdown
- Lo convierte a HTML usando `marked.parse()`
- Lo renderiza en el navegador

### Configuración Nginx (no incluida en repo)
La redirección mágica se hace en `/etc/nginx/sites-enabled/`:

```nginx
location ~ \.md$ {
    try_files $uri @markdown_viewer;
}

location @markdown_viewer {
    rewrite ^/(.*\.md)$ /visor.html?file=$1 last;
}
```

**Resultado**: El usuario ve `sitio.com/manual.md` en la URL pero recibe HTML renderizado.

## Flujo de Trabajo

### Testing Local
Para probar sin Nginx, abre directamente:
```bash
firefox visor.html?file=README.md
# o con servidor HTTP simple:
python3 -m http.server 8000
# Luego: http://localhost:8000/README.md
```

### Deployment
1. Copiar archivos al directorio web (ej: `/var/www/sitio/`)
2. Aplicar configuración Nginx mostrada en README.md
3. Reiniciar: `sudo systemctl restart nginx`
4. Limpiar caché del navegador (Ctrl+Shift+R)

## Dependencias Externas

- **Marked.js**: Cargado vía CDN desde `https://cdn.jsdelivr.net/npm/marked/marked.min.js`
- Sin dependencias de backend (solo Nginx como servidor web estático)

## Principios de Desarrollo

- **Vanilla JavaScript**: No frameworks, solo ES6+
- **KISS**: Solución minimalista sin servidor de aplicaciones
- **Cliente-side rendering**: Todo el procesamiento ocurre en el navegador
- **Sin estado**: Cada petición es independiente, sin sesiones

## Próximos Pasos (FASE 2)

Para implementar el editor live, considerar:
- Agregar textarea para edición
- Split view: editor (izquierda) + preview (derecha)
- Actualización en tiempo real con event listeners
- Opción de guardar cambios (requeriría backend o LocalStorage)