@rxova/astro-ui 0.0.0 → 0.2.0

package/src/components/Header.astro

@@ -0,0 +1,148 @@
+---
+/**
+ * The single rxova.org header, rendered by `SiteShell` and the website landing; callers pass
+ * the menu fully resolved. Not for the Starlight docs sites, which use `sharedStarlightConfig`.
+ */
+import ThemeToggle from './ThemeToggle.astro'
+
+export interface HeaderItem {
+  label: string
+  /** Fully resolved by the caller — absolute or root-relative as its base needs. */
+  href: string
+  /** Marks the item for the surface the reader is on. */
+  current?: boolean
+}
+
+interface Props {
+  /** Where the brand mark links — the site root, resolved by the caller. */
+  homeHref: string
+  /** Logo `src`, resolved by the caller for its base. */
+  logoSrc: string
+  /** The menu, in the one fixed order every surface shows it. */
+  items: readonly HeaderItem[]
+}
+
+const { homeHref, logoSrc, items } = Astro.props
+---
+
+{/* Outside <main> so it spans the viewport; sticky, not fixed, so nothing needs a top margin. */}
+<header class="site">
+  <div class="site__inner">
+    <a class="brand" href={homeHref}>
+      <img src={logoSrc} alt="" width="28" height="28" />
+      <span>Rxova</span>
+    </a>
+    <nav aria-label="Sections">
+      {items.map((item) => (
+        <a href={item.href} aria-current={item.current ? 'page' : undefined}>
+          {item.label}
+        </a>
+      ))}
+    </nav>
+    {/* In the header, not floating over it — see ThemeToggle's `floating`. */}
+    <ThemeToggle floating={false} />
+  </div>
+</header>
+
+<style>
+  /* Sticky, translucent, full-bleed. */
+  .site {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    border-bottom: 1px solid var(--rx-rule);
+    background: color-mix(in srgb, var(--rx-bg) 88%, transparent);
+  }
+
+  /* The blur keeps text legible under the bar; where unsupported, the 88% mix above stays
+     nearly opaque. */
+  @supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
+    .site {
+      background: color-mix(in srgb, var(--rx-bg) 72%, transparent);
+      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(10px);
+    }
+  }
+
+  .site__inner {
+    max-width: var(--rx-max-wide);
+    margin: 0 auto;
+    padding: 0.75rem 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    /* No wrapping: a two-line header would eat a phone's viewport, and the row
+       is sized to fit at the narrowest widths we support. */
+    min-height: 3.5rem;
+  }
+
+  .brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.55rem;
+    color: var(--rx-fg);
+    text-decoration: none;
+    font-weight: 640;
+    letter-spacing: -0.01em;
+  }
+  .brand img {
+    display: block;
+    border-radius: 6px;
+  }
+
+  /* The nav takes the space between the brand and the toggle, and pushes itself
+     to the right of it. */
+  nav {
+    margin-left: auto;
+    display: flex;
+    gap: 1.4rem;
+  }
+  nav a {
+    color: var(--rx-muted);
+    text-decoration: none;
+    font-size: 0.95rem;
+    white-space: nowrap;
+  }
+  nav a:hover {
+    color: var(--rx-fg);
+  }
+  /* The current section is marked for everyone, not only for assistive tech —
+     aria-current on its own is invisible. */
+  nav a[aria-current='page'] {
+    color: var(--rx-fg);
+    text-decoration: underline;
+    text-underline-offset: 5px;
+  }
+  nav a:focus-visible {
+    outline: 2px solid var(--rx-fg);
+    outline-offset: 3px;
+    border-radius: 2px;
+  }
+
+  /* Brand mark, the links and the toggle stay on one row at the narrowest phones
+     by dropping the wordmark — the logo carries the identity in the space left. */
+  @media (max-width: 34rem) {
+    .site__inner {
+      gap: 0.75rem;
+      padding-inline: 1rem;
+      min-height: 3.25rem;
+    }
+    nav {
+      gap: 0.9rem;
+    }
+    nav a {
+      font-size: 0.875rem;
+    }
+    .brand span {
+      display: none;
+    }
+  }
+</style>
+
+<!-- Global because `html` sits outside Astro's scoping. Without it a jump to an
+     in-page anchor would land under the sticky header. -->
+<style is:global>
+  html {
+    scroll-padding-top: 4.5rem;
+  }
+</style>

