<!DOCTYPE html>
<html lang="en" class="h-dvh overflow-hidden overscroll-none">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="csrf-token" content={get_csrf_token()} />
<link rel="icon" href={~p"/favicon.ico"} sizes="any" />
<link rel="icon" href={~p"/favicon-32x32.png"} type="image/png" sizes="32x32" />
<link rel="icon" href={~p"/favicon-16x16.png"} type="image/png" sizes="16x16" />
<link rel="apple-touch-icon" href={~p"/apple-touch-icon.png"} sizes="180x180" />
<%!-- The suffix is composed here rather than passed to `live_title`,
which applies it to `default` as well: a page with no title of its own
rendered the brand twice. --%>
<.live_title default="OpenAgents" phx-no-format>{page_title(assigns)}</.live_title>
<Layouts.og_tags og={assigns[:og]} />
<%!-- The faces the first paint actually uses, fetched in parallel with the
stylesheet instead of after it. Every face is `font-display: swap`, so one
arriving late re-lays-out text that is already on screen -- and the hero
animates while that happens, which reads as the animation stuttering and
restarting rather than as text reflowing.
Plain paths, not `~p`: these must be byte-identical to the `src` in
`@font-face`, or the browser fetches the file twice and preloads nothing.
`crossorigin` is required even same-origin -- fonts are fetched in CORS
mode, and a preload without it is discarded and re-fetched. --%>
<link
rel="preload"
as="font"
type="font/woff2"
href="/fonts/geist-sans-latin-400-normal.woff2"
crossorigin="anonymous"
/>
<link
rel="preload"
as="font"
type="font/woff2"
href="/fonts/geist-sans-latin-500-normal.woff2"
crossorigin="anonymous"
/>
<link
rel="preload"
as="font"
type="font/woff2"
href="/fonts/geist-sans-latin-600-normal.woff2"
crossorigin="anonymous"
/>
<link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
<%!-- Runs before first paint, and deliberately not deferred: resolving the
theme after the stylesheet has painted produces a flash of the wrong theme.
Storing nothing IS "system", so an untouched visitor gets their OS setting
through the prefers-color-scheme fallback and `data-theme` stays unset. The
script also records the EFFECTIVE theme, because the toggle needs to know
which way to flip and the CSS needs to know which glyph to show -- and when
nothing is stored, only the browser knows the answer. --%>
<script nonce={assigns[:csp_nonce]} phx-no-curly-interpolation>
(() => {
const media = window.matchMedia("(prefers-color-scheme: dark)");
const effective = () => {
const stored = localStorage.getItem("phx:theme");
if (stored === "light" || stored === "dark") return stored;
return media.matches ? "dark" : "light";
};
const paint = () => {
const stored = localStorage.getItem("phx:theme");
const root = document.documentElement;
if (stored === "light" || stored === "dark") {
root.setAttribute("data-theme", stored);
} else {
root.removeAttribute("data-theme");
}
root.setAttribute("data-theme-effective", effective());
};
paint();
window.addEventListener("phx:toggle-theme", () => {
localStorage.setItem("phx:theme", effective() === "dark" ? "light" : "dark");
paint();
});
window.addEventListener("phx:set-theme", (e) => {
const next = e.detail?.theme ?? e.target?.dataset?.theme;
if (next === "system") localStorage.removeItem("phx:theme");
else if (next) localStorage.setItem("phx:theme", next);
paint();
});
// Following the OS only matters while nothing is stored.
media.addEventListener("change", () => localStorage.getItem("phx:theme") || paint());
window.addEventListener("storage", (e) => e.key === "phx:theme" && paint());
})();
</script>
<script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>
</script>
</head>
<body
class="h-dvh overflow-hidden overscroll-none"
data-posthog-enabled={Atom.to_string(assigns[:posthog_enabled] == true)}
data-posthog-token={assigns[:posthog_token]}
data-posthog-api-host={assigns[:posthog_api_host]}
data-posthog-distinct-id={posthog_identity(assigns, :distinct_id)}
data-posthog-login={posthog_identity(assigns, :login)}
>
{@inner_content}
</body>
</html>