Files
rf4-spotter/apps/web/src/layouts/Layout.astro
T
ik aed541c70c
CI / backend-and-migrations (push) Canceled after 0s
CI / astro-build (push) Canceled after 0s
CI / dependency-audit (push) Canceled after 0s
CI / compose-e2e (push) Canceled after 0s
feat: synchronize theme browser chrome
2026-09-13 16:17:22 +07:00

120 lines
7.9 KiB
Plaintext

---
import "../styles/global.css";
import "../styles/catalog.css";
import "../styles/source-status.css";
import "../styles/data-passport.css";
import "../styles/data-legend.css";
import "../styles/coordinate-radar.css";
import "../styles/activity-timeline.css";
import "../styles/fish-silhouette.css";
import "../styles/tackle-glyph.css";
import "../styles/empty-states.css";
import "../styles/alpha-banner.css";
import "../styles/signal-pagination.css";
import "../styles/dashboard-polish.css";
import "../styles/loading-states.css";
import "../styles/theme.css";
import FishingIcon from "../components/FishingIcon.astro";
import AlphaBanner from "../components/AlphaBanner.astro";
const {
title = "RF4 Spotter — свежие точки клёва Russian Fishing 4",
description = "Свежие точки, уловы и честная оценка активности в Russian Fishing 4 с обязательным указанием источников.",
noindex = false,
image = "/og-rf4spotter.png",
structuredData = null,
errorPage = false,
} = Astro.props;
const path = Astro.url.pathname;
const storedTheme = Astro.cookies.get("rf4-theme")?.value;
const theme = storedTheme === "light" || storedTheme === "dark" ? storedTheme : "system";
const siteUrl = import.meta.env.PUBLIC_SITE_URL || "https://rf4spotter.ru";
const canonical = new URL(path, siteUrl).toString();
const socialImage = new URL(image, siteUrl).toString();
const preventIndexing = noindex || path.startsWith("/admin/");
const websiteJsonLd = { "@type": "WebSite", name: "RF4 Spotter", url: siteUrl, inLanguage: "ru" };
// A08: Skip structuredData on error pages (explicit errorPage prop)
// Don't infer error from noindex alone — main page can have noindex on 422
const jsonLdGraph = (structuredData && !errorPage) ? [websiteJsonLd, structuredData] : [websiteJsonLd];
const jsonLd = JSON.stringify({
"@context": "https://schema.org",
"@graph": jsonLdGraph,
}).replaceAll("<", "\\u003c");
---
<!doctype html>
<html lang="ru" data-theme={theme === "system" ? undefined : theme}>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta name="description" content={description} />
<meta name="robots" content={preventIndexing ? "noindex, nofollow" : "index, follow, max-image-preview:large"} />
<link rel="canonical" href={canonical} />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#f2f5ee" media={theme === "system" ? "(prefers-color-scheme: light)" : theme === "light" ? "all" : "not all"} data-theme-color="light" />
<meta name="theme-color" content="#071719" media={theme === "system" ? "(prefers-color-scheme: dark)" : theme === "dark" ? "all" : "not all"} data-theme-color="dark" />
<meta property="og:locale" content="ru_RU" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="RF4 Spotter" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={canonical} />
<meta property="og:image" content={socialImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="Лаймовый поплавок на тёмном озере с координатной сеткой" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={socialImage} />
<meta name="twitter:image:alt" content="Лаймовый поплавок на тёмном озере с координатной сеткой" />
<script type="application/ld+json" set:html={jsonLd} is:inline />
<title>{title}</title>
</head>
<body>
<a class="skip-link" href="#main-content">Перейти к содержимому</a>
<header class="topbar">
<a href="/" class="brand"><span class="brand-mark" aria-hidden="true"><FishingIcon name="hook" size={24}/></span><span class="brand-name"><strong>RF4 Spotter</strong><span>Ни хвоста, ни чешуи</span></span></a>
<nav aria-label="Разделы сайта"><a class:list={{active:path === "/"}} aria-current={path === "/" ? "page" : undefined} href="/"><FishingIcon name="float"/> <span>Сейчас клюёт</span></a><a class:list={{active:path.startsWith("/waterbodies") || path.startsWith("/fish")}} aria-current={path.startsWith("/waterbodies") || path.startsWith("/fish") ? "page" : undefined} href="/waterbodies"><FishingIcon name="ripple"/> <span>Каталог</span></a><a class:list={{active:path.startsWith("/records")}} aria-current={path.startsWith("/records") ? "page" : undefined} href="/records"><FishingIcon name="trophy"/> <span>Рекорды</span></a><a class:list={{active:path.startsWith("/report")}} aria-current={path.startsWith("/report") ? "page" : undefined} href="/report"><FishingIcon name="plus"/> <span>Добавить улов</span></a></nav>
<div class="header-tools">
<p class="live-badge"><span></span> Свежие данные и честная оценка</p>
<div class="theme-switcher" role="group" aria-label="Цветовая тема">
<button type="button" data-theme-option="system" aria-pressed={theme === "system"} title="Использовать системную тему"><span aria-hidden="true">◐</span><b>Системная</b></button>
<button type="button" data-theme-option="light" aria-pressed={theme === "light"} title="Включить светлую тему"><span aria-hidden="true">☀</span><b>Светлая</b></button>
<button type="button" data-theme-option="dark" aria-pressed={theme === "dark"} title="Включить тёмную тему"><span aria-hidden="true">●</span><b>Тёмная</b></button>
</div>
</div>
</header>
<AlphaBanner />
<main id="main-content" tabindex="-1"><slot /></main>
<footer><a href="/" class="brand"><span class="brand-mark" aria-hidden="true"><FishingIcon name="hook" size={24}/></span><span class="brand-name"><strong>RF4 Spotter</strong><span>Ни хвоста, ни чешуи</span></span></a><p>Неофициальный проект для игроков Russian Fishing 4. <a href="/status">Статус</a> · <a href="/rules">Правила</a> · <a href="/privacy">Конфиденциальность</a></p><span>RF4S · 2026</span></footer>
</body>
</html>
<script>
const root = document.documentElement;
const themeButtons = document.querySelectorAll<HTMLButtonElement>("[data-theme-option]");
const themeColors = document.querySelectorAll<HTMLMetaElement>("[data-theme-color]");
const allowedThemes = new Set(["system", "light", "dark"]);
const applyTheme = (value: string) => {
const theme = allowedThemes.has(value) ? value : "system";
if (theme === "system") delete root.dataset.theme;
else root.dataset.theme = theme;
themeButtons.forEach((button) => {
button.setAttribute("aria-pressed", String(button.dataset.themeOption === theme));
});
themeColors.forEach((meta) => {
const color = meta.dataset.themeColor;
meta.media = theme === "system" ? `(prefers-color-scheme: ${color})` : color === theme ? "all" : "not all";
});
const secure = location.protocol === "https:" ? "; Secure" : "";
document.cookie = `rf4-theme=${theme}; Max-Age=31536000; Path=/; SameSite=Lax${secure}`;
};
themeButtons.forEach((button) => {
button.addEventListener("click", () => applyTheme(button.dataset.themeOption ?? "system"));
});
</script>