@rxova/astro-ui 0.2.0 → 0.4.0

package/README.md

@@ -51,19 +51,19 @@ unlayered and would flatten a Starlight page.
 
 ## What's in it
 
-| Export                                     | What it is                                                                                                                                                     |
-| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `@rxova/astro-ui/starlight`                | `sharedStarlightConfig()`, the preset every docs site spreads                                                                                                  |
-| `@rxova/astro-ui/starlight/*.astro`        | The Starlight overrides: `SiteTitle`, `SocialIcons`, `Footer`, `ThemeSelect`                                                                                   |
-| `@rxova/astro-ui/components/*.astro`       | Chrome (`SiteShell`, `Header`, `SiteFooter`, …), primitives (`PageHeader`, `BackLink`, `ShowMore`, `VisuallyHidden`, `Icon`) and the components in the gallery |
-| `@rxova/astro-ui/components/icons/*.astro` | Glyphs in the `Icon` frame: `Prev`, `Next`, `Play`, `Pause`, `Replay`, `Expand`, `Collapse`                                                                    |
-| `@rxova/astro-ui/scripts/show-more`        | `enhanceShowMore()`: batches a `[data-reveal-list]` behind a `ShowMore`                                                                                        |
-| `@rxova/astro-ui/lib/entries`              | Ordering, bylines, dates and excerpts shared by /blog and /updates                                                                                             |
-| `@rxova/astro-ui/styles/document.css`      | For sites that own their document: `chrome.css`, a reset, base element styling                                                                                 |
-| `@rxova/astro-ui/styles/chrome.css`        | What the header and footer need, with nothing document-level                                                                                                   |
-| `@rxova/astro-ui/styles/starlight.css`     | Maps `--rx-*` onto Starlight's `--sl-*`, plus the footer                                                                                                       |
-| `@rxova/astro-ui/styles/landing.css`       | The Starlight overrides a splash landing page needs; load it through `customCss`                                                                               |
-| `@rxova/astro-ui/styles/mermaid.css`       | Restyles `rehype-mermaid`'s build-time SVG with the tokens, so diagrams follow the theme                                                                       |
+| Export                                     | What it is                                                                                                                                        |
+| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@rxova/astro-ui/starlight`                | `sharedStarlightConfig()`, the preset every docs site spreads                                                                                     |
+| `@rxova/astro-ui/starlight/*.astro`        | The Starlight overrides: `SiteTitle`, `SocialIcons`, `Footer`, `ThemeSelect`                                                                      |
+| `@rxova/astro-ui/components/*.astro`       | Chrome (`Header`, `SiteFooter`, …), primitives (`PageHeader`, `BackLink`, `ShowMore`, `VisuallyHidden`, `Icon`) and the components in the gallery |
+| `@rxova/astro-ui/components/icons/*.astro` | Glyphs in the `Icon` frame: `Prev`, `Next`, `Play`, `Pause`, `Replay`, `Expand`, `Collapse`                                                       |
+| `@rxova/astro-ui/scripts/show-more`        | `enhanceShowMore()`: batches a `[data-reveal-list]` behind a `ShowMore`                                                                           |
+| `@rxova/astro-ui/lib/entries`              | Ordering, bylines, dates and excerpts shared by /blog and /updates                                                                                |
+| `@rxova/astro-ui/styles/document.css`      | For sites that own their document: `chrome.css`, a reset, base element styling                                                                    |
+| `@rxova/astro-ui/styles/chrome.css`        | What the header and footer need, with nothing document-level                                                                                      |
+| `@rxova/astro-ui/styles/starlight.css`     | Maps `--rx-*` onto Starlight's `--sl-*`, plus the footer                                                                                          |
+| `@rxova/astro-ui/styles/landing.css`       | The Starlight overrides a splash landing page needs; load it through `customCss`                                                                  |
+| `@rxova/astro-ui/styles/mermaid.css`       | Restyles `rehype-mermaid`'s build-time SVG with the tokens, so diagrams follow the theme                                                          |
 
 There is no barrel: each component has its own path, so a page only loads the
 CSS of the components it imports.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxova/astro-ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "Astro components, Starlight preset and shared chrome for rxova.org",
   "keywords": [
@@ -46,7 +46,7 @@
     }
   },
   "dependencies": {
-    "@rxova/brand": "^1.1.0",
+    "@rxova/brand": "^1.2.0",
     "lucide-static": "^1.45.0"
   },
   "devDependencies": {

package/src/components/Header.astro

@@ -1,6 +1,6 @@
 ---
 /**
- * The single rxova.org header, rendered by `SiteShell` and the website landing; callers pass
+ * The single rxova.org header, rendered by the website's layout; callers pass
  * the menu fully resolved. Not for the Starlight docs sites, which use `sharedStarlightConfig`.
  */
 import ThemeToggle from './ThemeToggle.astro'

