Om den här webbplatsen

# blindwork.se

AI-maintained static site for Blindwork Massage. Everything in this repo is tuned for autonomous agents running the Modern Web Boilerplate: Vite, plain ES modules, clean path routing (`/slug/`), cascade-layered CSS with `tokens.css`, ESLint (flat), Prettier, and EditorConfig. Deploys land on GitHub Pages under `https://konradperssonse.github.io/blindwork-se/` with Vite’s `base` locked to `/blindwork-se/`.

## AI-first workflow

1. **Sync context:** Read `ROADMAP.md` (Quality gates + queued work) and `TODO.md` (execution list + Notes for Codex) before touching code. Any new acceptance rules or constraints must be reflected in those docs first.
2. **Plan & build:** Keep JS minimal, reuse shared tokens/CSS layers, and assume no additional dependencies without approval. Asset URLs must use `import.meta.env.BASE_URL` so they survive GH Pages paths.
3. **Verify:** Run `npm run build` locally. If images in `assets/_src/**` change, run `npm run img:compress`. Update README/ROADMAP/TODO to match the code. Hand back a summary + relevant diffs.

Live documentation is always available at `/om-webbplatsen/` (the page embeds README/ROADMAP/TODO and highlights code fences automatically).

## Repository map

```
blindwork-se/
  README.md            # This guide (AI-first baseline)
  ROADMAP.md           # Roadmap + Quality gates (authoritative acceptance criteria)
  TODO.md              # Execution steps + Notes for Codex (nagging reminders)
  vite.config.js       # Vite base = '/blindwork-se/' for GH Pages
  index.html           # Entry HTML (loads src/main.js)
  404.html             # Legacy redirect (re-routes old hash URLs to clean paths)
  eslint.config.mjs    # Flat ESLint config
  package.json / lock  # npm metadata (no extra deps without sign-off)
  assets/
    _src/              # Source images (pre-compression inputs)
  public/
    Blindwork-Logotype.svg
    favicon.svg
    robots.txt
    img/               # TinyPNG output (mirrors assets/_src structure)
  scripts/
    tinypng.mjs        # TinyPNG compressor (requires TINIFY_API_KEY)
    build-content.mjs  # Markdown/SPAs → HTML generator (writes public/<slug>/index.html + registry)
    post-build-html.mjs# After Vite build, rewrites pages with hashed assets
  src/
    main.js            # App bootstrap (path router + metadata updates)
    components/        # Reusable UI (Header, Footer, cards, nav helpers)
    content/           # Site metadata (title, contact, nav model)
    lib/               # Shared utilities (DOM helpers, router)
    pages/             # Page modules exporting { meta, render, enhance }
    styles/            # Global CSS layers (main.css, tokens.css)
  .github/workflows/
    pages.yml          # CI: npm ci → img:compress → build → deploy
```

## Commands

- `npm ci` — install dependencies exactly as locked.
- `npm run dev` — Vite dev server with HMR; runs `npm run content:build` first so `/slug/` works locally.
- `npm run content:build` — parse Markdown from `assets/_src/**`, generate HTML fragments and registry files.
- `npm run build` — production build under `dist/` (runs `content:build`, Vite build, post-build manifest rewrite).
- `npm run preview` — serve the production build locally for QA.
- `npm run img:compress` — run TinyPNG over `assets/_src/**` → `public/img/**`. Requires `TINIFY_API_KEY` (set locally or provided via GitHub secret in CI). Skips unchanged files.

## Content pipeline & media

- Drop originals in `assets/_src/**`; the compressor mirrors the structure to `public/img/**`.
- Above-the-fold images must ship with real `width`/`height` and **no** lazy-loading to prevent CLS.
- Reference images in code via `import.meta.env.BASE_URL` (e.g., `${import.meta.env.BASE_URL}img/hero.jpg`).

## Markdown content bundle

