| name | app-shell |
| description | The AMC app shell — hooks.server.ts prerender-time head injection (SEO meta, theme-color, font preloads, icons), hooks.ts URL delocalization, and asset import suffixes (?no-inline, ?url). Read before changing global head tags, fonts, SEO metadata, or hooks. |
App Shell, Head & SEO
src/hooks.server.ts (runs at prerender/build time)
Two handles in sequence:
handleParaglide — wraps requests in paraglideMiddleware, replacing %lang% and %dir% placeholders in app.html with the resolved locale and text direction.handleStaticHead — replaces the %app.statichead% placeholder in app.html with generated head tags:
theme-color metas for light/dark from $lib/tw-var (colorBackground100 / colorBackground900)- SEO/OpenGraph/Twitter metas using localized paraglide messages (
m['home.desc_title'](), m.site_name())
- Font preloads: Noto Sans latin woff2 preloaded; Thai/SC/JP/KR CSS lazily loaded via
rel=preload as=style + onload swap
- Favicons and apple-touch/mobile-web-app metas
Global head changes go here, not in +layout.svelte. Per-page head tags use <svelte:head> (see src/lib/components/CommonHead/).
Asset import suffixes
?no-inline — force a file URL instead of base64 inlining (used for fonts, splash, favicons referenced in head strings)?url — import a CSS file's URL (used for deferred font stylesheets)
src/hooks.ts (universal)
reroute strips the locale prefix from URLs via paraglide's deLocalizeUrl, so route files never see locale segments.
Fonts
Fonts are self-hosted via @fontsource packages (Noto Sans variants per script, Kanit, Koulen, Playfair Display, Great Vibes). src/lib/font-sans-em.ts holds alternative emphasis font and must only be import on component with font-sans-em class usage. The web app manifest is generated by the custom Vite plugin in vite-plugins/webmanifest.ts.
Related: [[architecture]], [[project-structure]]