package/src/components/Icon.astro

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+/** The frame every glyph in `icons/` draws in: a 16px grid in the text colour. Decorative: label the button. */
+type Props = HTMLAttributes<'svg'> & {
+  /** Width and height, in pixels. */
+  size?: number
+  /** Fills the shape instead of stroking it. */
+  solid?: boolean
+}
+
+const { size = 16, solid = false, class: className, ...rest } = Astro.props
+---
+
+<svg
+  class:list={['icon', className]}
+  viewBox="0 0 16 16"
+  width={size}
+  height={size}
+  fill={solid ? 'currentColor' : 'none'}
+  stroke={solid ? 'none' : 'currentColor'}
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+  {...rest}
+>
+  <slot />
+</svg>

package/src/components/ModeTabs.astro

@@ -0,0 +1,124 @@
+---
+/**
+ * A numbered progression of modes, each a prose column beside a code pane. Panes are named slots
+ * (one per `mode.slot`), so a page writes fenced blocks and gets the docs' Shiki highlighting.
+ */
+export interface Mode {
+  name: string
+  /** The named slot holding this mode's code. */
+  slot: string
+  summary: string
+}
+
+interface Props {
+  modes: readonly Mode[]
+}
+
+const { modes } = Astro.props
+const panes = await Promise.all(
+  modes.map(async (mode) => ({
+    ...mode,
+    html: Astro.slots.has(mode.slot) ? await Astro.slots.render(mode.slot) : '',
+  })),
+)
+---
+
+<ol class="rx-modes">
+  {panes.map((mode, index) => (
+    <li class="rx-modes__item">
+      <div class="rx-modes__prose">
+        <div class="rx-modes__head">
+          <span class="rx-modes__step" aria-hidden="true">
+            {index + 1}
+          </span>
+          <h3 class="rx-modes__name">{mode.name}</h3>
+        </div>
+        <p class="rx-modes__summary">{mode.summary}</p>
+      </div>
+      <div class="rx-modes__code" set:html={mode.html} />
+    </li>
+  ))}
+</ol>
+
+<style>
+  .rx-modes {
+    display: grid;
+    gap: 1.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* Full-width rows, not columns: snippets are wider than a third of the page and would truncate. */
+  .rx-modes__item {
+    display: grid;
+    gap: 1.25rem;
+    min-width: 0;
+    padding: 1.5rem;
+    background: var(--rx-card);
+    border: 1px solid var(--rx-rule);
+    border-radius: var(--rx-radius);
+    grid-template-columns: 1fr;
+  }
+
+  @media (min-width: 50rem) {
+    .rx-modes__item {
+      grid-template-columns: 17rem 1fr;
+      align-items: start;
+      gap: 2rem;
+    }
+  }
+
+  .rx-modes__head {
+    display: flex;
+    align-items: center;
+    gap: 0.7rem;
+  }
+
+  .rx-modes__step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.6rem;
+    height: 1.6rem;
+    flex: none;
+    color: var(--rx-primary);
+    background: var(--rx-tag-bg);
+    border-radius: var(--rx-radius-pill);
+    font-family: var(--rx-font-mono);
+    font-size: 0.8rem;
+    font-weight: 500;
+  }
+
+  .rx-modes__name {
+    margin: 0;
+    color: var(--rx-fg);
+    font-size: 1.05rem;
+    font-weight: 620;
+    letter-spacing: -0.01em;
+  }
+
+  .rx-modes__summary {
+    margin: 0.7rem 0 0;
+    color: var(--rx-muted);
+    font-size: 0.92rem;
+    line-height: 1.6;
+    text-wrap: pretty;
+  }
+
+  /* min-width: 0 so a long line scrolls inside the pane instead of widening the card past the page. */
+  .rx-modes__code {
+    min-width: 0;
+  }
+
+  .rx-modes__code :global(pre) {
+    margin: 0;
+    padding: 0.95rem 1.1rem;
+    background: var(--rx-bg);
+    border: 1px solid var(--rx-rule);
+    border-radius: var(--rx-radius-sm);
+    overflow-x: auto;
+    font-size: 0.8rem;
+    line-height: 1.6;
+  }
+</style>

package/src/components/PageHeader.astro

