@grove-dev/astro 0.5.0-next.2 → 0.5.0

package/src/layouts/Seo.astro

@@ -31,7 +31,7 @@ interface Props {
   /** Open Graph / Twitter image. Default: /og-image.svg. Should be absolute or root-relative. */
   image?: string;
   /** og:type. Default: "website". Use "article" for blog posts / changelog. */
-  type?: "website" | "article" | "profile";
+  type?: 'website' | 'article' | 'profile';
   /** Set true to add noindex,nofollow. */
   noindex?: boolean;
   /** Extra JSON-LD payload (object) — typically SoftwareSourceCode on item pages. */
@@ -42,21 +42,32 @@ const {
   title,
   description,
   site: siteConfig,
-  searchPath = "/items",
-  image = "/og-image.svg",
-  type = "website",
+  searchPath = '/items',
+  image = '/og-image.svg',
+  type = 'website',
   noindex = false,
   jsonLd,
 } = Astro.props;
 
-const siteUrl = Astro.site ?? new URL("https://example.com");
+// `Astro.site` is required for canonical / OG / Twitter / JSON-LD URLs to
+// resolve to the consumer's domain. Failing the build (rather than silently
+// emitting `https://example.com/...`) is the right call: every canonical,
+// OG, and JSON-LD URL would otherwise leak to a domain the consumer doesn't
+// own, which search engines either ignore or treat as canonical to the
+// wrong host.
+if (!Astro.site) {
+  throw new Error(
+    "Seo: `site` is not set on the Astro config. Add `site: 'https://your-domain'` to astro.config.mjs so canonical / Open Graph / Twitter / JSON-LD URLs resolve correctly.",
+  );
+}
+const siteUrl = Astro.site;
 const canonical = new URL(Astro.url.pathname, siteUrl).toString();
 const ogImage = new URL(image, siteUrl).toString();
 
 // Truncate description for OG/Twitter where longer is worse (160–200 chars).
 function truncate(s: string, max: number): string {
   if (s.length <= max) return s;
-  return s.slice(0, max - 1).trimEnd() + "\u2026";
+  return s.slice(0, max - 1).trimEnd() + '\u2026';
 }
 const shortDescription = truncate(description, 200);
 
@@ -64,25 +75,25 @@ const shortDescription = truncate(description, 200);
 // that should appear on every page (Google uses them for site links
 // and the knowledge panel).
 const websiteLd = {
-  "@context": "https://schema.org",
-  "@type": "WebSite",
+  '@context': 'https://schema.org',
+  '@type': 'WebSite',
   name: siteConfig.name,
   description: siteConfig.description ?? description,
-  url: siteUrl.toString().replace(/\/$/, ""),
-  inLanguage: "en",
+  url: siteUrl.toString().replace(/\/$/, ''),
+  inLanguage: 'en',
   potentialAction: {
-    "@type": "SearchAction",
-    target: `${siteUrl.toString().replace(/\/$/, "")}${searchPath}?q={search_term_string}`,
-    "query-input": "required name=search_term_string",
+    '@type': 'SearchAction',
+    target: `${siteUrl.toString().replace(/\/$/, '')}${searchPath}?q={search_term_string}`,
+    'query-input': 'required name=search_term_string',
   },
 };
 
 const organizationLd = {
-  "@context": "https://schema.org",
-  "@type": "Organization",
+  '@context': 'https://schema.org',
+  '@type': 'Organization',
   name: siteConfig.name,
-  url: siteUrl.toString().replace(/\/$/, ""),
-  logo: new URL("/og-image.svg", siteUrl).toString(),
+  url: siteUrl.toString().replace(/\/$/, ''),
+  logo: new URL('/og-image.svg', siteUrl).toString(),
   ...(siteConfig.repoUrl ? { sameAs: [siteConfig.repoUrl] } : {}),
 };
 

package/src/layouts/ThemeToggle.astro

@@ -22,7 +22,7 @@ const { class: className = "" } = Astro.props;
   type="button"
   id="theme-toggle"
   data-theme-toggle
-  aria-label="Toggle theme"
+  aria-label="Theme: system — switch to light"
   title="Toggle theme"
   class={`inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-[var(--radius)] border border-border bg-secondary p-0 text-foreground outline-none transition-colors hover:bg-accent focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 ${className}`}
 >
@@ -58,6 +58,9 @@ const { class: className = "" } = Astro.props;
     <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z"/>
   </svg>
 </button>
+{/* Announces theme changes to assistive tech — the icon alone can't
+    distinguish "dark" from "system resolving to dark". */}
+<span data-theme-toggle-status role="status" class="sr-only"></span>
 
 <script>
   // The toggle button simply rotates between the three modes on
@@ -82,18 +85,32 @@ const { class: className = "" } = Astro.props;
     return next;
   }
 
