From ee9785e63b1e216d8590c9d527b1508d5c8c1a30 Mon Sep 17 00:00:00 2001 From: isvictorious Date: Tue, 28 Jul 2026 11:19:08 -0400 Subject: [PATCH 1/5] Add sitewide notice banner for Tiger Data Aggregate event Implements a dismissible banner promoting Tiger Data Aggregate 2026 using Starlight's built-in banner field with a default value. Banner appears above nav, is full width, uses black text, and adapts responsively on mobile. - Configure banner schema with event link in content.config.ts - Style banner with full-width layout, proper colors, and mobile responsive design in header.css Co-Authored-By: Claude Haiku 4.5 --- src/content.config.ts | 19 ++++++++++++++++++- src/styles/header.css | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 53 insertions(+), 1 deletion(-) diff --git a/src/content.config.ts b/src/content.config.ts index ee3be9d89..71b4eb6a4 100644 --- a/src/content.config.ts +++ b/src/content.config.ts @@ -140,6 +140,22 @@ const noindexSchema = z.object({ noindex: z.boolean().optional(), }); +/** + * Sitewide banner using Starlight's built-in banner field with a default value. + * Banner is dismissible and persisted via localStorage automatically. + */ +const bannerSchema = z.object({ + banner: z + .object({ + content: z.string(), + }) + .optional() + .default({ + content: + 'Join us at Tiger Data Aggregate 2026 for workshops, talks, and networking.', + }), +}); + export const collections = { docs: defineCollection({ loader: docsLoader(), @@ -150,7 +166,8 @@ export const collections = { .merge(pageLabelsSchema) .merge(productsSchema) .merge(learnMoreSchema) - .merge(noindexSchema), + .merge(noindexSchema) + .merge(bannerSchema), }), }), }; diff --git a/src/styles/header.css b/src/styles/header.css index 9a238070f..64371f64d 100644 --- a/src/styles/header.css +++ b/src/styles/header.css @@ -154,3 +154,38 @@ main .sl-anchor-link svg, white-space: nowrap; border: 0; } + +/* ---- Sitewide Banner ---- */ + +.sl-banner { + width: 100vw; + margin-left: calc(-50vw + 50%); + margin-right: calc(-50vw + 50%); + padding: 0.75rem var(--tiger-content-inset); + background-color: #f0f0f0; + color: #000; + text-align: center; + line-height: 1.5; + box-shadow: none; + border-bottom: 1px solid #e0e0e0; +} + +.sl-banner a { + color: #000; + text-decoration: underline; +} + +.sl-banner a:hover { + opacity: 0.7; +} + +.sl-banner strong { + font-weight: 600; +} + +@media (max-width: 768px) { + .sl-banner { + padding: 0.75rem var(--tiger-space-lg); + font-size: 0.9rem; + } +} From 8ca18ac2cf27b6c138b1abfbbb64c657762268a7 Mon Sep 17 00:00:00 2001 From: isvictorious Date: Tue, 28 Jul 2026 13:54:59 -0400 Subject: [PATCH 2/5] Make sitewide banner optional and toggleable via config - Move banner from default schema to optional config file (src/lib/banner-config.ts) - Render banner conditionally in Header based on enabled flag - Add @lib path alias to astro.config.ts - Style banner as fixed 70px height, full width, yellow background - Make header sticky positioned below banner with :has() selector - CSS spacing and background only apply when banner is enabled Users can now toggle the banner on/off by changing `enabled` in banner-config.ts Co-Authored-By: Claude Haiku 4.5 --- astro.config.ts | 1 + src/components/Header.astro | 3 +++ src/content.config.ts | 9 ++----- src/lib/banner-config.ts | 8 ++++++ src/styles/header.css | 52 +++++++++++++++++++++++++++++-------- 5 files changed, 55 insertions(+), 18 deletions(-) create mode 100644 src/lib/banner-config.ts diff --git a/astro.config.ts b/astro.config.ts index 8f1b5bb02..124fcaffc 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -208,6 +208,7 @@ export default defineConfig({ alias: [ { find: "@components", replacement: new URL("./src/components", import.meta.url).pathname }, { find: "@constants", replacement: new URL("./src/constants.ts", import.meta.url).pathname }, + { find: "@lib", replacement: new URL("./src/lib", import.meta.url).pathname }, // Resolve scripts subpath to the package so ThemeSelect.astro / SDKSelect.astro keep working. { find: "@stainless-api/docs/components/scripts", diff --git a/src/components/Header.astro b/src/components/Header.astro index 07f2e1619..2e2f6ce35 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -17,6 +17,7 @@ import SiteTitle from "virtual:starlight/components/SiteTitle"; import ThemeSelect from "virtual:starlight/components/ThemeSelect"; import { HEADER_LINKS, TABS } from "virtual:stl-docs-virtual-module"; import { Button } from "@stainless-api/ui-primitives"; +import { bannerConfig } from "@lib/banner-config"; import MobileNavTabLinks from "./MobileNavTabLinks.astro"; import NavTabsWithDropdown from "./NavTabsWithDropdown.astro"; import SplashMobileMenuToggle from "./SplashMobileMenuToggle.astro"; @@ -33,6 +34,8 @@ const { hasSidebar } = Astro.locals.starlightRoute; const showMobileTabStrip = TABS.length > 0; --- +{bannerConfig.enabled &&
} +
Tiger Data Aggregate 2026 for workshops, talks, and networking.', - }), + .optional(), }); export const collections = { diff --git a/src/lib/banner-config.ts b/src/lib/banner-config.ts new file mode 100644 index 000000000..7f6bc0931 --- /dev/null +++ b/src/lib/banner-config.ts @@ -0,0 +1,8 @@ +/** + * Sitewide banner configuration + * Toggle the banner on/off by changing `enabled` below + */ +export const bannerConfig = { + enabled: true, + content: 'Join us at Tiger Data Aggregate 2026 for workshops, talks, and networking.', +}; diff --git a/src/styles/header.css b/src/styles/header.css index 64371f64d..0dd594fa0 100644 --- a/src/styles/header.css +++ b/src/styles/header.css @@ -158,20 +158,27 @@ main .sl-anchor-link svg, /* ---- Sitewide Banner ---- */ .sl-banner { - width: 100vw; - margin-left: calc(-50vw + 50%); - margin-right: calc(-50vw + 50%); - padding: 0.75rem var(--tiger-content-inset); - background-color: #f0f0f0; - color: #000; - text-align: center; - line-height: 1.5; - box-shadow: none; - border-bottom: 1px solid #e0e0e0; + position: fixed !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + z-index: 200 !important; + width: 100vw !important; + max-width: none !important; + min-width: 100vw !important; + padding: 0.75rem var(--tiger-content-inset) !important; + background-color: var(--tiger-electric-yellow) !important; + color: var(--tiger-black) !important; + text-align: center !important; + line-height: 1.5 !important; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; + border: none !important; + margin: 0 !important; + margin-inline: 0 !important; } .sl-banner a { - color: #000; + color: var(--tiger-black); text-decoration: underline; } @@ -183,9 +190,32 @@ main .sl-anchor-link svg, font-weight: 600; } +/* Adjust page and header to account for fixed banner (70px) - only when banner exists */ +body:has(.sl-banner) { + padding-top: 70px; +} + +body:has(.sl-banner) header, +body:has(.sl-banner) .stl-header { + position: sticky !important; + top: 70px !important; + z-index: 100 !important; + background-color: var(--page-bg) !important; +} + @media (max-width: 768px) { .sl-banner { padding: 0.75rem var(--tiger-space-lg); font-size: 0.9rem; } + + body:has(.sl-banner) { + padding-top: 70px; + } + + body:has(.sl-banner) header, + body:has(.sl-banner) .stl-header { + top: 70px !important; + background-color: var(--page-bg) !important; + } } From 804ea442d5ed6a7d652a3f67ec4347b0491f8314 Mon Sep 17 00:00:00 2001 From: isvictorious Date: Tue, 28 Jul 2026 15:49:55 -0400 Subject: [PATCH 3/5] Fix banner height spacing for desktop and mobile - Desktop banner: 48px height - Mobile banner: 70px height (via media query) - Header positioned sticky below banner on both breakpoints - Use light-dark() for theme-aware header background Co-Authored-By: Claude Haiku 4.5 --- src/styles/header.css | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/styles/header.css b/src/styles/header.css index 0dd594fa0..d33dac70b 100644 --- a/src/styles/header.css +++ b/src/styles/header.css @@ -190,19 +190,21 @@ main .sl-anchor-link svg, font-weight: 600; } -/* Adjust page and header to account for fixed banner (70px) - only when banner exists */ +/* Adjust page and header to account for fixed banner - only when banner exists */ +/* Desktop: banner is 48px */ body:has(.sl-banner) { - padding-top: 70px; + padding-top: 48px; } body:has(.sl-banner) header, body:has(.sl-banner) .stl-header { position: sticky !important; - top: 70px !important; + top: 48px !important; z-index: 100 !important; - background-color: var(--page-bg) !important; + background-color: light-dark(#ffffff, #1a1a1a) !important; } +/* Mobile: banner is 70px */ @media (max-width: 768px) { .sl-banner { padding: 0.75rem var(--tiger-space-lg); @@ -216,6 +218,6 @@ body:has(.sl-banner) .stl-header { body:has(.sl-banner) header, body:has(.sl-banner) .stl-header { top: 70px !important; - background-color: var(--page-bg) !important; + background-color: light-dark(#ffffff, #1a1a1a) !important; } } From 0d9de350e41ee975a70bf60c2b8c0d560e9092ee Mon Sep 17 00:00:00 2001 From: isvictorious Date: Tue, 28 Jul 2026 15:53:22 -0400 Subject: [PATCH 4/5] Add scroll-padding to prevent sidebar overlap with sticky header - Desktop: 104px scroll padding (48px banner + ~56px header) - Mobile: 134px scroll padding (70px banner + ~64px header) - Ensures right sidebar and anchors don't scroll under sticky nav Co-Authored-By: Claude Haiku 4.5 --- src/styles/header.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/styles/header.css b/src/styles/header.css index d33dac70b..a1db871f3 100644 --- a/src/styles/header.css +++ b/src/styles/header.css @@ -191,9 +191,10 @@ main .sl-anchor-link svg, } /* Adjust page and header to account for fixed banner - only when banner exists */ -/* Desktop: banner is 48px */ +/* Desktop: banner is 48px + nav header ~56px = 104px total scroll padding */ body:has(.sl-banner) { padding-top: 48px; + scroll-padding-top: 104px; } body:has(.sl-banner) header, @@ -204,7 +205,7 @@ body:has(.sl-banner) .stl-header { background-color: light-dark(#ffffff, #1a1a1a) !important; } -/* Mobile: banner is 70px */ +/* Mobile: banner is 70px + nav header ~64px = 134px total scroll padding */ @media (max-width: 768px) { .sl-banner { padding: 0.75rem var(--tiger-space-lg); @@ -213,6 +214,7 @@ body:has(.sl-banner) .stl-header { body:has(.sl-banner) { padding-top: 70px; + scroll-padding-top: 134px; } body:has(.sl-banner) header, From 5f7d16892ac099b5487b65c91149136c10657916 Mon Sep 17 00:00:00 2001 From: isvictorious Date: Tue, 28 Jul 2026 16:10:40 -0400 Subject: [PATCH 5/5] Fix right-sidebar-panel positioning to account for sticky header - Desktop: right-sidebar sticks at 104px (below banner + header) - Mobile: right-sidebar sticks at 134px - Prevents sidebar from overlapping with sticky nav Co-Authored-By: Claude Haiku 4.5 --- src/styles/header.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/styles/header.css b/src/styles/header.css index a1db871f3..cd1ae82fa 100644 --- a/src/styles/header.css +++ b/src/styles/header.css @@ -197,6 +197,10 @@ body:has(.sl-banner) { scroll-padding-top: 104px; } +body:has(.sl-banner) .right-sidebar-panel { + top: 104px !important; +} + body:has(.sl-banner) header, body:has(.sl-banner) .stl-header { position: sticky !important; @@ -222,4 +226,8 @@ body:has(.sl-banner) .stl-header { top: 70px !important; background-color: light-dark(#ffffff, #1a1a1a) !important; } + + body:has(.sl-banner) .right-sidebar-panel { + top: 134px !important; + } }