forked from lab/libre-marker
75 lines
2.6 KiB
Markdown
75 lines
2.6 KiB
Markdown
# 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)
|