@rxova/astro-ui 0.1.0 → 0.3.0

package/src/components/SizeTable.astro

@@ -0,0 +1,118 @@
+---
+/**
+ * Per-package bundle budgets as a real table: right-aligned tabular figures are the shape that
+ * supports comparing against whatever the reader ships today.
+ */
+export interface SizeRow {
+  pkg: string
+  entry: string
+  limitKb: number
+}
+
+interface Props {
+  rows: readonly SizeRow[]
+  /** The column heading: "brotli", "gzip". */
+  compression: string
+  caption: string
+}
+
+const { rows, compression, caption } = Astro.props
+---
+
+{/* Focusable and labelled: the box scrolls sideways on a narrow viewport, and a scrollable region needs a tab stop. */}
+<div class="rx-sizes" tabindex="0" role="region" aria-label="Bundle size budgets">
+  <table class="rx-sizes__table">
+    <caption class="rx-sizes__caption">{caption}</caption>
+    <thead>
+      <tr>
+        <th scope="col">Package</th>
+        <th scope="col">You import</th>
+        <th scope="col" class="rx-sizes__num">
+          {compression}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      {rows.map((row) => (
+        <tr>
+          <th scope="row" class="rx-sizes__pkg">
+            {row.pkg}
+          </th>
+          <td>
+            <code>{row.entry}</code>
+          </td>
+          <td class="rx-sizes__num">≤ {row.limitKb} kB</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .rx-sizes {
+    overflow-x: auto;
+    border: 1px solid var(--rx-rule);
+    border-radius: var(--rx-radius);
+  }
+
+  .rx-sizes__table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9rem;
+  }
+
+  .rx-sizes__caption {
+    padding: 1rem 1.25rem;
+    /* --rx-muted, not --rx-faint: faint on the card is ~3.4:1 and fails AA here. */
+    color: var(--rx-muted);
+    font-size: 0.82rem;
+    line-height: 1.5;
+    text-align: start;
+    caption-side: bottom;
+    border-top: 1px solid var(--rx-rule);
+  }
+
+  .rx-sizes__table th,
+  .rx-sizes__table td {
+    padding: 0.85rem 1.25rem;
+    text-align: start;
+    border-bottom: 1px solid var(--rx-rule);
+  }
+
+  .rx-sizes__table thead th {
+    background: var(--rx-card);
+    color: var(--rx-muted);
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .rx-sizes__table tbody tr:last-child th,
+  .rx-sizes__table tbody tr:last-child td {
+    border-bottom: 0;
+  }
+
+  .rx-sizes__pkg {
+    color: var(--rx-fg);
+    font-family: var(--rx-font-mono);
+    font-size: 0.84rem;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  .rx-sizes__table code {
+    color: var(--rx-muted);
+    font-family: var(--rx-font-mono);
+    font-size: 0.84rem;
+    white-space: nowrap;
+  }
+
+  .rx-sizes__num {
+    text-align: end;
+    color: var(--rx-fg);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+</style>

package/src/components/ThemeToggle.astro

@@ -59,7 +59,7 @@ const { floating = true } = Astro.props
     position: fixed;
     top: 1rem;
     right: 1rem;
-    /* Above SiteShell's sticky header (z-index 10), so the fixed button stays reachable. */
+    /* Above the site's sticky header (z-index 10), so the fixed button stays reachable. */
     z-index: 20;
     width: 2.25rem;
     height: 2.25rem;

package/src/components/ValueGrid.astro

@@ -0,0 +1,116 @@
+---
+/**
+ * A grid of claims in the landing's language: a gradient hairline over each, a faint-ink Lucide
+ * icon beside the title, the body hanging under it. `icon` is a `lucide-static` name, inlined at build time.
+ */
+import { lucideGlyph } from '../lib/icons.ts'
+
+export interface ValueItem {
+  title: string
+  /** Set as HTML, so it may carry inline `<code>`. */
+  body: string
+  icon: string
+}
+
+interface Props {
+  items: readonly ValueItem[]
+}
+
+const { items } = Astro.props
+---
+
+<ul class="rx-vg">
+  {items.map((item) => (
+    <li class="rx-vg__item">
+      <svg
+        class="rx-vg__icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+        set:html={lucideGlyph(item.icon)}
+      />
+      <h3 class="rx-vg__title">{item.title}</h3>
+      <p class="rx-vg__body" set:html={item.body} />
+    </li>
+  ))}
+</ul>
+
+<style>
+  .rx-vg {
+    display: grid;
+    gap: 2rem 2.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    grid-template-columns: 1fr;
+  }
+
+  /* Explicit counts: auto-fit lands on four at the wide measure and leaves a half-empty last row. */
+  @media (min-width: 38rem) {
+    .rx-vg {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (min-width: 60rem) {
+    .rx-vg {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  /* Icon beside the title, body under the title; 2px of the gradient over each binds them into one set. */
+  .rx-vg__item {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: 0.7rem;
+    row-gap: 0.4rem;
+    align-content: start;
+    padding-top: 1rem;
+    border-top: 2px solid transparent;
+    border-image: var(--rx-gradient) 1;
+    border-image-width: 2px 0 0 0;
+  }
+
+  .rx-vg__icon {
+    grid-column: 1;
+    grid-row: 1;
+    width: 1.375rem;
+    height: 1.375rem;
+    align-self: center;
+    color: var(--rx-faint);
+  }
+
+  .rx-vg__title {
+    grid-column: 2;
+    grid-row: 1;
+    margin: 0;
+    color: var(--rx-fg);
+    font-size: 1.05rem;
+    font-weight: 620;
+    line-height: 1.3;
+    letter-spacing: -0.015em;
+    text-wrap: balance;
+  }
+
+  .rx-vg__body {
+    grid-column: 2;
+    grid-row: 2;
+    margin: 0;
+    color: var(--rx-muted);
+    font-size: 0.95rem;
+    line-height: 1.55;
+    text-wrap: pretty;
+  }
+
+  .rx-vg__body :global(code) {
+    padding: 0.1em 0.35em;
+    background: var(--rx-tag-bg);
+    border-radius: var(--rx-radius-sm);
+    font-family: var(--rx-font-mono);
+    font-size: 0.86em;
+  }
+</style>

package/src/components/icons/Collapse.astro

@@ -0,0 +1,11 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Icon from '../Icon.astro'
+
+/** Four corners pointing in. */
+type Props = Omit<ComponentProps<typeof Icon>, 'solid'>
+---
+
+<Icon {...Astro.props}>
+  <path d="M6 2.75V6H2.75M13.25 6H10V2.75M10 13.25V10h3.25M2.75 10H6v3.25"></path>
+</Icon>

package/src/components/icons/Expand.astro

@@ -0,0 +1,11 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Icon from '../Icon.astro'
+
+/** Four corners pointing out. */
+type Props = Omit<ComponentProps<typeof Icon>, 'solid'>
+---
+
+<Icon {...Astro.props}>
+  <path d="M2.75 6V2.75H6M10 2.75h3.25V6M13.25 10v3.25H10M6 13.25H2.75V10"></path>
+</Icon>

package/src/components/icons/Next.astro

@@ -0,0 +1,11 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Icon from '../Icon.astro'
+
+/** A right chevron. */
+type Props = Omit<ComponentProps<typeof Icon>, 'solid'>
+---
+
+<Icon {...Astro.props}>
+  <path d="M6 3.5 10.5 8 6 12.5"></path>
+</Icon>

package/src/components/icons/Pause.astro

@@ -0,0 +1,11 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Icon from '../Icon.astro'
+
+/** Two bars. */
+type Props = Omit<ComponentProps<typeof Icon>, 'solid'>
+---
+
+<Icon {...Astro.props}>
+  <path d="M5.25 3.5v9M10.75 3.5v9"></path>
+</Icon>

package/src/components/icons/Play.astro

@@ -0,0 +1,11 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Icon from '../Icon.astro'
+
+/** A solid triangle. */
+type Props = Omit<ComponentProps<typeof Icon>, 'solid'>
+---
+
+<Icon {...Astro.props} solid>
+  <path d="M5 3.2v9.6L12.6 8z"></path>
+</Icon>

package/src/components/icons/Prev.astro

@@ -0,0 +1,11 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Icon from '../Icon.astro'
+
+/** A left chevron. */
+type Props = Omit<ComponentProps<typeof Icon>, 'solid'>
+---
+
+<Icon {...Astro.props}>
+  <path d="M10 3.5 5.5 8l4.5 4.5"></path>
+</Icon>

package/src/components/icons/Replay.astro

@@ -0,0 +1,11 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Icon from '../Icon.astro'
+
+/** An arrow turning back to its start. */
+type Props = Omit<ComponentProps<typeof Icon>, 'solid'>
+---
+
+<Icon {...Astro.props}>
+  <path d="M3.2 8a4.8 4.8 0 1 0 1.4-3.4M4.2 2.4v2.8H7"></path>
+</Icon>

package/src/lib/icons.ts

@@ -0,0 +1,15 @@
+/** Lucide icons as inline markup, read from `lucide-static` at build time so nothing ships to the client. */
+
+import { readFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
+
+const require = createRequire(import.meta.url)
+
+/** What sits inside a Lucide icon's root `<svg>`, so the caller's own element owns size and accessibility. */
+export function lucideGlyph(name: string): string {
+  const svg = readFileSync(require.resolve(`lucide-static/icons/${name}.svg`), 'utf8')
+  return svg
+    .replace(/^[\s\S]*?<svg[^>]*>/, '')
+    .replace(/<\/svg>[\s\S]*$/, '')
+    .trim()
+}

package/src/starlight/index.ts

@@ -94,8 +94,7 @@ export function sharedStarlightConfig({
       },
     ],
 
-    // Pagefind ships with Starlight and replaces the third-party search plugin
-    // journey was carrying.
+    // Pagefind ships with Starlight, so docs sites need no third-party search plugin.
     pagefind: true,
 
     sidebar,

package/src/styles/landing.css

@@ -0,0 +1,55 @@
+/**
+ * The rules a Starlight splash landing needs around the landing components. Load it through
+ * `customCss`; every rule is gated on `[data-has-hero]`, which Starlight sets only on a page with a hero.
+ */
+
+/* Starlight's 45rem prose measure is wrong for a stat band or a card grid; take the brand's wide bound. */
+html[data-has-hero] .sl-container {
+  max-width: var(--rx-max-wide);
+}
+
+/* The sections carry their own rhythm, so Starlight's 1.5rem between top-level children compounds. */
+html[data-has-hero] .sl-container > * + * {
+  margin-top: 0;
+}
+
+/* Starlight's clamp tops out at 10rem of padding, which pushes the first call to action below the fold. */
+html[data-has-hero] .hero {
+  padding-block: clamp(2.5rem, 1rem + 6vmin, 5rem);
+}
+
+/* Without a hero image the second grid column is dead space holding the headline off to one side. */
+html[data-has-hero] .hero:not(:has(img)) {
+  grid-template-columns: 1fr;
+}
+
+/* Starlight caps every hero child at 50ch: right for the tagline, far too wide for a display headline. */
+html[data-has-hero] .hero h1 {
+  max-width: 22ch;
+  text-wrap: balance;
+}
+
+html[data-has-hero] .hero .tagline {
+  max-width: 56ch;
+  text-wrap: pretty;
+}
+
+/* The first section's 7rem margin is separating from the hero, which already ends in its own padding. */
+html[data-has-hero] .sl-markdown-content > :first-child {
+  margin-top: 2rem;
+}
+
+/* A pill above the headline, for a version: the hero title is frontmatter HTML, so it is styled by class. */
+html[data-has-hero] .hero .rx-tag {
+  display: inline-block;
+  margin-bottom: 0.9rem;
+  padding: 0.28rem 0.7rem;
+  color: var(--rx-primary);
+  background: var(--rx-tag-bg);
+  border-radius: var(--rx-radius-pill);
+  font-family: var(--rx-font-mono);
+  font-size: 0.78rem;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.4;
+}

package/src/styles/mermaid.css

@@ -0,0 +1,75 @@
+/**
+ * Theme-aware mermaid diagrams for `rehype-mermaid`'s build-time SVG, which bakes in a light palette.
+ * Mermaid scopes its own <style> by id, which outranks any class rule, so the colours here need !important.
+ */
+
+.sl-markdown-content svg[aria-roledescription] {
+  max-width: 100%;
+  height: auto;
+  /* Mermaid sizes the viewBox to the diagram; let it breathe on the page. */
+  margin-block: 1.5rem;
+}
+
+/* Node and cluster surfaces. */
+.sl-markdown-content svg[aria-roledescription] .node rect,
+.sl-markdown-content svg[aria-roledescription] .node circle,
+.sl-markdown-content svg[aria-roledescription] .node polygon,
+.sl-markdown-content svg[aria-roledescription] .node path,
+.sl-markdown-content svg[aria-roledescription] .label-container {
+  fill: var(--rx-card) !important;
+  stroke: var(--rx-rule-strong) !important;
+}
+
+.sl-markdown-content svg[aria-roledescription] .cluster rect {
+  fill: color-mix(in srgb, var(--rx-tag-bg) 60%, transparent) !important;
+  stroke: var(--rx-rule) !important;
+}
+
+/* All text: labels, cluster titles, edge labels, actor names. */
+.sl-markdown-content svg[aria-roledescription] text,
+.sl-markdown-content svg[aria-roledescription] .nodeLabel,
+.sl-markdown-content svg[aria-roledescription] .edgeLabel,
+.sl-markdown-content svg[aria-roledescription] .cluster-label,
+.sl-markdown-content svg[aria-roledescription] .messageText,
+.sl-markdown-content svg[aria-roledescription] .loopText {
+  fill: var(--rx-fg) !important;
+  color: var(--rx-fg) !important;
+}
+
+/* Edge labels sit on an opaque plate; mermaid renders them as HTML in a <foreignObject>, so cover both. */
+.sl-markdown-content svg[aria-roledescription] .edgeLabel,
+.sl-markdown-content svg[aria-roledescription] .edgeLabel *,
+.sl-markdown-content svg[aria-roledescription] .labelBkg {
+  background-color: var(--rx-bg) !important;
+  color: var(--rx-fg) !important;
+}
+
+.sl-markdown-content svg[aria-roledescription] .edgeLabel rect,
+.sl-markdown-content svg[aria-roledescription] .labelBkg rect {
+  fill: var(--rx-bg) !important;
+}
+
+/* Connectors. */
+.sl-markdown-content svg[aria-roledescription] .edgePath path,
+.sl-markdown-content svg[aria-roledescription] .flowchart-link,
+.sl-markdown-content svg[aria-roledescription] line,
+.sl-markdown-content svg[aria-roledescription] .messageLine0,
+.sl-markdown-content svg[aria-roledescription] .messageLine1 {
+  stroke: var(--rx-faint) !important;
+}
+
+.sl-markdown-content svg[aria-roledescription] marker path,
+.sl-markdown-content svg[aria-roledescription] .arrowMarkerPath {
+  fill: var(--rx-faint) !important;
+  stroke: var(--rx-faint) !important;
+}
+
+/* Sequence-diagram participant boxes and lifelines. */
+.sl-markdown-content svg[aria-roledescription='sequence'] .actor {
+  fill: var(--rx-card) !important;
+  stroke: var(--rx-rule-strong) !important;
+}
+
+.sl-markdown-content svg[aria-roledescription='sequence'] .actor-line {
+  stroke: var(--rx-rule-strong) !important;
+}

package/src/components/SiteShell.astro

@@ -1,155 +0,0 @@
----
-/**
- * Artifact document for rxova.org's non-Starlight pages: metadata and assets only, no header,
- * footer, analytics or theme bootstrap. rxova-website supplies the public shell at deploy time.
- */
-import '@rxova/brand/fonts.css'
-import '../styles/document.css'
-
-import { canonicalUrl, siteUrl } from '@rxova/brand'
-
-interface Props {
-  title: string
-  description: string
-  /** Canonical path, e.g. `/blog/why-rxova-has-a-blog`. Normalised below. */
-  path: string
-  ogType?: 'website' | 'article'
-  /** Absolute URL of the social card, chosen by the caller; defaults to the umbrella card. */
-  image?: string
-  /** Advertises an RSS feed for this surface, as `rel="alternate"`. */
-  feed?: { href: string; title: string }
-  /** JSON-LD for this page, emitted verbatim as `application/ld+json`. */
-  jsonLd?: unknown
-}
-
-const { title, description, path, ogType = 'website', image, feed, jsonLd } = Astro.props
-
-// Normalised here so no caller can declare a canonical URL without the trailing slash (a 301).
-const canonical = canonicalUrl(path)
-
-const ogImage = image ?? siteUrl('/og/rxova.png')
-
-/** Serialise JSON-LD for an inline `<script>`; `<` is escaped so a `</script>` cannot close it. */
-const serialiseJsonLd = (value: unknown): string => JSON.stringify(value).replace(/</g, '\\u003c')
----
-
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="canonical" href={canonical} />
-    <title>{title}</title>
-    <meta name="description" content={description} />
-    <meta property="og:title" content={title} />
-    <meta property="og:description" content={description} />
-    <meta property="og:type" content={ogType} />
-    <meta property="og:url" content={canonical} />
-    <meta property="og:image" content={ogImage} />
-    <meta name="twitter:card" content="summary_large_image" />
-    {feed && (
-      <link rel="alternate" type="application/rss+xml" title={feed.title} href={feed.href} />
-    )}
-    {jsonLd && (
-      <script type="application/ld+json" is:inline set:html={serialiseJsonLd(jsonLd)}></script>
-    )}
-  </head>
-  <body>
-    <main>
-      <slot />
-    </main>
-
-    <style>
-      main {
-        max-width: var(--rx-max-wide);
-        margin: 0 auto;
-        padding: clamp(2rem, 6vh, 3.5rem) 1.5rem 4rem;
-      }
-    </style>
-
-    <!-- Prose styling for rendered markdown. Global because <Content /> markup carries no Astro
-         scoping attributes. -->
-    <style is:global>
-      .prose {
-        color: var(--rx-muted);
-        line-height: 1.7;
-      }
-      .prose > * + * {
-        margin-top: 1.1rem;
-      }
-      .prose h2 {
-        color: var(--rx-fg);
-        font-size: 1.25rem;
-        font-weight: 640;
-        letter-spacing: -0.01em;
-        margin-top: 2.5rem;
-      }
-      .prose h3 {
-        color: var(--rx-fg);
-        font-size: 1.05rem;
-        font-weight: 620;
-        margin-top: 2rem;
-      }
-      .prose a {
-        color: var(--rx-fg);
-        text-decoration: underline;
-        text-underline-offset: 2px;
-      }
-      .prose strong {
-        color: var(--rx-fg);
-        font-weight: 620;
-      }
-      .prose ul,
-      .prose ol {
-        margin-left: 1.2rem;
-      }
-      .prose li + li {
-        margin-top: 0.35rem;
-      }
-      .prose code {
-        font-family: var(--rx-font-mono);
-        font-size: 0.88em;
-        background: var(--rx-tag-bg);
-        padding: 0.05rem 0.35rem;
-        border-radius: 4px;
-      }
-      .prose pre {
-        background: var(--rx-card);
-        border: 1px solid var(--rx-rule);
-        border-radius: 10px;
-        padding: 1rem 1.1rem;
-        /* Long lines scroll inside the block; the page itself never does. */
-        overflow-x: auto;
-      }
-      .prose pre code {
-        background: none;
-        padding: 0;
-      }
-      .prose blockquote {
-        border-left: 2px solid var(--rx-rule);
-        padding-left: 1rem;
-        color: var(--rx-faint);
-      }
-      .prose img {
-        max-width: 100%;
-        height: auto;
-        border-radius: 10px;
-      }
-      .prose table {
-        width: 100%;
-        border-collapse: collapse;
-        font-size: 0.95rem;
-      }
-      .prose th,
-      .prose td {
-        border-bottom: 1px solid var(--rx-rule);
-        padding: 0.5rem 0.6rem;
-        text-align: left;
-      }
-      .prose th {
-        color: var(--rx-fg);
-        font-weight: 620;
-      }
-    </style>
-  </body>
-</html>