Files

T

feat(images): responsive <Image>, gated private images + prose

Build-time image optimization plus auth-gated private content.

- <Image> (src/lib/components/Image.svelte): wraps @sveltejs/enhanced-img
  for public images under src/lib/assets/images/ (AVIF/WebP, multiple
  widths, lazy by default), plus a `private` mode for auth-gated images.
- Private images: scripts/build-private-images.ts encodes sources from
  src/lib/assets/private-images/ into private-assets/ (outside the bundle)
  and a manifest; served only via the auth-checked /private-images/
  endpoint (X-Accel-Redirect in prod, disk read in dev).
- HikeImage gains a `src` prose mode: build-hikes encodes non-waypoint
  images referenced in .svx and exposes them by filename (imagesByName);
  a `private` attr routes them through the gated /hikes/<slug>/private/ path.
- <Private> (src/lib/components/Private.svelte): renders prose only to
  logged-in viewers (cosmetic gating — text still ships in the bundle).
- deploy.sh rsyncs private-assets/; prod needs an nginx internal
  /protected-images/ location.

2026-05-24 20:53:22 +02:00

1.3 KiB

Raw Blame History

Public responsive image assets

Drop public source images here, then render them with $lib/components/Image.svelte.

At build time @sveltejs/enhanced-img (vite-imagetools + sharp) processes every raster image in this folder into AVIF/WebP at multiple widths and strips EXIF. Output is a public, hashed, immutable build asset.

<script>
	import Image from '$lib/components/Image.svelte';
</script>

<!-- lazy by default; `src` is relative to this folder -->
<Image src="hero.jpg" alt="…" />

<!-- above-the-fold / LCP image: load eagerly -->
<Image src="hero.jpg" alt="…" lazy={false} />

<!-- full-width image: pass `sizes` so smaller screens fetch smaller files -->
<Image src="banner.jpg" alt="…" sizes="min(1280px, 100vw)" />

<!-- subfolders work too -->
<Image src="blog/cover.png" alt="…" />

For private, auth-gated images use <Image src="…" private /> and put the source in ../private-images/ instead — see that folder's README.

Notes:

Provide images at ~2× the displayed size so HiDPI screens stay sharp; processing only ever scales down.
SVGs are not processed here — import them directly instead.
First build is slow (encoding); results are cached in node_modules/.cache/imagetools.
These sources are committed (they're public site assets).

1.3 KiB Raw Blame History Unescape Escape

Public responsive image assets

1.3 KiB

Raw Blame History