@grove-dev/astro 0.2.10 → 0.2.14

package/dist/lib/taxonomy-counts.js.map

@@ -1 +1 @@
-{"version":3,"file":"taxonomy-counts.js","sourceRoot":"","sources":["../../src/lib/taxonomy-counts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AASH,2CAA2C;AAC3C,MAAM,UAAU,eAAe,CAC7B,OAAY;IAEZ,MAAM,CAAC,GAAG,IAAI,GAAG,EAAkB,CAAC;IACpC,KAAK,MAAM,CAAC,IAAI,OAAO,EAAE,CAAC;QACxB,MAAM,CAAC,GAAG,CAAC,CAAC,QAAQ,IAAI,OAAO,CAAC;QAChC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAChC,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC;AAED,2EAA2E;AAC3E,MAAM,UAAU,YAAY,CAC1B,OAAY;IAEZ,MAAM,CAAC,GAAG,IAAI,GAAG,EAAkB,CAAC;IACpC,KAAK,MAAM,CAAC,IAAI,OAAO,EAAE,CAAC;QACxB,MAAM,IAAI,GAAG,IAAI,GAAG,CAClB,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CACnC,CAAC,CAAC,EAAe,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAC/B,CACF,CAAC;QACF,KAAK,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;YACrB,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAChC,CAAC;IACH,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC;AAED,6DAA6D;AAC7D,MAAM,UAAU,YAAY,CAC1B,OAAY;IAEZ,MAAM,CAAC,GAAG,IAAI,GAAG,EAAkB,CAAC;IACpC,KAAK,MAAM,CAAC,IAAI,OAAO,EAAE,CAAC;QACxB,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,EAAE,CAAC;YACzC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAChC,CAAC;IACH,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC"}
+{"version":3,"file":"taxonomy-counts.js","sourceRoot":"","sources":["../../src/lib/taxonomy-counts.ts"],"names":[],"mappings":"AAMA,2DAA2D;AAC3D,MAAM,UAAU,eAAe,CAAC,QAA0B,EAAE;IAC1D,MAAM,CAAC,GAAG,IAAI,GAAG,EAAkB,CAAC;IACpC,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC;QACtB,MAAM,CAAC,GAAG,CAAC,CAAC,QAAQ,IAAI,OAAO,CAAC;QAChC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAChC,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC;AAED,2DAA2D;AAC3D,MAAM,UAAU,YAAY,CAAC,QAA0B,EAAE;IACvD,MAAM,CAAC,GAAG,IAAI,GAAG,EAAkB,CAAC;IACpC,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC;QACtB,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAa,CAAC,CAAC;QACnF,IAAI,MAAM,CAAC,IAAI,KAAK,CAAC;YAAE,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC3C,KAAK,MAAM,KAAK,IAAI,MAAM;YAAE,CAAC,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IACpE,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grove-dev/astro",
-  "version": "0.2.10",
+  "version": "0.2.14",
   "type": "module",
   "description": "Astro framework adapter for Grove. Components, layouts, design tokens, and a default template.",
   "license": "MIT",
@@ -43,9 +43,9 @@
     "./layouts/*": "./src/layouts/*.astro"
   },
   "dependencies": {
-    "astro": "^6.4.6",
-    "@grove-dev/core": "0.2.10",
-    "@grove-dev/ui": "0.2.10"
+    "@grove-dev/core": "0.2.14",
+    "@grove-dev/ui": "1.0.4",
+    "astro": "^6.4.6"
   },
   "peerDependencies": {
     "astro": "^6.0.0"

package/src/components/CategoryGrid.astro

@@ -22,6 +22,7 @@ interface Props {
   class?: string;
   /** Hide the section header. */
   bare?: boolean;
+  itemLabelPlural?: string;
 }
 
 const {
@@ -29,6 +30,7 @@ const {
   pathPrefix = "/",
   class: className = "",
   bare = false,
+  itemLabelPlural = "items",
 } = Astro.props;
 
 function buildHref(slug: string): string {
@@ -38,50 +40,60 @@ function buildHref(slug: string): string {
 ---
 
 <section
-  class:list={["grove-section", className]}
+  id="categories"
+  class:list={["grove-section scroll-mt-20 border-b border-ink-200 dark:border-ink-800", className]}
   aria-labelledby={bare ? undefined : "grove-categorygrid-heading"}
 >
-  <div class="grove-container-wide mx-auto px-5 sm:px-7">
+  <div class="grove-container mx-auto px-5 sm:px-7">
     {!bare && (
-      <header class="mb-6 flex flex-col gap-2">
+      <header class="mb-6">
+        <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
+          Categories
+        </span>
         <h2
           id="grove-categorygrid-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 mt-1 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100"
         >
           Browse by category
         </h2>
         <p class="m-0 max-w-[60ch] text-[0.9375rem] text-ink-500 dark:text-ink-400">
-          What kind of project are you looking for? Browse by category to find
-          reference apps, libraries, demos, and more.
+          Find {itemLabelPlural} by what they do, not by which stack they use.
         </p>
       </header>
     )}
 
-    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
-      {categories.map((c) => (
-        <a
-          href={buildHref(c.slug)}
-          class="grove-card grove-card-hover group flex flex-col gap-1.5 p-4 no-underline"
-          data-event="category_grid_click"
-          data-event-source="category_grid"
-        >
-          <div class="flex items-baseline justify-between gap-2">
-            <h3 class="m-0 text-[0.9375rem] font-semibold tracking-tight text-ink-900 group-hover:underline dark:text-ink-100">
-              {c.name}
-            </h3>
-            {typeof c.count === "number" && (
-              <span class="font-mono text-2xs text-ink-500 dark:text-ink-400">
-                {c.count}
-              </span>
-            )}
-          </div>
-          {c.blurb && (
-            <p class="m-0 line-clamp-2 text-[0.8125rem] leading-snug text-ink-500 dark:text-ink-400">
-              {c.blurb}
-            </p>
-          )}
-        </a>
-      ))}
+    <div class="overflow-hidden rounded-lg border border-ink-200 dark:border-ink-800">
+      <ul class="m-0 grid list-none grid-cols-1 divide-y divide-ink-200 p-0 sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-3 dark:divide-ink-800">
+        {categories.map((c) => (
+          <li class="divide-x divide-ink-200 dark:divide-ink-800">
+            <a
+              href={buildHref(c.slug)}
+              class="group flex h-full items-start gap-3 p-4 no-underline transition-colors hover:bg-ink-50/60 dark:hover:bg-ink-900/40"
+            >
+              <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+                <div class="flex items-center gap-2">
+                  <h3 class="m-0 text-[0.9375rem] font-semibold tracking-tight text-ink-900 group-hover:underline dark:text-ink-100">
+                    {c.name}
+                  </h3>
+                  {typeof c.count === "number" && (
+                    <span class="inline-flex items-center rounded-md border border-ink-200 bg-ink-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-ink-600 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-400">
+                      {c.count} {itemLabelPlural}
+                    </span>
+                  )}
+                </div>
+                {c.blurb && (
+                  <p class="m-0 text-2xs leading-relaxed text-ink-500 dark:text-ink-400">
+                    {c.blurb}
+                  </p>
+                )}
+              </div>
+              <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true" class="mt-1 shrink-0 text-ink-300 transition-colors group-hover:text-ink-500 dark:text-ink-700 dark:group-hover:text-ink-400" fill="currentColor">
+                <path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z" />
+              </svg>
+            </a>
+          </li>
+        ))}
+      </ul>
     </div>
   </div>
 </section>

package/src/components/ContributorsGrid.astro

@@ -52,14 +52,14 @@ function fmt(n: number | undefined): string | null {
 
 const visible = contributors
   .filter((c) => c.username)
-  .slice(0, 24);
+  .slice(0, 100);
 ---
 
 <section
   class:list={["grove-section", className]}
   aria-labelledby="grove-contributors-heading"
 >
-  <div class="grove-container-wide mx-auto px-5 sm:px-7">
+  <div class="grove-container mx-auto px-5 sm:px-7">
     <header class="mb-6 flex flex-wrap items-end justify-between gap-3">
       <div>
         <h2
@@ -95,7 +95,7 @@ const visible = contributors
       </p>
     ) : (
       <ul
-        class="m-0 grid list-none grid-cols-3 gap-3 p-0 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8"
+        class="m-0 grid list-none grid-cols-[repeat(auto-fill,minmax(72px,1fr))] gap-x-3 gap-y-5 p-0"
         aria-label="Contributors"
       >
         {visible.map((c) => {

package/src/components/CurationGrid.astro

@@ -0,0 +1,41 @@
+---
+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="grove-card p-5">
+        <h3 class="m-0 text-sm font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
+          {column.title}
+        </h3>
+        <ul class="mt-3 m-0 flex list-none flex-col gap-1.5 p-0">
+          {column.items.map((item) => (
+            <li class="text-sm text-ink-700 dark:text-ink-200">- {item}</li>
+          ))}
+        </ul>
+      </div>
+    ))}
+  </section>
+)}

package/src/components/ExploreByStack.astro

@@ -15,6 +15,7 @@ interface StackEntry {
   name: string;
   slug: string;
   count?: number;
+  status?: "live" | "expanding" | "planned";
 }
 
 interface Props {
@@ -64,6 +65,11 @@ function buildHref(slug: string): string {
             {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>
       ))}

package/src/components/FilterGroupMenu.astro

@@ -0,0 +1,49 @@
+---
+import FilterOptions from "./FilterOptions.astro";
+
+interface FacetValue {
+  value: string;
+  label?: string;
+  count?: number;
+}
+
+interface Props {
+  label: string;
+  filterKey: string;
+  options: FacetValue[];
+  initial: string[];
+  single?: boolean;
+  active: boolean;
+  popoverId: string;
+  trigger: string;
+}
+
+const group = Astro.props;
+---
+
+<div class="grove-filter relative" data-filter-group-key={group.filterKey} data-filter-single={group.single ? "true" : "false"}>
+  <button
+    type="button"
+    class:list={[
+      "grove-filter-trigger inline-flex h-9 items-center gap-1.5 rounded-md border px-3 text-[0.8125rem] font-medium transition-colors",
+      group.active
+        ? "border-ink-900 bg-ink-900 text-white dark:border-ink-100 dark:bg-ink-100 dark:text-ink-900"
+        : "border-ink-200 bg-white text-ink-700 hover:border-ink-300 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300 dark:hover:border-ink-700 dark:hover:bg-ink-900/60",
+    ]}
+    aria-haspopup="listbox"
+    aria-expanded="false"
+    aria-controls={group.popoverId}
+  >
+    <span>{group.trigger}</span>
+    <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor" class="opacity-70">
+      <path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"/>
+    </svg>
+  </button>
+  <div id={group.popoverId} class="grove-filter-popover absolute left-0 top-full z-40 mt-1 hidden w-72 max-w-[calc(100vw-2rem)] rounded-lg border border-ink-200 bg-white p-1.5 shadow-lg dark:border-ink-800 dark:bg-ink-950" role="listbox" hidden>
+    <FilterOptions filterKey={group.filterKey} options={group.options} initial={group.initial} single={group.single} />
+    <div class="mt-1 flex items-center justify-between border-t border-ink-100 px-2 pt-1.5 dark:border-ink-900">
+      <button type="button" class="grove-filter-clear text-2xs font-medium text-ink-500 hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100" hidden={!group.active}>Clear {group.label.toLowerCase()}</button>
+      <button type="button" class="grove-filter-apply ml-auto rounded-md bg-ink-900 px-2.5 py-1 text-2xs font-medium text-white dark:bg-ink-100 dark:text-ink-900">Apply</button>
+    </div>
+  </div>
+</div>

package/src/components/FilterOptions.astro

@@ -0,0 +1,44 @@
+---
+interface FacetValue {
+  value: string;
+  label?: string;
+  count?: number;
+}
+
+interface Props {
+  filterKey: string;
+  options: FacetValue[];
+  initial: string[];
+  single?: boolean;
+}
+
+const { filterKey, options, initial, single = false } = Astro.props;
+
+function pretty(value: string): string {
+  return value
+    .split(/[-_]/)
+    .map((part) => part ? part[0].toUpperCase() + part.slice(1) : part)
+    .join(" ");
+}
+---
+
+<ul class="m-0 flex max-h-72 list-none flex-col gap-0.5 overflow-y-auto p-0">
+  {options.map((option) => (
+    <li>
+      <label class="flex cursor-pointer items-center justify-between gap-3 rounded-md px-2 py-1.5 text-[0.8125rem] text-ink-700 transition-colors hover:bg-ink-50 dark:text-ink-300 dark:hover:bg-ink-900/60">
+        <span class="flex min-w-0 items-center gap-2">
+          <input
+            type={single ? "radio" : "checkbox"}
+            name={single ? filterKey : undefined}
+            class="grove-filter-input h-3.5 w-3.5 shrink-0 cursor-pointer accent-ink-900 dark:accent-ink-100"
+            data-filter-key={filterKey}
+            data-filter-value={option.value}
+            checked={initial.includes(option.value)}
+          />
+          <span class="truncate">{option.label ?? pretty(option.value)}</span>
+        </span>
+        <span class="font-mono text-2xs tabular-nums text-ink-500 dark:text-ink-400">{option.count ?? 0}</span>
+      </label>
+    </li>
+  ))}
+</ul>