mifi.holdings — Landing Page

Static landing site for mifi.holdings (and www). Plain HTML/CSS/JS source; a build step produces minified assets and inlines critical CSS. Served by nginx in Docker behind Traefik, with CI/CD via Woodpecker and deployment via Portainer.

---

Quick reference

What	Where
Site	mifi.holdings, www.mifi.holdings (HTTPS)
Runtime	nginx (Alpine) in Docker
Reverse proxy / TLS	Traefik (Let's Encrypt)
CI/CD	Woodpecker (ci → build → deploy)
Registry	git.mifi.dev/mifi-holdings/landing
Package manager	pnpm
Build output	dist/ (gitignored)

---

Architecture

                    ┌─────────────────┐
                    │   Traefik       │  (routing, TLS, websecure)
                    └────────┬────────┘
                             │
                    ┌────────▼────────┐
                    │  Docker container │  mifi-holdings-landing
                    │  nginx:alpine    │  port 80
                    │  /usr/share/    │
                    │  nginx/html ←   │  built output from dist/
                    └─────────────────┘

• Build: pnpm build copies src/ → dist/, minifies JS/CSS, inlines critical CSS (Critters). Docker image = nginx:alpine + nginx/conf.d/ + dist/ into /usr/share/nginx/html.
• Run: Single service on external network marina-net; Traefik routes mifi.holdings and www.mifi.holdings to this container (HTTPS, security-prison@file middleware).

---

Repo structure

.
├── src/                    # Source (HTML, CSS, JS)
│   ├── index.html
│   └── assets/
│       ├── css/style.css
│       ├── js/ga-init.js
│       └── images/         # favicon, etc.
├── scripts/
│   └── build.js            # Build: copy, minify, inline critical CSS
├── dist/                   # Build output (gitignored)
├── nginx/
│   └── conf.d/
│       └── default.conf    # nginx server config (cache rules, SPA fallback)
├── .woodpecker/
│   ├── ci.yml              # Lint, format, build check (PR + push to main)
│   ├── build.yml           # Site build → Docker image → push (main)
│   └── deploy.yml          # Trigger Portainer redeploy (main)
├── docker-compose.yml      # Service + Traefik labels for production
├── Dockerfile              # nginx + config + dist (not src)
├── package.json            # pnpm scripts: build, format, lint, docker
└── README.md

---

Build (pnpm build)

• Output: dist/ (gitignored). Do not edit dist/; it is generated.
• Steps (see scripts/build.js):
  1. Clean and copy src/ → dist/.
  2. Minify all .js (terser) and .css (clean-css).
  3. Inline critical CSS with Critters (lazy-loads the rest; no browser required, so it works in CI).
• When: Run before docker build. CI and the build pipeline both run pnpm build before packaging.

---

Tech stack

• Frontend: Static HTML + CSS + JS in src/; production build minifies and inlines critical CSS.
• Server: nginx (Alpine) in Docker.
• Tooling: pnpm; Prettier (format); ESLint (JS), Stylelint (CSS), yamllint (YAML); terser, clean-css, beasties (build).
• Deployment: Docker image (from dist/) → Gitea registry → Portainer stack redeploy.

---

Local development

• Dependencies: pnpm install.
• Format: pnpm format / pnpm format:check.
• Lint: pnpm lint (ESLint for src/**/*.js, Stylelint for src/**/*.css, yamllint for Woodpecker + docker-compose). Use pnpm lint:fix to auto-fix where supported.
• Build: pnpm build → produces dist/. Required before building the Docker image.
• Run locally (Docker):
  • Build site: pnpm build.
  • Image: pnpm docker:build (or docker build --platform linux/amd64 -t git.mifi.dev/mifi-holdings/landing:latest .).
  • Run: use docker-compose up only on a host that has marina-net and Traefik; otherwise run the image with a port map and open http://localhost:<port>.

No dev server; edit src/ and run pnpm build (and optionally docker run or a local static server on dist/) to test.

---

Docker

• Dockerfile: Copies nginx/conf.d/ and dist/ (not src/) into an nginx:alpine image. Run pnpm build first so dist/ exists.
• Image: Tagged as git.mifi.dev/mifi-holdings/landing:latest (and :<commit-sha> in CI).
• Local build/push: pnpm build → pnpm docker:build → pnpm docker:push (requires login to git.mifi.dev).

---

CI/CD (Woodpecker)

Three pipelines:

1. ci (.woodpecker/ci.yml)

   • When: Every PR and every push to main.
   • Steps: Install deps → Prettier format check → lint (ESLint, Stylelint, yamllint) → Build (pnpm build). Mattermost notifications on success/failure.

2. build (.woodpecker/build.yml)

   • When: Push/tag/manual on main (and deployment to production); depends_on: ci.
   • Steps: Site build (pnpm install, pnpm build) → Docker image build (linux/amd64, up to 3 retries) → push :latest and :<CI_COMMIT_SHA> to git.mifi.dev/mifi-holdings/landing. Mattermost notifications.

3. deploy (.woodpecker/deploy.yml)

   • When: Same as build (main / production deploy); depends_on: ci.
   • Steps: Call Portainer webhook to redeploy the stack. Mattermost notifications.

Secrets used: gitea_registry_username, gitea_package_token, portainer_webhook_url, mattermost_* (bot token, channel IDs, API URL).

---

Deployment (production)

• Orchestration: Stack defined in docker-compose.yml, deployed via Portainer (webhook triggered by Woodpecker deploy pipeline).
• Network: Container joins external network marina-net (shared with Traefik).
• Traefik:
  • Hosts: mifi.holdings, www.mifi.holdings.
  • Entrypoint: websecure (HTTPS).
  • TLS: Let's Encrypt (tls.certresolver=letsencrypt).
  • Middleware: security-prison@file.
  • Backend: this service, port 80.
• Healthcheck: wget --spider -q http://localhost/ every 20s (timeout 3s, 3 retries).

To deploy manually: pull the latest image and redeploy the stack in Portainer, or trigger the Portainer webhook (e.g. same URL as in portainer_webhook_url).

---

nginx behavior

• Root: /usr/share/nginx/html (contents of dist/ after build).
• HTML: Cache-Control: public, no-cache so updates are visible quickly.
• JS/CSS: Long cache, immutable for hashed/versioned assets.
• Images/fonts: Cached (30d / 1y).
• SPA-style fallback: / tries $uri, $uri/, then index.html, then 404.

---

Summary

• What it is: Static landing for mifi.holdings; source in src/, built output in dist/.
• How it runs: nginx in Docker serving dist/, fronted by Traefik on marina-net.
• How it’s updated: Push to main → Woodpecker runs ci (lint, format, build), then build pipeline (site build → Docker image → push), then deploy (Portainer webhook); Mattermost reports status.