-  // A small tooltip label so the user knows what mode they'll get
-  // on the next click. We re-read current mode on focus/hover so it
-  // stays in sync.
+  function nextMode(): Mode {
+    const order: Mode[] = ["light", "dark", "system"];
+    return order[(order.indexOf(currentMode()) + 1) % order.length];
+  }
+
+  // The accessible name carries BOTH the current state and the next
+  // action ("Theme: dark — switch to system"); title mirrors it for
+  // sighted tooltip users. Re-read on focus/hover so another tab or
+  // toggle instance can't leave it stale.
   function updateLabel(btn: HTMLButtonElement) {
-    btn.title = `Theme: ${currentMode()} (click to switch)`;
+    const label = `Theme: ${currentMode()} — switch to ${nextMode()}`;
+    btn.setAttribute("aria-label", label);
+    btn.title = label;
+  }
+
+  function announce(mode: Mode) {
+    const status = document.querySelector("[data-theme-toggle-status]");
+    if (status) status.textContent = `Theme set to ${mode}`;
   }
 
   document.querySelectorAll<HTMLButtonElement>("[data-theme-toggle]").forEach((btn) => {
     updateLabel(btn);
     btn.addEventListener("click", () => {
-      rotate();
+      const mode = rotate();
       updateLabel(btn);
+      announce(mode);
     });
     btn.addEventListener("mouseenter", () => updateLabel(btn));
     btn.addEventListener("focus", () => updateLabel(btn));

package/src/lib/index.ts

@@ -8,7 +8,6 @@
  *   - format counts, dates, stars (`lib/format`)
  *   - apply curated lenses / facets / search filters (`lib/lenses`,
  *     `lib/search`)
- *   - render score bars (`lib/scores`)
  *   - compute taxonomy counts at build time (`lib/taxonomy-counts`)
  *   - pretty-print slugs and label/lens/sort/status ids (`lib/display`)
  *
@@ -21,7 +20,6 @@ export * from "./repo.js";
 export * from "./format.js";
 export * from "./lenses.js";
 export * from "./search.js";
-export * from "./scores.js";
 export * from "./taxonomy-counts.js";
 export * from "./display.js";
 export * from "./load-collections.js";

package/src/server/collections.ts

@@ -18,6 +18,7 @@ interface RawRecord {
   stacks?: string[];
   platforms?: string[];
   license?: string;
+  licenses?: string[];
   visibility?: string;
   /** GitHub stargazers count. Stored on `github.repository.stargazers_count`
    *  in the full payload; read explicitly because the index payload
@@ -81,6 +82,16 @@ export function recordsToCollectionEntries(
       stack: r.stack ?? r.stacks?.[0],
       platform: r.platforms,
       license: r.license,
+      // Pass through the curated `licenses` array so the collection
+      // engine can match both curated SPDX ids and the GitHub fallback.
+      // If only `license` (singular, GitHub-synced) is present, mirror
+      // it into the array so the filter still matches it.
+      licenses:
+        r.licenses && r.licenses.length > 0
+          ? r.licenses
+          : r.license
+            ? [r.license]
+            : undefined,
       status: r.visibility,
       stars: r.stars ?? r.github?.repository?.stargazers_count,
       forks: r.forks ?? r.github?.repository?.forks_count,

package/src/server/contrast.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from "vitest";
+import { contrastRatio, derivePrimaryPalette, hexToRgb, relativeLuminance, rgbToHex } from "./contrast";
+
+describe("WCAG contrast math", () => {
+  it("parses 3- and 6-digit hex and rejects garbage", () => {
+    expect(hexToRgb("#fff")).toEqual([255, 255, 255]);
+    expect(hexToRgb("#16a34a")).toEqual([0x16, 0xa3, 0x4a]);
+    expect(hexToRgb("#16a34aff")).toEqual([0x16, 0xa3, 0x4a]);
+    expect(hexToRgb("#xyz")).toBeNull();
+    expect(hexToRgb("green")).toBeNull();
+  });
+
+  it("computes relative luminance at the anchors", () => {
+    expect(relativeLuminance([0, 0, 0])).toBe(0);
+    expect(relativeLuminance([255, 255, 255])).toBeCloseTo(1, 5);
+  });
+
+  it("computes the canonical 21:1 black/white ratio", () => {
+    expect(contrastRatio("#000000", "#ffffff")).toBeCloseTo(21, 1);
+    expect(contrastRatio("#ffffff", "#000000")).toBeCloseTo(21, 1);
+  });
+
+  it("confirms the audit finding: white on #16a34a fails AA", () => {
+    const ratio = contrastRatio("#16a34a", "#ffffff");
+    expect(ratio).toBeGreaterThan(3);
+    expect(ratio).toBeLessThan(4.5);
+  });
+});
+
+describe("derivePrimaryPalette", () => {
+  it("pairs #16a34a with AA text instead of white (the P0 fix)", () => {
+    // White on #16a34a is 3.3:1 (the shipped failure). Near-black
+    // reaches 6:1, so the brand hex stays exact and the TEXT changes.
+    const palette = derivePrimaryPalette("#16a34a");
+    expect(palette).not.toBeNull();
+    const p = palette as NonNullable<typeof palette>;
+    expect(p.solid).toBe("#16a34a");
+    expect(p.solidForeground).toBe("#0a0a0a");
+    expect(contrastRatio(p.solid, p.solidForeground)).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it("darkens a mid-tone hex only when no text color reaches AA on it", () => {
+    // #777777: white is ~4.48:1 and near-black ~4.42:1 — neither
+    // passes, so the solid must shift until white does.
+    const p = derivePrimaryPalette("#777777");
+    expect(p).not.toBeNull();
+    const pal = p as NonNullable<typeof p>;
+    expect(pal.solid).not.toBe("#777777");
+    expect(pal.solidForeground).toBe("#ffffff");
+    expect(contrastRatio(pal.solid, pal.solidForeground)).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it("keeps an already-AA dark brand color untouched with white text", () => {
+    const p = derivePrimaryPalette("#15803d");
+    expect(p?.solid).toBe("#15803d");
+    expect(p?.solidForeground).toBe("#ffffff");
+  });
+
+  it("pairs a light brand color with near-black text instead of mutating it", () => {
+    const p = derivePrimaryPalette("#facc15");
+    expect(p?.solid).toBe("#facc15");
+    expect(p?.solidForeground).toBe("#0a0a0a");
+  });
+
+  it("always yields an AA dark-theme pair from the lifted variant", () => {
+    for (const hex of ["#16a34a", "#1d4ed8", "#0a0a0a", "#facc15", "#e11d48"]) {
+      const p = derivePrimaryPalette(hex);
+      expect(p, hex).not.toBeNull();
+      const pal = p as NonNullable<typeof p>;
+      expect(contrastRatio(pal.dark, pal.darkForeground), hex).toBeGreaterThanOrEqual(4.5);
+      expect(contrastRatio(pal.solid, pal.solidForeground), hex).toBeGreaterThanOrEqual(4.5);
+    }
+  });
+
+  it("returns null for unparseable input", () => {
+    expect(derivePrimaryPalette("rebeccapurple")).toBeNull();
+  });
+
+  it("round-trips rgb↔hex", () => {
+    expect(rgbToHex(hexToRgb("#16a34a") as [number, number, number])).toBe("#16a34a");
+  });
+});

package/src/server/contrast.ts

@@ -0,0 +1,117 @@
+/**
+ * WCAG contrast math for the configured brand color.
+ *
+ * BaseLayout derives every primary-* custom property from one place so
+ * the button background and its text can never drift apart (the old
+ * pipeline mixed the dark variant in CSS `color-mix` while the
+ * foreground stayed a build-time guess — white on `#16a34a` shipped at
+ * 3.3:1). All derivation happens at build time in sRGB; the emitted
+ * values are plain hex.
+ */
+
+const INK_950 = "#0a0a0a";
+const WHITE = "#ffffff";
+const AA_NORMAL = 4.5;
+
+export type Rgb = [number, number, number];
+
+/** Parse #rgb / #rrggbb (also tolerates #rrggbbaa, alpha ignored). */
+export function hexToRgb(hex: string): Rgb | null {
+  const raw = hex.replace("#", "");
+  const full = raw.length === 3 ? raw.split("").map((c) => c + c).join("") : raw;
+  if (!/^[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(full)) return null;
+  const int = Number.parseInt(full.slice(0, 6), 16);
+  return [(int >> 16) & 255, (int >> 8) & 255, int & 255];
+}
+
+export function rgbToHex([r, g, b]: Rgb): string {
+  const clamp = (v: number) => Math.max(0, Math.min(255, Math.round(v)));
+  return `#${[r, g, b].map((v) => clamp(v).toString(16).padStart(2, "0")).join("")}`;
+}
+
+/** WCAG relative luminance (sRGB linearization, not the quick luma). */
+export function relativeLuminance([r, g, b]: Rgb): number {
+  const channel = (v: number) => {
+    const s = v / 255;
+    return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+
+/** WCAG contrast ratio between two hex colors (1..21). */
+export function contrastRatio(hexA: string, hexB: string): number {
+  const a = hexToRgb(hexA);
+  const b = hexToRgb(hexB);
+  if (!a || !b) return 1;
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  const [hi, lo] = la >= lb ? [la, lb] : [lb, la];
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+function mix(color: Rgb, toward: Rgb, amount: number): Rgb {
+  return [
+    color[0] + (toward[0] - color[0]) * amount,
+    color[1] + (toward[1] - color[1]) * amount,
+    color[2] + (toward[2] - color[2]) * amount,
+  ];
+}
+
+/**
+ * Shift `hex` toward `toward` in small steps until `text` reaches AA
+ * contrast on it. Returns the first passing color (or the endpoint —
+ * black/white always pass against each other's text color).
+ */
+function adjustUntilAA(hex: string, toward: string, text: string): string {
+  const start = hexToRgb(hex);
+  const end = hexToRgb(toward);
+  if (!start || !end) return hex;
+  for (let step = 0; step <= 100; step += 2) {
+    const candidate = rgbToHex(mix(start, end, step / 100));
+    if (contrastRatio(candidate, text) >= AA_NORMAL) return candidate;
+  }
+  return toward;
+}
+
+export interface PrimaryPalette {
+  /** Light-theme solid fill (AA-adjusted when the raw hex can't carry text). */
+  solid: string;
+  /** Text on `solid`. */
+  solidForeground: string;
+  /** Dark-theme lifted fill. */
+  dark: string;
+  /** Text on `dark`. */
+  darkForeground: string;
+}
+
+/**
+ * Derive the full primary palette from the configured brand hex.
+ *
+ * Light: keep the raw hex when white or near-black text reaches AA on
+ * it; otherwise darken toward black until white passes (`#16a34a` →
+ * a green-700-family solid).
+ * Dark: lift toward white (mirroring the old `color-mix` 72/28 split),
+ * then keep lifting until near-black text passes AA.
+ */
+export function derivePrimaryPalette(hex: string): PrimaryPalette | null {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return null;
+
+  let solid = hex;
+  let solidForeground = WHITE;
+  if (contrastRatio(hex, WHITE) >= AA_NORMAL) {
+    solidForeground = WHITE;
+  } else if (contrastRatio(hex, INK_950) >= AA_NORMAL) {
+    solidForeground = INK_950;
+  } else {
+    solid = adjustUntilAA(hex, "#000000", WHITE);
+    solidForeground = WHITE;
+  }
+
+  const lifted = rgbToHex(mix(rgb, hexToRgb(WHITE) as Rgb, 0.28));
+  const dark = contrastRatio(lifted, INK_950) >= AA_NORMAL
+    ? lifted
+    : adjustUntilAA(lifted, WHITE, INK_950);
+
+  return { solid, solidForeground, dark, darkForeground: INK_950 };
+}

package/src/server/directory.test.ts

@@ -0,0 +1,177 @@
+/**
+ * Tests for the markdown → safe-HTML pipeline in `directory.ts`.
+ *
+ * `directory.ts` imports `@grove/generated/*.json` at module load (build-time
+ * artifacts), which don't exist in the test environment. We mock those JSON
+ * imports so the module can be loaded for its pure functions (specifically
+ * `renderMarkdownToSafeHtml`).
+ */
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('@grove/generated/records.full.json', () => ({ default: { records: [] } }));
+vi.mock('@grove/generated/records.index.json', () => ({ default: { records: [] } }));
+vi.mock('@grove/generated/site-config.json', () => ({ default: {} }));
+
+const { renderMarkdownToSafeHtml } = await import('./directory.js');
+
+describe('renderMarkdownToSafeHtml', () => {
+  it('renders basic paragraphs', () => {
+    const html = renderMarkdownToSafeHtml('Hello, **world**.');
+    expect(html).toContain('<strong>world</strong>');
+  });
+
+  it('renders headings with stable ids', () => {
+    const html = renderMarkdownToSafeHtml('## My Section');
+    expect(html).toMatch(/<h2[^>]*id="my-section"[^>]*>My Section<\/h2>/);
+  });
+
+  it('deduplicates repeated heading ids', () => {
+    const html = renderMarkdownToSafeHtml('## Examples\n\n## Examples\n');
+    const ids = [...html.matchAll(/id="(examples(?:-\d+)?)"/g)].map((m) => m[1]);
+    expect(ids).toEqual(['examples', 'examples-2']);
+  });
+
+  it('strips script tags from the body', () => {
+    const html = renderMarkdownToSafeHtml(
+      'Some text.\n\n<script>alert("xss")</script>\n\nMore text.',
+    );
+    expect(html).not.toContain('<script');
+    expect(html).not.toContain('alert(');
+  });
+
+  it('strips inline event handler attributes from links', () => {
+    const html = renderMarkdownToSafeHtml('[click](https://example.com "onclick=alert(1)")');
+    // The sanitizer's allowlist is `["href", "title", "rel", "target"]` for
+    // `<a>` tags — `onclick` is never an attribute. (The substring `onclick=`
+    // may appear inside a `title="…"` tooltip, but that's plain text.)
+    expect(html).not.toMatch(/<a[^>]*\sonclick\s*=/i);
+    expect(html).toContain('href="https://example.com"');
+  });
+
+  it('forces noopener noreferrer on links', () => {
+    const html = renderMarkdownToSafeHtml('[link](https://example.com)');
+    expect(html).toContain('rel="noopener noreferrer"');
+    expect(html).toContain('target="_blank"');
+  });
+
+  it('rejects javascript: URLs', () => {
+    const html = renderMarkdownToSafeHtml('[evil](javascript:alert(1))');
+    expect(html).not.toContain('javascript:');
+    expect(html).not.toMatch(/<a[^>]*href/);
+  });
+
+  it('forces img loading=lazy decoding=async', () => {
+    const html = renderMarkdownToSafeHtml('![alt](https://example.com/img.png)');
+    expect(html).toMatch(/loading="lazy"/);
+    expect(html).toMatch(/decoding="async"/);
+  });
+
+  it('strips style attributes from disallowed tags', () => {
+    const html = renderMarkdownToSafeHtml(
+      '<a href="https://example.com" style="color:red">link</a>',
+    );
+    expect(html).not.toMatch(/<a[^>]*style/);
+  });
+
+  it('renders GFM tables inside the table-wrap div', () => {
+    const md = `
+| col1 | col2 |
+| ---- | ---- |
+| a    | b    |
+`;
+    const html = renderMarkdownToSafeHtml(md);
+    expect(html).toContain('grove-prose-table-wrap');
+    expect(html).toContain('<table>');
+    expect(html).toContain('<thead>');
+    expect(html).toContain('<tbody>');
+  });
+
+  it('renders task-list checkboxes as disabled', () => {
+    const md = '- [x] done\n- [ ] todo\n';
+    const html = renderMarkdownToSafeHtml(md);
+    expect(html).toContain('type="checkbox"');
+    expect(html).toContain('disabled');
+  });
+
+  it('accepts a narrower page allowlist', () => {
+    const html = renderMarkdownToSafeHtml('<details><summary>x</summary>y</details>', {
+      allowlist: [
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'p',
+        'br',
+        'hr',
+        'ul',
+        'ol',
+        'li',
+        'strong',
+        'em',
+        'b',
+        'i',
+        'u',
+        's',
+        'del',
+        'a',
+        'code',
+        'pre',
+        'blockquote',
+        'img',
+      ],
+    });
+    expect(html).not.toContain('<details');
+  });
+
+  it('strips raw iframe tags', () => {
+    const html = renderMarkdownToSafeHtml(
+      'Text.\n\n<iframe src="https://evil.example"></iframe>\n\nMore.',
+    );
+    expect(html).not.toContain('<iframe');
+    expect(html).not.toContain('evil.example');
+  });
+
+  it('strips raw svg tags (including script-bearing svgs)', () => {
+    const html = renderMarkdownToSafeHtml(
+      'Text.\n\n<svg><script>alert("xss")</script></svg>\n\nMore.',
+    );
+    expect(html).not.toContain('<svg');
+    expect(html).not.toContain('<script');
+  });
+
+  it('strips raw object and embed tags', () => {
+    const html = renderMarkdownToSafeHtml(
+      '<object data="https://evil.example/x.swf"></object>\n<embed src="x">',
+    );
+    expect(html).not.toContain('<object');
+    expect(html).not.toContain('<embed');
+  });
+
+  it('filters malicious CSS from <span style> (closes the url(javascript:) bypass)', () => {
+    const html = renderMarkdownToSafeHtml(
+      '<span style="background:url(javascript:alert(1));color:red">x</span>',
+    );
+    expect(html).not.toContain('javascript:');
+    // The color: declaration is also stripped because it doesn't pass
+    // the allowStyles regex (no semicolon-terminated hex / rgb / hsl).
+    expect(html).not.toMatch(/<span[^>]*style=/);
+  });
+
+  it('preserves Shiki-emitted CSS variable declarations on <span>', () => {
+    const html = renderMarkdownToSafeHtml(
+      '<span style="--shiki-light:#fff;--shiki-dark:#000;color:#fff">x</span>',
+    );
+    expect(html).toMatch(/--shiki-light/);
+    expect(html).toMatch(/--shiki-dark/);
+  });
+
+  it('rejects data: URLs on <a> but allows them on <img>', () => {
+    const html = renderMarkdownToSafeHtml(
+      '[evil](data:text/html,<script>alert(1)</script>)\n\n![ok](data:image/png;base64,iVBORw0KG)',
+    );
+    // The malicious <a> URL must be removed; the inline <img> data: URL
+    // (a base64 PNG) is allowed by the per-tag scheme rule.
+    expect(html).not.toMatch(/<a[^>]*href="data:/);
+    expect(html).toMatch(/<img[^>]*src="data:image\/png/);
+  });
+});