@grove-dev/astro 0.5.4 → 0.6.1

package/src/components/Hero.astro

@@ -126,18 +126,22 @@ const primaryCta: CTA | undefined =
 
   <Container>
     <div class="relative mx-auto flex max-w-[900px] flex-col items-center py-[88px] text-center lg:py-[104px]">
-      {/* Eyebrow */}
+      {/* Eyebrow. The `eyebrow` slot replaces the whole line — dot
+          included — so a consumer can put richer content here (a
+          `PoweredBy` link, a release badge) without forking the Hero. */}
       <span class="inline-flex animate-fade-in items-center gap-2 text-[13px] font-medium text-ink-500 dark:text-ink-400">
-        <span aria-hidden="true" class="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500"></span>
-        {eyebrow}
-        {eyebrowBadge && (
-          <span
-            class="inline-flex items-center rounded-full border border-amber-300 bg-amber-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-amber-800 dark:border-amber-700/50 dark:bg-amber-900/20 dark:text-amber-300"
-            aria-label={eyebrowBadge}
-          >
-            {eyebrowBadge}
-          </span>
-        )}
+        <slot name="eyebrow">
+          <span aria-hidden="true" class="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500"></span>
+          {eyebrow}
+          {eyebrowBadge && (
+            <span
+              class="inline-flex items-center rounded-full border border-amber-300 bg-amber-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-amber-800 dark:border-amber-700/50 dark:bg-amber-900/20 dark:text-amber-300"
+              aria-label={eyebrowBadge}
+            >
+              {eyebrowBadge}
+            </span>
+          )}
+        </slot>
       </span>
 
       {/* Headline */}

package/src/components/Pagination.astro

@@ -7,7 +7,7 @@ interface Props {
 }
 
 import { paginationPageList } from "@grove-dev/astro";
-import { buttonClass, PAGINATION_EXTRA } from "../ui/button.js";
+import { buttonClass, PAGINATION_DISABLED, PAGINATION_EXTRA } from "../ui/button.js";
 
 const { current, total, hrefFor, class: className = "" } = Astro.props;
 
@@ -24,7 +24,7 @@ const currentClass = buttonClass("selected", "sm", PAGINATION_EXTRA);
     {current > 1 ? (
       <a href={hrefFor(current - 1)} class={linkClass} rel="prev">Previous</a>
     ) : (
-      <span class={`${linkClass} pointer-events-none opacity-40`}>Previous</span>
+      <span class={`${linkClass} ${PAGINATION_DISABLED}`}>Previous</span>
     )}
 
     {pages.map((page) =>
@@ -44,7 +44,7 @@ const currentClass = buttonClass("selected", "sm", PAGINATION_EXTRA);
     {current < total ? (
       <a href={hrefFor(current + 1)} class={linkClass} rel="next">Next</a>
     ) : (
-      <span class={`${linkClass} pointer-events-none opacity-40`}>Next</span>
+      <span class={`${linkClass} ${PAGINATION_DISABLED}`}>Next</span>
     )}
   </nav>
 )}

package/src/components/PoweredBy.astro

