@grove-dev/astro 0.7.0 → 0.8.0

package/src/components/OriginalCollection.astro

@@ -1,117 +0,0 @@
----
-/**
- * OriginalCollection — legacy lineage card.
- *
- * Renders a single wide card that links out to the project's origin
- * repository, with stars/forks/contributors stats. Used on home and
- * about pages to give visitors a way to find the original curated
- * collection this directory descends from.
- *
- * Generic: takes plain `stats` and a `repoUrl`. No blueprint or
- * site-specific copy.
- */
-import { buttonClass } from "../ui/button.js";
-
-interface OriginStats {
-  stars?: number;
-  forks?: number;
-  contributors?: number;
-  description?: string;
-}
-
-interface Props {
-  repoUrl: string;
-  repoLabel?: string;
-  stats?: OriginStats;
-  title?: string;
-  description?: string;
-  class?: string;
-}
-
-const {
-  repoUrl,
-  repoLabel = "View on GitHub",
-  stats = {},
-  title = "A growing list, forked from the original",
-  description = "This directory descends from an earlier curated collection. The original still lives on — same shape, same spirit, fresh data.",
-  class: className = "",
-} = Astro.props;
-
-function fmt(n: number | undefined): string | null {
-  if (typeof n !== "number" || !Number.isFinite(n)) return null;
-  if (n >= 1000) {
-    const k = n / 1000;
-    return (k >= 10 ? Math.round(k).toString() : k.toFixed(1)) + "k";
-  }
-  return n.toString();
-}
-
-const hasStats =
-  stats.stars !== undefined ||
-  stats.forks !== undefined ||
-  stats.contributors !== undefined;
----
-
-<section class:list={["py-12 sm:py-16", className]}>
-  <div class="mx-auto w-full max-w-container px-5 sm:px-7">
-    <div
-      class="rounded-[calc(var(--radius)+0.25rem)] border border-border bg-card shadow-none transition-colors flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between"
-    >
-      <div class="flex flex-col gap-2">
-        <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-          Origin
-        </span>
-        <h2 class="m-0 text-[1.25rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-          {title}
-        </h2>
-        <p class="m-0 max-w-2xl text-[0.875rem] text-ink-500 dark:text-ink-400">
-          {description}
-        </p>
-        {stats.description && (
-          <p class="m-0 max-w-2xl text-[0.8125rem] text-ink-500 dark:text-ink-400">
-            {stats.description}
-          </p>
-        )}
-        {hasStats && (
-          <dl
-            class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-2xs text-ink-500 dark:text-ink-400"
-            aria-label="Original repository signals"
-          >
-            {stats.stars !== undefined && (
-              <div class="flex items-center gap-1">
-                <dd class="m-0 font-mono">{fmt(stats.stars) ?? stats.stars}</dd>
-                <dt>stars</dt>
-              </div>
-            )}
-            {stats.forks !== undefined && (
-              <div class="flex items-center gap-1">
-                <dd class="m-0 font-mono">{fmt(stats.forks) ?? stats.forks}</dd>
-                <dt>forks</dt>
-              </div>
-            )}
-            {stats.contributors !== undefined && (
-              <div class="flex items-center gap-1">
-                <dd class="m-0 font-mono">
-                  {fmt(stats.contributors) ?? stats.contributors}
-                </dd>
-                <dt>contributors</dt>
-              </div>
-            )}
-          </dl>
-        )}
-      </div>
-      <div class="flex flex-shrink-0 items-center gap-2">
-        <a
-          href={repoUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          class={buttonClass("primary", "sm")}
-          data-event="original_collection_click"
-          data-event-source="original_collection"
-        >
-          {repoLabel} →
-        </a>
-      </div>
-    </div>
-  </div>
-</section>

package/src/components/Pagination.astro

@@ -1,50 +0,0 @@
----
-interface Props {
-  current: number;
-  total: number;
-  hrefFor: (page: number) => string;
-  class?: string;
-}
-
-import { paginationPageList } from "@grove-dev/astro";
-import { buttonClass, PAGINATION_DISABLED, PAGINATION_EXTRA } from "../ui/button.js";
-
-const { current, total, hrefFor, class: className = "" } = Astro.props;
-
-const pages = paginationPageList(current, total);
-const linkClass = buttonClass("secondary", "sm", PAGINATION_EXTRA);
-const currentClass = buttonClass("selected", "sm", PAGINATION_EXTRA);
----
-
-{total > 1 && (
-  <nav
-    class:list={["flex flex-wrap items-center justify-center gap-1.5", className]}
-    aria-label="Pagination"
-  >
-    {current > 1 ? (
-      <a href={hrefFor(current - 1)} class={linkClass} rel="prev">Previous</a>
-    ) : (
-      <span class={`${linkClass} ${PAGINATION_DISABLED}`}>Previous</span>
-    )}
-
-    {pages.map((page) =>
-      page === "ellipsis" ? (
-        <span class="px-1 text-2xs text-ink-400" aria-hidden="true">...</span>
-      ) : (
-        <a
-          href={hrefFor(page)}
-          class={page === current ? currentClass : linkClass}
-          aria-current={page === current ? "page" : undefined}
-        >
-          {page}
-        </a>
-      ),
-    )}
-
-    {current < total ? (
-      <a href={hrefFor(current + 1)} class={linkClass} rel="next">Next</a>
-    ) : (
-      <span class={`${linkClass} ${PAGINATION_DISABLED}`}>Next</span>
-    )}
-  </nav>
-)}

package/src/components/PoweredBy.astro

@@ -1,60 +0,0 @@
----
-/**
- * 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://withgrove.dev",
-  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

@@ -1,321 +0,0 @@
----
-/**
- * ProjectCard — the canonical card for one directory record.
- *
- * V1 (v0.5.0) refined design for the three-column grid, now shared by
- * every listing surface (home sections, browse results, collection
- * entries, taxonomy pages) through thin adapters (`IndexRow`,
- * `CollectionRow`):
- *
- *   - Default mode: the whole card is one clickable `<a>` (cursor:
- *     pointer, subtle border + surface lift on hover, no more than
- *     1–2px vertical motion).
- *   - When the record has a repository the root becomes an
- *     `<article>` with a stretched title link, because nesting `<a>`
- *     inside `<a>` is invalid HTML. The `owner/repo` line is a real
- *     link to the repository and sits above the stretched overlay
- *     (`relative z-10`).
- *   - App icon top-left (48px), app name + clickable owner/repo,
- *     two-line description with reserved vertical space.
- *   - Footer row: stack logos on the left, stars and last-updated on
- *     the right, navigation arrow anchored bottom-right.
- *
- * **The layout is fixed.** Earlier versions let list pages opt into a
- * curated badge, a license tag, a `category · status` line and
- * labelled chip rows, so the same record rendered differently
- * depending on where a visitor found it. Those flags are now
- * deprecated no-ops, as is `secondaryLinks` — the repository is
- * reached through the `owner/repo` line rather than a separate footer
- * button. Platform support is likewise off the card: it is reference
- * detail and belongs on the record page (`RecordSidebar`).
- *
- * Data can come from a full `record` or from explicit props (adapters
- * for shapes like `CollectionEntry` pass fields directly); explicit
- * props win over record-derived values.
- *
- * Uses the package's design-system tokens plus the standard `dark:`
- * variant. Equal-height cards in the row are achieved at the grid
- * level (`CardGrid`: `grid` + `items-stretch`).
- */
-import type { IndexRecord, Resource, ProjectRecord, IndexProjectRecord } from "@grove-dev/core";
-import {
-  getOwnerAndRepoFromRepoUrl,
-  getOwnerAvatarUrl,
-  formatRelative,
-  formatStars,
-  nameInitials,
-  projectStackIds,
-  truncateWords,
-} from "@grove-dev/astro";
-import CardIcon from "./CardIcon.astro";
-import Icon from "./Icon.astro";
-
-type CardRecord = IndexRecord | Resource | ProjectRecord | IndexProjectRecord;
-
-interface SecondaryLink {
-  label: string;
-  href: string;
-  /** Adds target="_blank" + rel and the external-link glyph. */
-  external?: boolean;
-  /** Analytics hooks forwarded as data-event attributes. */
-  event?: string;
-  eventSource?: string;
-}
-
-interface Props {
-  /** Record to render. Optional when explicit props are passed. */
-  record?: CardRecord;
-  /** Full detail-page URL. */
-  href: string;
-  /** Optional pre-resolved logo URL. Wins over the GitHub avatar. */
-  logoUrl?: string;
-  /** Override the description (defaults to `record.description`). */
-  description?: string;
-  /** Explicit overrides for record-derived values (adapter use). */
-  name?: string;
-  slug?: string;
-  repoUrl?: string;
-  stars?: number;
-  pushedAt?: string | null;
-  license?: string | null;
-  category?: string;
-  status?: string;
-  curated?: boolean;
-  stack?: string;
-  /**
-   * @deprecated Cards render the stack, not platform support — that
-   * belongs on the record page. Accepted and ignored.
-   */
-  platforms?: string[];
-  /**
-   * @deprecated The card renders one fixed metadata set on every
-   * surface. These flags used to add a curated badge, a license tag,
-   * a `category · status` line, and labelled chip rows on list pages
-   * only, which made the same record look like a different record
-   * depending on where you found it. Accepted and ignored.
-   */
-  showCurated?: boolean;
-  /** @deprecated Ignored — see `showCurated`. */
-  showLicense?: boolean;
-  /** @deprecated Ignored — see `showCurated`. */
-  showCategoryStatus?: boolean;
-  /** @deprecated Ignored — see `showCurated`. */
-  labelledChips?: boolean;
-  /** Footer links; presence switches the root to `<article>` mode. */
-  /**
-   * @deprecated Ignored. The repository is reached by clicking the
-   * `owner/repo` line under the title, so cards no longer carry a
-   * separate footer link button.
-   */
-  secondaryLinks?: SecondaryLink[];
-  /** Eager-load the avatar (above-the-fold rows). */
-  eager?: boolean;
-  /** Analytics data-event attributes on the card root. */
-  event?: string;
-  eventSource?: string;
-  class?: string;
-}
-
-const {
-  record,
-  href,
-  logoUrl: logoUrlProp,
-  description: descriptionProp,
-  name: nameProp,
-  slug: slugProp,
-  repoUrl: repoUrlProp,
-  stars: starsProp,
-  pushedAt: pushedAtProp,
-  stack: stackProp,
-  eager = false,
-  event,
-  eventSource,
-  class: className = "",
-} = Astro.props;
-
-const isProject = record?.kind === "project";
-const name =
-  nameProp ??
-  (record
-    ? record.kind === "resource"
-      ? (record as { title: string }).title
-      : (record as { name: string }).name
-    : "");
-const slug = slugProp ?? (record as { slug?: string } | undefined)?.slug;
-const repoHref =
-  repoUrlProp ??
-  (isProject
-    ? (record as { repoUrl?: string }).repoUrl
-    : (record as { links?: { github?: string } } | undefined)?.links?.github);
-
-const { owner, repo } = getOwnerAndRepoFromRepoUrl(repoHref ?? "");
-const avatarUrl =
-  logoUrlProp ??
-  (isProject ? (record as { logoUrl?: string }).logoUrl : undefined) ??
-  getOwnerAvatarUrl(owner, 80);
-
-const initials = nameInitials(name);
-
-// 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);
-const pushedAt =
-  pushedAtProp ??
-  (isProject
-    ? (record as { github?: { pushedAt?: string | null } }).github?.pushedAt
-    : (record as { publishedAt?: string | null } | undefined)?.publishedAt);
-const stackIds = stackProp
-  ? [stackProp]
-  : isProject
-    ? projectStackIds(record as { stack?: string; stacks?: string[] })
-    : [];
-
-const starsLabel = formatStars(stars);
-const updatedLabel = formatRelative(pushedAt);
-
-const hasStars = starsLabel !== null && typeof stars === "number" && stars > 0;
-const hasUpdated = Boolean(pushedAt);
-
-// `<a>`-in-`<a>` is invalid HTML, and the `owner/repo` line is its own
-// link to the repository — so any card that shows one renders as an
-// `<article>` whose title link is stretched over the whole card.
-const isArticle = Boolean(repoHref && owner && repo);
-const Root = isArticle ? "article" : "a";
-const rootAttrs = isArticle ? {} : { href, "aria-label": `Open ${name}` };
-
-// The card's brand strip shows the record's STACK, not its platforms.
-// Stack is what distinguishes one card from its neighbours in a list;
-// platform support is reference detail, and it belongs on the record
-// page (`RecordSidebar`) where there is room to label it. Marks come
-// from the shared `Icon` component, which falls back to initials when
-// an asset is missing.
-const visibleStacks = stackIds.slice(0, 4);
-const stackOverflow = stackIds.length - visibleStacks.length;
-const hasStacks = visibleStacks.length > 0;
----
-
-<Root
-  {...rootAttrs}
-  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.
-
-      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 && (
-      <img
-        src={avatarUrl}
-        alt=""
-        width="48"
-        height="48"
-        loading={eager ? "eager" : "lazy"}
-        fetchpriority={eager ? "high" : undefined}
-        decoding="async"
-        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"
-      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">
-        {isArticle ? (
-          <a
-            href={href}
-            class="text-inherit no-underline before:absolute before:inset-0 before:z-0 before:content-['']"
-          >
-            {name}
-          </a>
-        ) : (
-          name
-        )}
-      </h3>
-      {owner && repo && (
-        <p class="m-0 truncate font-mono text-[13px] text-ink-500 dark:text-ink-400">
-          {repoHref ? (
-            <a
-              href={repoHref}
-              target="_blank"
-              rel="noopener noreferrer"
-              title={`${owner}/${repo} on GitHub`}
-              data-event="external_repo_click"
-              data-event-source="project_card_repo"
-              data-event-item={slug}
-              class="relative z-10 text-inherit no-underline transition-colors hover:text-ink-900 hover:underline dark:hover:text-ink-100"
-            >
-              {owner}<span class="opacity-60">/</span>{repo}
-            </a>
-          ) : (
-            <Fragment>{owner}<span class="opacity-60">/</span>{repo}</Fragment>
-          )}
-        </p>
-      )}
-    </div>
-  </header>
-
-  {/* Description — two-line clamp with reserved vertical space */}
-  <p
-    class="m-0 line-clamp-2 min-h-[42px] text-[14px] leading-[1.5] text-ink-500 dark:text-ink-400"
-  >
-    {description}
-  </p>
-
-  {/* Footer: stack logos · stars/updated · arrow */}
-  <footer class="mt-auto flex items-center justify-between gap-3 text-[12px] sm:text-[13px]">
-    {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 && (
-        <span class="inline-flex items-center gap-1" title={`${stars ?? 0} stars on GitHub`}>
-          <span class="inline-flex text-amber-500"><CardIcon name="star" /></span>
-          <span class="font-mono">{starsLabel}</span>
-        </span>
-      )}
-      {hasUpdated && (
-        <span class="whitespace-nowrap" title={`Last updated ${pushedAt}`}>
-          Updated {updatedLabel}
-        </span>
-      )}
-      <CardIcon
-        name="arrow"
-        class="shrink-0 text-ink-400 transition-colors group-hover:text-ink-700 dark:text-ink-500 dark:group-hover:text-ink-100"
-      />
-    </div>
-  </footer>
-</Root>