@@ -0,0 +1,63 @@
+---
+/**
+ * A page's title and lede, with an optional back link. The default slot is the lede.
+ * `detail` keeps the repo pages' heavier title, which still inherits the body's line height.
+ */
+import BackLink from './BackLink.astro'
+
+interface Props {
+  title: string
+  back?: { href: string; label: string }
+  variant?: 'index' | 'detail'
+  /** The lede's measure: `narrow` is 46ch, `wide` 56ch. */
+  measure?: 'narrow' | 'wide'
+}
+
+const { title, back, variant = 'index', measure = 'wide' } = Astro.props
+---
+
+<header class:list={['head', variant]}>
+  {back && (
+    <BackLink class="back" href={back.href}>
+      {back.label}
+    </BackLink>
+  )}
+  <h1>{title}</h1>
+  <p class:list={['lede', measure]}>
+    <slot />
+  </p>
+</header>
+
+<style>
+  .head {
+    margin-bottom: clamp(2rem, 6vh, 3rem);
+  }
+  .back {
+    margin-bottom: 1.25rem;
+  }
+  h1 {
+    font-size: clamp(1.8rem, 5vw, 2.4rem);
+    letter-spacing: -0.02em;
+    margin-bottom: 0.6rem;
+  }
+  /* One title across /about, /blog and /updates, so switching pages does not move it. */
+  .index h1 {
+    line-height: 1.15;
+    font-weight: 650;
+  }
+  .detail h1 {
+    font-weight: 660;
+  }
+  .lede {
+    color: var(--rx-muted);
+  }
+  .narrow {
+    max-width: 46ch;
+  }
+  .wide {
+    max-width: 56ch;
+  }
+  .lede :global(a) {
+    color: var(--rx-fg);
+  }
+</style>

package/src/components/ProjectSwitcher.astro

@@ -0,0 +1,95 @@
+---
+/**
+ * Cross-project navigation as a zero-JS `<details>`. Every href is absolute: a relative one would
+ * resolve under the current site's base path.
+ */
+import { PROJECTS, RXOVA_ORIGIN, type ProjectId } from '@rxova/brand'
+
+interface Props {
+  /** Which project this site is, so it can be marked as current. */
+  current?: ProjectId
+}
+
+const { current } = Astro.props
+---
+
+<details class="rx-switcher">
+  <summary class="rx-switcher__trigger" aria-label="Switch project">
+    Projects
+    <svg aria-hidden="true" viewBox="0 0 16 16" width="12" height="12">
+      <path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.75"></path>
+    </svg>
+  </summary>
+  <ul class="rx-switcher__menu">
+    <li>
+      <a href={RXOVA_ORIGIN}>rxova.org</a>
+    </li>
+    {PROJECTS.map((project) => (
+      <li>
+        <a
+          href={`${RXOVA_ORIGIN}${project.mount}`}
+          class={project.id === current ? 'rx-switcher__current' : undefined}
+          aria-current={project.id === current ? 'page' : undefined}
+        >
+          {project.label}
+        </a>
+      </li>
+    ))}
+  </ul>
+</details>
+
+<style>
+  .rx-switcher__trigger {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--rx-radius-sm);
+    color: var(--sl-color-gray-2);
+    font-size: var(--sl-text-sm);
+    cursor: pointer;
+    list-style: none;
+  }
+
+  .rx-switcher__trigger::-webkit-details-marker {
+    display: none;
+  }
+
+  .rx-switcher__trigger:hover {
+    color: var(--sl-color-white);
+    background: var(--sl-color-gray-6);
+  }
+
+  .rx-switcher[open] > .rx-switcher__trigger svg {
+    transform: rotate(180deg);
+  }
+
+  .rx-switcher__menu {
+    position: absolute;
+    z-index: var(--sl-z-index-navbar, 20);
+    inset-inline-end: 0;
+    min-width: 12rem;
+    margin: 0.4rem 0 0;
+    padding: 0.35rem;
+    border: 1px solid var(--sl-color-hairline);
+    border-radius: var(--rx-radius);
+    background: var(--sl-color-bg-nav);
+    box-shadow: var(--sl-shadow-md);
+    list-style: none;
+  }
+
+  .rx-switcher__menu a {
+    display: flex;
+    align-items: center;
+    padding: 0.4rem 0.6rem;
+    border-radius: var(--rx-radius-sm);
+    color: var(--sl-color-gray-2);
+    font-size: var(--sl-text-sm);
+    text-decoration: none;
+  }
+
+  .rx-switcher__menu a:hover {
+    color: var(--sl-color-white);
+    background: var(--sl-color-gray-6);
+  }
+</style>

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>