feat(docs): publish page component bundle

.github/workflows/docs.yml

@@ -51,7 +51,10 @@ jobs:
           DOCS_BASE_URL: /packages/react-inputs/
         run: pnpm run docs:build
 
-      # The dist the aggregator will publish verbatim. `docs-dist` is the fixed
+      - name: Mark the page-component bundle
+        run: node apps/docs/scripts/write-page-bundle.mjs
+
+      # The dist the aggregator will compose into its shell. `docs-dist` is the fixed
       # artifact name in the contract — ingest.yml downloads it by that name
       # from this run — so it is not ours to rename. Pointing `path` at the dist
       # directory (not its parent) is what puts index.html at the artifact root,
@@ -80,7 +83,7 @@ jobs:
         # serving stale docs with a green tick here and nothing to look at.
         env:
           GH_TOKEN: ${{ secrets.AGGREGATOR_DISPATCH_TOKEN }}
-        # `-F` only for schema, which the receiver compares as the number 1;
+        # `-F` only for schema, which the receiver compares as the number 2;
         # everything else goes through `-f` so it stays a string, and an
         # all-digit ref or sha cannot arrive as a number.
         #
@@ -89,7 +92,7 @@ jobs:
         run: |
           gh api repos/rxova/rxova-website/dispatches \
             -f event_type=docs \
-            -F 'client_payload[schema]=1' \
+            -F 'client_payload[schema]=2' \
             -f 'client_payload[project]=react-inputs' \
             -f "client_payload[ref]=${GITHUB_REF_NAME}" \
             -f "client_payload[sha]=${GITHUB_SHA}" \

apps/docs/astro.config.mjs

@@ -139,19 +139,24 @@ export default defineConfig({
     starlight({
       ...sharedStarlightConfig({
         project: 'react-inputs',
+        components: { Footer: './src/components/PageFooter.astro' },
         customCss: [
           './src/styles/live.css',
           './src/styles/sidebar.css',
           './src/styles/logos.css',
           './src/styles/content.css',
+          './src/styles/page-component.css',
         ],
         // Components sit LAST and are the destination, not a preamble:
         // getting-started is a one-time read, the component list is what you
         // come back to. Each component is one clickable entry whose five
         // sections are identical, so the shape is learned once.
         sidebar: [
           { label: 'Overview', link: '/overview' },
-          { label: 'Getting started', items: [{ autogenerate: { directory: 'getting-started' } }] },
+          {
+            label: 'Getting started',
+            items: [{ autogenerate: { directory: 'getting-started' } }],
+          },
           // The components sit at the top level rather than inside a
           // "Components" group: wrapping them added an accordion you had to open
           // before you could see the thing the site is about. The "Components"

apps/docs/scripts/write-page-bundle.mjs

@@ -0,0 +1,13 @@
+import { writeFile } from 'node:fs/promises'
+import { join } from 'node:path'
+
+const dist = new URL('../dist/', import.meta.url)
+const filename = 'rxova-page-bundle.json'
+const manifest = {
+  schema: 2,
+  format: 'html-page-component',
+  project: 'react-inputs',
+  base: '/packages/react-inputs/',
+}
+await writeFile(new URL(filename, dist), `${JSON.stringify(manifest, null, 2)}\n`)
+console.log(`Wrote ${join('apps/docs/dist', filename)}`)

apps/docs/src/components/PageFooter.astro

@@ -0,0 +1,5 @@
+---
+import Default from '@astrojs/starlight/components/Footer.astro'
+---
+
+<Default><slot /></Default>

apps/docs/src/styles/page-component.css

@@ -0,0 +1,34 @@
+html[data-rxova-shell] {
+  --rx-shell-header-height: 3.5rem;
+}
+
+html[data-rxova-shell] .page > header.header {
+  inset-block-start: var(--rx-shell-header-height);
+}
+
+html[data-rxova-shell] .sidebar-pane {
+  inset-block-start: calc(var(--rx-shell-header-height) + var(--sl-nav-height));
+}
+
+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 {
+  top: calc(
+    var(--rx-shell-header-height) + (var(--sl-nav-height) - var(--sl-menu-button-size)) / 2
+  );
+}
+
+@media (min-width: 72rem) {
+  html[data-rxova-shell] .right-sidebar {
+    top: var(--rx-shell-header-height);
+    height: calc(100vh - var(--rx-shell-header-height));
+  }
+}
+
+@media (max-width: 34rem) {
+  html[data-rxova-shell] {
+    --rx-shell-header-height: 3.25rem;
+  }
+}