Add Docker configuration and docker-compose.yml for Red Head project
This commit is contained in:
Jarian Cottingham
parent
640600e4ab
commit
7333cd3d9a
72
.gitignore
vendored
72
.gitignore
vendored
@ -1,11 +1,69 @@
|
|||||||
# Created by venv; see https://docs.python.org/3/library/venv.html
|
# Byte-compiled / optimized / DLL files
|
||||||
|
__pycache__/
|
||||||
|
*.py[cod]
|
||||||
|
*$py.class
|
||||||
|
|
||||||
bin/
|
# CPython cache
|
||||||
include/
|
__pycache__/
|
||||||
|
|
||||||
|
# Distribution / packaging
|
||||||
|
.Python
|
||||||
|
build/
|
||||||
|
develop-eggs/
|
||||||
|
dist/
|
||||||
|
downloads/
|
||||||
|
eggs/
|
||||||
|
.eggs/
|
||||||
lib/
|
lib/
|
||||||
|
lib64/
|
||||||
|
parts/
|
||||||
|
sdist/
|
||||||
|
var/
|
||||||
|
wheels/
|
||||||
|
*.egg-info/
|
||||||
|
.installed.cfg
|
||||||
|
*.egg
|
||||||
|
|
||||||
__pycache__
|
# Virtual environments
|
||||||
pyvenv.cfg
|
venv/
|
||||||
|
env/
|
||||||
|
ENV/
|
||||||
|
env/
|
||||||
|
|
||||||
/share
|
# IDE
|
||||||
/etc
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
|
||||||
|
# OS generated files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Docker
|
||||||
|
docker-compose.override.yml
|
||||||
|
.dockerignore
|
||||||
|
*.docker
|
||||||
|
|
||||||
|
# Python
|
||||||
|
*.pyc
|
||||||
|
__pycache__/
|
||||||
|
|
||||||
|
# Local configuration
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Cache directories
|
||||||
|
website/cache/
|
||||||
|
cache/
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Temporary files
|
||||||
|
*~
|
||||||
|
|
||||||
|
# System files
|
||||||
|
.DS_Store
|
||||||
|
._*
|
||||||
48
Dockerfile
Normal file
48
Dockerfile
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
# Multi-stage Dockerfile for Red Head Python Backend
|
||||||
|
|
||||||
|
# Build stage
|
||||||
|
FROM python:3.9-slim as builder
|
||||||
|
|
||||||
|
# Set working directory
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Install system dependencies
|
||||||
|
RUN apt-get update && apt-get install -y \
|
||||||
|
gcc \
|
||||||
|
&& rm -rf /var/lib/apt/lists/*
|
||||||
|
|
||||||
|
# Copy requirements and install Python dependencies
|
||||||
|
COPY src/server/requirements.txt .
|
||||||
|
RUN pip install --no-cache-dir -r requirements.txt
|
||||||
|
|
||||||
|
# Production stage
|
||||||
|
FROM python:3.9-slim
|
||||||
|
|
||||||
|
# Set working directory
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Copy Python dependencies from builder stage
|
||||||
|
COPY --from=builder /usr/local/lib/python3.9/site-packages /usr/local/lib/python3.9/site-packages
|
||||||
|
|
||||||
|
# Copy application code
|
||||||
|
COPY src/server/ .
|
||||||
|
|
||||||
|
# Copy website files
|
||||||
|
COPY src/website/ website/
|
||||||
|
|
||||||
|
# Create directory for cache if it doesn't exist
|
||||||
|
RUN mkdir -p website/cache
|
||||||
|
|
||||||
|
# Expose port
|
||||||
|
EXPOSE 6006
|
||||||
|
|
||||||
|
# Set environment variables
|
||||||
|
ENV FLASK_APP=app.py
|
||||||
|
ENV FLASK_ENV=production
|
||||||
|
|
||||||
|
# Health check
|
||||||
|
HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 \
|
||||||
|
CMD curl -f http://localhost:6006/api || exit 1
|
||||||
|
|
||||||
|
# Run the application
|
||||||
|
CMD ["python", "app.py"]
|
||||||
162
README.md
162
README.md
@ -1,64 +1,136 @@
|
|||||||
# red head
|
# Red Head
|
||||||
|
|
||||||
A responsive Reddit-like application with infinite scroll functionality that displays the latest Reddit articles.
|
A web application that displays Reddit posts from an archive.
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
- **Infinite Scroll**: Automatically loads more posts as you scroll down
|
|
||||||
- **Responsive Design**: Works well on both desktop and mobile devices
|
|
||||||
- **Image Preview**: Each post displays a picture frame with a placeholder image
|
|
||||||
- **Modern UI**: Clean, attractive interface with hover effects and smooth transitions
|
|
||||||
|
|
||||||
## Project Structure
|
## Project Structure
|
||||||
|
|
||||||
```
|
```
|
||||||
.
|
.
|
||||||
├── index.html # Main HTML structure
|
├── Dockerfile # Docker configuration for the Python backend
|
||||||
├── styles.css # Responsive styling
|
├── docker-compose.yml # Docker Compose configuration
|
||||||
└── app.js # JavaScript logic for posts and infinite scroll
|
├── .gitignore # Git ignore rules
|
||||||
|
├── README.md # This file
|
||||||
|
├── src/
|
||||||
|
│ ├── server/ # Python Flask backend
|
||||||
|
│ │ ├── app.py # Main Flask application
|
||||||
|
│ │ ├── parse_archive.py # Archive parsing logic
|
||||||
|
│ │ ├── requirements.txt # Python dependencies
|
||||||
|
│ │ ├── sample_posts.json # Sample data
|
||||||
|
│ │ └── test_parse_archive.py # Tests
|
||||||
|
│ └── website/ # Frontend files
|
||||||
|
│ ├── app.js # JavaScript logic
|
||||||
|
│ ├── index.html # Main HTML file
|
||||||
|
│ ├── Reddit_Logo.webp # Logo image
|
||||||
|
│ └── styles.css # CSS styling
|
||||||
|
└── website/ # Additional website files
|
||||||
|
└── cache/ # Cache directory
|
||||||
```
|
```
|
||||||
|
|
||||||
## How It Works
|
## Docker Setup
|
||||||
|
|
||||||
1. The application loads the first 10 Reddit posts when the page is initially loaded
|
### Prerequisites
|
||||||
2. As users scroll down, it automatically loads more posts (10 at a time)
|
|
||||||
3. Uses Intersection Observer API for efficient infinite scrolling
|
|
||||||
4. Falls back to manual scroll detection for older browsers
|
|
||||||
5. Each post displays:
|
|
||||||
- A title
|
|
||||||
- An image frame
|
|
||||||
- A link to the original Reddit post
|
|
||||||
|
|
||||||
## Implementation Details
|
- Docker Engine installed
|
||||||
|
- Docker Compose installed
|
||||||
|
|
||||||
- **Responsive Design**: Uses CSS Grid for adaptive layouts that work on mobile and desktop
|
### Running the Application
|
||||||
- **Performance**: Lazy loading of images and efficient scroll handling
|
|
||||||
- **Mock Data**: Currently uses mock data for demonstration purposes (will be replaced with real API calls)
|
|
||||||
- **User Experience**: Loading indicators and smooth animations
|
|
||||||
|
|
||||||
## How to Use
|
1. **Build and start the containers:**
|
||||||
|
```bash
|
||||||
|
docker-compose up --build
|
||||||
|
```
|
||||||
|
|
||||||
1. Open `index.html` in a web browser
|
2. **Run in detached mode:**
|
||||||
2. Scroll down to see more posts load automatically
|
```bash
|
||||||
3. Click on post titles to view them on Reddit
|
docker-compose up -d
|
||||||
|
```
|
||||||
|
|
||||||
## Customization
|
3. **Stop the containers:**
|
||||||
|
```bash
|
||||||
|
docker-compose down
|
||||||
|
```
|
||||||
|
|
||||||
To connect to a real Reddit API:
|
### Environment Variables
|
||||||
1. Replace the mock data in `app.js` with actual API calls
|
|
||||||
2. Update the `fetchRedditPosts()` and `fetchMorePosts()` functions to fetch from Reddit's API
|
|
||||||
3. Adjust styling in `styles.css` to match desired aesthetics
|
|
||||||
|
|
||||||
## Technologies Used
|
The application uses the following environment variables:
|
||||||
|
|
||||||
- HTML5
|
- `ARCHIVE_DIR`: Path to the archive directory (default: `/app/archive`)
|
||||||
- CSS3 (Grid, Flexbox, Media Queries)
|
- `FLASK_ENV`: Flask environment (default: `production`)
|
||||||
- JavaScript ES6+
|
|
||||||
- Intersection Observer API for efficient scrolling
|
|
||||||
|
|
||||||
## Responsive Design
|
### Ports
|
||||||
|
|
||||||
The application is fully responsive and will adapt to:
|
- **6006**: Main application port (Flask server)
|
||||||
- Desktop: Grid layout with 2-3 columns based on screen width
|
|
||||||
- Tablet: Reduced grid columns
|
### Volumes
|
||||||
- Mobile: Single column layout with appropriate spacing
|
|
||||||
|
The following volumes are mounted for development:
|
||||||
|
|
||||||
|
- `./src/server` → `/app/src/server`
|
||||||
|
- `./src/website` → `/app/website`
|
||||||
|
- `./website/cache` → `/app/website/cache`
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
### Making Changes
|
||||||
|
|
||||||
|
1. **Modify source code** in the `src/` directory
|
||||||
|
2. **Docker will automatically reload** the application
|
||||||
|
3. **Access the application** at `http://localhost:6006`
|
||||||
|
|
||||||
|
### Testing
|
||||||
|
|
||||||
|
To test the Docker setup:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Build the images
|
||||||
|
docker-compose build
|
||||||
|
|
||||||
|
# Start the containers
|
||||||
|
docker-compose up -d
|
||||||
|
|
||||||
|
# Check container status
|
||||||
|
docker-compose ps
|
||||||
|
|
||||||
|
# View logs
|
||||||
|
docker-compose logs app
|
||||||
|
|
||||||
|
# Stop containers
|
||||||
|
docker-compose down
|
||||||
|
```
|
||||||
|
|
||||||
|
## API Endpoints
|
||||||
|
|
||||||
|
- `GET /posts` - Get first 10 posts for initial load
|
||||||
|
- `GET /posts/more?count=N` - Get next 10 posts, starting from index N
|
||||||
|
- `GET /posts/total` - Get total number of posts available
|
||||||
|
- `GET /` - Server status endpoint
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
The application consists of:
|
||||||
|
|
||||||
|
1. **Python Flask Backend** (`src/server/`)
|
||||||
|
- Serves API endpoints
|
||||||
|
- Handles archive parsing
|
||||||
|
- Serves static frontend files
|
||||||
|
|
||||||
|
2. **Frontend** (`src/website/`)
|
||||||
|
- HTML, CSS, and JavaScript
|
||||||
|
- Fetches data from the backend API
|
||||||
|
- Implements infinite scrolling
|
||||||
|
|
||||||
|
## Dependencies
|
||||||
|
|
||||||
|
### Python Dependencies (from `src/server/requirements.txt`):
|
||||||
|
- Flask
|
||||||
|
- Flask-CORS
|
||||||
|
- Pillow
|
||||||
|
- beautifulsoup4
|
||||||
|
- requests
|
||||||
|
|
||||||
|
### Frontend Dependencies:
|
||||||
|
- None (pure HTML/CSS/JavaScript)
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This project is licensed under the MIT License.
|
||||||
29
docker-compose.yml
Normal file
29
docker-compose.yml
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
version: '3.8'
|
||||||
|
|
||||||
|
services:
|
||||||
|
app:
|
||||||
|
build: .
|
||||||
|
container_name: redhead-app
|
||||||
|
ports:
|
||||||
|
- "6006:6006"
|
||||||
|
environment:
|
||||||
|
- ARCHIVE_DIR=/app/archive
|
||||||
|
- FLASK_ENV=production
|
||||||
|
volumes:
|
||||||
|
- ./src/server:/app/src/server
|
||||||
|
- ./src/website:/app/website
|
||||||
|
- ./website/cache:/app/website/cache
|
||||||
|
- /app/src/server/__pycache__
|
||||||
|
working_dir: /app
|
||||||
|
command: python app.py
|
||||||
|
restart: unless-stopped
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD", "curl", "-f", "http://localhost:6006/api"]
|
||||||
|
interval: 30s
|
||||||
|
timeout: 10s
|
||||||
|
retries: 3
|
||||||
|
start_period: 40s
|
||||||
|
|
||||||
|
volumes:
|
||||||
|
archive-data:
|
||||||
|
driver: local
|
||||||
Loading…
x
Reference in New Issue
Block a user