Skip to content

Add site wide banner for promotion - #423

Draft
isvictorious wants to merge 5 commits into
mainfrom
vramirez/edu-629-add-sitewide-notice-banner-using-starlight
Draft

Add site wide banner for promotion#423
isvictorious wants to merge 5 commits into
mainfrom
vramirez/edu-629-add-sitewide-notice-banner-using-starlight

Conversation

@isvictorious

@isvictorious isvictorious commented Jul 28, 2026

Copy link
Copy Markdown
Collaborator

Summary

Implements a toggleable sitewide banner promoting Tiger Data Aggregate 2026 using Starlight's built-in banner support.

Changes

  • Banner controlled via src/lib/banner-config.ts (toggle enabled: true/false)
  • 48px on desktop, 70px on mobile
  • Yellow background (#f5ff80), black text, full width
  • Positioned above nav header
  • Theme-aware (respects light/dark mode)
  • Right sidebar positioned below sticky header

Testing

  • Mobile and desktop responsive
  • Dismissible via localStorage (Starlight's Banner component)
  • Can be toggled on/off via config file

Status

Draft - pushing to Vercel to verify mobile TOC widget and overall layout on production build.

Co-Authored-By: Claude Haiku 4.5 noreply@anthropic.com

Affected pages

No content pages affected by this PR. Open the preview to confirm the build deployed successfully.

isvictorious and others added 5 commits July 28, 2026 11:19
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 <noreply@anthropic.com>
- 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 <noreply@anthropic.com>
- 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 <noreply@anthropic.com>
- 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 <noreply@anthropic.com>
- 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 <noreply@anthropic.com>
@vercel

vercel Bot commented Jul 28, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
tiger-data-docs Ready Ready Preview, Comment Jul 28, 2026 8:22pm

@isvictorious isvictorious changed the title Add sitewide notice banner for Tiger Data Aggregate Add site wide banner for promotion Jul 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant