feat: add announcements banner#2549
Open
wassimoo wants to merge 3 commits into
Open
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
📝 WalkthroughWalkthroughA new dismissible announcement banner component is added to the documentation site. The component reads configuration from MDX, tracks dismissal state per announcement in localStorage with error tolerance, renders conditionally based on enabled/dismissed/ready status, and integrates into the root layout before existing content. Link styling is applied within the banner. ChangesAnnouncement Banner Feature
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 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🔥 ProblemsTimed out fetching pipeline failures after 30000ms 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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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