@@ -0,0 +1,60 @@
+---
+/**
+ * PoweredBy — "Powered by Grove" attribution.
+ *
+ * The mark is **inlined**, not loaded through `<img src>`: an SVG
+ * served as its own document cannot see page CSS, so `currentColor`
+ * never resolves there (the bug that cost the packaged icon set both
+ * themes before 0.5.3). Inlined, the mark simply inherits the
+ * surrounding text colour and follows the site's theme toggle — no
+ * second file, no script.
+ *
+ * Generic: no `siteConfig` import. `Footer` renders it under the brand
+ * block when `footer.poweredBy` is on; consumers can also drop it
+ * anywhere themselves — e.g. into `Hero`'s `eyebrow` slot.
+ */
+
+interface Props {
+  /** Where the link points. Override only for a staging/docs mirror. */
+  href?: string;
+  /** Mark size in px. Default 16 — sized for 13px text. */
+  size?: number;
+  /** Extra class on the link. */
+  class?: string;
+}
+
+const {
+  href = "https://grove.dev.mn",
+  size = 16,
+  class: className = "",
+} = Astro.props;
+---
+
+<a
+  href={href}
+  target="_blank"
+  rel="noopener noreferrer"
+  class:list={[
+    "inline-flex items-center gap-1.5 transition-colors hover:text-ink-900 dark:hover:text-ink-100",
+    className,
+  ]}
+>
+  <span>Powered by</span>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    width={size}
+    height={size}
+    style={`width:${size}px;height:${size}px`}
+    fill="none"
+    aria-hidden="true"
+    class="shrink-0 align-middle"
+  >
+    <path d="M16 28V14" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+    <path d="M16 14C16 14 16 8 22 6C22 6 22 12 16 14Z" fill="currentColor" fill-opacity="0.85"></path>
+    <path d="M16 14C16 14 16 8 10 6C10 6 10 12 16 14Z" fill="currentColor" fill-opacity="0.6"></path>
+    <path d="M16 18C16 18 16 22 20 23" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+    <path d="M16 21C16 21 16 24 12 25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+  </svg>
+  <span class="font-semibold">Grove</span>
+</a>

package/src/components/ProjectCard.astro

@@ -45,6 +45,7 @@ import {
   formatStars,
   nameInitials,
   projectStackIds,
+  truncateWords,
 } from "@grove-dev/astro";
 import CardIcon from "./CardIcon.astro";
 import Icon from "./Icon.astro";
@@ -155,8 +156,13 @@ const avatarUrl =
 
 const initials = nameInitials(name);
 
-const description =
-  descriptionProp ?? (record as { description?: string } | undefined)?.description ?? "";
+// Trimmed on a word boundary before the two-line clamp gets to it: a
+// CSS clamp cuts at whatever character the box runs out of room on,
+// which is what produced "…and multi-", "…and retrieval", "…an" across
+// a grid.
+const description = truncateWords(
+  descriptionProp ?? (record as { description?: string } | undefined)?.description ?? "",
+);
 
 const stars =
   starsProp ?? (isProject ? (record as { github?: { stars?: number } }).github?.stars : undefined);
@@ -197,15 +203,22 @@ const hasStacks = visibleStacks.length > 0;
 
 <Root
   {...rootAttrs}
-  class={`groove-project-card group relative flex h-full min-w-0 flex-col gap-3 rounded-xl border border-ink-200 bg-card p-5 outline-none transition-[border-color,background-color,transform] duration-150 hover:-translate-y-0.5 hover:border-ink-300 hover:bg-ink-50 focus-visible:border-ink-500 focus-visible:ring-2 focus-visible:ring-ink-900/15 dark:border-ink-800 dark:hover:border-ink-700 dark:hover:bg-ink-900 dark:focus-visible:border-ink-500 dark:focus-visible:ring-ink-100/15 ${className}`}
+  class={`group relative flex h-full min-w-0 flex-col gap-3 rounded-xl border border-ink-200 bg-card p-5 outline-none transition-[border-color,background-color,transform] duration-150 hover:-translate-y-0.5 hover:border-ink-400 hover:bg-ink-50 focus-visible:border-ink-500 focus-visible:ring-2 focus-visible:ring-ink-900/15 dark:border-ink-800 dark:hover:border-ink-600 dark:hover:bg-ink-900 dark:focus-visible:border-ink-500 dark:focus-visible:ring-ink-100/15 ${className}`}
   data-record-slug={slug}
   data-event={event}
   data-event-source={eventSource}
   data-event-item={event ? slug : undefined}
 >
