@grove-dev/astro 0.5.0-next.2 → 0.5.1

package/src/ui/FilterDrawer.astro

@@ -0,0 +1,104 @@
+---
+/**
+ * FilterDrawer — mobile filter surface built on native `<dialog>`.
+ *
+ * `showModal()` gives focus trapping, Escape handling, and the
+ * top-layer backdrop for free — no dependency, no hand-rolled trap.
+ * On viewports ≥ md the trigger button hides and the slotted filter
+ * controls render inline through the same slot used on desktop, so
+ * there is exactly one copy of the filter markup.
+ *
+ * No-JS fallback: the slot content stays in normal flow (the dialog
+ * only wraps it once the client script moves it), so filters remain
+ * usable without JavaScript.
+ */
+import { buttonClass } from "./button.js";
+
+interface Props {
+  /** Trigger button label. */
+  label?: string;
+  /** Count of active filters shown on the trigger. */
+  activeCount?: number;
+  class?: string;
+}
+
+const { label = "Filters", activeCount = 0, class: className = "" } = Astro.props;
+---
+
+<div class={`grove-filter-drawer ${className}`} data-grove-filter-drawer>
+  <button
+    type="button"
+    data-drawer-open
+    class={buttonClass("secondary", "md", "w-full md:hidden")}
+    aria-haspopup="dialog"
+  >
+    {label}
+    {/* Always in the DOM (hidden at zero) so the client script can
+        update it from the live URL state on this prerendered page. */}
+    <span
+      data-drawer-count
+      class:list={[
+        "inline-flex min-w-5 items-center justify-center rounded-full bg-selected px-1.5 py-0.5 font-mono text-2xs leading-none text-selected-foreground",
+        activeCount === 0 && "hidden",
+      ]}
+    >
+      {activeCount}
+    </span>
+  </button>
+
+  {/* On mobile the client script moves this content into the dialog;
+      on ≥ md it stays inline. Not hidden by CSS — without JS the
+      filters must remain visible in flow on every viewport. */}
+  <div data-drawer-content class="md:contents">
+    <slot />
+  </div>
+
+  <dialog
+    data-drawer-dialog
+    class="m-0 mt-auto w-full max-w-none rounded-t-[calc(var(--radius)+0.5rem)] border-0 bg-surface-overlay p-0 text-foreground backdrop:bg-black/40 md:hidden"
+    aria-label={label}
+  >
+    <div class="flex items-center justify-between border-b border-border px-4 py-3">
+      <p class="m-0 text-sm font-semibold">{label}</p>
+      <button type="button" data-drawer-close class={buttonClass("ghost", "sm")}>
+        Done
+      </button>
+    </div>
+    <div data-drawer-body class="max-h-[70vh] overflow-y-auto p-4"></div>
+  </dialog>
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>("[data-grove-filter-drawer]").forEach((root) => {
+    const dialog = root.querySelector<HTMLDialogElement>("[data-drawer-dialog]");
+    const content = root.querySelector<HTMLElement>("[data-drawer-content]");
+    const body = root.querySelector<HTMLElement>("[data-drawer-body]");
+    const open = root.querySelector<HTMLButtonElement>("[data-drawer-open]");
+    const close = root.querySelector<HTMLButtonElement>("[data-drawer-close]");
+    if (!dialog || !content || !body || !open) return;
+
+    const mobile = window.matchMedia("(max-width: 47.999rem)");
+    const place = () => {
+      // One copy of the filter markup, moved between the inline slot
+      // (desktop) and the dialog body (mobile).
+      if (mobile.matches) {
+        body.append(...content.children);
+        content.classList.add("hidden");
+      } else {
+        if (dialog.open) dialog.close();
+        content.append(...body.children);
+        content.classList.remove("hidden");
+      }
+    };
+    place();
+    mobile.addEventListener("change", place);
+
+    open.addEventListener("click", () => dialog.showModal());
+    close?.addEventListener("click", () => dialog.close());
+    dialog.addEventListener("click", (event) => {
+      // Backdrop click closes: the dialog element itself is the
+      // target only when the click lands outside the panel content.
+      if (event.target === dialog) dialog.close();
+    });
+  });
+</script>

