102 lines
2.8 KiB
Markdown
102 lines
2.8 KiB
Markdown
# Sunday Comics - Webcomic Flask App
|
|
|
|
A Flask-based webcomic website with server-side rendering using Jinja2 templates.
|
|
|
|
## Features
|
|
|
|
- Comic viewer with navigation (First, Previous, Next, Latest)
|
|
- Archive page with thumbnail grid
|
|
- Responsive design
|
|
- Server-side rendering with Jinja2
|
|
- Clean, comic-focused layout
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
sunday/
|
|
├── app.py # Main Flask application
|
|
├── requirements.txt # Python dependencies
|
|
├── templates/ # Jinja2 templates
|
|
│ ├── base.html # Base template with navigation
|
|
│ ├── index.html # Latest comic page
|
|
│ ├── comic.html # Individual comic viewer
|
|
│ ├── archive.html # Archive grid
|
|
│ ├── about.html # About page
|
|
│ ├── contact.html # Contact page
|
|
│ └── 404.html # Error page
|
|
└── static/ # Static files
|
|
├── css/
|
|
│ └── style.css # Main stylesheet
|
|
├── js/
|
|
└── images/ # Comic images
|
|
└── thumbs/ # Thumbnail images for archive
|
|
```
|
|
|
|
## Setup
|
|
|
|
1. Install dependencies:
|
|
```bash
|
|
pip install -r requirements.txt
|
|
```
|
|
|
|
2. Run the application:
|
|
```bash
|
|
python app.py
|
|
```
|
|
|
|
3. Visit http://127.0.0.1:5000 in your browser
|
|
|
|
## Adding Comics
|
|
|
|
Currently, comics are stored in the `COMICS` list in `app.py`. Each comic needs:
|
|
|
|
```python
|
|
{
|
|
'number': 1, # Comic number (sequential)
|
|
'title': 'Comic Title', # Title of the comic
|
|
'filename': 'comic-001.png', # Image filename
|
|
'date': '2025-01-01', # Publication date
|
|
'alt_text': 'Alt text for comic', # Accessibility text
|
|
'transcript': 'Optional transcript' # Optional transcript
|
|
}
|
|
```
|
|
|
|
### Adding a New Comic
|
|
|
|
1. Save your comic image in `static/images/` (e.g., `comic-001.png`)
|
|
2. Optionally, create a thumbnail in `static/images/thumbs/` with the same filename
|
|
3. Add the comic entry to the `COMICS` list in `app.py`
|
|
|
|
## Upgrading to a Database
|
|
|
|
For production use, consider replacing the `COMICS` list with a database:
|
|
|
|
- SQLite for simple setups
|
|
- PostgreSQL/MySQL for production
|
|
- Use Flask-SQLAlchemy for ORM support
|
|
|
|
## Customization
|
|
|
|
### Branding
|
|
- Update "Sunday Comics" references in `templates/base.html`
|
|
- Update site title and footer text
|
|
|
|
### Styling
|
|
- Modify `static/css/style.css` to change colors, fonts, and layout
|
|
- Current color scheme uses blue (#3498db) and dark blue-gray (#2c3e50)
|
|
|
|
### About Page
|
|
- Edit `templates/about.html` to add your bio and comic information
|
|
|
|
## Pages
|
|
|
|
- `/` - Shows the latest comic
|
|
- `/comic/<id>` - View a specific comic by number
|
|
- `/archive` - Browse all comics in a grid
|
|
- `/about` - About the comic and author
|
|
- `/contact` - Contact form
|
|
|
|
## License
|
|
|
|
[Add your license here]
|