@grove-dev/astro 0.5.1 → 0.5.3

package/src/lib/icon-registry.ts

@@ -0,0 +1,111 @@
+/**
+ * Icon registry resolution — the name → asset lookup shared by
+ * `components/Icon.astro` and the icon test suite.
+ *
+ * Kept out of the component's frontmatter so tests can assert on the
+ * exact resolution the component performs instead of reimplementing
+ * (and drifting from) the alias and folder rules.
+ */
+
+export type IconCategory = "stack" | "platform" | "brand";
+export type IconFolder = "stacks" | "platforms" | "brands";
+
+/**
+ * Normalize: lowercase + replace spaces/underscores with dashes.
+ *
+ * Deliberately NOT `@grove-dev/core`'s `slugify`, which also strips
+ * dots and other punctuation. Icon names are file names, so they must
+ * survive verbatim apart from case and separator normalization.
+ */
+export function slugifyIconName(s: string): string {
+  return s
+    .toLowerCase()
+    .trim()
+    .replace(/[\s_]+/g, "-");
+}
+
+/**
+ * Built-in id remaps. Stack-only by design: `category="platform"`
+ * resolves straight to the file name so a consumer shipping their own
+ * `public/icons/platforms/ios.svg` is never silently bypassed.
+ */
+const defaultAliases: Partial<Record<IconCategory, Record<string, string>>> = {
+  stack: {
+    ios: "apple",
+    "native-ios": "apple",
+    ipados: "apple",
+    macos: "apple",
+    "objective-c": "apple",
+    spritekit: "apple",
+    swiftui: "apple",
+    kmp: "kotlin",
+    "kotlin-multiplatform": "kotlin",
+    // Names the shipped set covers under a different file.
+    "node.js": "nodejs",
+    node: "nodejs",
+    clojurescript: "clojure",
+    svelte: "sveltekit",
+  },
+};
+
+/** Stack marks that `category="platform"` should reuse rather than duplicate. */
+const platformStackIcons = new Set(["docker"]);
+
+/** Platforms with no mark at all — always render the initials chip. */
+export const textOnlyPlatforms = new Set(["self-host", "self-hosted"]);
+
+export interface ResolvedIconAsset {
+  /** Subfolder under the icon base path. */
+  folder: IconFolder;
+  /** Alias-resolved, slugified file name (no extension). */
+  name: string;
+  /** `${folder}/${name}` — the key used by the generated kind map. */
+  key: string;
+  /** True when this name is text-only and must fall back to initials. */
+  textOnly: boolean;
+}
+
+/**
+ * Resolve a registry id to the asset it points at.
+ *
+ * Lookup order: `aliases` → the built-in stack aliases → the raw
+ * slugified name. Any name not covered by the shipped set simply
+ * resolves to `{category-folder}/{slug}`, which is what lets consumers
+ * drop their own SVGs in without touching this file.
+ */
+export function resolveIconAsset(
+  name: string,
+  category: IconCategory,
+  aliases?: Record<string, string>,
+): ResolvedIconAsset {
+  const resolved = resolveName(name, category, aliases);
+  const folder: IconFolder =
+    category === "stack" || (category === "platform" && platformStackIcons.has(resolved))
+      ? "stacks"
+      : category === "platform"
+        ? "platforms"
+        : "brands";
+
+  return {
+    folder,
+    name: resolved,
+    key: `${folder}/${resolved}`,
+    textOnly: category === "platform" && textOnlyPlatforms.has(resolved),
+  };
+}
+
+function resolveName(
+  raw: string,
+  category: IconCategory,
+  aliases?: Record<string, string>,
+): string {
+  if (!raw) return "";
+  for (const registry of [aliases, defaultAliases[category]]) {
+    if (!registry) continue;
+    const lower = raw.toLowerCase();
+    for (const [k, v] of Object.entries(registry)) {
+      if (k.toLowerCase() === lower) return slugifyIconName(v);
+    }
+  }
+  return slugifyIconName(raw);
+}

package/src/lib/index.ts

@@ -10,6 +10,7 @@
  *     `lib/search`)
  *   - compute taxonomy counts at build time (`lib/taxonomy-counts`)
  *   - pretty-print slugs and label/lens/sort/status ids (`lib/display`)