package/src/ui/PageHeader.astro

@@ -0,0 +1,39 @@
+---
+/**
+ * PageHeader — the page's title block. Always renders a semantic
+ * heading (h1 by default — every route needs exactly one) with an
+ * optional eyebrow and description.
+ *
+ * For section headings INSIDE a page keep using `SectionHeader`
+ * (layouts/), which defaults to h2/h3.
+ */
+
+interface Props {
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  /** Escape hatch for embedded use; the default 1 is the point. */
+  level?: 1 | 2;
+  class?: string;
+}
+
+const { eyebrow, title, description, level = 1, class: className = "" } = Astro.props;
+const Heading = `h${level}` as "h1" | "h2";
+---
+
+<header class={`flex flex-col gap-1 ${className}`}>
+  {eyebrow && (
+    <span class="text-2xs font-medium uppercase tracking-wider text-muted-foreground">
+      {eyebrow}
+    </span>
+  )}
+  <Heading class="m-0 text-[1.875rem] font-semibold tracking-tight text-foreground sm:text-[2.125rem]">
+    {title}
+  </Heading>
+  {description && (
+    <p class="m-0 mt-1 max-w-[64ch] text-[0.9375rem] leading-relaxed text-muted-foreground">
+      {description}
+    </p>
+  )}
+  <slot />
+</header>

package/src/ui/SearchField.astro

@@ -0,0 +1,50 @@
+---
+/**
+ * SearchField — labeled search input with the leading glass icon.
+ *
+ * The label is visually hidden but always present; placeholder text
+ * is display copy, not the accessible name. Pass the derived
+ * placeholder from `getDirectoryIndexModel().searchPlaceholder` so it
+ * only names ENABLED facets.
+ */
+
+interface Props {
+  label: string;
+  name?: string;
+  id?: string;
+  value?: string;
+  placeholder?: string;
+  class?: string;
+}
+
+const {
+  label,
+  name = "q",
+  id = "search-input",
+  value = "",
+  placeholder,
+  class: className = "",
+} = Astro.props;
+---
+
+<label class={`relative block ${className}`}>
+  <span class="sr-only">{label}</span>
+  <svg
+    viewBox="0 0 16 16"
+    width="16"
+    height="16"
+    aria-hidden="true"
+    class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+    fill="currentColor"
+  >
+    <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.5 4.5 0 1 0-9 0 4.5 4.5 0 0 0 9 0Z" />
+  </svg>
+  <input
+    id={id}
+    type="search"
+    name={name}
+    value={value}
+    placeholder={placeholder}
+    class="h-10 w-full rounded-md border border-input bg-background py-2 pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/20"
+  />
+</label>

package/src/ui/button.test.ts

