6.9 KiB
6.9 KiB
📚 La Biblioteca
Visor de documentos EPUB accesibles desde IPFS
Una aplicación web moderna para explorar y leer libros en formato EPUB almacenados en la red descentralizada IPFS. Desarrollada con React, ofrece una experiencia de lectura fluida con múltiples opciones de personalización y accesibilidad.
✨ Características
📖 Lectura
- Visor EPUB integrado con modo de scroll continuo
- Tabla de contenidos navegable
- Control de tipografía - ajusta el tamaño de fuente (50% - 200%)
- Temas de lectura - Claro, Sepia y Oscuro
- Indicador de progreso - muestra tu avance en tiempo real
- Navegación intuitiva - botones de anterior/siguiente página
🔍 Exploración
- Buscador en tiempo real - filtra por título instantáneamente
- Paginación configurable - 10, 50 o 100 libros por página
- Catálogo completo - acceso a toda la biblioteca IPFS
- Selector de Gateway - 9 gateways IPFS optimizados por velocidad
🌐 Compartir y Descargar
- Enlaces directos - comparte libros específicos con un solo clic
- Descarga EPUB - guarda libros localmente con su nombre original
- URLs amigables - enlaces permanentes a través de IPFS
- Múltiples gateways - resiliencia y velocidad
♿ Accesibilidad
- WCAG 2.1 AA - cumplimiento de estándares de accesibilidad
- Navegación por teclado - control completo sin ratón
- Lectores de pantalla - soporte ARIA completo
- Skip links - navegación rápida al contenido principal
- Alto contraste - mejores colores para legibilidad
- Elementos semánticos - HTML5 semántico correcto
🚀 Inicio Rápido
Prerequisitos
- Node.js 16 o superior
- npm o yarn
Instalación
# Clonar el repositorio
git clone https://git.manalejandro.com/ale/labiblioteca.git
cd labiblioteca
# Instalar dependencias
npm install
# Iniciar servidor de desarrollo
npm start
La aplicación se abrirá automáticamente en http://localhost:3000
Compilación para Producción
# Generar build optimizado
npm run build
# La carpeta 'build' contendrá los archivos listos para desplegar
📋 Uso
Explorar el Catálogo
- Al abrir la aplicación, verás el catálogo completo de libros
- Usa el buscador para filtrar por título
- Ajusta la paginación según tus preferencias
- Cambia el gateway IPFS si experimentas lentitud
Leer un Libro
- Haz clic en cualquier libro del catálogo
- El visor se abrirá con el libro cargado
- Usa los controles de la cabecera para:
- 📥 Descargar el EPUB
- 🔗 Compartir el enlace directo
- 📑 Ver la tabla de contenidos
- ⚙️ Ajustar configuración (tema, tamaño de fuente)
- Navega con los botones de anterior/siguiente o scroll
Compartir un Libro
- Abre el libro que quieres compartir
- Haz clic en el botón de compartir (🔗)
- El enlace se copiará automáticamente al portapapeles
- Compártelo - cualquiera con el enlace podrá leer el libro
🏗️ Arquitectura del Proyecto
labiblioteca/
├── public/
│ ├── index.html # HTML principal con parches de accesibilidad
│ └── manifest.json # Configuración PWA
├── src/
│ ├── components/
│ │ ├── BookList.js # Lista y búsqueda de libros
│ │ ├── EpubViewer.js # Visor de EPUB
│ │ ├── ErrorBoundary.js # Captura de errores React
│ │ └── GatewaySelector.js # Selector de gateway IPFS
│ ├── styles/
│ │ ├── BookList.css
│ │ ├── EpubViewer.css
│ │ └── GatewaySelector.css
│ ├── utils/
│ │ └── ipfsParser.js # Parser del catálogo IPFS
│ ├── App.js # Componente principal
│ ├── App.css # Estilos globales
│ ├── index.js # Punto de entrada
│ └── setupErrorHandler.js # Manejo global de errores
├── package.json
└── README.md
🛠️ Tecnologías Utilizadas
- React 19.0.0 - Framework de UI
- epubjs - Renderizado de archivos EPUB
- react-icons - Iconos de interfaz
- IPFS - Almacenamiento descentralizado
- Create React App - Configuración y build
🌍 Gateways IPFS
La aplicación soporta múltiples gateways IPFS para garantizar disponibilidad y velocidad:
- EU Orbitor (Europa)
- IPFS Orbitor (Global)
- IPFS.io (Oficial)
- Cloudflare IPFS (CDN)
- Dweb.link (Oficial)
- Pinata (Pinning service)
- 4everland (Web3)
- Gateway.pinata.cloud
- NFT.storage
🔧 Configuración Avanzada
Cambiar el Catálogo IPFS
Edita src/utils/ipfsParser.js y modifica la constante IPFS_CATALOG_HASH:
const IPFS_CATALOG_HASH = 'QmTuHashDelCatalogo';
Agregar Nuevos Gateways
En src/utils/ipfsParser.js, agrega nuevos gateways al array IPFS_GATEWAYS:
export const IPFS_GATEWAYS = [
// ... gateways existentes
{ name: 'Mi Gateway', url: 'https://mi-gateway.com' }
];
🐛 Solución de Problemas
Los libros no cargan
- Prueba cambiando el gateway IPFS
- Verifica tu conexión a internet
- Algunos gateways pueden estar temporalmente caídos
Errores en el visor EPUB
- Los errores de ResizeObserver son normales y están silenciados
- Si el libro no se renderiza, intenta recargarlo
- Algunos EPUBs pueden tener formato incompatible
El catálogo está vacío
- Verifica que el hash del catálogo IPFS sea correcto
- Prueba con diferentes gateways
- Revisa la consola del navegador para errores de red
🤝 Contribuciones
Las contribuciones son bienvenidas. Por favor:
- Fork el proyecto
- Crea una rama para tu feature (
git checkout -b feature/AmazingFeature) - Commit tus cambios (
git commit -m 'Add some AmazingFeature') - Push a la rama (
git push origin feature/AmazingFeature) - Abre un Pull Request
📄 Licencia
Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.
👤 Autor
Ale - git.manalejandro.com
🔗 Enlaces
- Repositorio: https://git.manalejandro.com/ale/labiblioteca
- IPFS: https://ipfs.io
- React: https://react.dev
- Epub.js: https://github.com/futurepress/epub.js
🙏 Agradecimientos
- A la comunidad de IPFS por la infraestructura descentralizada
- A los desarrolladores de Epub.js por el excelente visor
- A todos los contribuidores de bibliotecas de código abierto utilizadas
⭐ Si este proyecto te resulta útil, considera darle una estrella en el repositorio