src/routes/+layout.svelte runs an $effect that takes page.url.pathname.slice(0, -1).split('/').pop() and adds it to document.documentElement.classList. On /features/image-optimization/ the html element becomes class="image-optimization".

Problems

  • Nothing in the codebase styles against these classes; it is a hook without consumers
  • Slugs like todos, features, daler will collide with any utility or IDS class of the same name
  • slice(0, -1) assumes a trailing slash; on /feed.json or a future non-trailing route it yields a broken class
  • Runs client-only, so SSR HTML and hydrated DOM differ

Tasks

  • Remove the effect
  • If a page needs a body-level hook, expose it explicitly via PageMeta (e.g. bodyClass) and render it in the layout on both server and client

No global slug classes

Page styles belong to the page

A static site template built with SvelteKit.

Sveleton, 2025