@@ -0,0 +1,54 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+import { buttonClass, chipClass, filterTriggerClass, lensTabClass } from "./button.js";
+
+describe("button class builders", () => {
+  it("keeps selection state on the selected tokens, never the brand primary", () => {
+    for (const cls of [
+      buttonClass("selected"),
+      filterTriggerClass(true),
+      lensTabClass(true),
+    ]) {
+      expect(cls).toContain("bg-selected");
+      expect(cls).not.toContain("bg-primary");
+    }
+  });
+
+  it("uses the brand primary only for the primary variant", () => {
+    expect(buttonClass("primary")).toContain("bg-primary");
+    expect(buttonClass("secondary")).not.toContain("bg-primary");
+  });
+
+  it("guarantees a 44px mobile hit target on md and lg sizes", () => {
+    expect(buttonClass("secondary", "md")).toContain("max-sm:min-h-11");
+    expect(buttonClass("secondary", "lg")).toContain("h-11");
+    expect(filterTriggerClass(false)).toContain("max-sm:min-h-11");
+    expect(lensTabClass(false)).toContain("max-sm:min-h-11");
+  });
+
+  it("keeps the filter-trigger hook class through client reassignment", () => {
+    expect(filterTriggerClass(true)).toContain("grove-filter-trigger");
+    expect(filterTriggerClass(false)).toContain("grove-filter-trigger");
+  });
+
+  it("is the single source for chip classes on both server and client", () => {
+    // The browse page (server) and DirectoryIndexClient (client JS)
+    // must render byte-identical chips. Both now import chipClass —
+    // assert neither has regressed to an inline copy of the string.
+    const clientSource = readFileSync(
+      resolve(import.meta.dirname, "../components/DirectoryIndexClient.astro"),
+      "utf8",
+    );
+    const serverPage = readFileSync(
+      resolve(import.meta.dirname, "../../../../apps/example/src/pages/[slug]/index.astro"),
+      "utf8",
+    );
+    expect(clientSource).toContain("chipClass()");
+    expect(serverPage).toContain("chipClass()");
+    const inlineChip = "min-h-5 items-center justify-center gap-1 rounded-full";
+    expect(clientSource).not.toContain(inlineChip);
+    expect(serverPage).not.toContain(inlineChip);
+    expect(chipClass()).toContain(inlineChip);
+  });
+});

package/src/ui/button.ts

@@ -0,0 +1,98 @@
+/**
+ * Button / chip class builders — the single source for interactive
+ * control styling.
+ *
+ * Plain TS (not an .astro component) on purpose: `DirectoryIndexClient`
+ * rebuilds pagination links and active-filter chips in CLIENT-side JS,
+ * and those class strings must stay byte-identical with the server
+ * render. Both sides import these builders, so they cannot drift.
+ *
+ * Variant semantics (see styles.css):
+ * - `primary`   — the brand action (config `theme.primaryColor`).
+ * - `secondary` — default chrome buttons.
+ * - `outline` / `ghost` — quieter chrome.
+ * - `selected`  — "you are here" state (active filter, current lens,
+ *   current page). Neutral inversion via the `selected` tokens —
+ *   deliberately NOT the brand primary, so green never doubles as a
+ *   selection indicator.
+ */
+
+export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "selected";
+/** `bare` emits no size classes — pass custom geometry via `extra`. */
+export type ButtonSize = "sm" | "md" | "lg" | "bare";
+
+const BASE =
+  "inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35";
+
+/**
+ * `md`/`lg` guarantee a ≥44px hit target on small viewports
+ * (`max-sm:min-h-11`) while keeping the compact desktop height.
+ */
+const SIZES: Record<ButtonSize, string> = {
+  sm: "h-8 px-3 text-sm",
+  md: "h-9 px-3 text-sm max-sm:min-h-11",
+  lg: "h-11 px-4 text-sm",
+  bare: "",
+};
+
+const VARIANTS: Record<ButtonVariant, string> = {
+  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+  secondary: "border-border bg-secondary text-foreground hover:bg-accent",
+  outline: "border-border bg-transparent text-foreground hover:bg-accent",
+  ghost: "text-foreground hover:bg-accent",
+  selected: "bg-selected text-selected-foreground hover:bg-selected/90",
+};
+
+export function buttonClass(
+  variant: ButtonVariant = "secondary",
+  size: ButtonSize = "sm",
+  extra = "",
+): string {
+  return [BASE, SIZES[size], VARIANTS[variant], extra].filter(Boolean).join(" ");
+}
+
+/**
+ * Layout extras for pagination controls — shared by `Pagination.astro`
+ * and the client-side pagination rebuild in `DirectoryIndexClient`.
+ */
+export const PAGINATION_EXTRA = "min-w-9 px-2 py-1.5 text-2xs";
+
+/**
+ * Facet filter trigger (the "Stack: Any" dropdown buttons). Includes
+ * the `grove-filter-trigger` hook class because the client script
+ * reassigns the whole className when the active state changes — the
+ * hook must survive that reassignment.
+ */
+export function filterTriggerClass(active: boolean): string {
+  return [
+    "grove-filter-trigger",
+    BASE,
+    "h-9 px-3 text-[0.8125rem] max-sm:min-h-11",
+    active ? `${VARIANTS.selected} hover:text-selected-foreground` : VARIANTS.secondary,
+  ].join(" ");
+}
+
+/**
+ * Lens tab (the All / Hot / Mature row). Same geometry as the filter
+ * trigger; `data-lens-id` targeting keeps its own hook attribute.
+ */
+export function lensTabClass(active: boolean): string {
+  return [
+    BASE,
+    "h-9 px-3 text-[0.8125rem] max-sm:min-h-11",
+    active ? `${VARIANTS.selected} hover:text-selected-foreground` : VARIANTS.secondary,
+  ].join(" ");
+}
+
+/**
+ * Active-filter chip (the removable "Stack: Python ×" pills). One
+ * definition for the server render and the client rebuild.
+ */
+export function chipClass(extra = ""): string {
+  return [
+    "inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground transition-colors hover:border-ink-400",
+    extra,
+  ]
+    .filter(Boolean)
+    .join(" ");
+}

