jhodgkin
4420dd51ac
Features: - Immich integration with automatic album image carousel - Dynamic configuration via JSON files - Nginx proxy for Immich API access - Docker deployment ready - Gitea Actions CI/CD workflow Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
72 lines
2.6 KiB
Markdown
72 lines
2.6 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Project Overview
|
|
|
|
LisiLou Photography Portfolio is a lightweight, zero-framework photography portfolio website designed to integrate with Immich for image hosting and client gallery access. It's a single-page application with all code in one HTML file, using vanilla JavaScript and inline CSS.
|
|
|
|
## Technology Stack
|
|
|
|
- **Frontend:** Vanilla HTML5, CSS3, JavaScript (no framework)
|
|
- **Server:** Nginx (Alpine-based)
|
|
- **Deployment:** Docker + Docker Compose
|
|
- **CI/CD:** Gitea Actions
|
|
|
|
## Development Commands
|
|
|
|
```bash
|
|
# Start development server (serves at http://localhost:8080)
|
|
docker compose up -d
|
|
|
|
# Rebuild after code changes to src/index.html
|
|
docker compose build && docker compose up -d
|
|
|
|
# View container logs
|
|
docker logs lisilou-portfolio
|
|
```
|
|
|
|
**Note:** Configuration (`config/`) and image (`public/images/`) changes are applied immediately without rebuild since they're mounted as volumes.
|
|
|
|
## Architecture
|
|
|
|
### Single-File SPA
|
|
The entire application lives in `src/index.html` (~865 lines):
|
|
- Lines 1-605: Inline CSS with CSS custom properties for theming
|
|
- Lines 606-865: HTML structure and vanilla JavaScript
|
|
|
|
### Configuration-Driven Content
|
|
All site content is loaded dynamically from `config/site.json` at runtime:
|
|
- Site branding (title, tagline, logo)
|
|
- Theme colors (applied to CSS variables)
|
|
- Portfolio categories with Immich album links
|
|
- Social media links
|
|
- Client gallery access settings
|
|
|
|
### Immich Integration
|
|
The app serves as a gateway to Immich shared albums:
|
|
- Portfolio categories link to Immich albums via `immichAlbumId`
|
|
- Client gallery codes are Immich share IDs
|
|
- Full URLs constructed as: `{baseUrl}{publicAlbumPrefix}{albumId}`
|
|
|
|
### Multi-Tenant Support
|
|
Multiple photographers can be supported via `config/profiles.json`, mapping domains to different configuration files.
|
|
|
|
## Key Files
|
|
|
|
| File | Purpose |
|
|
|------|---------|
|
|
| `src/index.html` | Complete SPA (CSS + HTML + JS) |
|
|
| `config/site.json` | Runtime configuration for all content |
|
|
| `config/profiles.json` | Multi-tenant profile routing |
|
|
| `nginx.conf` | Caching rules, security headers, SPA routing |
|
|
| `Dockerfile` | Multi-stage build (Node Alpine → Nginx Alpine) |
|
|
| `.gitea/workflows/deploy.yml` | CI/CD pipeline |
|
|
|
|
## Nginx Configuration Highlights
|
|
|
|
- **Caching:** Images = 1 year, CSS/JS = 1 month, Config = 5 minutes
|
|
- **Health Check:** `/health` endpoint for container monitoring
|
|
- **SPA Routing:** Falls back to `index.html` for all unmatched routes
|
|
- **Security Headers:** X-Frame-Options, X-Content-Type-Options, X-XSS-Protection, Referrer-Policy
|