feat: add announcements banner#2549
Conversation
Co-authored-by: Copilot <copilot@github.com>
wassimoo
requested review from
aeneasr,
piotrmsc,
unatasha8,
vinckr and
zepatrik
as code owners
wassimoo
changed the title
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds a dismissible AnnouncementBanner component (MDX-driven) with per-announcement localStorage dismissal, styled banner link rules, and unconditional insertion of the banner at the top of the Root layout. ChangesAnnouncement Banner Feature
Sequence Diagram(s)sequenceDiagram
participant Browser
participant Root
participant AnnouncementBanner
participant LocalStorage
Browser->>Root: load page
Root->>AnnouncementBanner: mount component
AnnouncementBanner->>LocalStorage: read 'ory_docs_announcement_dismissed:{id}'
LocalStorage-->>AnnouncementBanner: return flag or error
AnnouncementBanner-->>Browser: render banner (or null)
Browser->>AnnouncementBanner: click dismiss
AnnouncementBanner->>LocalStorage: write '1' to key
LocalStorage-->>AnnouncementBanner: write ack or error
AnnouncementBanner-->>Browser: hide banner
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsStopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/AnnouncementBanner/AnnouncementBanner.module.css (1)
7-9: ⚡ Quick winAvoid hardcoded hover color across banner levels
On Line 8, forcing link hover to
#581c87overrides the level-specific theme colors (warning/error/success), which can make the banner feel visually inconsistent. Prefer inheriting the level text color (or making hover color level-aware).Proposed change
.announcementContent a:hover { - color: `#581c87`; + color: currentColor; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/AnnouncementBanner/AnnouncementBanner.module.css` around lines 7 - 9, The rule .announcementContent a:hover in AnnouncementBanner.module.css hardcodes hover color `#581c87` which overrides level-specific themes; change it to use the level-aware color (e.g., color: inherit or color: var(--announcement-text-color)) so link hover inherits the banner's text color (or a CSS variable set per level: warning/error/success) rather than forcing `#581c87`.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/components/AnnouncementBanner/AnnouncementBanner.module.css`:
- Around line 7-9: The rule .announcementContent a:hover in
AnnouncementBanner.module.css hardcodes hover color `#581c87` which overrides
level-specific themes; change it to use the level-aware color (e.g., color:
inherit or color: var(--announcement-text-color)) so link hover inherits the
banner's text color (or a CSS variable set per level: warning/error/success)
rather than forcing `#581c87`.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: fe223963-d966-43f8-a58c-4befe46f22f5
⛔ Files ignored due to path filters (1)
src/content/announcement-banner.mdxis excluded by!**/*.mdx
📒 Files selected for processing (3)
src/components/AnnouncementBanner/AnnouncementBanner.module.csssrc/components/AnnouncementBanner/AnnouncementBanner.tsxsrc/theme/Root.js
3 participants
Description
Adds a new
AnnouncementBannercomponent to the Ory documentation site. This component allows displaying persistent, dismissable announcement messages at the top of the page with configurable styling levels (info, warning, error, success).The announcement banner is configurable via a simple MDX file, making it easy for content editors to create and manage announcements without code changes.
The banner respects user dismissal preferences using localStorage, so users won't see the same announcement repeatedly after closing it.
Features
info(purple),warning(amber),error(red), andsuccess(emerald) themesComponent Details
src/components/AnnouncementBanner/src/content/announcement-banner.mdxto control:enabled: Toggle banner on/offid: Unique identifier (change for each new announcement)level: Visual emphasis levelChecklist
Summary by CodeRabbit
New Features
Style
Chore