224 líneas
6.9 KiB
Markdown
224 líneas
6.9 KiB
Markdown
# 📚 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
|
|
|
|
```bash
|
|
# 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](http://localhost:3000)
|
|
|
|
### Compilación para Producción
|
|
|
|
```bash
|
|
# Generar build optimizado
|
|
npm run build
|
|
|
|
# La carpeta 'build' contendrá los archivos listos para desplegar
|
|
```
|
|
|
|
## 📋 Uso
|
|
|
|
### Explorar el Catálogo
|
|
|
|
1. Al abrir la aplicación, verás el catálogo completo de libros
|
|
2. Usa el **buscador** para filtrar por título
|
|
3. Ajusta la **paginación** según tus preferencias
|
|
4. Cambia el **gateway IPFS** si experimentas lentitud
|
|
|
|
### Leer un Libro
|
|
|
|
1. Haz clic en cualquier libro del catálogo
|
|
2. El visor se abrirá con el libro cargado
|
|
3. 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)
|
|
4. Navega con los botones de anterior/siguiente o scroll
|
|
|
|
### Compartir un Libro
|
|
|
|
1. Abre el libro que quieres compartir
|
|
2. Haz clic en el botón de compartir (🔗)
|
|
3. El enlace se copiará automáticamente al portapapeles
|
|
4. 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:
|
|
|
|
1. EU Orbitor (Europa)
|
|
2. IPFS Orbitor (Global)
|
|
3. IPFS.io (Oficial)
|
|
4. Cloudflare IPFS (CDN)
|
|
5. Dweb.link (Oficial)
|
|
6. Pinata (Pinning service)
|
|
7. 4everland (Web3)
|
|
8. Gateway.pinata.cloud
|
|
9. NFT.storage
|
|
|
|
## 🔧 Configuración Avanzada
|
|
|
|
### Cambiar el Catálogo IPFS
|
|
|
|
Edita `src/utils/ipfsParser.js` y modifica la constante `IPFS_CATALOG_HASH`:
|
|
|
|
```javascript
|
|
const IPFS_CATALOG_HASH = 'QmTuHashDelCatalogo';
|
|
```
|
|
|
|
### Agregar Nuevos Gateways
|
|
|
|
En `src/utils/ipfsParser.js`, agrega nuevos gateways al array `IPFS_GATEWAYS`:
|
|
|
|
```javascript
|
|
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:
|
|
|
|
1. Fork el proyecto
|
|
2. Crea una rama para tu feature (`git checkout -b feature/AmazingFeature`)
|
|
3. Commit tus cambios (`git commit -m 'Add some AmazingFeature'`)
|
|
4. Push a la rama (`git push origin feature/AmazingFeature`)
|
|
5. 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](https://git.manalejandro.com/ale)
|
|
|
|
## 🔗 Enlaces
|
|
|
|
- **Repositorio**: [https://git.manalejandro.com/ale/labiblioteca](https://git.manalejandro.com/ale/labiblioteca)
|
|
- **IPFS**: [https://ipfs.io](https://ipfs.io)
|
|
- **React**: [https://react.dev](https://react.dev)
|
|
- **Epub.js**: [https://github.com/futurepress/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**
|