package/src/components/SectionNav.astro

@@ -0,0 +1,26 @@
+---
+/**
+ * The umbrella navigation for a docs site: the project switcher, then the rxova.org sections.
+ * Starlight shows it in the header bar on wide screens and in the menu on phones.
+ */
+import { RXOVA_ORIGIN, SECTIONS, type ProjectId } from '@rxova/brand'
+import ProjectSwitcher from './ProjectSwitcher.astro'
+
+interface Props {
+  /** The project whose docs these are, marked in the switcher. */
+  current?: ProjectId
+  /** Prefix for the section links. '' links root-relative, for a build served on rxova.org. */
+  origin?: string
+}
+
+const { current, origin = RXOVA_ORIGIN } = Astro.props
+---
+
+<nav class="rx-sections" aria-label="rxova.org">
+  <ProjectSwitcher current={current} />
+  {SECTIONS.map((section) => (
+    <a class="rx-sections__link" href={`${origin}${section.path}`}>
+      {section.label}
+    </a>
+  ))}
+</nav>

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, SECTIONS, 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,26 @@ 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') },
-]
+const surfaces: readonly SiteLink[] =
+  site ?? SECTIONS.map((section) => ({ label: section.label, href: `${origin}${section.path}` }))
 ---
 
 <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 +111,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 +141,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>

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/starlight/SocialIcons.astro

@@ -1,10 +1,10 @@
 ---
 /**
- * Starlight `SocialIcons` override: the stock icons plus the project switcher, which lands just
- * before search and the theme toggle.
+ * Starlight `SocialIcons` override: the umbrella navigation, then the stock icons. Starlight
+ * renders this slot in the header on wide screens and in the mobile menu, so one header serves both.
  */
 import Default from '@astrojs/starlight/components/SocialIcons.astro'
-import ProjectSwitcher from '../components/ProjectSwitcher.astro'
+import SectionNav from '../components/SectionNav.astro'
 import { projectFromBase } from '@rxova/brand'
 
 // Overrides receive no props, so the current project is inferred from the base
@@ -12,7 +12,7 @@ import { projectFromBase } from '@rxova/brand'
 const current = projectFromBase(import.meta.env.BASE_URL)
 ---
 
-<ProjectSwitcher current={current} />
+<SectionNav current={current} />
 <Default>
   <slot />
 </Default>

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/starlight.css

@@ -157,6 +157,34 @@ html[data-rxova-shell] .sl-menu-button {
   background: var(--rx-gradient);
 }
 
+/* Umbrella navigation: the switcher and the rxova.org sections, beside the social icons. */
+.rx-sections {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.rx-sections__link {
+  color: var(--sl-color-gray-2);
+  font-size: var(--sl-text-sm);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.rx-sections__link:hover {
+  color: var(--sl-color-white);
+}
+
+/* In the mobile menu the icons share a row with the theme picker; the navigation takes a row
+   of its own above them. */
+.mobile-preferences .social-icons {
+  flex-wrap: wrap;
+}
+
+.mobile-preferences .rx-sections {
+  flex-basis: 100%;
+}
+
 /* --- Footer -------------------------------------------------------------- */
 
 /* Footer styles live in footer.css (imported above) because /blog and /updates need them too. */

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>