@rxova/brand 0.12.0 → 0.13.1

package/README.md

@@ -9,17 +9,18 @@
 
 ## Why this exists
 
-`rxova.org` serves four surfaces from one origin — an Astro landing at `/`, plus
+`rxova.org` serves one surface per project from a single origin — an Astro
+landing at `/`, plus [overlock](https://github.com/rxova/overlock),
 [journey](https://github.com/rxova/journey),
 [react-inputs](https://github.com/rxova/react-inputs) and
 [use-everywhere](https://github.com/rxova/use-everywhere) docs, each built in its
 own repo and mounted as a static tree under `/packages/<name>/`.
 
-They were built independently and ended up looking like four unrelated products:
-three different accent colours, three different footers, no way to navigate from
+They were built independently and ended up looking like unrelated products:
+a different accent colour each, a different footer each, no way to navigate from
 one project's docs to another's. This package is the single source of truth that
-makes them one site — and it lives in its own repo because it is consumed by four
-and owned by none.
+makes them one site — and it lives in its own repo because it is consumed by all
+of them and owned by none.
 
 ## Install
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxova/brand",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "type": "module",
   "description": "Design tokens, Starlight theme and shared site chrome for rxova.org",
   "keywords": [
@@ -54,17 +54,17 @@
     "@fontsource/space-grotesk": "^5.2.5"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.9",
-    "@astrojs/starlight": "^0.41.4",
+    "@astrojs/check": "^0.9.10",
+    "@astrojs/starlight": "^0.42.0",
     "@resvg/resvg-js": "^2.6.2",
-    "@types/node": "^26.1.1",
-    "@vitest/coverage-v8": "^4.1.10",
-    "astro": "^7.1.3",
-    "publint": "^0.3.21",
-    "satori": "^0.29.0",
-    "tsx": "^4.23.1",
+    "@types/node": "^26.5.0",
+    "@vitest/coverage-v8": "^5.0.0",
+    "astro": "^7.3.2",
+    "publint": "^0.3.24",
+    "satori": "^0.33.4",
+    "tsx": "^4.23.13",
     "typescript": "6.0.3",
-    "vitest": "^4.1.10"
+    "vitest": "^5.0.0"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",

package/src/components/Footer.astro

@@ -14,5 +14,7 @@ import { projectFromBase } from '../sites.ts'
 const project = projectFromBase(import.meta.env.BASE_URL)
 ---
 
-<Default><slot /></Default>
+<Default>
+  <slot />
+</Default>
 <SiteFooter project={project} />

package/src/components/Header.astro

@@ -41,11 +41,9 @@ interface Props {
 const { homeHref, logoSrc, items } = Astro.props
 ---
 
-{
-  /* Outside <main> in every shell so it can span the viewport while its contents
+{/* Outside <main> in every shell so it can span the viewport while its contents
     stay on the page's measure. Sticky rather than fixed: it still takes part in
-    layout, so nothing below needs a compensating top margin. */
-}
+    layout, so nothing below needs a compensating top margin. */}
 <header class="site">
   <div class="site__inner">
     <a class="brand" href={homeHref}>
@@ -53,13 +51,11 @@ const { homeHref, logoSrc, items } = Astro.props
       <span>Rxova</span>
     </a>
     <nav aria-label="Sections">
-      {
-        items.map((item) => (
-          <a href={item.href} aria-current={item.current ? 'page' : undefined}>
-            {item.label}
-          </a>
-        ))
-      }
+      {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} />

package/src/components/ProjectSwitcher.astro

@@ -28,20 +28,20 @@ const { current } = Astro.props
     </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>
-      ))
-    }
+    <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>
 

package/src/components/SiteFooter.astro

@@ -66,98 +66,95 @@ const surfaces: readonly SiteLink[] = site ?? [
         <img src={siteUrl('/rxova-logo-256.png')} alt="" width="28" height="28" loading="lazy" />
         <span>Rxova</span>
       </a>
-      {
-        /* Not "React libraries": two of the three ship a framework-agnostic
-           core that runs in a worker or a plain script, and Journey also ships a
-           browser extension. React is a binding we provide, not the boundary of
-           what these are. Same correction as the landing's hero. */
-      }
+      {/* Not "React libraries": most of these ship a framework-agnostic core
+           that runs in a worker or a plain script, Journey also ships a browser
+           extension, and overlock is a command-line tool that never sees a
+           browser at all. React is a binding we provide, not the boundary of
+           what these are. Same correction as the landing's hero. */}
       <p class="rx-footer__blurb">
-        Small TypeScript libraries for the browser, documented in one place. MIT licensed, built in
-        the open.
+        Small TypeScript libraries and developer tools, documented in one place. MIT licensed, built
+        in the open.
       </p>
     </div>
 
     <div class="rx-footer__columns">
-      {
-        docs && docs.length > 0 && (
-          <div>
-            <h2 class="rx-footer__title">Docs</h2>
-            <ul class="rx-footer__list">
-              {docs.map((link) => (
-                <li>
-                  <a href={link.href}>{link.label}</a>
-                </li>
-              ))}
-            </ul>
-          </div>
-        )
-      }
+      {docs && docs.length > 0 && (
+        <div>
+          <h2 class="rx-footer__title">Docs</h2>
+          <ul class="rx-footer__list">
+            {docs.map((link) => (
+              <li>
+                <a href={link.href}>{link.label}</a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
 
       <div>
         <h2 class="rx-footer__title">Projects</h2>
         <ul class="rx-footer__list">
-          {
-            PROJECTS.map((p) => (
-              <li>
-                <a href={`${RXOVA_ORIGIN}${p.mount}`}>{p.label}</a>
-              </li>
-            ))
-          }
+          {PROJECTS.map((p) => (
+            <li>
+              <a href={`${RXOVA_ORIGIN}${p.mount}`}>{p.label}</a>
+            </li>
+          ))}
         </ul>
       </div>
 
-      {
-        self && (
-          <div>
-            <h2 class="rx-footer__title">Community</h2>
-            <ul class="rx-footer__list">
-              <li>
-                <a href={self.repo}>GitHub</a>
-              </li>
-              <li>
-                <a href={`${self.repo}/issues`}>Issues</a>
-              </li>
-              <li>
-                <a href={`${self.repo}/discussions`}>Discussions</a>
-              </li>
-              <li>
-                <a href={self.npm}>npm</a>
-              </li>
-              <li>
-                <a href={`${self.repo}/blob/main/CONTRIBUTING.md`}>Contributing</a>
-              </li>
-            </ul>
-          </div>
-        )
-      }
+      {self && (
+        <div>
+          <h2 class="rx-footer__title">Community</h2>
+          <ul class="rx-footer__list">
+            <li>
+              <a href={self.repo}>GitHub</a>
+            </li>
+            <li>
+              <a href={`${self.repo}/issues`}>Issues</a>
+            </li>
+            <li>
+              <a href={`${self.repo}/discussions`}>Discussions</a>
+            </li>
+            <li>
+              <a href={self.npm}>npm</a>
+            </li>
+            <li>
+              <a href={`${self.repo}/blob/main/CONTRIBUTING.md`}>Contributing</a>
+            </li>
+          </ul>
+        </div>
+      )}
 
-      {
-        /* Blog and Updates are here on every surface, docs sites included: they
+      {/* Blog and Updates are here on every surface, docs sites included: they
            were reachable only from the umbrella landing, which meant a reader
            who arrived on a docs page from a search result never learned the
-           rest of the site existed. */
-      }
+           rest of the site existed. */}
       <div>
         <h2 class="rx-footer__title">Site</h2>
         <ul class="rx-footer__list">
-          <li><a href={RXOVA_ORIGIN}>Home</a></li>
-          {
-            surfaces.map((s) => (
-              <li>
-                <a href={s.href}>{s.label}</a>
-              </li>
-            ))
-          }
+          <li>
+            <a href={RXOVA_ORIGIN}>Home</a>
+          </li>
+          {surfaces.map((s) => (
+            <li>
+              <a href={s.href}>{s.label}</a>
+            </li>
+          ))}
         </ul>
       </div>
 
       <div>
         <h2 class="rx-footer__title">Connect</h2>
         <ul class="rx-footer__list">
-          <li><a href="https://github.com/rxova">GitHub</a></li>
-          <li><a href="https://www.npmjs.com/org/rxova">npm</a></li>
-          <li><a href="mailto:rxova@proton.me">rxova@proton.me</a></li>
+          <li>
+            <a href="https://github.com/rxova">GitHub</a>
+          </li>
+          <li>
+            <a href="https://www.npmjs.com/org/rxova">npm</a>
+          </li>
+          <li>
+            <a href="mailto:rxova@proton.me">rxova@proton.me</a>
+          </li>
         </ul>
       </div>
     </div>

package/src/components/SiteShell.astro

@@ -78,12 +78,12 @@ const serialiseJsonLd = (value: unknown): string => JSON.stringify(value).replac
     <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)} />}
+    {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>

package/src/components/SiteTitle.astro

@@ -32,7 +32,9 @@ const { siteTitle, siteTitleHref } = (
     <img src={mark.src} alt="" width="28" height="28" />
   </a>
   <span class="rx-site-title__sep" aria-hidden="true"></span>
-  <a href={siteTitleHref} class="rx-site-title__project" translate="no">{siteTitle}</a>
+  <a href={siteTitleHref} class="rx-site-title__project" translate="no">
+    {siteTitle}
+  </a>
 </div>
 
 <style>

package/src/components/SocialIcons.astro

@@ -16,4 +16,6 @@ const current = projectFromBase(import.meta.env.BASE_URL)
 ---
 
 <ProjectSwitcher current={current} />
-<Default><slot /></Default>
+<Default>
+  <slot />
+</Default>

package/src/components/ThemeSelect.astro

@@ -22,7 +22,9 @@
 import Default from '@astrojs/starlight/components/ThemeSelect.astro'
 ---
 
-<Default><slot /></Default>
+<Default>
+  <slot />
+</Default>
 
 <script>
   type Theme = 'auto' | 'dark' | 'light'

package/src/components/ThemeToggle.astro

@@ -39,8 +39,8 @@ const { floating = true } = Astro.props
   type="button"
   aria-label="Toggle theme"
 >
-  <span class="icon" aria-hidden="true"
-    ><svg
+  <span class="icon" aria-hidden="true">
+    <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       width="24"
@@ -49,9 +49,11 @@ const { floating = true } = Astro.props
       stroke="currentColor"
       stroke-width="2"
       stroke-linecap="round"
-      stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg
-    ></span
-  >
+      stroke-linejoin="round"
+    >
+      <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+    </svg>
+  </span>
 </button>
 
 <style>

package/src/sites.ts

@@ -3,7 +3,7 @@
  *
  * rxova.org is an aggregator: an Astro landing at `/`, plus each project's docs
  * built in its own repo and mounted as a static tree under `/packages/<name>/`.
- * That means four surfaces live on one origin at four different base paths, so
+ * That means every surface lives on one origin at its own base path, so
  * **every cross-project link must be absolute**. A relative href would resolve
  * against the local base and produce `/packages/journey/packages/react-inputs/`.
  *
@@ -14,7 +14,7 @@
 /** Canonical origin. Override for a staging deploy (e.g. https://web.rxova.org). */
 export const RXOVA_ORIGIN = process.env.RXOVA_ORIGIN ?? 'https://rxova.org'
 
-export type ProjectId = 'journey' | 'react-inputs' | 'use-everywhere'
+export type ProjectId = 'overlock' | 'journey' | 'react-inputs' | 'use-everywhere'
 
 export interface Project {
   id: ProjectId
@@ -31,6 +31,15 @@ export interface Project {
 }
 
 export const PROJECTS: readonly Project[] = [
+  {
+    id: 'overlock',
+    label: 'overlock',
+    mount: '/packages/overlock/',
+    tagline: 'A deterministic gate on test integrity in a git patch.',
+    repo: 'https://github.com/rxova/overlock',
+    npm: 'https://www.npmjs.com/package/overlock',
+    packages: ['overlock'],
+  },
   {
     id: 'journey',
     label: 'Journey',

package/src/starlight.css

@@ -97,7 +97,10 @@ html[data-rxova-shell] mobile-starlight-toc nav {
   top: calc(var(--rx-shell-header-height) + var(--sl-nav-height) - 1px);
 }
 
-html[data-rxova-shell] starlight-menu-button button {
+/* Starlight 0.42 dropped the <starlight-menu-button> wrapper for a bare
+   button.sl-menu-button; the peer range still covers the older markup. */
+html[data-rxova-shell] starlight-menu-button button,
+html[data-rxova-shell] .sl-menu-button {
   top: calc(
     var(--rx-shell-header-height) + (var(--sl-nav-height) - var(--sl-menu-button-size)) / 2
   );