BaseHead.astro

---
interface Props {
  title: string;
  description?: string;
  image?: string;
}

import { withBase } from "../lib/utils";
const { title, description = "The official blog of the Python core development team.", image } = Astro.props;
const baseUrl = import.meta.env.DEV ? Astro.url.origin : Astro.site;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const ogImage = image ? new URL(image, baseUrl) : new URL(withBase("/og-default.png"), baseUrl);
---

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href={withBase("/favicon.svg")} />
<link rel="sitemap" href={withBase("/sitemap-index.xml")} />
<link rel="alternate" type="application/rss+xml" title="Python Insider" href={withBase("/rss.xml")} />
<link rel="canonical" href={canonicalURL} />

<!-- Fonts: Plus Jakarta Sans (display) + Inter (body) + JetBrains Mono (code) -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,600;0,700;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,300..700;1,14..32,300..700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

<!-- Prevent flash of wrong theme -->
<script is:inline>
  (function(){
    var s = localStorage.getItem("theme");
    if (s === "dark" || (!s && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
  })();
</script>

<title>{title}</title>
<meta name="description" content={description} />
<meta name="generator" content={Astro.generator} />

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content={canonicalURL} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={ogImage} />
<meta property="og:site_name" content="Python Insider" />

<!-- Twitter -->
<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={ogImage} />

<!-- Plausible Analytics -->
<script is:inline defer data-domain="blog.python.org" src="https://analytics.python.org/js/script.hash.outbound-links.js"></script>
<script is:inline>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>