This commit is contained in:
93
README.md
93
README.md
@@ -1,21 +1,28 @@
|
||||
# Armandine
|
||||
|
||||
Static gallery site served by Nginx. Runs as a repository-based container; image is built and pushed via Woodpecker CI/CD from this repo.
|
||||
Pre-rendered Svelte gallery site served by Nginx. Build outputs to `build/`; image is built and pushed via Woodpecker CI/CD from this repo.
|
||||
|
||||
## Stack
|
||||
|
||||
- **Site:** Static HTML/CSS/JS in `src/`, copied into the image.
|
||||
- **Runtime:** `nginx:alpine` (see `Dockerfile`).
|
||||
- **Site:** Svelte 5 + SvelteKit (TypeScript), `@sveltejs/adapter-static`. Gallery is rendered at build time from `src/lib/media.ts`; lightbox and theme toggle run from a preloaded client script (`static/assets/js/script.js`).
|
||||
- **CSS:** PostCSS (nesting + level 2), component-scoped styles; critical CSS inlined at build time with Beasties.
|
||||
- **Runtime:** `nginx:alpine` (see `Dockerfile`) serves the contents of `build/`.
|
||||
- **Registry:** Gitea at `git.mifi.dev` → image `git.mifi.dev/mifi-holdings/armandine`.
|
||||
- **Deploy:** Portainer on Linode; stack uses this image (no volume for site content).
|
||||
|
||||
## Local development
|
||||
|
||||
```bash
|
||||
# Install dev dependencies (ESLint, Prettier, Stylelint)
|
||||
# Install dependencies
|
||||
pnpm install
|
||||
|
||||
# Lint JS and CSS
|
||||
# Dev server with hot reload (http://localhost:5173)
|
||||
pnpm dev
|
||||
|
||||
# Type-check (Svelte + TypeScript)
|
||||
pnpm check
|
||||
|
||||
# Lint JS/TS and CSS
|
||||
pnpm lint
|
||||
|
||||
# Check formatting (CI uses this)
|
||||
@@ -24,8 +31,11 @@ pnpm format:check
|
||||
# Fix formatting
|
||||
pnpm format
|
||||
|
||||
# Preview site locally (serves src/ on http://localhost:3000)
|
||||
pnpm serve
|
||||
# Build for production (Vite + critical CSS step)
|
||||
pnpm build
|
||||
|
||||
# Preview the built site (http://localhost:4173)
|
||||
pnpm preview
|
||||
```
|
||||
|
||||
## Dev container
|
||||
@@ -34,29 +44,32 @@ Open the repo in a dev container (VS Code/Cursor: **Dev Containers: Reopen in Co
|
||||
|
||||
- **Node 22** (matches CI), with `pnpm install` run after create
|
||||
- **Docker (outside of Docker)** – uses the host Docker socket so you can run `pnpm build` and test the image inside the dev container
|
||||
- **ESLint, Prettier, Stylelint** extensions plus format-on-save and fix-on-save
|
||||
- **ESLint, Prettier, Stylelint, Svelte** extensions plus format-on-save and fix-on-save
|
||||
|
||||
Port **3000** is forwarded for `pnpm serve`; port **80** is forwarded if you run the built Nginx container locally.
|
||||
Ports:
|
||||
|
||||
- **5173** – SvelteKit dev server (`pnpm dev`)
|
||||
- **4173** – Preview built site (`pnpm preview`)
|
||||
- **80** – Nginx when running the Docker container locally
|
||||
|
||||
## Manual build and push
|
||||
|
||||
When you want to build and push the image yourself (e.g. before CI was set up, or for a one-off deploy):
|
||||
|
||||
1. Log in to the Gitea container registry:
|
||||
```bash
|
||||
docker login git.mifi.dev
|
||||
```
|
||||
Use your Gitea username and a token with package permissions.
|
||||
|
||||
2. Build the image (tags as `latest`):
|
||||
2. Build the site and Docker image:
|
||||
```bash
|
||||
pnpm build
|
||||
pnpm docker:build
|
||||
```
|
||||
This runs: `docker build -t git.mifi.dev/mifi-holdings/armandine:latest .`
|
||||
`pnpm build` runs Vite build then Beasties to inline critical CSS into `build/`. The Dockerfile copies `build/` into the image.
|
||||
|
||||
3. Push to the registry:
|
||||
```bash
|
||||
pnpm push
|
||||
pnpm docker:push
|
||||
```
|
||||
Then on the server, redeploy the stack (e.g. Portainer “Pull and redeploy” or your webhook).
|
||||
|
||||
@@ -66,8 +79,8 @@ Three pipelines (see `.woodpecker/`):
|
||||
|
||||
| Pipeline | When | What |
|
||||
|----------|------|------|
|
||||
| **ci** | Every push to `main`, every PR | Lint (ESLint + Stylelint) and Prettier check |
|
||||
| **build**| Push/tag/manual on `main` only (after ci) | Build Docker image, push to `git.mifi.dev/mifi-holdings/armandine` |
|
||||
| **ci** | Every push to `main`, every PR | Lint (ESLint + Stylelint), Prettier check, Svelte/TypeScript check |
|
||||
| **build**| Push/tag/manual on `main` only (after ci) | Build site to `build/`, build Docker image, push to `git.mifi.dev/mifi-holdings/armandine` |
|
||||
| **deploy** | After build | Trigger Portainer stack redeploy via webhook |
|
||||
|
||||
Order: **ci** → **build** → **deploy**.
|
||||
@@ -79,32 +92,50 @@ Configure in the repo’s Woodpecker secrets:
|
||||
- `gitea_registry_username` – Gitea user for registry login
|
||||
- `gitea_package_token` – Gitea token with package read/write
|
||||
- `portainer_webhook_url` – Portainer stack webhook URL for redeploy
|
||||
- `discord_webhook_url` – (optional) Discord notifications for build/deploy status
|
||||
- Mattermost/Discord webhook secrets (see `.woodpecker/*.yaml` for notifications)
|
||||
|
||||
## Server / Portainer
|
||||
|
||||
- Stack is defined by `docker-compose.yml` in this repo.
|
||||
- Compose uses the image from the registry (`git.mifi.dev/mifi-holdings/armandine:latest`); no volume for site content (it’s inside the image).
|
||||
- Ensure the server can pull from `git.mifi.dev` (login or registry access). After a push, either let the deploy pipeline trigger the Portainer webhook or manually “Pull and redeploy” the stack.
|
||||
- Ensure the server can pull from `git.mifi.dev`. After a push, either let the deploy pipeline trigger the Portainer webhook or manually “Pull and redeploy” the stack.
|
||||
|
||||
## Project layout
|
||||
|
||||
```
|
||||
├── src/ # Static site (copied into image)
|
||||
│ ├── index.html
|
||||
├── src/
|
||||
│ ├── app.html # SvelteKit HTML template
|
||||
│ ├── app.css # Global CSS (variables, body, lightbox)
|
||||
│ ├── app.d.ts # App types
|
||||
│ ├── routes/
|
||||
│ │ ├── +layout.svelte
|
||||
│ │ ├── +layout.ts # prerender = true
|
||||
│ │ ├── +page.svelte # Main page (header, gallery, lightbox markup)
|
||||
│ │ └── +page.ts # Loads media data for build-time gallery
|
||||
│ └── lib/
|
||||
│ ├── media.ts # Typed gallery media list (used at build time)
|
||||
│ └── components/
|
||||
│ ├── GalleryFigure.svelte
|
||||
│ └── SiteHeader.svelte
|
||||
├── static/ # Copied as-is to build root
|
||||
│ ├── robots.txt
|
||||
│ └── assets/
|
||||
│ ├── css/
|
||||
│ ├── js/
|
||||
│ └── media/
|
||||
├── Dockerfile # nginx:alpine + COPY src → /usr/share/nginx/html
|
||||
├── docker-compose.yml # Stack for Portainer (Traefik, healthcheck)
|
||||
├── package.json # Scripts: build, push, lint, format, serve (pnpm)
|
||||
├── .devcontainer/ # Dev container (Node 22, Docker, lint/format tools)
|
||||
│ ├── js/ # script.js (lightbox, theme), ga-init.js
|
||||
│ ├── media/ # desktop/, tablet/, mobile/, thumbnail/, videos/
|
||||
│ └── favicon*.png, favicon.ico
|
||||
├── scripts/
|
||||
│ └── critical-css.js # Beasties post-step on build/
|
||||
├── build/ # Output of pnpm build (Vite + Beasties)
|
||||
├── Dockerfile # nginx:alpine + COPY build/
|
||||
├── docker-compose.yml
|
||||
├── package.json # Scripts: dev, build, preview, check, lint, format
|
||||
├── .devcontainer/
|
||||
├── .woodpecker/
|
||||
│ ├── ci.yaml # Lint + format check (PR + main)
|
||||
│ ├── build.yaml # Build image, push to registry
|
||||
│ └── deploy.yaml # Portainer webhook
|
||||
└── README.md # This file
|
||||
│ ├── ci.yaml
|
||||
│ ├── build.yaml
|
||||
│ └── deploy.yaml
|
||||
├── README.md
|
||||
└── AGENTS.md # Guidance for LLM agents
|
||||
```
|
||||
|
||||
## Version
|
||||
|
||||
Reference in New Issue
Block a user