- Source Markdown + components live under `assets/_src/**` following the copywriter spec (`assets/CONTENT_SPEC.md`).
- Integration brief (tooling/acceptance criteria) lives in `assets/DEV_BRIEF.md`. Keep it in sync with the implementation.
- Planned flow: `scripts/build-content.mjs` parses Markdown + SPA pages, resolves shortcodes, and writes HTML into `public/<slug>/index.html` (home → `public/index.html`) along with `src/generated/content-registry.json`. `npm run dev` copies those files for local previews, and `scripts/post-build-html.mjs` reuses `dist/index.html` to inject hashed assets for every page.
- Editors can keep using Obsidian with GFM; new content dropped in `assets/_src` should build automatically once the script is wired into `npm run build`.

## Quality controls

- `ROADMAP.md` holds the current Quality gates—treat it as the definition of done. Update it whenever acceptance criteria evolve.
- `TODO.md` → Notes for Codex contains the standing reminders every agent must follow.
- Highlight.js is loaded globally via the Om webbplatsen helper; don’t add duplicate loaders.
- Before handing work back: confirm `npm run build` succeeds, docs are synced, and summaries/diffs are supplied.

## Deployment

- Default hosting: GitHub Pages at `konradperssonse.github.io/blindwork-se/`. Keep `base: '/blindwork-se/'`.
- Future custom domain: add `public/CNAME` (`blindwork.se`) and switch `base` to `""` once DNS + GH Pages configuration are in place (tracked in ROADMAP).

# Roadmap for blindwork.se

## Done

- `vscode` (MVB / Modern Boilerplate) repo forked & `main` tracking `origin/main`
- Hash routing + core pages: Hem, Massage, Om mig, Priser
- Om webbplatsen page created and cleaned
- Header/footer components + active-nav highlighter
- Site tokens (`tokens.css`) with light brand overrides
- TinyPNG pipeline (`scripts/tinypng.mjs`) and NPM script
- GitHub Actions workflow for Pages (`.github/workflows/pages.yml`)
- Vite base set for repo URL (`/blindwork-se/`) so we can preview on GitHub Pages before a domain
- Put originals in `assets/_src/`, run `npm run img:compress`
- Write better work procedure, Quality gates in ROADMAP.md and better Notes for TODO.md
- Cleaned up ROT CSS in pages and consolidated shared styles
- Routing refactor to clean `/slug/` paths (header/footer links, active nav, content build outputs)

## Next

### Splash page

- Update our start page with splash page content

## Next (near-term)

### Routing refactor (NOW)

- REMOVE legacy `/#/slug` redirect behaviour (no clobbering of valid paths).

## Later (after we’re happy on the repo URL)

### Custom domain

- Add `public/CNAME` (`blindwork.se`), set Vite `base: ""`, configure Cloudflare DNS → GitHub Pages

## Quality gates (Definition of Done)

- **Routing & navigation:** All pages resolve via **`/slug/`** (no `/#/`), work in local dev and on GH Pages; active nav highlights via pathname.
- **Build & deploy:** `npm run build` succeeds locally; GH Pages deploy passes; all internal URLs use `import.meta.env.BASE_URL` (no hardcoded `/`). When images change, run `npm run img:compress`.
- **Documentation sync:** README, ROADMAP, TODO reflect routing model and content outputs; new constraints/acceptance criteria recorded before shipping.
- **Code hygiene:** Keep JS light (no new deps without sign-off); rely on shared tokens/CSS layers; load `highlight.js` once via the global helper.
- **A11y & perf:** Landmarks in place; focus states visible; interactive targets ≥ 24px; above-the-fold images not lazy-loaded; `width/height` set to avoid CLS.

# TODO — execution list (for humans & Codex)

## Now

## Notes for Codex

- Keep JS tiny, no frameworks.
- Prefer semantic HTML + modern CSS (container queries, cascade layers, `:has()`).
- Don’t introduce deps unless justified (TinyPNG already approved).
- Use `import.meta.env.BASE_URL` for internal links/asset URLs (dev + GH Pages).
- Run `npm run build` before handing work back; run `npm run img:compress` after touching `assets/_src/**`.
- Update README/ROADMAP/TODO when scope changes docs, workflow, or acceptance rules.
- Leave `highlight.js` loading to the shared helper.
- No lazy-loading on above-the-fold images; always set real `width`/`height`.