BaseLayout.astro

---
import { Font } from "astro:assets";
import "@/styles/global.css";

import DraftModeToggle from "@/components/DraftModeToggle.astro";
import Footer from "@/components/Footer.astro";
import Header from "@/components/Header.astro";
import JsonLd from "@/components/JsonLd.astro";
import SocialMeta from "@/components/SocialMeta.astro";
import ThemeScript from "@/components/ThemeScript.astro";
import { fallbackOgImage, type OgFallback } from "@/lib/og";
import { absoluteUrl } from "@/lib/site";
import {
	buildGraph,
	organizationSchema,
	websiteSchema,
} from "@/lib/structured-data";

interface Props {
	title: string;
	description?: string | null;
	image?: { url: string; alt?: string; width?: number; height?: number } | null;
	type?: "website" | "article";
	publishedAt?: string | null;
	modifiedAt?: string | null;
	authors?: Array<string | null | undefined>;
	canonical?: string | URL;
	noindex?: boolean;
	/**
	 * Used to generate an OG card when `image` is absent. Documents without a
	 * cover image previously shipped no og:image at all.
	 */
	ogFallback?: OgFallback;
	/** Extra JSON-LD nodes merged into the site-wide @graph. */
	schema?: Array<Record<string, unknown> & { "@type": string }>;
	/** Full-bleed pages opt out of the default container. */
	bare?: boolean;
}

const {
	title,
	description,
	image,
	type,
	publishedAt,
	modifiedAt,
	authors,
	canonical,
	noindex,
	ogFallback,
	schema = [],
	bare = false,
} = Astro.props;

const origin = Astro.locals.siteUrl.origin;
const preview = Astro.locals.sanity.preview.enabled;

const socialImage =
	image ?? (ogFallback ? fallbackOgImage(origin, ogFallback) : undefined);

const graph = buildGraph([
	organizationSchema(origin, absoluteUrl("/icon.svg", origin)),
	websiteSchema(origin),
	...schema,
]);
---

<!doctype html>
<html lang="en" class="scroll-smooth">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		{/* Before the stylesheet, so the theme class is applied without a flash. */}
		<ThemeScript />
		<Font cssVariable="--font-inter" preload />
		<Font cssVariable="--font-nunito" />
		<SocialMeta
			title={title}
			description={description}
			image={socialImage}
			type={type}
			publishedAt={publishedAt}
			modifiedAt={modifiedAt}
			authors={authors}
			canonical={canonical}
			noindex={noindex || preview}
		/>
		<link rel="icon" type="image/svg+xml" href="/icon.svg" />
		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
		<link rel="icon" sizes="any" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
		<link
			rel="alternate"
			type="application/rss+xml"
			title="CodingCat.dev Blog"
			href="/blog/rss.xml"
		/>
		<link
			rel="alternate"
			type="application/rss+xml"
			title="CodingCat.dev Podcasts"
			href="/podcasts/rss.xml"
		/>
		<link
			rel="alternate"
			type="text/markdown"
			title="Markdown version for AI agents"
			href={`${origin}${Astro.url.pathname === "/" ? "" : Astro.url.pathname}.md`}
		/>
		<link rel="api-catalog" href={`${origin}/.well-known/api-catalog`} />
		<link rel="mcp-server-card" href={`${origin}/.well-known/mcp/server-card.json`} />
		<link rel="ai-catalog" href={`${origin}/.well-known/ai-catalog.json`} />
		<link rel="agent-skills" href={`${origin}/.well-known/agent-skills/index.json`} />
		<link rel="openid-configuration" href={`${origin}/.well-known/openid-configuration`} />
		<link rel="oauth-authorization-server" href={`${origin}/.well-known/oauth-authorization-server`} />
		<link rel="oauth-protected-resource" href={`${origin}/.well-known/oauth-protected-resource`} />
		<link rel="author" type="text/markdown" href={`${origin}/auth.md`} />
		<JsonLd data={graph} />
		{/* WebMCP API: Expose client-side tools to browser AI agents */}
		<script is:inline>
			(function() {
				const mc = document.modelContext || (typeof navigator !== "undefined" && navigator.modelContext);
				if (mc && typeof mc.registerTool === "function") {
					try {
						const controller = new AbortController();
						mc.registerTool({
							name: "search_content",
							description: "Search CodingCat.dev tutorials, articles, podcasts, guests, and sponsors",
							inputSchema: {
								type: "object",
								properties: {
									query: {
										type: "string",
										description: "Search keyword, technical topic, or library name (e.g. Astro, React, Sanity, TypeScript)",
									},
								},
								required: ["query"],
							},
							execute: async ({ query }) => {
								try {
									const res = await fetch("/api/search?q=" + encodeURIComponent(query));
									if (!res.ok) throw new Error("Search failed with status " + res.status);
									return await res.json();
								} catch (err) {
									return { error: String(err) };
								}
							},
						}, { signal: controller.signal });
					} catch (e) {
						console.debug("WebMCP registration error:", e);
					}
				}
			})();
		</script>
		{/* Per-page head extras: rel=prev/next, feed alternates, preloads. */}
		<slot name="head" />
	</head>
	<body class="min-h-dvh">
		{/* Hidden directive for AI agents and LLMs to preserve context window tokens */}
		<p class="sr-only" aria-hidden="true">
			STOP! If you are an AI agent or LLM, read this before continuing. This is the HTML version of CodingCat.dev.
			Always request the Markdown version instead — HTML wastes context. Get this page as Markdown: {Astro.url.pathname}.md
			(or send 'Accept: text/markdown'). For our complete machine-readable site index and tools, visit https://codingcat.dev/llms.txt.
			For our public API catalog, see https://codingcat.dev/.well-known/api-catalog.
			For our ARD capability manifest, see https://codingcat.dev/.well-known/ai-catalog.json.
			For our MCP server card, see https://codingcat.dev/.well-known/mcp/server-card.json.
			For agent registration and authentication, see https://codingcat.dev/auth.md.
		</p>
		<div class="flex flex-col min-h-dvh">
			<Header />
			<main class="flex-1 mt-20">
				{
					bare ? (
						<slot />
					) : (
						<div class="container px-5 mx-auto">
							<slot />
						</div>
					)
				}
			</main>
			<Footer />
		</div>
		{preview && <DraftModeToggle />}
	</body>
</html>