BaseLayout.astro

---
import SiteBar from '../components/SiteBar.astro'
import SiteFooter from '../components/SiteFooter.astro'
import ToTop from '../components/ToTop.astro'
import { MAIN_ID, SITE, TEXT } from '../content/site'
import displayUrl from '../assets/fonts/bricolage-grotesque-latin-variable.woff2?url'
import sansUrl from '../assets/fonts/ibm-plex-sans-latin-variable.woff2?url'
import '../styles/theme.css'

interface Props {
  /** Overrides the document title, for a page that is not the home. */
  title?: string
  description?: string
  /** The address of this page from the root. `null` is a page with no address of its own, the 404. */
  path: string | null
  /** What the page is to a link preview: the site, or one article of it. */
  kind?: 'website' | 'article'
  /** Kept out of the index, for a page that is a tool rather than content. */
  noindex?: boolean
  /** The schema.org description of the page, published as JSON-LD for search engines. */
  structuredData?: Record<string, unknown>
  /** The link-preview card of the page from the root, and what it shows. The card of the site otherwise. */
  image?: { path: string; alt: string }
  /** The address from the root of the same page as plain Markdown, for language models and agents. */
  markdown?: string
}
const {
  title,
  description,
  path,
  kind = 'website',
  noindex = false,
  structuredData,
  image = { path: '/og-image.png', alt: SITE.name },
  markdown,
} = Astro.props
const documentTitle = title ? `${title} · ${SITE.name}` : SITE.meta.title
const documentDescription = description ?? SITE.meta.description

const origin = Astro.site ?? Astro.url.origin
const canonical = path === null ? null : new URL(path, origin).href
const ogImage = new URL(image.path, origin).href
/** Escapes `<` so nothing in the data can close the script element it is published in. */
const jsonLd = structuredData
  ? JSON.stringify({ '@context': 'https://schema.org', ...structuredData }).replace(/</g, '\\u003c')
  : null
---

<!doctype html>
<html lang="en" id="top">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    {/* The two faces the top of every page paints with, fetched ahead of the stylesheet that names them. */}
    <link rel="preload" href={displayUrl} as="font" type="font/woff2" crossorigin />
    <link rel="preload" href={sansUrl} as="font" type="font/woff2" crossorigin />
    <meta name="theme-color" content="#f5f6fc" data-light="#f5f6fc" data-dark="#0d1020" />
    {/* Apply the saved theme before first paint so there is no flash. With no explicit choice it follows
        the system, matching the no-JS baseline. Reads the same key as the theme control. It ships inlined
        on every page and counts against the script budget, so it is written compact. */}
    <script is:inline>
      try{var c=localStorage.getItem('tiny-blocks:theme'),d=c==='dark'||(c!=='light'&&matchMedia('(prefers-color-scheme: dark)').matches);document.documentElement.dataset.theme=d?'dark':'light';document.querySelector('meta[name="theme-color"]').content=d?'#0d1020':'#f5f6fc'}catch(e){}
    </script>
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <title>{documentTitle}</title>
    <meta name="description" content={documentDescription} />
    {canonical ? <link rel="canonical" href={canonical} /> : null}
    {canonical === null || noindex ? <meta name="robots" content="noindex" /> : null}
    <meta property="og:type" content={kind} />
    <meta property="og:site_name" content={SITE.name} />
    <meta property="og:title" content={documentTitle} />
    <meta property="og:description" content={documentDescription} />
    {canonical ? <meta property="og:url" content={canonical} /> : null}
    <meta property="og:locale" content="en_US" />
    <meta property="og:image" content={ogImage} />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content={image.alt} />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:image" content={ogImage} />
    {/* Proves to Google Search Console that the site is ours. Removing it loses the verification. */}
    <meta name="google-site-verification" content="03NLy1Dxn_HS7c6jW_j9RBoZWjHsga-ipdeQoxqwfzY" />
    <link rel="sitemap" href="/sitemap.xml" />
    <link rel="alternate" type="text/plain" href="/llms.txt" title="Tiny Blocks for language models" />
    {markdown ? <link rel="alternate" type="text/markdown" href={markdown} /> : null}
    {jsonLd ? <script type="application/ld+json" set:html={jsonLd} /> : null}
  </head>
  <body>
    <a href={`#${MAIN_ID}`} class="skip-link">{TEXT.skipLink}</a>
    <SiteBar />
    <slot />
    <SiteFooter />
    <ToTop label={TEXT.nav.toTop} />
    {/* The progressive-enhancement modules every page ships. The page renders complete without them. */}
    <script>
      import '../scripts/theme-toggle.ts'
      import '../scripts/to-top.ts'
    </script>
  </body>
</html>