+ *   - resolve icon registry ids to asset paths (`lib/icon-registry`)
  *
  * All helpers are pure, dependency-free, and typed against
  * `@grove-dev/core` (specifically `ProjectRecord` for the index
@@ -23,3 +24,6 @@ export * from "./search.js";
 export * from "./taxonomy-counts.js";
 export * from "./display.js";
 export * from "./load-collections.js";
+export * from "./icon-registry.js";
+export * from "./icon-kinds.js";
+export * from "./packaged-icons.js";

package/src/lib/packaged-icons.ts

@@ -0,0 +1,32 @@
+/**
+ * Locate the icon set that ships inside `@grove-dev/astro`.
+ *
+ * The component and the SVGs it points at live in the same package on
+ * purpose: an upgrade that changes how `Icon.astro` resolves a name
+ * carries the matching artwork with it, so a consumer can never end up
+ * with a component asking for files their site does not have.
+ */
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import type { IconSyncOptions, IconSyncResult } from "@grove-dev/core";
+import { syncIconAssets } from "@grove-dev/core";
+
+/**
+ * `packages/astro/assets/icons` — two levels up, which holds for both
+ * `src/lib/` (tests, Vite) and `dist/lib/` (published).
+ */
+export const packagedIconsDir = resolve(
+  dirname(fileURLToPath(import.meta.url)),
+  "..",
+  "..",
+  "assets",
+  "icons",
+);
+
+/** Copy the packaged icon set into a site's `public/`. */
+export function syncPackagedIcons(
+  publicDir: string,
+  options?: IconSyncOptions,
+): Promise<IconSyncResult> {
+  return syncIconAssets(packagedIconsDir, publicDir, options);
+}

package/src/styles.css

@@ -424,6 +424,67 @@
  * Colors come from the package's `ink-*` scale via CSS variables so
  * every consumer gets the same baseline regardless of brand overrides.
  * ────────────────────────────────────────────────────────────────── */
+
+/* ──────────────────────────────────────────────────────────────────
+ * Monochrome brand marks (`Icon.astro`, kind: "mono")
+ *
+ * An SVG loaded through `<img src>` is an independent document that
+ * page CSS cannot reach, so `currentColor` inside it never resolves
+ * against the theme — it silently renders black in both modes. That
+ * is why single-color marks (Apple, Rust, Tauri, Deno, …) used to
+ * need a hand-maintained `-light`/`-dark` file pair plus a JS `src`
+ * swap, and why the pair was easy to get backwards.
+ *
+ * Masking inverts the relationship: the SVG supplies the *shape*
+ * (via its alpha channel) and the page supplies the *color* — no
+ * script and no second file.
+ *
+ * The paint is `--grove-foreground`, NOT `currentColor`. These are
+ * brand marks, and a brand mark's real presentation is solid black on
+ * light and solid white on dark — not whatever tint the surrounding
+ * chip label happens to use. Inheriting `currentColor` washed the
+ * Apple mark down to the chip's muted `ink-500`, which reads as a
+ * greyed-out logo rather than a logo. Callers that genuinely want a
+ * tinted mark can override `--grove-icon-mono`.
+ *
+ * The URL is per-icon and computed at render time, so it can never
+ * appear literally in a source file for Tailwind's extractor to find
+ * — arbitrary `mask-[url(…)]` utilities are structurally impossible
+ * here. Everything static lives in this class; only the URL travels
+ * inline, as `--grove-icon-url`.
+ * ────────────────────────────────────────────────────────────────── */
+.grove-icon-mask {
+  display: inline-block;
+  flex-shrink: 0;
+  vertical-align: middle;
+  background-color: var(--grove-icon-mono, var(--grove-foreground));
+  -webkit-mask-image: var(--grove-icon-url);
+  mask-image: var(--grove-icon-url);
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
+
+/* Print stylesheets drop background colors, which would erase the
+ * glyph entirely — an `<img>` would still print. */
+@media print {
+  .grove-icon-mask {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}
+
+/* Forced-colors mode overrides `background-color`; pin it to the
+ * system text color so the mark stays visible. */
+@media (forced-colors: active) {
+  .grove-icon-mask {
+    background-color: CanvasText;
+  }
+}
+
 .grove-prose {
   font-size: 1.0625rem; /* 17px */
   line-height: 1.75;