-  {/* Header: icon + name + owner */}
+  {/* Header: icon + name + owner.
+
+      The initials chip is always in the DOM, `hidden` behind the image,
+      and unhidden by the image's own `onerror` — the same pattern
+      `Icon.astro` uses. Rendering it only when `avatarUrl` is falsy made
+      it unreachable for every record with a GitHub owner, so a dead
+      logo URL or a renamed org showed the browser's broken-image glyph
+      instead of a fallback. */}
   <header class="flex items-start gap-3">
-    {avatarUrl ? (
+    {avatarUrl && (
       <img
         src={avatarUrl}
         alt=""
@@ -214,16 +227,18 @@ const hasStacks = visibleStacks.length > 0;
         loading={eager ? "eager" : "lazy"}
         fetchpriority={eager ? "high" : undefined}
         decoding="async"
-        class="h-12 w-12 shrink-0 rounded-lg bg-white object-contain p-1 dark:bg-white"
+        onerror="this.hidden=true;this.nextElementSibling.hidden=false"
+        class="h-12 w-12 shrink-0 rounded-lg bg-white object-contain p-1"
       />
-    ) : (
-      <span
-        aria-hidden="true"
-        class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-ink-100 text-base font-semibold uppercase text-ink-700 dark:bg-ink-800 dark:text-ink-200"
-      >
-        {initials}
-      </span>
     )}
+    <span
+      aria-hidden="true"
+      hidden={Boolean(avatarUrl)}
+      data-grove-card-fallback-initials
+      class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-ink-100 text-base font-semibold uppercase text-ink-700 dark:bg-ink-800 dark:text-ink-200"
+    >
+      {initials}
+    </span>
 
     <div class="flex min-w-0 flex-1 flex-col gap-0.5">
       <h3 class="m-0 truncate text-[17px] font-semibold leading-snug tracking-tight text-ink-900 sm:text-[18px] dark:text-ink-100">
@@ -270,18 +285,20 @@ const hasStacks = visibleStacks.length > 0;
 
   {/* Footer: stack logos · stars/updated · arrow */}
   <footer class="mt-auto flex items-center justify-between gap-3 text-[12px] sm:text-[13px]">
-    <div class="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-ink-500 dark:text-ink-400">
-      {hasStacks && (
-        <div class="flex items-center gap-2">
-          {visibleStacks.map((stack) => (
-            <Icon name={stack} category="stack" size={16} title={stack} />
-          ))}
-          {stackOverflow > 0 && (
-            <span class="text-[12px] text-ink-500 dark:text-ink-400">+{stackOverflow}</span>
-          )}
-        </div>
-      )}
-    </div>
+    {hasStacks ? (
+      <div class="flex min-w-0 items-center gap-2 text-ink-500 dark:text-ink-400">
+        {visibleStacks.map((stack) => (
+          <Icon name={stack} category="stack" size={16} title={stack} />
+        ))}
+        {stackOverflow > 0 && (
+          <span class="text-[12px] text-ink-500 dark:text-ink-400">+{stackOverflow}</span>
+        )}
+      </div>
+    ) : (
+      /* Keeps the footer's stars/updated block right-aligned without
+         shipping an empty flex container on every stackless card. */
+      <span></span>
+    )}
 
     <div class="flex min-w-0 shrink-0 items-center gap-3 text-ink-500 dark:text-ink-400">
       {hasStars && (

package/src/components/RecordHeader.astro

@@ -51,7 +51,10 @@ const {
       at the row's right edge on wide viewports and wrap below on
       mobile. */}
   <div class="flex items-center gap-4">
-    {avatarSrc ? (
+    {/* Initials stay in the DOM behind the logo and are revealed by the
+        image's own `onerror` — a dead logo URL or a renamed GitHub org
+        would otherwise render the broken-image glyph. */}
+    {avatarSrc && (
       <img
         src={avatarSrc}
         alt=""
@@ -59,16 +62,18 @@ const {
         height="56"
         loading="lazy"
         decoding="async"
-        class="h-12 w-12 shrink-0 rounded-lg border border-ink-200 object-contain bg-white p-1 dark:border-ink-800 dark:bg-ink-950 sm:h-14 sm:w-14"
+        onerror="this.hidden=true;this.nextElementSibling.hidden=false"
+        class="h-12 w-12 shrink-0 rounded-lg border border-ink-200 object-contain bg-white p-1 dark:border-ink-800 sm:h-14 sm:w-14"
       />
-    ) : (
-      <span
-        aria-hidden="true"
-        class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-lg border border-ink-200 bg-ink-50 text-xl font-semibold text-ink-700 dark:border-ink-800 dark:bg-ink-900 dark:text-ink-200 sm:h-14 sm:w-14"
-      >
-        {initials || "·"}
-      </span>
     )}
+    <span
+      aria-hidden="true"
+      hidden={Boolean(avatarSrc)}
+      data-grove-card-fallback-initials
+      class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-lg border border-ink-200 bg-ink-50 text-xl font-semibold text-ink-700 dark:border-ink-800 dark:bg-ink-900 dark:text-ink-200 sm:h-14 sm:w-14"
+    >
+      {initials || "·"}
+    </span>
 
     <div class="min-w-0 flex-1">
       <h1 class="m-0 text-[1.75rem] font-semibold leading-tight tracking-tight text-ink-900 dark:text-ink-100 sm:text-[2rem]">

package/src/components/RefinePanel.astro

@@ -110,13 +110,22 @@ const groups = groupModels.map((group) => ({
         }
       });
     }
+    // A directory controller (DirectoryIndexClient) can adopt the URL
+    // in place and re-render without a reload; it signals that by
+    // cancelling the event. Anywhere else — a taxonomy page, no
+    // controller on the page at all — this falls back to navigating,
+    // so the panel keeps working on its own.
+    function go(url) {
+      const event = new CustomEvent("grove:navigate", { detail: { url }, cancelable: true });
+      if (document.dispatchEvent(event)) location.assign(url);
+    }
     function navigate(group, values) {
       const params = new URLSearchParams(location.search);
       const key = keys[group.dataset.filterGroupKey];
       params.delete(key);
       params.delete("page");
       values.forEach((value) => params.append(key, value));
-      location.assign(params.toString() ? `${pathPrefix}?${params}` : pathPrefix);
+      go(params.toString() ? `${pathPrefix}?${params}` : pathPrefix);
     }
     groups.forEach((group) => {
       const trigger = group.querySelector(".grove-filter-trigger");
@@ -153,7 +162,7 @@ const groups = groupModels.map((group) => ({
       const params = new URLSearchParams(location.search);
       params.set("sort", event.target.value);
       params.delete("page");
-      location.assign(params.toString() ? `${pathPrefix}?${params}` : pathPrefix);
+      go(params.toString() ? `${pathPrefix}?${params}` : pathPrefix);
     });
   })();
 </script>

package/src/components/TableOfContents.astro

@@ -32,34 +32,33 @@ const hasItems = items.length > 1;
 ---
 
 {hasItems && (
-  <details class="grove-toc rounded-[var(--radius-lg)] border border-ink-200 bg-card open:bg-card dark:border-ink-800">
-    <summary class="cursor-pointer list-none px-4 py-3 text-2xs font-semibold uppercase tracking-wider text-ink-500 hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100 lg:cursor-default lg:pointer-events-none">
+  <details class="grove-toc lg:border-0">
+    <summary class="cursor-pointer list-none pb-3 text-2xs font-semibold uppercase tracking-wider text-ink-500 hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100 lg:cursor-default lg:pointer-events-none lg:pb-2">
       <span class="inline-flex items-center gap-1.5">
         <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor" class="grove-toc-chevron transition-transform lg:hidden">
           <path d="M6 4l4 4-4 4V4z" />
         </svg>
         {label}
-        <span class="ml-1 rounded-full bg-ink-100 px-1.5 py-0.5 text-[10px] font-medium text-ink-500 dark:bg-ink-800 dark:text-ink-300">
-          {items.length}
-        </span>
       </span>
     </summary>
     {/* Full list, no inner scroll — the TOC lives in the right rail
-        and every entry stays visible. h3 entries indent under their
-        h2 parents. */}
-    <ol class="grove-toc-list mt-1 list-none border-t border-ink-200 p-2 text-sm dark:border-ink-800 lg:border-t-0 lg:p-0">
+        and every entry stays visible. h3 entries indent further under
+        their h2 parents; the active state is a left-rail indicator +
+        text-color emphasis set by the script + styles.css. */}
+    <ol class="grove-toc-list list-none py-1 text-sm lg:py-0">
       {items.map((entry) => (
         <li
           class:list={[
-            "grove-toc-item border-b border-ink-100 last:border-b-0 dark:border-ink-800 lg:border-b-0 lg:py-0.5",
-            entry.depth >= 3 && "ml-4 lg:ml-3",
+            "grove-toc-item relative",
+            entry.depth >= 3 && "grove-toc-item--h3",
           ]}
         >
           <a
             href={`#${entry.id}`}
             class:list={[
-              "grove-toc-link block truncate px-3 py-2 text-ink-500 no-underline transition-colors hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100 lg:px-2 lg:py-1",
-              entry.depth >= 3 && "text-[0.8125rem]",
+              "grove-toc-link block py-1.5 text-ink-500 no-underline transition-colors hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100",
+              entry.depth >= 2 && "pl-3 lg:pl-4",
+              entry.depth >= 3 && "pl-6 text-[0.8125rem] lg:pl-7",
             ]}
             data-toc-link={entry.id}
           >

package/src/index.ts

@@ -109,6 +109,14 @@ export default function groveAstro(): AstroIntegration {
                 "@grove/generated": resolve(consumerRoot, "data/generated"),
               },
             },
+            // The OG image pipeline (`@grove-dev/core`'s og-image.ts)
+            // dynamically imports satori + resvg's native binding.
+            // They only ever run in `prepareDirectory` (Node, build
+            // time) — never in page code — so keep the bundler away
+            // from the .node binary.
+            ssr: {
+              external: ["satori", "@resvg/resvg-js"],
+            },
             plugins: [
               {
                 name: "grove:consumer-global-css-resolver",

package/src/layouts/BaseLayout.astro

@@ -66,6 +66,10 @@ interface Site {
   logo?: string;
   /** Favicon path under `public/` (e.g. `/favicon.svg`). */
   favicon?: string;
+  /** BCP-47 language tag (e.g. "en"). Drives `<html lang>` and og:locale. */
+  locale?: string;
+  /** Twitter/X handle (e.g. "@grove") — emitted as twitter:site. */
+  twitter?: string;
   analytics?: {
     googleAnalyticsId?: string;
   };
@@ -99,6 +103,11 @@ interface Props {
   type?: 'website' | 'article' | 'profile';
   noindex?: boolean;
   jsonLd?: Record<string, unknown> | Record<string, unknown>[];
+  /** Open Graph / Twitter image path (e.g. "/og/records/foo.png").
+   * Defaults to the site-wide /og-image.svg inside <Seo />. */
+  image?: string;
+  /** Alt text for the OG/Twitter image. */
+  imageAlt?: string;
   /** Optional Google Analytics 4 Measurement ID (e.g. "G-XXXXXX"). */
   gaId?: string;
   /** Path used for JSON-LD `SearchAction` target. Defaults to "/items". */
@@ -116,6 +125,8 @@ const {
   type,
   noindex,
   jsonLd,
+  image,
+  imageAlt,
   gaId,
   searchPath,
   submitLabel,
@@ -187,7 +198,7 @@ const favicon =
 ---
 
 <!doctype html>
-<html lang="en" style={themeStyle}>
+<html lang={site.locale ?? 'en'} style={themeStyle}>
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -235,6 +246,8 @@ const favicon =
       type={type}
       noindex={noindex}
       jsonLd={jsonLd}
+      {...(image ? { image } : {})}
+      imageAlt={imageAlt}
       site={site}
       searchPath={directoryPath}
     />

package/src/layouts/Footer.astro

@@ -12,6 +12,7 @@
  * so consumers can customize the order and copy. Defaults are
  * provided so the footer still renders if no extra data is supplied.
  */
+import PoweredBy from "../components/PoweredBy.astro";
 
 interface NavItem {
   label: string;
@@ -34,6 +35,8 @@ interface Site {
     columns?: FooterColumn[];
     copyright?: string;
     license?: string;
+    /** "Powered by Grove" under the brand block. Defaults to on. */
+    poweredBy?: boolean;
   };
   stats?: {
     totalApps?: number;
@@ -62,6 +65,11 @@ interface Props {
   copyrightHolder?: string;
   /** License line under the bar (e.g. "Content under CC BY-SA 4.0."). */
   licenseLine?: string;
+  /**
+   * "Powered by Grove" under the brand block. Falls back to
+   * `site.footer.poweredBy`, which defaults to on.
+   */
+  poweredBy?: boolean;
   /** Extra class for the outer footer element. */
   class?: string;
 }
@@ -75,9 +83,12 @@ const {
   itemsLabel = "items",
   copyrightHolder,
   licenseLine,
+  poweredBy,
   class: className = "",
 } = Astro.props;
 
+const showPoweredBy = poweredBy ?? site.footer?.poweredBy ?? true;
+
 const year = new Date().getFullYear();
 const holder = copyrightHolder ?? site.footer?.copyright ?? site.name;
 const gh = site.repoUrl;
@@ -124,7 +135,7 @@ const resolvedLicenseLine = licenseLine ?? site.footer?.license;
   ]}
 >
   <div
-    class="mx-auto grid w-full max-w-wide grid-cols-2 gap-8 px-5 py-12 md:grid-cols-4 sm:px-7"
+    class="mx-auto grid w-full max-w-container grid-cols-2 gap-8 px-5 py-12 md:grid-cols-4 sm:px-7"
   >
     <div class="col-span-2 md:col-span-1">
       <div
@@ -166,6 +177,11 @@ const resolvedLicenseLine = licenseLine ?? site.footer?.license;
           )}
         </p>
       )}
+      {showPoweredBy && (
+        <p class="mt-4 m-0 text-[0.8125rem] text-ink-500 dark:text-ink-400">
+          <PoweredBy size={16} />
+        </p>
+      )}
     </div>
 
     {columns.map((column) => (
@@ -194,7 +210,7 @@ const resolvedLicenseLine = licenseLine ?? site.footer?.license;
 
   <div class="border-t border-ink-200 dark:border-ink-800">
     <div
-      class="mx-auto flex w-full max-w-wide flex-wrap items-center gap-3 px-5 py-4 text-2xs text-ink-500 sm:px-7 dark:text-ink-400"
+      class="mx-auto flex w-full max-w-container flex-wrap items-center gap-3 px-5 py-4 text-2xs text-ink-500 sm:px-7 dark:text-ink-400"
     >
       <span>© {year} {holder}{resolvedLicenseLine ? `. ${resolvedLicenseLine}` : "."}</span>
       {gh && (

package/src/layouts/Header.astro

@@ -83,7 +83,7 @@ const starsLabel =
   ]}
 >
   <div
-    class="mx-auto flex w-full max-w-wide items-center gap-3 px-5 py-3 sm:gap-6 sm:px-7"
+    class="mx-auto flex w-full max-w-container items-center gap-3 px-5 py-3 sm:gap-6 sm:px-7"
   >
     <a
       href="/"