229
README.md
229
README.md
@@ -1,70 +1,223 @@
|
||||
# Getting Started with Create React App
|
||||
# 📚 La Biblioteca
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
**Visor de documentos EPUB accesibles desde IPFS**
|
||||
|
||||
## Available Scripts
|
||||
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.
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
|
||||
|
||||
|
||||
### `npm start`
|
||||
## ✨ Características
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
### 📖 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
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
### 🔍 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
|
||||
|
||||
### `npm test`
|
||||
### 🌐 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
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
### ♿ 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
|
||||
|
||||
### `npm run build`
|
||||
## 🚀 Inicio Rápido
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
### Prerequisitos
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
- Node.js 16 o superior
|
||||
- npm o yarn
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
### Instalación
|
||||
|
||||
### `npm run eject`
|
||||
```bash
|
||||
# Clonar el repositorio
|
||||
git clone https://git.manalejandro.com/ale/labiblioteca.git
|
||||
cd labiblioteca
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
# Instalar dependencias
|
||||
npm install
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
# Iniciar servidor de desarrollo
|
||||
npm start
|
||||
```
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
La aplicación se abrirá automáticamente en [http://localhost:3000](http://localhost:3000)
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
### Compilación para Producción
|
||||
|
||||
## Learn More
|
||||
```bash
|
||||
# Generar build optimizado
|
||||
npm run build
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
# La carpeta 'build' contendrá los archivos listos para desplegar
|
||||
```
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
## 📋 Uso
|
||||
|
||||
### Code Splitting
|
||||
### Explorar el Catálogo
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
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
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
### Leer un Libro
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
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
|
||||
|
||||
### Making a Progressive Web App
|
||||
### Compartir un Libro
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
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
|
||||
|
||||
### Advanced Configuration
|
||||
## 🏗️ Arquitectura del Proyecto
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
```
|
||||
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
|
||||
```
|
||||
|
||||
### Deployment
|
||||
## 🛠️ Tecnologías Utilizadas
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
- **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
|
||||
|
||||
### `npm run build` fails to minify
|
||||
## 🌍 Gateways IPFS
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
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**
|
||||
|
||||
Referencia en una nueva incidencia
Block a user