@grove-dev/astro 0.2.6 → 0.2.13

package/src/components/WhyThisExists.astro

@@ -3,7 +3,7 @@
  * WhyThisExists — the "what is this site for?" section.
  *
  * Renders 3 short, opinionated points (icon + title + body). The
- * icon set is small and generic: "app" (window/grid glyph),
+ * icon set is small and generic: "item" (window/grid glyph),
  * "code" (angle brackets), "search" (magnifier). Defaults to
  * the canonical "directory, source, search" trio.
  *
@@ -14,11 +14,12 @@
 interface WhyPoint {
   title: string;
   body: string;
-  icon: "app" | "code" | "search";
+  icon: "item" | "code" | "search";
 }
 
 interface Props {
   points?: WhyPoint[];
+  eyebrow?: string;
   title?: string;
   description?: string;
   class?: string;
@@ -26,26 +27,27 @@ interface Props {
 
 const {
   points,
-  title = "Why this directory exists",
-  description = "A short note on the point of all this.",
+  eyebrow = "Why this exists",
+  title = "Most directory discovery is fragmented.",
+  description = "Lists are useful, but they often become long, static pages without enough context to compare what is real, maintained, and worth exploring.",
   class: className = "",
 } = Astro.props;
 
 const defaultPoints: WhyPoint[] = [
   {
-    icon: "app",
-    title: "A curated starting point",
-    body: "Skip the rabbit holes. Every entry here is something a real developer reached for, vetted for quality and longevity.",
+    icon: "item",
+    title: "Real projects",
+    body: "Not SDKs, templates, or tiny demos. Focused on complete projects you can actually run.",
   },
   {
     icon: "code",
-    title: "Real, runnable source",
-    body: "Every project links back to its source. Skim, fork, learn — no paywalls, no broken download links.",
+    title: "Codebase context",
+    body: "Stack, platform, license, activity, maturity, and contribution signals in one place.",
   },
   {
     icon: "search",
-    title: "Search that respects you",
-    body: "Filter by stack, platform, license, or status. No SEO spam, no affiliate farms. The directory is the product.",
+    title: "Searchable discovery",
+    body: "Browse by category, stack, platform, stars, recency, and status instead of scanning a flat list.",
   },
 ];
 
@@ -53,35 +55,39 @@ const items = points && points.length > 0 ? points : defaultPoints;
 ---
 
 <section
-  class:list={["grove-section", className]}
+  id="about"
+  class:list={["grove-section scroll-mt-20 border-b border-ink-200 dark:border-ink-800", className]}
   aria-labelledby="grove-why-heading"
 >
   <div class="grove-container mx-auto px-5 sm:px-7">
-    <header class="mb-8 flex flex-col items-center gap-2 text-center">
+    <header class="flex flex-col gap-2">
+      <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+        {eyebrow}
+      </span>
       <h2
         id="grove-why-heading"
-        class="m-0 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100"
+        class="m-0 max-w-[40ch] text-[1.5rem] sm:text-[1.75rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100"
       >
         {title}
       </h2>
       {description && (
-        <p class="m-0 max-w-2xl text-[0.9375rem] text-ink-500 dark:text-ink-400">
+        <p class="m-0 max-w-[64ch] text-[0.9375rem] leading-relaxed text-ink-500 dark:text-ink-400">
           {description}
         </p>
       )}
     </header>
 
-    <ol
-      class="m-0 grid list-none grid-cols-1 gap-6 p-0 md:grid-cols-3"
+    <ul
+      class="m-0 mt-7 grid list-none grid-cols-1 gap-3 p-0 sm:grid-cols-3"
       aria-label="Why this directory"
     >
-      {items.map((p, i) => (
-        <li class="flex flex-col items-center gap-2 text-center">
-          <span
+      {items.map((p) => (
+        <li class="grove-card p-4">
+          <div
             aria-hidden="true"
-            class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-ink-200 bg-white text-ink-700 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-200"
+            class="mb-3 flex h-8 w-8 items-center justify-center rounded-md border border-ink-200 bg-white text-ink-700 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300"
           >
-            {p.icon === "app" && (
+            {p.icon === "item" && (
               <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
                 <path d="M1.75 3.5a.25.25 0 0 1 .25-.25h12a.25.25 0 0 1 .25.25v8a.25.25 0 0 1-.25.25h-12a.25.25 0 0 1-.25-.25v-8ZM2 4.75v6h12v-6H2ZM2.5 6.5h4v2.5h-4V6.5Z"></path>
               </svg>
@@ -96,21 +102,15 @@ const items = points && points.length > 0 ? points : defaultPoints;
                 <path d="M10.68 11.74a6 6 0 1 1 1.06-1.06l3.04 3.04a.75.75 0 1 1-1.06 1.06l-3.04-3.04ZM11.5 7a4.5 4.5 0 1 0-9 0 4.5 4.5 0 0 0 9 0Z"></path>
               </svg>
             )}
-          </span>
-          <span
-            aria-hidden="true"
-            class="font-mono text-2xs text-ink-400 dark:text-ink-500"
-          >
-            0{i + 1}
-          </span>
-          <h3 class="m-0 text-base font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+          </div>
+          <h3 class="m-0 text-[0.9375rem] font-semibold text-ink-900 dark:text-ink-100">
             {p.title}
           </h3>
-          <p class="m-0 max-w-xs text-[0.875rem] leading-relaxed text-ink-500 dark:text-ink-400">
+          <p class="m-0 mt-1.5 text-[0.8125rem] leading-relaxed text-ink-500 dark:text-ink-400">
             {p.body}
           </p>
         </li>
       ))}
-    </ol>
+    </ul>
   </div>
 </section>

package/src/layouts/BaseLayout.astro

@@ -2,19 +2,18 @@
 /**
  * BaseLayout — wraps every page. Owns the theme-detection inline
  * script and the global shell (Header, Footer). Per-page SEO
- * (title, description, OG, JSON-LD) is delegated to <Seo /> so each
- * page can declare what it needs without polluting the layout.
+ * (title, description, OG, JSON-LD) is delegated to `<Seo />` so
+ * each page can declare what it needs without polluting the layout
+ * file.
  *
- * Generic: takes a `site` prop with brand + nav, no siteConfig import.
- * The header / footer / SEO components are imported from sibling
- * files; consumers can override the Header/Footer via Astro's slot
- * mechanism (`<Header slot="header" />`) if they need custom branding.
+ * Generic: takes a `site` prop with brand + nav + stats. No
+ * `siteConfig` import — consumers compose the props from their
+ * own config (typically `data/generated/site-config.json` for the
+ * showcase).
  *
- * The THEME_INIT inline script persists user preference in
- * `localStorage` under the key "grove-theme" — matching the key
- * `ThemeToggle.astro` uses.
+ * Optional `gaId` adds a GA4 measurement snippet. Omit for
+ * privacy-first deployments.
  */
-
 import "../styles.css";
 import Header from "./Header.astro";
 import Footer from "./Footer.astro";
@@ -25,6 +24,18 @@ interface NavItem {
   href: string;
 }
 
+interface SiteStats {
+  totalApps?: number;
+  totalCategories?: number;
+  totalStacks?: number;
+  totalOwners?: number;
+  totalStars?: number;
+  originalRepo?: string;
+  originalStars?: number;
+  originalForks?: number;
+  originalContributors?: number;
+}
+
 interface Site {
   name: string;
   tagline?: string;
@@ -32,6 +43,15 @@ interface Site {
   nav: NavItem[];
   repoUrl?: string;
   url?: string;
+  /** Optional directory-level stats — populated from site-config.json
+   * at generate time. Components use it to render hero counts,
+   * origin card stats, and footer summary lines. */
+  stats?: SiteStats;
+  blueprintConfig?: {
+    routeSlug?: string;
+    labelSingular?: string;
+    labelPlural?: string;
+  };
 }
 
 interface Props {
@@ -43,7 +63,7 @@ interface Props {
   jsonLd?: Record<string, unknown> | Record<string, unknown>[];
   /** Optional Google Analytics 4 Measurement ID (e.g. "G-XXXXXX"). */
   gaId?: string;
-  /** Path used for JSON-LD `SearchAction` target. Defaults to "/projects". */
+  /** Path used for JSON-LD `SearchAction` target. Defaults to "/items". */
   searchPath?: string;
   /** Submit button label rendered in the header. Omit to hide. */
   submitLabel?: string;
@@ -63,6 +83,8 @@ const {
   submitLabel,
   submitHref,
 } = Astro.props;
+const directoryPath =
+  searchPath ?? `/${site.blueprintConfig?.routeSlug ?? "items"}`;
 
 const favicon =
   "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='%2318181b'/%3E%3C/svg%3E";
@@ -87,11 +109,6 @@ const favicon =
 
     {gaId && (
       <>
-        {/* GA4 — gtag.js loader. We send the initial page_view with
-            the current path + query string so the dashboard
-            distinguishes /projects?stack=flutter from
-            /projects?stack=react (otherwise they'd all collapse to
-            /projects). */}
         <script
           is:inline
           async
@@ -118,7 +135,7 @@ const favicon =
       noindex={noindex}
       jsonLd={jsonLd}
       site={site}
-      searchPath={searchPath}
+      searchPath={directoryPath}
     />
 
     <slot name="head" />
@@ -168,8 +185,8 @@ const favicon =
     <slot name="header">
       <Header
         site={site}
-        submitLabel={submitLabel}
-        submitHref={submitHref}
+        submitLabel={submitLabel ?? (site.blueprintConfig ? `Submit ${site.blueprintConfig.labelSingular ?? "item"}` : undefined)}
+        submitHref={submitHref ?? (site.blueprintConfig ? "/submit" : undefined)}
       />
     </slot>
 
@@ -178,17 +195,80 @@ const favicon =
     </main>
 
     <slot name="footer">
-      <Footer site={site} />
+      <Footer
+        site={site}
+        stats={{
+          totalApps: site.stats?.totalApps,
+          totalCategories: site.stats?.totalCategories,
+          totalStacks: site.stats?.totalStacks,
+          totalOwners: site.stats?.totalOwners,
+        }}
+        itemsLabel={site.blueprintConfig?.labelPlural ?? "items"}
+        discover={{
+          heading: "Discover",
+          items: [
+            ...(site.stats?.totalApps
+              ? [{ label: "Browse all", href: directoryPath }]
+              : []),
+            { label: "Contributors", href: "/contributors" },
+            ...(site.stats?.originalRepo
+              ? [{ label: "View on GitHub", href: site.stats.originalRepo, external: true }]
+              : []),
+          ],
+        }}
+        contribute={{
+          heading: "Contribute",
+          items: [
+            ...(site.repoUrl
+              ? [
+                  {
+                    label: "Submit via GitHub",
+                    href: `${site.repoUrl}/blob/main/CONTRIBUTING.md`,
+                    external: true,
+                  },
+                ]
+              : []),
+            ...(site.repoUrl
+              ? [
+                  {
+                    label: "Report an issue",
+                    href: `${site.repoUrl}/issues`,
+                    external: true,
+                  },
+                ]
+              : []),
+          ],
+        }}
+        project={{
+          heading: "Project",
+          items: [
+            ...(site.repoUrl
+              ? [
+                  {
+                    label: "Source on GitHub",
+                    href: site.repoUrl,
+                    external: true,
+                  },
+                ]
+              : []),
+            ...(site.repoUrl
+              ? [
+                  {
+                    label: "Changelog",
+                    href: `${site.repoUrl}/blob/main/CHANGELOG.md`,
+                    external: true,
+                  },
+                ]
+              : []),
+          ],
+        }}
+      />
     </slot>
 
     <slot name="body-end" />
 
     {gaId && (
       <script is:inline define:vars={{ gaId }}>
-        // Mirror in-page SPA navigation (history.pushState /
-        // replaceState) into GA4 page_view events so filter changes
-        // on /projects show up as separate page views in the
-        // dashboard instead of one inflated session.
         (function () {
           var last = location.pathname + location.search;
           function report() {
@@ -215,30 +295,5 @@ const favicon =
         })();
       </script>
     )}
-
-    {gaId && (
-      <script is:inline>
-        // Delegated click handler for `data-event` elements. We do
-        // this in one place so individual components just emit data
-        // attributes and stay declarative.
-        (function () {
-          document.addEventListener("click", function (e) {
-            var el = e.target instanceof Element
-              ? e.target.closest("[data-event]")
-              : null;
-            if (!el) return;
-            var name = el.getAttribute("data-event");
-            if (!name) return;
-            var params = {
-              source: el.getAttribute("data-event-source") || undefined,
-              app_slug: el.getAttribute("data-event-app") || undefined,
-              channel: el.getAttribute("data-event-channel") || undefined,
-              link_url: el.getAttribute("href") || undefined,
-            };
-            window.gtag("event", name, params);
-          });
-        })();
-      </script>
-    )}
   </body>
 </html>

package/src/layouts/Container.astro

@@ -1,57 +1,18 @@
 ---
-/**
- * Container — page-width wrapper.
- *
- * Centralizes the three layout widths the showcase uses:
- *
- *   - "default" → 1140px (the standard reading width)
- *   - "wide"    → 1400px (home, full-bleed grid sections)
- *   - "narrow"  → 720px  (about, methodology, content-heavy pages)
- *
- * Pure layout, no styling dependencies beyond Tailwind's `max-w-*`
- * tokens defined in `@grove-dev/astro/styles.css`.
- */
-
 interface Props {
   size?: "default" | "wide" | "narrow";
   class?: string;
-  /** Padding preset. Defaults to a comfortable 1.25rem / 1.75rem. */
-  padding?: "default" | "none" | "tight";
 }
 
-const {
-  size = "default",
-  class: className = "",
-  padding = "default",
-} = Astro.props;
-
+const { size = "default", class: className = "" } = Astro.props;
 const sizeClass =
   size === "wide"
-    ? "grove-container-wide"
+    ? "grove-container-wide max-w-wide"
     : size === "narrow"
-      ? "grove-container-narrow"
-      : "grove-container";
-
-const paddingClass =
-  padding === "none"
-    ? ""
-    : padding === "tight"
-      ? "px-4 sm:px-5"
-      : "px-5 sm:px-7";
+      ? "grove-container-narrow max-w-narrow"
+      : "grove-container max-w-container";
 ---
 
-<div class:list={["mx-auto", sizeClass, paddingClass, className]}>
+<div class={`${sizeClass} mx-auto px-5 sm:px-7 ${className}`}>
   <slot />
 </div>
-
-<style>
-  .grove-container {
-    max-width: var(--container-container, 1140px);
-  }
-  .grove-container-wide {
-    max-width: var(--container-wide, 1400px);
-  }
-  .grove-container-narrow {
-    max-width: var(--container-narrow, 720px);
-  }
-</style>

package/src/layouts/Footer.astro

@@ -3,13 +3,14 @@
  * Footer — 4-column grid (brand + Discover + Contribute + Project) plus
  * a thin bar at the bottom with copyright + repo link.
  *
- * Generic: takes a `site` prop with brand + repoUrl. No siteConfig
- * import — consumers compose props from their own config.
+ * Generic: takes a `site` prop with brand + repoUrl + stats, plus
+ * pre-computed column data. No `siteConfig` import — consumers
+ * compose props from their own config (or from
+ * `data/generated/site-config.json` for the showcase).
  *
  * Each column's links are passed in as a `{ heading, items[] }` shape
- * so consumers can customize the order and copy. Defaults are provided
- * for the brand and bar so the footer still renders if no extra
- * link data is supplied.
+ * so consumers can customize the order and copy. Defaults are
+ * provided so the footer still renders if no extra data is supplied.
  */
 
 interface NavItem {
@@ -29,6 +30,12 @@ interface Site {
   tagline?: string;
   description?: string;
   repoUrl?: string;
+  stats?: {
+    totalApps?: number;
+    totalCategories?: number;
+    totalStacks?: number;
+    totalOwners?: number;
+  };
 }
 
 interface Props {
@@ -39,8 +46,13 @@ interface Props {
   contribute?: FooterColumn;
   /** Project links — third content column. */
   project?: FooterColumn;
-  /** Stats line under brand blurb (e.g. "79 apps · 12 categories"). */
-  stats?: { apps?: number; categories?: number; contributors?: number };
+  /** Stats line under brand blurb. */
+  stats?: { totalApps?: number; totalCategories?: number; totalOwners?: number };
+  /**
+   * Plural label for the primary count stat. Default "items" so the
+   * footer reads naturally regardless of blueprint.
+   */
+  itemsLabel?: string;
   /** Copyright suffix. Defaults to site.name. */
   copyrightHolder?: string;
   /** License line under the bar (e.g. "Content under CC BY-SA 4.0."). */
@@ -55,6 +67,7 @@ const {
   contribute = { heading: "Contribute", items: [] },
   project = { heading: "Project", items: [] },
   stats,
+  itemsLabel = "items",
   copyrightHolder,
   licenseLine,
   class: className = "",
@@ -96,8 +109,7 @@ const projectItems = project.items.length ? project.items : defaultProject;
   ]}
 >
   <div
-    class="mx-auto grid max-w-wide grid-cols-2 gap-8 px-5 py-12 md:grid-cols-4 sm:px-7"
-    style="max-width: var(--container-wide, 1400px);"
+    class="grove-container-wide mx-auto grid max-w-wide 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
@@ -116,25 +128,25 @@ const projectItems = project.items.length ? project.items : defaultProject;
       )}
       {stats && (
         <p class="mt-3 m-0 text-2xs text-ink-500 dark:text-ink-400">
-          {stats.apps !== undefined && (
+          {stats.totalApps !== undefined && (
             <>
-              <span class="font-mono">{stats.apps}</span> apps
+              <span class="font-mono">{stats.totalApps}</span> {itemsLabel}
             </>
           )}
-          {stats.apps !== undefined && (stats.categories !== undefined || stats.contributors !== undefined) && (
+          {stats.totalApps !== undefined && (stats.totalCategories !== undefined || stats.totalOwners !== undefined) && (
             <span class="mx-1 text-ink-300 dark:text-ink-700">·</span>
           )}
-          {stats.categories !== undefined && (
+          {stats.totalCategories !== undefined && (
             <>
-              <span class="font-mono">{stats.categories}</span> categories
+              <span class="font-mono">{stats.totalCategories}</span> categories
             </>
           )}
-          {stats.categories !== undefined && stats.contributors !== undefined && (
+          {stats.totalCategories !== undefined && stats.totalOwners !== undefined && (
             <span class="mx-1 text-ink-300 dark:text-ink-700">·</span>
           )}
-          {stats.contributors !== undefined && (
+          {stats.totalOwners !== undefined && (
             <>
-              <span class="font-mono">{stats.contributors}</span> contributors
+              <span class="font-mono">{stats.totalOwners}</span> contributors
             </>
           )}
         </p>
@@ -213,10 +225,9 @@ const projectItems = project.items.length ? project.items : defaultProject;
 
   <div class="border-t border-ink-200 dark:border-ink-800">
     <div
-      class="mx-auto flex 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"
-      style="max-width: var(--container-wide, 1400px);"
+      class="grove-container-wide mx-auto flex 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"
     >
-      <span>© {year} {holder}.{licenseLine ? ` ${licenseLine}` : ""}</span>
+      <span>© {year} {holder}{licenseLine ? `. ${licenseLine}` : "."}</span>
       {gh && (
         <>
           <span class="text-ink-300 dark:text-ink-700">·</span>

package/src/layouts/Header.astro

@@ -26,6 +26,13 @@ interface Site {
   nav: NavItem[];
   description?: string;
   repoUrl?: string;
+  url?: string;
+  stats?: {
+    totalStars?: number;
+  };
+  blueprintConfig?: {
+    routeSlug?: string;
+  };
 }
 
 interface Props {
@@ -47,6 +54,21 @@ const {
   repoLabel = "Star",
   class: className = "",
 } = Astro.props;
+const directoryPath = `/${site.blueprintConfig?.routeSlug ?? "items"}`;
+const navItems = site.blueprintConfig
+  ? [
+      { label: "Recently added", href: `${directoryPath}?label=new` },
+      { label: "Trending", href: `${directoryPath}?label=hot` },
+      { label: "Categories", href: directoryPath },
+      { label: "Stacks", href: directoryPath },
+      { label: "About", href: "/about" },
+    ]
+  : site.nav;
+const stars = site.stats?.totalStars ?? 0;
+const starsLabel =
+  stars >= 1000
+    ? `${(stars / 1000).toFixed(stars >= 10000 ? 0 : 1)}k`
+    : String(stars);
 ---
 
 <header
@@ -56,8 +78,7 @@ const {
   ]}
 >
   <div
-    class="mx-auto flex max-w-wide items-center gap-6 px-5 py-3 sm:px-7"
-    style="max-width: var(--container-wide, 1400px);"
+    class="grove-container-wide mx-auto flex max-w-wide items-center gap-6 px-5 py-3 sm:px-7"
   >
     <a
       href="/"
@@ -72,7 +93,7 @@ const {
 
     <nav class="hidden flex-1 md:block" aria-label="Primary">
       <ul class="m-0 flex list-none gap-5 p-0">
-        {site.nav.map((item) => (
+        {navItems.map((item) => (
           <li>
             <a
               href={item.href}
@@ -89,7 +110,7 @@ const {
       {submitHref && (
         <a
           href={submitHref}
-          class="grove-btn grove-btn-outline"
+          class="hidden h-9 items-center gap-1.5 rounded-md border border-ink-200 bg-white px-3 text-[0.875rem] font-medium text-ink-700 transition-colors hover:border-ink-300 hover:bg-ink-50 sm:inline-flex dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300 dark:hover:border-ink-700 dark:hover:bg-ink-900/40"
         >
           <svg
             viewBox="0 0 16 16"
@@ -109,22 +130,22 @@ const {
           href={site.repoUrl}
           target="_blank"
           rel="noopener noreferrer"
-          aria-label={repoLabel}
-          title={repoLabel}
-          class="grove-btn grove-btn-outline"
+          aria-label={`${repoLabel} on GitHub — ${stars} stars`}
+          title={`${repoLabel} on GitHub`}
+          class="inline-flex h-9 items-center divide-x divide-ink-200 overflow-hidden rounded-md border border-ink-200 text-[0.875rem] font-medium transition-colors hover:border-ink-300 hover:bg-ink-50 dark:divide-ink-800 dark:border-ink-800 dark:hover:border-ink-700 dark:hover:bg-ink-900/40"
         >
-          <svg
-            viewBox="0 0 16 16"
-            width="16"
-            height="16"
-            aria-hidden="true"
-            fill="currentColor"
-          >
-            <path
-              d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38v-1.33c-2.22.48-2.69-1.07-2.69-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.05-.49.05-.49.8.06 1.23.83 1.23.83.72 1.22 1.87.87 2.33.67.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48v2.19c0 .21.15.46.55.38A8 8 0 0 0 8 0Z"
-            ></path>
-          </svg>
-          <span>{repoLabel}</span>
+          <span class="flex items-center gap-1.5 px-2.5 py-1.5 text-ink-900 dark:text-ink-100">
+            <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="currentColor">
+              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38v-1.33c-2.22.48-2.69-1.07-2.69-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.05-.49.05-.49.8.06 1.23.83 1.23.83.72 1.22 1.87.87 2.33.67.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48v2.19c0 .21.15.46.55.38A8 8 0 0 0 8 0Z"></path>
+            </svg>
+            <span>{repoLabel}</span>
+          </span>
+          <span class="flex items-center gap-1 bg-ink-50 px-2 py-1.5 text-ink-700 dark:bg-ink-900/60 dark:text-ink-300">
+            <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor" class="text-amber-500">
+              <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"></path>
+            </svg>
+            <span class="font-mono">{starsLabel}</span>
+          </span>
         </a>
       )}