rf4-spotter/apps/web/src/layouts/Layout.astro

---
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/pagination.css";
import "../styles/dashboard-polish.css";
import "../styles/loading-states.css";
import "../styles/query-context.css";
import "../styles/theme.css";
import "../styles/media-catalog.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 isAdminPath = path === "/admin" || path.startsWith("/admin/");
const preventIndexing = noindex || isAdminPath;
if (isAdminPath) {
  Astro.response.headers.set("Cache-Control", "private, no-store");
  Astro.response.headers.set("X-Robots-Tag", "noindex, nofollow");
}
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");
const configuredFilesDomain = process.env.FILES_DOMAIN || "files.rf4spotter.ru";
const filesDomain = /^(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)(?:\.[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)+$/i.test(configuredFilesDomain)
  ? configuredFilesDomain
  : "files.rf4spotter.ru";
const isLoopback = (hostname: string) => hostname === "localhost" || hostname === "127.0.0.1" || hostname === "[::1]";
const safeOrigin = (value: string | undefined, fallback: string) => {
  try {
    const url = new URL(value || fallback);
    return url.protocol === "https:" || (url.protocol === "http:" && isLoopback(url.hostname)) ? url.origin : fallback;
  } catch {
    return fallback;
  }
};
const apiOrigin = safeOrigin(import.meta.env.PUBLIC_API_URL, siteUrl);
const filesFallback = `https://${filesDomain}`;
const filesOrigin = (() => {
  try {
    const url = new URL(process.env.FILES_ORIGIN || filesFallback);
    if ((url.protocol === "https:" && url.hostname === filesDomain) || (url.protocol === "http:" && isLoopback(url.hostname))) {
      return url.origin;
    }
  } catch {
    // Invalid deployment input falls back to the validated production hostname.
  }
  return filesFallback;
})();
const localOrigins = [apiOrigin, filesOrigin].filter((origin) => origin.startsWith("http://"));
const cspNonce = crypto.randomUUID().replaceAll("-", "");
Astro.response.headers.set("Content-Security-Policy", [
  "default-src 'self'", "base-uri 'self'", "object-src 'none'", "frame-ancestors 'none'",
  "form-action 'self'", `connect-src 'self'${apiOrigin === siteUrl ? "" : ` ${apiOrigin}`}`,
  `img-src 'self' data: ${filesOrigin}`,
  "font-src 'self'", "media-src 'self'", "manifest-src 'self'",
  `script-src 'self' 'nonce-${cspNonce}'`, "script-src-attr 'none'",
  "style-src 'self'", "style-src-attr 'none'",
  ...(localOrigins.length ? [] : ["upgrade-insecure-requests"]),
].join("; "));
---
<!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" nonce={cspNonce} 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("/media") || path.startsWith("/admin/media")}} aria-current={path.startsWith("/media") || path.startsWith("/admin/media") ? "page" : undefined} href="/media"><FishingIcon name="lure"/> <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>