Revert to static JS site (Svelte built, but no CSR); Optimize images
Some checks failed
ci/woodpecker/push/ci Pipeline failed
ci/woodpecker/push/build unknown status
ci/woodpecker/push/deploy unknown status

This commit is contained in:
2026-02-16 00:54:08 -03:00
parent 6734dfa51e
commit af70682fa8
117 changed files with 686 additions and 109 deletions

View File

@@ -5,7 +5,7 @@ This file helps LLM agents work with the Armandine codebase without introducing
## Stack and goals
- **Svelte 5** + **SvelteKit** with **TypeScript**. The site is a **single pre-rendered page** (no SSR, no backend).
- **adapter-static**: the app is built to static HTML/JS/CSS in `build/`. The gallery is **rendered at build time** from `src/lib/media.ts`; the HTML already contains the full gallery. Lightbox and theme toggle are handled by a **client script** (`static/assets/js/script.js`) that binds to the pre-rendered DOM.
- **adapter-static**: the app is built to static HTML/JS/CSS in `build/`. **CSR is disabled** (`csr = false` in `+layout.ts`), so no Svelte runtime or app JS is loaded in the browser. The gallery and shell (header, empty lightbox dialog) are **rendered at build time** from Svelte components and `src/lib/media.ts`. Lightbox, theme toggle, and “show video” are implemented in **`static/assets/js/script.js`** only; they bind to the pre-rendered DOM.
- **PostCSS**: nesting and CSS level 2; component-scoped `<style>` in Svelte where possible; global styles in `src/app.css`.
- **Critical CSS**: after `vite build`, `scripts/critical-css.js` runs Beasties to inline critical CSS into the built HTML.
@@ -26,7 +26,7 @@ This file helps LLM agents work with the Armandine codebase without introducing
- Use **Svelte 5** patterns (e.g. `$props()`, runes). Use **TypeScript** for `src/lib` and route logic.
- **Gallery**: Rendered at build time via `GalleryFigure` and `data.mediaItems` from `+page.ts`. Do not move gallery rendering to the client.
- **Lightbox and theme**: Implemented in `static/assets/js/script.js`; they rely on the pre-rendered DOM (e.g. `.gallery-item`, `#lightbox`, `#lb-content`). Keep them in that script; do not reimplement in Svelte for “consistency” (the plan keeps them in JS for optimal loading and preload).
- **Lightbox and theme**: Implemented only in `static/assets/js/script.js` (no client-side Svelte). They rely on the pre-rendered DOM (e.g. `.gallery-item[data-name]`, `dialog.lightbox`, `#show_video`, `#theme-toggle`). The Svelte `Lightbox` component is still used at build time to output the empty `<dialog class="lightbox">`; script.js creates the inner structure (header, .lb-content, #lb-caption) on first open. Keep all runtime behavior in script.js.
- **Head**: Metadata, JSON-LD, favicons, preload of `script.js`, and GA scripts are set in `+page.svelte`s `<svelte:head>`.
- **CSS**: Prefer component-scoped `<style>` in Svelte components; use `src/app.css` only for `:root`, `body`, and shared/global rules (e.g. lightbox, which is targeted by the client script).
- **Build**: `pnpm build` = `vite build` then `node scripts/critical-css.js`. Output is `build/`. Dockerfile copies `build/` into the image.