From 3885bede3a9aaaf77bfdac3c05b2238a54a8453a Mon Sep 17 00:00:00 2001 From: Robbe Verhelst Date: Sat, 26 Sep 2026 14:31:32 +0200 Subject: [PATCH] feat: the docs header links the console and shows GitHub as an icon The header takes the landing page's shape (sluiceway/landing #25): Go to console, linking https://console.sluiceway.dev, is the one thing in the bar that looks pressable. The Docs repo and GitHub text links become one small quiet GitHub mark (Octicons mark-github-16, aria-label "Sluiceway on GitHub") without an outline or shadow. The theme switch loses its outline and shadow, and search and the phone menu button their shadow. A Header override puts the button beside search below 50rem, so it stays in the bar on a phone, and in the right group from there. Below 500px the wordmark is read out but not shown, so everything fits at 320px. Between 50rem and 60rem search is its icon, so the theme switch is not cut off. The menu button is sized through --sl-menu-button-size, so it sits level with the rest of the bar. Co-Authored-By: Claude Opus 5.5 (1M context) --- astro.config.ts | 1 + src/components/overrides/Header.astro | 94 ++++++++++++++++++++++ src/components/overrides/SiteTitle.astro | 11 +++ src/components/overrides/SocialIcons.astro | 47 +++++++---- src/lib/site.ts | 3 + src/styles/theme.css | 59 ++++++++++---- 6 files changed, 184 insertions(+), 31 deletions(-) create mode 100644 src/components/overrides/Header.astro diff --git a/astro.config.ts b/astro.config.ts index 8a0f744..a9a6d3a 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -64,6 +64,7 @@ export default defineConfig({ ], sidebar: sidebar(), components: { + Header: "./src/components/overrides/Header.astro", SiteTitle: "./src/components/overrides/SiteTitle.astro", SocialIcons: "./src/components/overrides/SocialIcons.astro", Footer: "./src/components/overrides/Footer.astro", diff --git a/src/components/overrides/Header.astro b/src/components/overrides/Header.astro new file mode 100644 index 0000000..88fc635 --- /dev/null +++ b/src/components/overrides/Header.astro @@ -0,0 +1,94 @@ +--- +// Starlight's header with Go to console, as on the landing page's nav: the one thing in the +// bar that looks pressable. From 50rem it sits between the links and the theme switch; below +// that Starlight moves the links and the switch into the menu, and the button stays in the +// bar beside search, so it is there at every width. Below 500px the wordmark is read out but +// not shown (SiteTitle), which leaves room for it on a 320px phone. +import LanguageSelect from "@astrojs/starlight/components/LanguageSelect.astro"; +import Search from "@astrojs/starlight/components/Search.astro"; +import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro"; +import { CONSOLE_URL } from "../../lib/site"; +import Button from "../Button.astro"; +import SiteTitle from "./SiteTitle.astro"; +import SocialIcons from "./SocialIcons.astro"; +--- + +
+
+ +
+
+ + +
+
+ + + + +
+
+ + diff --git a/src/components/overrides/SiteTitle.astro b/src/components/overrides/SiteTitle.astro index d894c8d..063b264 100644 --- a/src/components/overrides/SiteTitle.astro +++ b/src/components/overrides/SiteTitle.astro @@ -53,4 +53,15 @@ const { siteTitleHref } = Astro.locals.starlightRoute; font-weight: 800; letter-spacing: -0.02em; } + /* Read out but not shown below 500px, as on the landing page, so Go to console fits. */ + @media (max-width: 499.98px) { + .sw-site-title__word { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; + } + } diff --git a/src/components/overrides/SocialIcons.astro b/src/components/overrides/SocialIcons.astro index ee9520d..31ba351 100644 --- a/src/components/overrides/SocialIcons.astro +++ b/src/components/overrides/SocialIcons.astro @@ -1,22 +1,20 @@ --- -// Text links in place of Starlight's icon row, drawn as the design system's nav links. +// In place of Starlight's icon row: the landing page as a nav link, then GitHub as a small +// quiet icon. It has no outline and no shadow, so Go to console (Header) stays the one thing +// in the bar that looks pressable; the focus ring is the global one. The mark is Octicons' +// mark-github-16 (@primer/octicons 19.38.0), as the design system asks of a true icon. import { LANDING_URL } from "../../lib/site"; -import { DOCS_REPO_URL, REPO_URL } from "../../lib/source"; - -const links = [ - { label: "Sluiceway", title: "The Sluiceway home page", href: LANDING_URL }, - { label: "GitHub", title: "Sluiceway on GitHub", href: REPO_URL }, - { label: "Docs repo", title: "The source of this site on GitHub", href: DOCS_REPO_URL }, -]; +import { REPO_URL } from "../../lib/source"; --- -{ - links.map(({ label, title, href }) => ( - - {label} - - )) -} +Sluiceway + + + diff --git a/src/lib/site.ts b/src/lib/site.ts index 5b4c966..e186894 100644 --- a/src/lib/site.ts +++ b/src/lib/site.ts @@ -14,3 +14,6 @@ export const UNLISTED = ["404", "style-check"]; /** The landing page, which the header and footer link to as "Sluiceway". */ export const LANDING_URL = "https://sluiceway.dev/"; + +/** The hosted app, where a person signs in with GitHub. The header's one button goes there. */ +export const CONSOLE_URL = "https://console.sluiceway.dev"; diff --git a/src/styles/theme.css b/src/styles/theme.css index 942226a..e4c7e66 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -50,6 +50,9 @@ --sl-line-height-headings: 1.18; --sl-nav-height: 4rem; + /* The phone menu button's 44px touch target, so Starlight centres it in the bar and keeps + the header clear of it. */ + --sl-menu-button-size: 44px; /* `ch` is the width of Inter's "0", about 1.33 average characters: 54ch holds a line of about 72 characters, the measure 30-pages.md asks for. */ --sl-content-width: 54ch; @@ -93,24 +96,31 @@ starlight-theme-select select:focus-visible, header.header { border-bottom: var(--border-ink) solid var(--line); } -/* The phone menu button, drawn like every other control: a crate, not a circle, and a full - 44px touch target. */ +/* The phone menu button, drawn as the landing page's Menu: a crate, not a circle, outlined + but without a shadow, so Go to console stays the one thing in the bar that looks pressable. + A full 44px touch target. */ button.sl-menu-button { - width: 44px; - height: 44px; + align-items: center; + justify-content: center; border: var(--border-ink) solid var(--line); border-radius: var(--radius-crate); background: var(--surface); color: var(--ink); - box-shadow: var(--shadow-press); + box-shadow: none; } -.header .right-group, -.header .social-icons { - gap: var(--space-2); +button.sl-menu-button:hover { + background: var(--surface-sunk); } +/* The header draws no rule between the links and the rest, as the landing page's nav. */ .header .social-icons::after { - border-inline-end: var(--border-ink) solid var(--line-soft); - margin-inline-start: var(--space-2); + content: none; +} +/* The phone menu's last row: the links and the theme switch on one line. */ +.mobile-preferences { + align-items: center; +} +.mobile-preferences .social-icons { + gap: var(--space-2); } /* The `label` style: the theme switch, "On this page" and table headers. */ @@ -125,15 +135,18 @@ starlight-theme-select select, text-transform: uppercase; } -/* The theme switch, drawn as the landing page's theme button. */ +/* The theme switch, quiet as the landing page's: no outline and no shadow, in `ink-muted`. */ starlight-theme-select select { - color: var(--ink); - background-color: var(--surface); - border: var(--border-ink) solid var(--line); + color: var(--ink-muted); + background-color: transparent; + border: 0; border-radius: var(--radius-crate); - box-shadow: var(--shadow-press); padding-block: var(--space-2); } +starlight-theme-select select:hover { + background-color: var(--surface-sunk); + color: var(--ink); +} starlight-theme-select select { /* Room for the uppercase, letter-spaced label beside the icon and caret. */ width: 9em; @@ -145,7 +158,8 @@ site-search > button[data-open-modal] { border-radius: var(--radius-crate); background: var(--surface); color: var(--ink-muted); - box-shadow: var(--shadow-press); + /* Outlined as a field, without a shadow: Go to console is the pressable thing. */ + box-shadow: none; } site-search > button[data-open-modal]:hover { border-color: var(--line); @@ -165,6 +179,19 @@ site-search > button[data-open-modal]:focus-visible { justify-content: center; } } +/* Between 50rem and 60rem the links, Go to console and the theme switch take the room the + search box had, so search is the icon it is on a phone. */ +@media (min-width: 50rem) and (max-width: 60rem) { + site-search > button[data-open-modal] { + min-width: 44px; + min-height: 44px; + justify-content: center; + } + site-search > button[data-open-modal] > :is(span, kbd) { + /* biome-ignore lint/complexity/noImportantStyles: Starlight's script sets the shortcut's display inline. */ + display: none !important; + } +} site-search > button[data-open-modal] kbd { background: var(--surface-sunk); color: var(--ink);