jarianc/redhead
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add Docker configuration and docker-compose.yml for Red Head project

Browse Source
This commit is contained in:
Jarian Cottingham 2026-02-02 07:58:40 -06:00
parent 640600e4ab
commit 7333cd3d9a
4 changed files with 259 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
.gitignore vendored
View File

@ -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/
include/
# CPython cache
__pycache__/
# Distribution / packaging
.Python
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
wheels/
*.egg-info/
.installed.cfg
*.egg
__pycache__
pyvenv.cfg
# Virtual environments
venv/
env/
ENV/
env/
/share
/etc
# IDE
.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
View 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
View File

@ -1,64 +1,136 @@
# red head
# Red Head
A responsive Reddit-like application with infinite scroll functionality that displays the latest Reddit articles.
## 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
A web application that displays Reddit posts from an archive.
## Project Structure
```
.
├── index.html # Main HTML structure
├── styles.css # Responsive styling
└── app.js # JavaScript logic for posts and infinite scroll
├── Dockerfile # Docker configuration for the Python backend
├── docker-compose.yml # Docker Compose configuration
├── .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
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
### Prerequisites
## Implementation Details
- Docker Engine installed
- Docker Compose installed
- **Responsive Design**: Uses CSS Grid for adaptive layouts that work on mobile and desktop
- **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
### Running the Application
## How to Use
1. **Build and start the containers:**
```bash
docker-compose up --build
```
1. Open `index.html` in a web browser
2. Scroll down to see more posts load automatically
3. Click on post titles to view them on Reddit
2. **Run in detached mode:**
```bash
docker-compose up -d
```
## Customization
3. **Stop the containers:**
```bash
docker-compose down
```
To connect to a real Reddit API:
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
### Environment Variables
## Technologies Used
The application uses the following environment variables:
- HTML5
- CSS3 (Grid, Flexbox, Media Queries)
- JavaScript ES6+
- Intersection Observer API for efficient scrolling
- `ARCHIVE_DIR`: Path to the archive directory (default: `/app/archive`)
- `FLASK_ENV`: Flask environment (default: `production`)
## Responsive Design
### Ports
The application is fully responsive and will adapt to:
- Desktop: Grid layout with 2-3 columns based on screen width
- Tablet: Reduced grid columns
- Mobile: Single column layout with appropriate spacing
- **6006**: Main application port (Flask server)
### Volumes
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
View 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