128 lines
3.2 KiB
Markdown
128 lines
3.2 KiB
Markdown
# MangaDL
|
|
|
|
A web UI for browsing and downloading manga using [ifetch](https://github.com/FelixSiegel/ifetch) as the backend.
|
|
|
|
## Quick Start
|
|
|
|
### Using Docker Compose (Recommended)
|
|
|
|
```bash
|
|
docker-compose up -d
|
|
```
|
|
|
|
This will start:
|
|
- **ifetch backend** on port 8080
|
|
- **Frontend** on port 3000
|
|
|
|
Access the web UI at `http://localhost:3000`
|
|
|
|
### Manual Setup
|
|
|
|
#### 1. Start the Backend (ifetch)
|
|
|
|
```bash
|
|
# Using Docker
|
|
docker run -d \
|
|
--name ifetch \
|
|
-p 8080:8080 \
|
|
-v ./downloads:/app/downloads \
|
|
-v ./config:/app/config \
|
|
ghcr.io/felixsiegel/ifetch:latest
|
|
|
|
# Or build from source
|
|
git clone https://github.com/FelixSiegel/ifetch.git
|
|
cd ifetch
|
|
cargo build --release
|
|
./target/release/ifetch --server --port 8080 --output ./downloads --config ./config
|
|
```
|
|
|
|
#### 2. Start the Frontend
|
|
|
|
```bash
|
|
cd frontend
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Access the web UI at `http://localhost:3000`
|
|
|
|
## Features
|
|
|
|
- 🔍 **Search manga** from MangaKatana
|
|
- 📚 **Browse manga details** - cover, description, genres, authors, status
|
|
- 📖 **Read chapters** with a full-screen reader
|
|
- ⬇️ **Download chapters** via the ifetch backend
|
|
- 🌓 **Dark/Light mode** support
|
|
- 📱 **Responsive design** - works on mobile and desktop
|
|
- ⌨️ **Keyboard navigation** in reader (←/→ for pages, F for fullscreen, Esc to exit)
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
MangaDL/
|
|
├── docker-compose.yml # Docker Compose for full stack
|
|
├── downloads/ # Manga downloads (mounted to ifetch)
|
|
├── config/ # ifetch config (mounted to ifetch)
|
|
├── frontend/ # React + TypeScript frontend
|
|
│ ├── src/
|
|
│ │ ├── api/ # API client
|
|
│ │ ├── components/ # React components
|
|
│ │ ├── pages/ # Page components
|
|
│ │ ├── store/ # Zustand state management
|
|
│ │ └── types/ # TypeScript types
|
|
│ ├── Dockerfile # Frontend Dockerfile
|
|
│ ├── nginx.conf # Nginx config for production
|
|
│ └── package.json
|
|
└── README.md
|
|
```
|
|
|
|
## API Endpoints Used
|
|
|
|
The frontend consumes these ifetch API endpoints:
|
|
|
|
- `GET /api/search?q={query}` - Search manga
|
|
- `GET /api/manga/{id}` - Get manga details
|
|
- `GET /api/manga/{id}/chapters` - Get chapters (triggers background download)
|
|
- `GET /api/chapter/{id}::{number}/pages` - Get page URLs for a chapter
|
|
- `GET /api/image/{id}::{number}/{filename}` - Serve chapter images
|
|
|
|
## Keyboard Shortcuts (Reader)
|
|
|
|
| Key | Action |
|
|
|-----|--------|
|
|
| ← / → | Previous / Next page |
|
|
| F | Toggle fullscreen |
|
|
| Esc | Exit fullscreen / Close reader |
|
|
|
|
## Configuration
|
|
|
|
### Backend (ifetch)
|
|
|
|
Environment variables for ifetch:
|
|
- `IFETCH_PORT` - Server port (default: 8080)
|
|
- `IFETCH_THREADS` - Download threads (default: 1)
|
|
- `IFETCH_CRON_HOURS` - Auto-update interval in hours (default: 12)
|
|
- `DISCORD_WEBHOOK_URL` - Optional Discord notifications
|
|
|
|
### Frontend
|
|
|
|
Environment variables (`.env`):
|
|
- `VITE_API_BASE` - Backend API base URL (default: `http://localhost:8080`)
|
|
|
|
## Development
|
|
|
|
```bash
|
|
# Frontend development
|
|
cd frontend
|
|
npm run dev
|
|
|
|
# Build for production
|
|
npm run build
|
|
|
|
# Preview production build
|
|
npm run preview
|
|
```
|
|
|
|
## License
|
|
|
|
MIT |