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

FASE 1 - Visor simple: Nginx intercepta peticiones a archivos .md y las redirige transparentemente a visor.html, que usa la librería Marked.js para renderizar Markdown a HTML en el cliente.
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/:

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:

firefox visor.html?file=README.md
# o con servidor HTTP simple:
python3 -m http.server 8000
# Luego: http://localhost:8000/README.md

Deployment

Copiar archivos al directorio web (ej: /var/www/sitio/)
Aplicar configuración Nginx mostrada en README.md
Reiniciar: sudo systemctl restart nginx
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)

2.6 KiB Raw Blame History