@rxova/astro-ui 0.1.0 → 0.3.0

package/src/components/ProofStats.astro

@@ -0,0 +1,207 @@
+---
+/**
+ * The proof band: a gradient-framed panel of figures that count up the first time it scrolls into view.
+ * Figures are server-rendered at their final value, so with JS off or motion reduced it is a static panel.
+ */
+export interface Stat {
+  value: string
+  label: string
+  note: string
+}
+
+interface Props {
+  stats: readonly Stat[]
+}
+
+const { stats } = Astro.props
+---
+
+<div class="rx-stats">
+  <div class="rx-stats__glow" aria-hidden="true"></div>
+  <div class="rx-stats__frame">
+    <ul class="rx-stats__grid">
+      {stats.map((stat) => (
+        <li class="rx-stats__item">
+          <p class="rx-stats__value">{stat.value}</p>
+          <p class="rx-stats__label">{stat.label}</p>
+          <p class="rx-stats__note">{stat.note}</p>
+        </li>
+      ))}
+    </ul>
+  </div>
+</div>
+
+<script>
+  const DURATION = 1100
+
+  const animate = (panel: HTMLElement) => {
+    // Values are display strings ("7.58 kB", "95%"); the leading number animates and the rest stays.
+    const figures = [...panel.querySelectorAll<HTMLElement>('.rx-stats__value')].flatMap((el) => {
+      const match = /^(\d+(?:\.\d+)?)(.*)$/s.exec(el.textContent ?? '')
+      if (!match) return []
+      const [, number = '', suffix = ''] = match
+      const final = el.textContent ?? ''
+      return [
+        {
+          el,
+          target: Number(number),
+          decimals: (number.split('.')[1] ?? '').length,
+          suffix,
+          final,
+        },
+      ]
+    })
+
+    const frame = (start: number) => {
+      const t = Math.min(1, (performance.now() - start) / DURATION)
+      // easeOutExpo: quick to nearly-there, then settles.
+      const eased = t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
+      for (const f of figures) {
+        f.el.textContent = t === 1 ? f.final : (f.target * eased).toFixed(f.decimals) + f.suffix
+      }
+      if (t < 1) requestAnimationFrame(() => frame(start))
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue
+          observer.disconnect()
+          for (const f of figures) f.el.textContent = '0' + f.suffix
+          requestAnimationFrame(() => frame(performance.now()))
+        }
+      },
+      { threshold: 0.3 },
+    )
+    observer.observe(panel)
+  }
+
+  if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    for (const panel of document.querySelectorAll<HTMLElement>('.rx-stats')) animate(panel)
+  }
+</script>
+
+<style>
+  .rx-stats {
+    position: relative;
+    isolation: isolate;
+  }
+
+  /* A blurred copy of the frame's gradient behind it; its own element, since the frame paints a background. */
+  .rx-stats__glow {
+    position: absolute;
+    z-index: -1;
+    inset: -1.25rem -0.5rem;
+    border-radius: calc(var(--rx-radius) + 1rem);
+    background: var(--rx-gradient);
+    background-size: 220% 100%;
+    filter: blur(38px);
+    opacity: 0.2;
+    animation: rx-stats-sweep 14s linear infinite;
+  }
+
+  /* 1px of padding over a gradient is the border: border-image does not follow border-radius. */
+  .rx-stats__frame {
+    padding: 1px;
+    border-radius: var(--rx-radius);
+    background: var(--rx-gradient);
+    background-size: 220% 100%;
+    animation: rx-stats-sweep 14s linear infinite;
+  }
+
+  @keyframes rx-stats-sweep {
+    to {
+      background-position: 220% 0;
+    }
+  }
+
+  .rx-stats__grid {
+    display: grid;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    background: var(--rx-card);
+    border-radius: calc(var(--rx-radius) - 1px);
+    overflow: hidden;
+    grid-template-columns: 1fr;
+  }
+
+  @media (min-width: 38rem) {
+    .rx-stats__grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (min-width: 58rem) {
+    .rx-stats__grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  /* Dividers by outline, not grid gap: with an odd tile count a gap leaves a hole that reads as a broken tile. */
+  .rx-stats__item {
+    position: relative;
+    padding: 1.7rem 1.5rem;
+    box-shadow: 0 0 0 1px var(--rx-rule);
+  }
+
+  /* A gradient wash that fades up from the bottom of the hovered tile. */
+  .rx-stats__item::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--rx-gradient);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+    mask-image: linear-gradient(to top, #000, transparent 72%);
+  }
+
+  .rx-stats__item:hover::after {
+    opacity: 0.1;
+  }
+
+  .rx-stats__value,
+  .rx-stats__label,
+  .rx-stats__note {
+    position: relative;
+  }
+
+  .rx-stats__value {
+    margin: 0;
+    color: var(--rx-fg);
+    font-size: clamp(2rem, 1.5rem + 1.9vw, 2.9rem);
+    font-weight: 640;
+    line-height: 1;
+    letter-spacing: -0.03em;
+    /* Tabular figures so a counting number cannot jitter its own width. */
+    font-variant-numeric: tabular-nums;
+  }
+
+  .rx-stats__label {
+    margin: 0.7rem 0 0;
+    color: var(--rx-fg);
+    font-size: 0.95rem;
+    font-weight: 600;
+  }
+
+  .rx-stats__note {
+    margin: 0.35rem 0 0;
+    /* --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-wrap: pretty;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .rx-stats__glow,
+    .rx-stats__frame {
+      animation: none;
+    }
+
+    .rx-stats__item::after {
+      transition: none;
+    }
+  }
+</style>

package/src/components/QuickStart.astro

@@ -0,0 +1,156 @@
+---
+/**
+ * An install command with a copy button beside a "Use" pane. The snippet arrives through the slot,
+ * so a page can write a fenced block and get the same Shiki highlighting as the docs.
+ */
+interface Props {
+  command: string
+}
+
+const { command } = Astro.props
+---
+
+<div class="rx-qs">
+  <div class="rx-qs__pane">
+    <p class="rx-qs__label">Install</p>
+    <div class="rx-qs__term">
+      {/* Focusable and labelled: a nowrap command over overflow-x scrolls, and a scrollable region needs a tab stop. */}
+      <code class="rx-qs__cmd" tabindex="0" role="region" aria-label="Install command">
+        <span class="rx-qs__prompt" aria-hidden="true">
+          $
+        </span>
+        {command}
+      </code>
+      <button class="rx-qs__copy" type="button" data-copy={command}>
+        <span class="rx-qs__copy-idle">Copy</span>
+        <span class="rx-qs__copy-done" aria-hidden="true">
+          Copied
+        </span>
+      </button>
+    </div>
+  </div>
+
+  <div class="rx-qs__pane">
+    <p class="rx-qs__label">Use</p>
+    <div class="rx-qs__code">
+      <slot />
+    </div>
+  </div>
+</div>
+
+<script>
+  for (const button of document.querySelectorAll<HTMLButtonElement>('.rx-qs__copy')) {
+    button.addEventListener('click', async () => {
+      try {
+        await navigator.clipboard.writeText(button.dataset.copy ?? '')
+      } catch {
+        // Clipboard access can be denied; saying nothing beats claiming a copy that did not happen.
+        return
+      }
+      button.dataset.state = 'done'
+      window.setTimeout(() => delete button.dataset.state, 1600)
+    })
+  }
+</script>
+
+<style>
+  .rx-qs {
+    display: grid;
+    gap: 1.25rem;
+    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
+  }
+
+  .rx-qs__pane {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .rx-qs__label {
+    margin: 0 0 0.6rem;
+    /* --rx-muted, not --rx-faint: faint on the card is ~3.4:1 and fails AA here. */
+    color: var(--rx-muted);
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  /* Not `flex: 1`: a one-line command stretched to the snippet's height floats in an empty box. */
+  .rx-qs__term {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 1rem 1rem 1.15rem;
+    background: var(--rx-card);
+    border: 1px solid var(--rx-rule);
+    border-radius: var(--rx-radius);
+  }
+
+  .rx-qs__cmd {
+    flex: 1;
+    min-width: 0;
+    overflow-x: auto;
+    color: var(--rx-fg);
+    font-family: var(--rx-font-mono);
+    font-size: 0.88rem;
+    white-space: nowrap;
+  }
+
+  .rx-qs__prompt {
+    margin-right: 0.6rem;
+    color: var(--rx-primary);
+    user-select: none;
+  }
+
+  /* One label over the other, so the button keeps its size when the state flips. */
+  .rx-qs__copy {
+    display: grid;
+    flex: none;
+    padding: 0.4rem 0.85rem;
+    color: var(--rx-muted);
+    background: var(--rx-bg);
+    border: 1px solid var(--rx-rule-strong);
+    border-radius: var(--rx-radius-pill);
+    font: inherit;
+    font-size: 0.78rem;
+    font-weight: 500;
+    cursor: pointer;
+  }
+
+  .rx-qs__copy:hover {
+    color: var(--rx-fg);
+    border-color: var(--rx-primary);
+  }
+
+  .rx-qs__copy-idle,
+  .rx-qs__copy-done {
+    grid-area: 1 / 1;
+  }
+
+  .rx-qs__copy-done,
+  .rx-qs__copy[data-state='done'] .rx-qs__copy-idle {
+    visibility: hidden;
+  }
+
+  .rx-qs__copy[data-state='done'] .rx-qs__copy-done {
+    visibility: visible;
+    color: var(--rx-primary);
+  }
+
+  .rx-qs__code {
+    flex: 1;
+  }
+
+  /* The slotted block renders its own <pre>; frame it like the terminal so the panes read as a pair. */
+  .rx-qs__code :global(pre) {
+    height: 100%;
+    margin: 0;
+    padding: 1rem 1.15rem;
+    border: 1px solid var(--rx-rule);
+    border-radius: var(--rx-radius);
+    overflow-x: auto;
+    font-size: 0.84rem;
+    line-height: 1.6;
+  }
+</style>

package/src/components/ScreenshotGrid.astro

@@ -0,0 +1,164 @@
+---
+/**
+ * Screenshots shown rather than described: each in a hairline frame through Astro's `<Image>`,
+ * a mono label and a line of detail under it, and an optional link beneath the row.
+ */
+import { Image } from 'astro:assets'
+import type { ImageMetadata } from 'astro'
+
+export interface Shot {
+  src: ImageMetadata
+  alt: string
+  title: string
+  body: string
+}
+
+interface Props {
+  shots: readonly Shot[]
+  link?: { href: string; text: string; external?: boolean }
+}
+
+const { shots, link } = Astro.props
+---
+
+<div class="rx-shots">
+  <ul class="rx-shots__grid">
+    {shots.map((shot, index) => (
+      <li class="rx-shots__item">
+        <figure class="rx-shots__figure">
+          <div class="rx-shots__frame">
+            <Image src={shot.src} alt={shot.alt} loading="lazy" />
+          </div>
+          <figcaption class="rx-shots__caption">
+            <span class="rx-shots__index" aria-hidden="true">
+              {String(index + 1).padStart(2, '0')}
+            </span>
+            <span class="rx-shots__title">{shot.title}</span>
+            <span class="rx-shots__body">{shot.body}</span>
+          </figcaption>
+        </figure>
+      </li>
+    ))}
+  </ul>
+
+  {link && (
+    <a class="rx-shots__link" href={link.href} rel={link.external ? 'noopener' : undefined}>
+      {link.text}
+      <svg
+        viewBox="0 0 16 16"
+        width="14"
+        height="14"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.6"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        {link.external ? <path d="M5 3h8v8M13 3 3 13" /> : <path d="M3 8h10M9 4l4 4-4 4" />}
+      </svg>
+    </a>
+  )}
+</div>
+
+<style>
+  .rx-shots__grid {
+    display: grid;
+    gap: 2rem 2.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    grid-template-columns: 1fr;
+  }
+
+  /* Viewport breakpoints, like ValueGrid: three across on a wide screen, two on a tablet, one on a phone. */
+  @media (min-width: 38rem) {
+    .rx-shots__grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (min-width: 60rem) {
+    .rx-shots__grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  .rx-shots__item {
+    min-width: 0;
+  }
+
+  .rx-shots__figure {
+    margin: 0;
+  }
+
+  /* A hairline, not a card: the screenshot is the surface. The frame owns the radius. */
+  .rx-shots__frame {
+    overflow: hidden;
+    border: 1px solid var(--rx-rule);
+    border-radius: var(--rx-radius-sm);
+    background: var(--rx-card);
+  }
+
+  .rx-shots__frame :global(img) {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  /* Index beside the label, detail hanging under the label; the indent binds the pair. */
+  .rx-shots__caption {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: 0.7rem;
+    row-gap: 0.3rem;
+    margin-top: 0.9rem;
+    align-content: start;
+  }
+
+  .rx-shots__index,
+  .rx-shots__title {
+    grid-row: 1;
+    font-family: var(--rx-font-mono);
+    font-size: 0.74rem;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  .rx-shots__index {
+    grid-column: 1;
+    color: var(--rx-faint);
+  }
+
+  .rx-shots__title {
+    grid-column: 2;
+    color: var(--rx-fg);
+  }
+
+  .rx-shots__body {
+    grid-column: 2;
+    grid-row: 2;
+    color: var(--rx-muted);
+    font-size: 0.9rem;
+    line-height: 1.5;
+    text-wrap: pretty;
+  }
+
+  .rx-shots__link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    margin-top: 1.75rem;
+    color: var(--rx-fg);
+    font-size: 0.95rem;
+    font-weight: 500;
+    text-decoration: none;
+    border-bottom: 1px solid var(--rx-rule-strong);
+    padding-bottom: 0.15rem;
+  }
+
+  .rx-shots__link:hover {
+    color: var(--rx-primary);
+    border-color: currentColor;
+  }
+</style>

package/src/components/Section.astro

@@ -0,0 +1,103 @@
+---
+/**
+ * A landing-page section: eyebrow, heading, lede, then the slot. `not-content` opts the subtree out
+ * of Starlight's prose rules, which would otherwise give every stat and card title a paragraph's measure.
+ */
+interface Props {
+  id?: string
+  eyebrow?: string
+  title: string
+  lede?: string
+  /** Draws the gradient hairline above the heading; the brand spends the gradient sparingly. */
+  accent?: boolean
+}
+
+const { id, eyebrow, title, lede, accent = false } = Astro.props
+---
+
+<section class:list={['rx-sec', 'not-content', { 'rx-sec--accent': accent }]} id={id}>
+  <header class="rx-sec__head">
+    {eyebrow && <p class="rx-sec__eyebrow">{eyebrow}</p>}
+    <h2 class="rx-sec__title">{title}</h2>
+    {lede && <p class="rx-sec__lede">{lede}</p>}
+  </header>
+  <slot />
+</section>
+
+<style>
+  /* Unlayered, so it beats Starlight's `.sl-container > * + *` gap without a specificity fight. */
+  .rx-sec {
+    margin-block: 5.5rem 0;
+  }
+
+  /* rem, not ch: `ch` resolves against this 1rem block, not the ~2.35rem heading it wraps. */
+  .rx-sec__head {
+    max-width: 48rem;
+    margin-bottom: 2rem;
+  }
+
+  .rx-sec__eyebrow {
+    margin: 0 0 0.75rem;
+    /* --rx-muted, not --rx-faint: faint on the card is ~3.4:1 and fails AA here. */
+    color: var(--rx-muted);
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .rx-sec__title {
+    margin: 0;
+    color: var(--rx-fg);
+    font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.35rem);
+    font-weight: 640;
+    line-height: 1.15;
+    letter-spacing: -0.02em;
+    text-wrap: balance;
+  }
+
+  .rx-sec__lede {
+    max-width: 62ch;
+    margin: 0.9rem 0 0;
+    color: var(--rx-muted);
+    font-size: 1.05rem;
+    line-height: 1.6;
+    text-wrap: pretty;
+  }
+
+  .rx-sec--accent .rx-sec__head {
+    padding-top: 1.75rem;
+    border-top: 2px solid transparent;
+    border-image: var(--rx-gradient) 1;
+  }
+
+  /* Direct children only: a descendant selector would outrank the slotted components' own scoped rules. */
+  .rx-sec > :global(pre) {
+    margin: 0;
+    padding: 1.1rem 1.25rem;
+    background: var(--rx-card);
+    border: 1px solid var(--rx-rule);
+    border-radius: var(--rx-radius);
+    overflow-x: auto;
+    font-size: 0.86rem;
+    line-height: 1.65;
+  }
+
+  .rx-sec > :global(p) {
+    margin: 1.5rem 0 0;
+    color: var(--rx-muted);
+    font-size: 0.98rem;
+    line-height: 1.62;
+  }
+
+  .rx-sec > :global(p a) {
+    color: var(--rx-primary);
+    font-weight: 500;
+  }
+
+  @media (min-width: 50rem) {
+    .rx-sec {
+      margin-block: 7rem 0;
+    }
+  }
+</style>

package/src/components/SiteFooter.astro

@@ -1,14 +1,14 @@
 ---
 /**
  * The rxova footer on every surface: brand block, link columns, then copyright and legal links.
- * Styles live in `../styles/footer.css`; all cross-project hrefs are absolute.
+ * Styles live in `../styles/footer.css`. Hrefs are absolute unless `origin` is '' (on rxova.org).
  */
-import { PROJECTS, RXOVA_ORIGIN, getProject, siteUrl, type ProjectId } from '@rxova/brand'
+import { PROJECTS, RXOVA_ORIGIN, getProject, type ProjectId } from '@rxova/brand'
 
 /** A standalone surface of rxova.org, for the "Site" column. */
 export interface SiteLink {
   label: string
-  /** Absolute — see sites.ts in @rxova/brand. */
+  /** A page URL ending in `/`: absolute, or root-relative when `origin` is ''. */
   href: string
 }
 
@@ -27,27 +27,29 @@ interface Props {
    * Defaults to every project, which is right for a docs site.
    */
   projects?: readonly SiteLink[]
+  /** Prefix for every rxova.org link. '' on rxova.org itself, so links stay on the serving origin. */
+  origin?: string
 }
 
-const { project, docs, site, projects } = Astro.props
+const { project, docs, site, projects, origin = RXOVA_ORIGIN } = Astro.props
 const self = project ? getProject(project) : undefined
 const year = new Date().getFullYear()
 
 const projectLinks: readonly SiteLink[] =
-  projects ?? PROJECTS.map((p) => ({ label: p.label, href: `${RXOVA_ORIGIN}${p.mount}` }))
+  projects ?? PROJECTS.map((p) => ({ label: p.label, href: `${origin}${p.mount}` }))
 
 const surfaces: readonly SiteLink[] = site ?? [
-  { label: 'Blog', href: siteUrl('/blog') },
-  { label: 'Updates', href: siteUrl('/updates') },
-  { label: 'About', href: siteUrl('/about') },
+  { label: 'Blog', href: `${origin}/blog/` },
+  { label: 'Updates', href: `${origin}/updates/` },
+  { label: 'About', href: `${origin}/about/` },
 ]
 ---
 
 <footer class="rx-footer">
   <div class="rx-footer__top">
     <div class="rx-footer__brand">
-      <a class="rx-footer__mark" href={RXOVA_ORIGIN}>
-        <img src={siteUrl('/rxova-logo-256.png')} alt="" width="28" height="28" loading="lazy" />
+      <a class="rx-footer__mark" href={`${origin}/`}>
+        <img src={`${origin}/rxova-logo-256.png`} alt="" width="28" height="28" loading="lazy" />
         <span>Rxova</span>
       </a>
       {/* Not "React libraries": most ship a framework-agnostic core; some are extensions/CLIs. */}
@@ -112,7 +114,7 @@ const surfaces: readonly SiteLink[] = site ?? [
         <h2 class="rx-footer__title">Site</h2>
         <ul class="rx-footer__list">
           <li>
-            <a href={RXOVA_ORIGIN}>Home</a>
+            <a href={`${origin}/`}>Home</a>
           </li>
           {surfaces.map((s) => (
             <li>
@@ -142,8 +144,8 @@ const surfaces: readonly SiteLink[] = site ?? [
   <div class="rx-footer__legal">
     <p>© {year} Rxova · MIT licensed</p>
     <div class="rx-footer__legal-links">
-      <a href={siteUrl('/privacy')}>Privacy</a>
-      <a href={siteUrl('/terms')}>Terms</a>
+      <a href={`${origin}/privacy/`}>Privacy</a>
+      <a href={`${origin}/terms/`}>Terms</a>
     </div>
   </div>
 </footer>