@mannisto/astro-metadata 1.0.2 → 2.0.0-alpha.1

package/src/toolbar/data.ts

@@ -0,0 +1,282 @@
+import { parseHead } from "../lib/checks.js"
+import type { Check } from "../lib/checks.js"
+import { getConfig } from "../lib/config.ts"
+import { loadAssets } from "./assets.ts"
+
+export type { Check }
+
+/** A meta tag: its `name` or `property`, and its `content`. */
+export type MetaTag = {
+  key: string
+  value: string
+}
+
+/** A link tag and its attributes. */
+export type LinkTag = {
+  rel: string
+  href: string
+  type?: string
+  sizes?: string
+  hreflang?: string
+  title?: string
+  media?: string
+  /** The tag as HTML. */
+  html: string
+}
+
+/** A JSON-LD script: its source, and its data when the JSON is valid. */
+export type JsonLd = {
+  source: string
+  data?: unknown
+  /** The `@type` values, e.g. ["WebSite", "BreadcrumbList"]. */
+  types: string[]
+  error?: string
+}
+
+/** The web app manifest of the page, loaded from its URL. */
+export type ManifestData = {
+  url: string
+  data?: unknown
+  error?: string
+}
+
+/** All metadata of the current page. The tabs of the panel only read this object. */
+export type PageMetadata = {
+  url: string
+  lang?: string
+  title?: string
+  description?: string
+  canonical?: string
+  robots?: string
+  themeColors: { color: string; media?: string }[]
+  openGraph: MetaTag[]
+  twitter: MetaTag[]
+  icons: LinkTag[]
+  feeds: LinkTag[]
+  hreflang: LinkTag[]
+  manifest?: ManifestData
+  schemas: JsonLd[]
+  /** True for a page that the `pages.ignore` option matches: it gets no checks. */
+  ignored: boolean
+  /** The metadata tags of the head as HTML, one tag on each line. */
+  source: string
+  checks: Check[]
+}
+
+// The link tags of the metadata. Other links, e.g. stylesheets, are not metadata.
+const METADATA_LINKS = ["canonical", "icon", "apple-touch-icon", "manifest", "alternate"]
+
+/**
+ * Returns the attributes of a link tag.
+ */
+function linkTag(element: HTMLLinkElement): LinkTag {
+  return {
+    rel: element.rel,
+    href: element.getAttribute("href") ?? "",
+    type: element.getAttribute("type") ?? undefined,
+    sizes: element.getAttribute("sizes") ?? undefined,
+    hreflang: element.getAttribute("hreflang") ?? undefined,
+    title: element.getAttribute("title") ?? undefined,
+    media: element.getAttribute("media") ?? undefined,
+    html: element.outerHTML,
+  }
+}
+
+/**
+ * Returns the meta tags with a `name` or `property` that starts with a prefix, in their order.
+ */
+function metaTags(prefix: string): MetaTag[] {
+  const tags = [...document.head.querySelectorAll("meta")]
+  return tags.flatMap((element) => {
+    const key = element.getAttribute("property") ?? element.getAttribute("name") ?? ""
+    return key.startsWith(prefix) ? [{ key, value: element.content }] : []
+  })
+}
+
+/**
+ * Returns the content of the first meta tag with a name.
+ */
+function metaContent(name: string): string | undefined {
+  return document.head.querySelector<HTMLMetaElement>(`meta[name="${name}"]`)?.content
+}
+
+/**
+ * Returns the JSON-LD scripts of the page, in the head and in the body.
+ */
+function jsonLd(): JsonLd[] {
+  const scripts = [...document.querySelectorAll('script[type="application/ld+json"]')]
+  return scripts.map((script) => {
+    const source = script.textContent ?? ""
+    try {
+      const data = JSON.parse(source)
+      const items = Array.isArray(data) ? data : [data]
+      const types = items.map((item) => {
+        return String(item?.["@type"] ?? "?")
+      })
+      return { source, data, types }
+    } catch (error) {
+      return { source, types: [], error: error instanceof Error ? error.message : String(error) }
+    }
+  })
+}
+
+/**
+ * Returns the metadata tags of the head as HTML. The scripts and styles of the dev server
+ * are left out, so the source shows only what the site renders.
+ */
+function headSource(): string {
+  const elements = [...document.head.children].filter((element) => {
+    const tag = element.tagName.toLowerCase()
+    if (tag === "title" || tag === "meta") return true
+    if (tag === "link") return METADATA_LINKS.includes((element as HTMLLinkElement).rel)
+    return tag === "script" && element.getAttribute("type") === "application/ld+json"
+  })
+  return elements
+    .map((element) => {
+      return element.outerHTML
+    })
+    .join("\n")
+}
+
+/**
+ * Loads the web app manifest of the page.
+ */
+async function loadManifest(url: string): Promise<ManifestData> {
+  try {
+    const response = await fetch(url)
+    if (!response.ok) return { url, error: `The server answered ${response.status}.` }
+    return { url, data: await response.json() }
+  } catch (error) {
+    return { url, error: error instanceof Error ? error.message : String(error) }
+  }
+}
+
+/**
+ * Reads the metadata of the current page. The checks are the same as the build checks.
+ */
+export async function collect(): Promise<PageMetadata> {
+  const head = document.head
+  const links = [...head.querySelectorAll<HTMLLinkElement>("link")].map(linkTag)
+  const manifestUrl = links.find((link) => {
+    return link.rel === "manifest"
+  })?.href
+
+  return {
+    url: location.href,
+    lang: document.documentElement.lang || undefined,
+    title: head.querySelector("title")?.textContent ?? undefined,
+    description: metaContent("description"),
+    canonical: links.find((link) => {
+      return link.rel === "canonical"
+    })?.href,
+    robots: metaContent("robots"),
+    themeColors: [...head.querySelectorAll<HTMLMetaElement>('meta[name="theme-color"]')].map(
+      (element) => {
+        return { color: element.content, media: element.media || undefined }
+      }
+    ),
+    openGraph: metaTags("og:"),
+    twitter: metaTags("twitter:"),
+    icons: links.filter((link) => {
+      return link.rel === "icon" || link.rel === "apple-touch-icon"
+    }),
+    feeds: links.filter((link) => {
+      return link.rel === "alternate" && !link.hreflang && Boolean(link.type)
+    }),
+    hreflang: links.filter((link) => {
+      return link.rel === "alternate" && Boolean(link.hreflang)
+    }),
+    manifest: manifestUrl ? await loadManifest(manifestUrl) : undefined,
+    schemas: jsonLd(),
+    source: headSource(),
+    ...(await checkPage()),
+  }
+}
+
+/**
+ * Returns the value of a meta tag of a list, e.g. "og:image" of the Open Graph tags.
+ */
+export function findMeta(tags: MetaTag[], key: string): string | undefined {
+  return tags.find((tag) => {
+    return tag.key === key
+  })?.value
+}
+
+/** The problems of a page: the number of errors and warnings, and the worst level. */
+export type CheckSummary = {
+  errors: number
+  warnings: number
+  /** "error" or "warning", or undefined for a page without problems. */
+  level?: "error" | "warning"
+}
+
+/**
+ * Counts the errors and the warnings. Information, e.g. noindex, is not a problem.
+ * The toolbar badge, the tab badge and the status alert use the same summary.
+ */
+export function summarize(checks: Check[]): CheckSummary {
+  const errors = checks.filter((check) => {
+    return check.level === "error"
+  }).length
+  const warnings = checks.filter((check) => {
+    return check.level === "warning"
+  }).length
+
+  let level: CheckSummary["level"]
+  if (errors > 0) level = "error"
+  else if (warnings > 0) level = "warning"
+  return { errors, warnings, level }
+}
+
+/** The result of the checks of a page. */
+export type PageChecks = {
+  /** True for a page that the `pages.ignore` option matches: it gets no checks. */
+  ignored: boolean
+  checks: Check[]
+}
+
+// The check endpoint of the dev server. The integration adds it.
+const CHECK_PATH = "/__astro-metadata/check"
+
+/**
+ * Returns the path of the current page without the base, e.g. "/blog/" for "/docs/blog/".
+ */
+function pagePath(): string {
+  const prefix = (getConfig().base ?? "/").replace(/\/$/, "")
+  const path = location.pathname
+  return prefix && path.startsWith(prefix) ? path.slice(prefix.length) || "/" : path
+}
+
+/**
+ * Checks the current page with the same rules as the build. The app loads the files of the
+ * page, and the dev server runs the rules: the custom rules are functions in the Astro
+ * config, so only the server has them.
+ */
+export async function checkPage(): Promise<PageChecks> {
+  const html = document.documentElement.outerHTML
+  const assets = await loadAssets(parseHead(html))
+  const prefix = (getConfig().base ?? "/").replace(/\/$/, "")
+
+  try {
+    const response = await fetch(`${prefix}${CHECK_PATH}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ html, path: pagePath(), assets }),
+    })
+    if (!response.ok) throw new Error(`The server answered ${response.status}.`)
+    return (await response.json()) as PageChecks
+  } catch (error) {
+    const reason = error instanceof Error ? error.message : String(error)
+    return {
+      ignored: false,
+      checks: [
+        {
+          id: "check-failed",
+          field: "custom",
+          level: "error",
+          message: `The dev server could not check the page: ${reason}`,
+        },
+      ],
+    }
+  }
+}

package/src/toolbar/define.ts

@@ -0,0 +1,7 @@
+/**
+ * Registers a custom element one time. Hot reload runs the module again, and a second
+ * `customElements.define()` with the same name throws an error.
+ */
+export function define(name: string, element: CustomElementConstructor): void {
+  if (!customElements.get(name)) customElements.define(name, element)
+}

package/src/toolbar/env.d.ts

@@ -0,0 +1,10 @@
+// Vite imports: a CSS file as a string, and an SVG file as its source
+declare module "*.css?inline" {
+  const css: string
+  export default css
+}
+
+declare module "*.svg?raw" {
+  const svg: string
+  export default svg
+}

package/src/toolbar/highlight.ts

@@ -0,0 +1,83 @@
+// A small highlighter for the two formats of the panel: JSON and HTML.
+// It wraps each token in a span with a class, and the CSS sets the colors.
+
+export type Language = "json" | "html"
+
+/**
+ * Escapes a text for use in HTML.
+ */
+export function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+}
+
+/**
+ * Returns a token in a span with a class.
+ */
+function token(name: string, text: string): string {
+  return `<span class="token ${name}">${escapeHtml(text)}</span>`
+}
+
+// A string (and a colon after a key), a keyword, or a number
+const JSON_TOKENS =
+  /("(?:\\.|[^"\\])*")(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g
+
+// A tag start or end, an attribute with its value, or the end of a tag
+const HTML_TOKENS = /(<\/?)([\w:-]+)|([\w:-]+)(=)("[^"]*"|'[^']*')|(\/?>)/g
+
+/**
+ * Highlights JSON.
+ */
+function highlightJson(code: string): string {
+  let output = ""
+  let last = 0
+  for (const match of code.matchAll(JSON_TOKENS)) {
+    output += escapeHtml(code.slice(last, match.index))
+    const [text, string, colon, keyword] = match
+    if (string && colon) {
+      output += token("key", string) + escapeHtml(colon)
+    } else if (string) {
+      output += token("string", string)
+    } else if (keyword) {
+      output += token("keyword", keyword)
+    } else {
+      output += token("number", text)
+    }
+    last = match.index + text.length
+  }
+  return output + escapeHtml(code.slice(last))
+}
+
+/**
+ * Highlights HTML tags and their attributes.
+ */
+function highlightHtml(code: string): string {
+  let output = ""
+  let last = 0
+  for (const match of code.matchAll(HTML_TOKENS)) {
+    output += escapeHtml(code.slice(last, match.index))
+    const [text, open, tag, name, equals, value, close] = match
+    if (tag) {
+      output += token("punctuation", open) + token("tag", tag)
+    } else if (name) {
+      output += token("attribute", name) + token("punctuation", equals) + token("value", value)
+    } else {
+      output += token("punctuation", close)
+    }
+    last = match.index + text.length
+  }
+  return output + escapeHtml(code.slice(last))
+}
+
+/**
+ * Returns the code as HTML with a span for each token.
+ *
+ * @param code - The source code.
+ * @param language - "json" or "html".
+ */
+export function highlight(code: string, language: Language): string {
+  return language === "json" ? highlightJson(code) : highlightHtml(code)
+}

package/src/toolbar/styles/shared.css

@@ -0,0 +1,18 @@
+/* The styles that all views share. The ui components bring their own styles. */
+:host {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-300);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+p {
+  margin: 0;
+}
+
+.empty {
+  color: var(--zinc-400);
+}

package/src/toolbar/styles/tokens.css

@@ -0,0 +1,182 @@
+/* The design values of the toolbar app. All components inherit them. */
+:host {
+  all: initial;
+
+  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --line-height: 1.5;
+
+  /*
+   * The spacing and font size tokens of the other projects. They use rem with a root
+   * size of 62.5 % (1 rem = 10 px). In the toolbar, rem uses the root size of the user's
+   * site, so the values here are in px: 1.6rem is 16px.
+   */
+  --space-0: 0;
+  --space-25: 1px;
+  --space-50: 2px;
+  --space-100: 4px;
+  --space-150: 6px;
+  --space-200: 8px;
+  --space-300: 12px;
+  --space-400: 16px;
+  --space-500: 20px;
+  --space-600: 24px;
+  --space-700: 28px;
+  --space-800: 32px;
+  --space-900: 36px;
+  --space-1000: 40px;
+  --space-1200: 48px;
+  --space-1600: 64px;
+  --space-2000: 80px;
+  --space-2400: 96px;
+  --space-2800: 112px;
+  --space-3200: 128px;
+
+  --font-size-tiny: 10.24px;
+  --font-size-small: 12.8px;
+  --font-size-body: 16px;
+  --font-size-h6: 20px;
+  --font-size-h5: 25px;
+  --font-size-h4: 31.25px;
+  --font-size-h3: 39.06px;
+  --font-size-h2: 48.83px;
+  --font-size-h1: 61.04px;
+  --font-size-display: 94px;
+
+  /*
+   * The color scales: zinc, red, orange, yellow, green and blue, in steps of 50 from
+   * 50 to 950. The values are the same as in the color tokens of the other projects.
+   * All colors of the toolbar app come from these scales.
+   */
+  --zinc-50: oklch(98.51% 0 0deg);
+  --zinc-100: oklch(96.74% 0.0013 286.4deg);
+  --zinc-150: oklch(94.37% 0.0027 286.3deg);
+  --zinc-200: oklch(91.97% 0.004 286.3deg);
+  --zinc-250: oklch(89.56% 0.0054 286.3deg);
+  --zinc-300: oklch(87.11% 0.0055 286.3deg);
+  --zinc-350: oklch(79.39% 0.0084 286.2deg);
+  --zinc-400: oklch(71.18% 0.0129 286.1deg);
+  --zinc-450: oklch(63.3% 0.0133 286deg);
+  --zinc-500: oklch(55.17% 0.0138 285.9deg);
+  --zinc-550: oklch(49.93% 0.0142 285.9deg);
+  --zinc-600: oklch(44.19% 0.0146 285.8deg);
+  --zinc-650: oklch(40.83% 0.0133 285.8deg);
+  --zinc-700: oklch(37.03% 0.0119 285.8deg);
+  --zinc-750: oklch(32.3% 0.0088 285.9deg);
+  --zinc-800: oklch(27.39% 0.0055 286deg);
+  --zinc-850: oklch(24.48% 0.0056 286deg);
+  --zinc-900: oklch(21.03% 0.0059 285.9deg);
+  --zinc-950: oklch(14.08% 0.0044 285.8deg);
+
+  --red-50: oklch(97.05% 0.0129 17.4deg);
+  --red-100: oklch(93.56% 0.0309 17.7deg);
+  --red-150: oklch(90.99% 0.0449 18deg);
+  --red-200: oklch(88.45% 0.0593 18.3deg);
+  --red-250: oklch(84.65% 0.0804 18.9deg);
+  --red-300: oklch(80.77% 0.1035 19.6deg);
+  --red-350: oklch(75.69% 0.135 20.7deg);
+  --red-400: oklch(71.06% 0.1661 22.2deg);
+  --red-450: oklch(67.27% 0.1884 23.7deg);
+  --red-500: oklch(63.68% 0.2078 25.3deg);
+  --red-550: oklch(60.68% 0.2129 26.3deg);
+  --red-600: oklch(57.71% 0.2152 27.3deg);
+  --red-650: oklch(54.25% 0.2034 27.4deg);
+  --red-700: oklch(50.54% 0.1905 27.5deg);
+  --red-750: oklch(47.51% 0.1758 27.2deg);
+  --red-800: oklch(44.37% 0.1613 26.9deg);
+  --red-850: oklch(41.96% 0.1476 26.4deg);
+  --red-900: oklch(39.58% 0.1331 25.7deg);
+  --red-950: oklch(25.75% 0.0886 26deg);
+
+  --orange-50: oklch(97.96% 0.0158 73.7deg);
+  --orange-100: oklch(95.42% 0.0372 75.2deg);
+  --orange-150: oklch(92.81% 0.0549 71.5deg);
+  --orange-200: oklch(90.15% 0.0729 70.7deg);
+  --orange-250: oklch(86.98% 0.0955 68.6deg);
+  --orange-300: oklch(83.66% 0.1165 66.3deg);
+  --orange-350: oklch(79.58% 0.1381 60.8deg);
+  --orange-400: oklch(75.76% 0.159 55.9deg);
+  --orange-450: oklch(73.1% 0.1729 52deg);
+  --orange-500: oklch(70.49% 0.1867 47.6deg);
+  --orange-550: oklch(67.65% 0.1905 44.3deg);
+  --orange-600: oklch(64.61% 0.1943 41.1deg);
+  --orange-650: oklch(60.07% 0.1838 40deg);
+  --orange-700: oklch(55.34% 0.1739 38.4deg);
+  --orange-750: oklch(51.26% 0.1583 38.2deg);
+  --orange-800: oklch(46.98% 0.143 37.3deg);
+  --orange-850: oklch(43.99% 0.1295 38deg);
+  --orange-900: oklch(40.84% 0.1165 38.2deg);
+  --orange-950: oklch(26.59% 0.0762 36.3deg);
+
+  --yellow-50: oklch(98.73% 0.0262 102.2deg);
+  --yellow-100: oklch(97.29% 0.0693 103.2deg);
+  --yellow-150: oklch(95.96% 0.0981 102.4deg);
+  --yellow-200: oklch(94.51% 0.1243 101.5deg);
+  --yellow-250: oklch(92.5% 0.1477 99.6deg);
+  --yellow-300: oklch(90.52% 0.1657 98.1deg);
+  --yellow-350: oklch(88.3% 0.1714 95deg);
+  --yellow-400: oklch(86.06% 0.1731 91.9deg);
+  --yellow-450: oklch(82.89% 0.1674 89.4deg);
+  --yellow-500: oklch(79.52% 0.1617 86deg);
+  --yellow-550: oklch(73.92% 0.1515 81.7deg);
+  --yellow-600: oklch(68.06% 0.1423 75.8deg);
+  --yellow-650: oklch(61.85% 0.1314 71.4deg);
+  --yellow-700: oklch(55.38% 0.1207 66.4deg);
+  --yellow-750: oklch(51.63% 0.1119 64.9deg);
+  --yellow-800: oklch(47.62% 0.1034 61.9deg);
+  --yellow-850: oklch(44.88% 0.0967 60.1deg);
+  --yellow-900: oklch(42.1% 0.0897 57.7deg);
+  --yellow-950: oklch(28.57% 0.0639 53.8deg);
+
+  --green-50: oklch(98.19% 0.0181 155.8deg);
+  --green-100: oklch(96.24% 0.0434 156.7deg);
+  --green-150: oklch(94.49% 0.062 156.4deg);
+  --green-200: oklch(92.5% 0.0806 156deg);
+  --green-250: oklch(89.74% 0.1088 155.2deg);
+  --green-300: oklch(87.12% 0.1363 154.4deg);
+  --green-350: oklch(83.57% 0.1613 153.1deg);
+  --green-400: oklch(80.03% 0.1821 151.7deg);
+  --green-450: oklch(76.25% 0.1884 150.7deg);
+  --green-500: oklch(72.27% 0.192 149.6deg);
+  --green-550: oklch(67.53% 0.1811 149.4deg);
+  --green-600: oklch(62.71% 0.1699 149.2deg);
+  --green-650: oklch(57.92% 0.1539 149.6deg);
+  --green-700: oklch(52.73% 0.1371 150.1deg);
+  --green-750: oklch(48.96% 0.1231 150.7deg);
+  --green-800: oklch(44.79% 0.1083 151.3deg);
+  --green-850: oklch(42.05% 0.0986 152.1deg);
+  --green-900: oklch(39.25% 0.0896 152.5deg);
+  --green-950: oklch(26.64% 0.0628 152.9deg);
+
+  --blue-50: oklch(97.05% 0.0142 254.6deg);
+  --blue-100: oklch(93.19% 0.0316 255.6deg);
+  --blue-150: oklch(90.81% 0.0439 253.6deg);
+  --blue-200: oklch(88.23% 0.0571 254.1deg);
+  --blue-250: oklch(84.56% 0.0769 252.9deg);
+  --blue-300: oklch(80.91% 0.0956 251.8deg);
+  --blue-350: oklch(76.12% 0.1198 253.8deg);
+  --blue-400: oklch(71.37% 0.1434 254.6deg);
+  --blue-450: oklch(66.89% 0.1648 257.6deg);
+  --blue-500: oklch(62.31% 0.188 259.8deg);
+  --blue-550: oklch(58.54% 0.2017 261.5deg);
+  --blue-600: oklch(54.61% 0.2152 262.9deg);
+  --blue-650: oklch(51.85% 0.2163 263.6deg);
+  --blue-700: oklch(48.82% 0.2172 264.4deg);
+  --blue-750: oklch(45.71% 0.1998 265deg);
+  --blue-800: oklch(42.44% 0.1809 265.6deg);
+  --blue-850: oklch(40.21% 0.1604 265.7deg);
+  --blue-900: oklch(37.91% 0.1378 265.5deg);
+  --blue-950: oklch(28.23% 0.0874 267.9deg);
+
+  --radius: 8px;
+  --radius-medium: 6px;
+  --radius-small: 4px;
+
+  --icon-size: 16px;
+  --shadow: 0 0 40px var(--zinc-950);
+
+  font-family: var(--font-sans);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height);
+  color: var(--zinc-100);
+}

package/src/toolbar/toolbar-badge.ts

@@ -0,0 +1,78 @@
+// The toolbar draws the notification badge of each app. These rules change only our badge:
+// no border and a lighter color. Instead of the border, a mask cuts a gap in the shape of the
+// badge out of our icon, so the real background (a gradient) shows around the badge.
+// The selectors depend on the toolbar markup of Astro. They start with the same IDs as the
+// rules of Astro, so they have a higher specificity and win without !important.
+const APP = '#dev-bar #bar-container .item[data-app-id="mannisto-astro-metadata"]'
+
+// The shapes of the badges of Astro.
+// The shapes are in the coordinates of their own 10 px badge box.
+const BADGE_SHAPES = {
+  warning:
+    '<path d="M7.29904 1.25c-.57735-1-2.02073-1-2.59808 0l-3.4641 6C.65951 8.25 1.3812 9.5 2.5359 9.5h6.9282c1.1547 0 1.8764-1.25 1.299-2.25l-3.46406-6Z"/>',
+  error: '<rect width="9" height="9" x=".5" y=".5" rx="4.5"/>',
+  info: '<rect width="9" height="9" x=".5" y=".5" rx="1.5"/>',
+}
+
+// The position of the badge box, in px from the top and the right edge of the 20 px icon.
+// Astro uses top -4 and right -6. Smaller values move the badge closer to the icon.
+const BADGE_TOP = -4
+const BADGE_RIGHT = -6
+
+// The width of the gap around the badge, in px: the same as the line of the icon on screen.
+// The icon (Phosphor, Bold weight) has a 24 unit line in a 256 unit grid,
+// and the toolbar shows it at 20 px.
+const BADGE_GAP = 24 * (20 / 256)
+
+/**
+ * Returns a CSS mask image: the full icon, with a hole in the shape of a badge.
+ */
+function badgeMask(shape: string): string {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <mask id="m">
+      <rect width="20" height="20" fill="white"/>
+      <g transform="translate(${10 - BADGE_RIGHT} ${BADGE_TOP})" fill="black" stroke="black" stroke-width="${BADGE_GAP * 2}" stroke-linejoin="round">${shape}</g>
+    </mask>
+    <rect width="20" height="20" mask="url(#m)"/>
+  </svg>`
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`
+}
+
+// The badge is in the shadow root of the Astro toolbar, where the design values of the
+// panel do not reach. So its colors are the hex codes of the Tailwind values.
+const BADGE_STYLE = `
+  ${APP} .notification {
+    top: ${BADGE_TOP}px;
+    right: ${BADGE_RIGHT}px;
+  }
+  ${APP} .notification svg :is(path, rect) {
+    stroke: none;
+  }
+  ${APP} .notification[data-level="warning"] path {
+    fill: #facc15; /* yellow-400 */
+  }
+  ${APP} .notification[data-level="error"] rect {
+    fill: #ef4444; /* red-500 */
+  }
+  ${Object.entries(BADGE_SHAPES)
+    .map(([level, shape]) => {
+      return `
+        #dev-toolbar-root:not([data-no-notification]) ${APP} .icon:has(.notification[data-active][data-level="${level}"]) > svg {
+          mask: ${badgeMask(shape)} center / 100% 100% no-repeat;
+        }`
+    })
+    .join("")}
+`
+
+/**
+ * Adds the badge style to the shadow root of the Astro toolbar, one time.
+ */
+export function styleBadge(): void {
+  const root = document.querySelector("astro-dev-toolbar")?.shadowRoot
+  if (!root || root.getElementById("mannisto-astro-metadata-badge")) return
+
+  const style = document.createElement("style")
+  style.id = "mannisto-astro-metadata-badge"
+  style.textContent = BADGE_STYLE
+  root.append(style)
+}