package/dist/lib/scores.d.ts

@@ -1,2 +0,0 @@
-export * from "@grove-dev/core";
-//# sourceMappingURL=scores.d.ts.map

package/dist/lib/scores.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"scores.d.ts","sourceRoot":"","sources":["../../src/lib/scores.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/lib/scores.js

@@ -1,2 +0,0 @@
-export * from "@grove-dev/core";
-//# sourceMappingURL=scores.js.map

package/dist/lib/scores.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"scores.js","sourceRoot":"","sources":["../../src/lib/scores.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/src/components/CurationGrid.astro

@@ -1,41 +0,0 @@
----
-interface Props {
-  bestFor?: string[];
-  whyListed?: string[];
-  caveats?: string[];
-  class?: string;
-}
-
-const {
-  bestFor = [],
-  whyListed = [],
-  caveats = [],
-  class: className = "",
-} = Astro.props;
-
-const columns = [
-  { title: "Best for", items: bestFor },
-  { title: "Why listed", items: whyListed },
-  { title: "Caveats", items: caveats },
-].filter((column) => column.items.length > 0);
----
-
-{columns.length > 0 && (
-  <section
-    class:list={["grid grid-cols-1 gap-4 md:grid-cols-3", className]}
-    aria-label="Curation notes"
-  >
-    {columns.map((column) => (
-      <div class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors p-5">
-        <h2 class="m-0 text-sm font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
-          {column.title}
-        </h2>
-        <ul class="mt-3 mb-0 flex list-disc flex-col gap-1.5 pl-5">
-          {column.items.map((item) => (
-            <li class="text-sm text-ink-700 dark:text-ink-200">{item}</li>
-          ))}
-        </ul>
-      </div>
-    ))}
-  </section>
-)}

package/src/components/DecisionRow.astro

@@ -1,89 +0,0 @@
----
-/**
- * DecisionRow — a single row of the curation decision table.
- *
- * Used on the "Decisions" admin/curation page. Renders the record
- * name, the current visibility/tier, the cleanup-candidate flag,
- * and links to the source repo and detail page.
- *
- * Generic: takes a `Resource` and reads the standard fields. No
- * blueprint-specific copy.
- */
-
-import type { Resource, ProjectRecord } from "@grove-dev/core";
-import { statusDisplay, prettySlug } from "../lib/display";
-import { getOwnerAndRepoFromRepoUrl } from "../lib/repo";
-
-interface Props {
-  record: Resource;
-  detailHref?: string;
-  class?: string;
-}
-
-const { record, detailHref, class: className = "" } = Astro.props;
-
-const isProject = record.kind === "project";
-const project = isProject ? (record as ProjectRecord) : null;
-
-const name =
-  record.kind === "resource"
-    ? (record as { title: string }).title
-    : (record as { name: string }).name;
-
-const repoUrl = project?.repoUrl;
-const ownerRepo = repoUrl ? getOwnerAndRepoFromRepoUrl(repoUrl) : null;
-
-const visibility = project?.health?.visibility ?? "keep";
-const tier = project?.health?.tier;
-const status = project?.health?.status;
-const cleanup = project?.health?.cleanupCandidate;
----
-
-<tr
-  class:list={["grove-decision-row align-top text-sm", className]}
-  data-record-slug={record.slug}
->
-  <td class="px-3 py-2">
-    <div class="flex flex-col gap-0.5">
-      <a
-        href={detailHref ?? `/${record.slug}`}
-        class="font-medium text-ink-900 hover:underline dark:text-ink-100"
-      >
-        {name}
-      </a>
-      {ownerRepo && (
-        <span class="text-2xs text-ink-500 dark:text-ink-400">
-          @{ownerRepo.owner}/{ownerRepo.repo}
-        </span>
-      )}
-    </div>
-  </td>
-  <td class="px-3 py-2 font-mono text-2xs text-ink-700 dark:text-ink-300">
-    {prettySlug(visibility)}
-  </td>
-  <td class="px-3 py-2 font-mono text-2xs text-ink-700 dark:text-ink-300">
-    {tier ? prettySlug(tier) : "—"}
-  </td>
-  <td class="px-3 py-2 font-mono text-2xs text-ink-700 dark:text-ink-300">
-    {status ? statusDisplay(status) : "—"}
-  </td>
-  <td class="px-3 py-2 text-2xs">
-    {cleanup ? (
-      <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground !bg-amber-50 !text-amber-800 dark:!bg-amber-950/80 dark:!text-amber-300">cleanup</span>
-    ) : (
-      <span class="text-ink-400">—</span>
-    )}
-  </td>
-  <td class="px-3 py-2 text-right">
-    {repoUrl && (
-      <a
-        href={repoUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        class="text-2xs text-ink-500 hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100"
-      >
-        repo →
-      </a>
-    )}
-  </td>
-</tr>

package/src/components/ExploreByCategory.astro

@@ -1,67 +0,0 @@
----
-/**
- * ExploreByCategory — compact, count-only browse-by-category row.
- *
- * Light sibling of CategoryGrid. Pill-style links with a count.
- * Generic: takes `{ name, slug, count }` entries.
- */
-
-interface CategoryEntry {
-  name: string;
-  slug: string;
-  count?: number;
-}
-
-interface Props {
-  categories: CategoryEntry[];
-  pathPrefix?: string;
-  title?: string;
-  description?: string;
-  class?: string;
-}
-
-const {
-  categories,
-  pathPrefix = "/",
-  title = "Explore by category",
-  description,
-  class: className = "",
-} = Astro.props;
-
-function buildHref(slug: string): string {
-  const base = pathPrefix.replace(/\/$/, "");
-  return `${base}?category=${encodeURIComponent(slug)}`;
-}
----
-
-<section class:list={["py-10 sm:py-12", className]}>
-  <div class="mx-auto w-full max-w-wide px-5 sm:px-7">
-    <header class="mb-3 flex flex-col gap-1">
-      <h2 class="m-0 text-[1.125rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-        {title}
-      </h2>
-      {description && (
-        <p class="m-0 text-[0.8125rem] text-ink-500 dark:text-ink-400">
-          {description}
-        </p>
-      )}
-    </header>
-    <ul class="m-0 flex list-none flex-wrap gap-2 p-0">
-      {categories.map((c) => (
-        <li>
-          <a
-            href={buildHref(c.slug)}
-            class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground items-center gap-1.5 transition-colors hover:border-ink-400 dark:hover:border-ink-600"
-            data-event="explore_category_click"
-            data-event-source="explore_category"
-          >
-            <span>{c.name}</span>
-            {typeof c.count === "number" && (
-              <span class="font-mono text-ink-400">{c.count}</span>
-            )}
-          </a>
-        </li>
-      ))}
-    </ul>
-  </div>
-</section>

package/src/components/ExploreByStack.astro

@@ -1,78 +0,0 @@
----
-/**
- * ExploreByStack — compact, count-only browse-by-stack row.
- *
- * The "explore" companion to StackGrid. Renders a single dense row
- * of pill links (one per stack) with a count next to each. No
- * cards, no blurbs — meant for the section that fits below the
- * primary lens grid.
- *
- * Generic: takes a list of `{ name, slug, count }` entries. No
- * blueprint-specific terms.
- */
-
-interface StackEntry {
-  name: string;
-  slug: string;
-  count?: number;
-  status?: "live" | "expanding" | "planned";
-}
-
-interface Props {
-  stacks: StackEntry[];
-  pathPrefix?: string;
-  title?: string;
-  description?: string;
-  class?: string;
-}
-
-const {
-  stacks,
-  pathPrefix = "/",
-  title = "Explore by stack",
-  description,
-  class: className = "",
-} = Astro.props;
-
-function buildHref(slug: string): string {
-  const base = pathPrefix.replace(/\/$/, "");
-  return `${base}?stack=${encodeURIComponent(slug)}`;
-}
----
-
-<section class:list={["py-10 sm:py-12", className]}>
-  <div class="mx-auto w-full max-w-wide px-5 sm:px-7">
-    <header class="mb-3 flex flex-col gap-1">
-      <h2 class="m-0 text-[1.125rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-        {title}
-      </h2>
-      {description && (
-        <p class="m-0 text-[0.8125rem] text-ink-500 dark:text-ink-400">
-          {description}
-        </p>
-      )}
-    </header>
-    <ul class="m-0 flex list-none flex-wrap gap-2 p-0">
-      {stacks.map((s) => (
-        <li>
-          <a
-            href={buildHref(s.slug)}
-            class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground items-center gap-1.5 transition-colors hover:border-ink-400 dark:hover:border-ink-600"
-            data-event="explore_stack_click"
-            data-event-source="explore_stack"
-          >
-            <span>{s.name}</span>
-            {typeof s.count === "number" && (
-              <span class="font-mono text-ink-400">{s.count}</span>
-            )}
-            {s.status && s.status !== "live" && (
-              <span class="text-[10px] uppercase tracking-wide text-ink-400">
-                {s.status}
-              </span>
-            )}
-          </a>
-        </li>
-      ))}
-    </ul>
-  </div>
-</section>

package/src/components/GroveDocumentHead.astro

@@ -1,28 +0,0 @@
----
-import type { PageDocument } from "@grove-dev/core";
-interface Props {
-  document: PageDocument;
-}
-const { document: doc } = Astro.props;
----
-<title>{doc.metadata.title}</title>
-<meta name="description" content={doc.metadata.description} />
-<meta name="robots" content={doc.metadata.robots} />
-<link rel="canonical" href={doc.identity.canonical.toString()} />
-{doc.identity.hreflang?.map((lang) => (
-  <link rel="alternate" hreflang={lang} href={doc.identity.canonical.toString()} />
-))}
-<meta property="og:title" content={doc.metadata.openGraph.title} />
-<meta property="og:description" content={doc.metadata.openGraph.description} />
-<meta property="og:url" content={doc.metadata.openGraph.url} />
-<meta property="og:image" content={doc.metadata.openGraph.image} />
-<meta property="og:type" content={doc.metadata.openGraph.type} />
-{doc.metadata.openGraph.siteName && (
-  <meta property="og:site_name" content={doc.metadata.openGraph.siteName} />
-)}
-<meta name="twitter:card" content={doc.metadata.twitter.card} />
-{doc.metadata.twitter.site && <meta name="twitter:site" content={doc.metadata.twitter.site} />}
-{doc.metadata.twitter.creator && <meta name="twitter:creator" content={doc.metadata.twitter.creator} />}
-{doc.structuredData.map((node) => (
-  <script type="application/ld+json" set:html={JSON.stringify(node)} />
-))}