diff --git a/.gitignore b/.gitignore index 4c7dde4..8d36bc4 100644 --- a/.gitignore +++ b/.gitignore @@ -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 +._* \ No newline at end of file diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..7de624f --- /dev/null +++ b/Dockerfile @@ -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"] \ No newline at end of file diff --git a/README.md b/README.md index d520e11..5b27bd0 100644 --- a/README.md +++ b/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. - -## 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 \ No newline at end of file +- **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. \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..7ab6556 --- /dev/null +++ b/docker-compose.yml @@ -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 \ No newline at end of file