Add banner for one click deploy site #1719
Conversation
✅ Deploy Preview for docs-optimism ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughA new React component, ChainOperatorsBanner, is added under components/ChainOperatorsBanner.tsx. It renders a promotional banner with an info icon, title, subtitle, and a CTA linking to https://localchain.dev/, with hover color changes via onMouseEnter/onMouseLeave. Styling is handled via inline styles and styled-jsx for a light blue background and border. The banner is imported and inserted near the top of multiple MDX pages: pages/operators/chain-operators.mdx and the subpages architecture.mdx, configuration.mdx, deploy.mdx, tools.mdx, and tutorials.mdx. Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
pages/operators/chain-operators/tutorials.mdx (2)
38-38: Card title capitalization: L2 should be uppercase“L2” is a common acronym and should be capitalized.
- <Card title="Creating your own l2 rollup testnet" href="/operators/chain-operators/tutorials/create-l2-rollup" /> + <Card title="Creating your own L2 rollup testnet" href="/operators/chain-operators/tutorials/create-l2-rollup" />
31-31: Grammar and Parallelism Fix in Tutorials SectionPlease update the sentence in pages/operators/chain-operators/tutorials.mdx (line 31) for number agreement, parallelism, and proper capitalization:
-This section provides information on adding attributes to the derivation function, adding a precompile, creating your own l2 rollup testnet, integrating a new da layer with alt da, modifying predeployed contracts and using viem. You'll find overview, tutorial, guide to help you understand and work with these topics. +This section provides information on adding attributes to the derivation function, adding a precompile, creating your own L2 rollup testnet, integrating a new DA layer with Alt DA, modifying predeployed contracts, and using viem. You'll find overviews, tutorials, and guides to help you understand and work with these topics.• “L2” and “DA” should be upper-cased for consistency.
• “Alt DA” did not appear in nouns.txt; if your style guide prefers “Alt-DA,” please adjust accordingly.
• Added the Oxford comma before “and using viem.”
• Pluralized “overview, tutorial, guide” to “overviews, tutorials, and guides.”
🧹 Nitpick comments (12)
pages/operators/chain-operators/configuration.mdx (1)
19-21: Avoid duplication by centralizing banner injectionConsider injecting this banner via a layout or a shared MDX partial for the entire Chain Operators section to avoid repeating imports/usages across multiple pages.
Potential approaches:
- Add a section-aware check in the docs layout (e.g., if route starts with /operators/chain-operators) and render the banner there.
- Create a short MDX include (e.g., _includes/chain-operators-banner.mdx) and import that include across pages, so copy/paste is minimized.
pages/operators/chain-operators/tools.mdx (1)
25-27: Centralize banner usage to reduce repetitionSame suggestion as other pages: consider rendering this via the section layout or an MDX partial to avoid repeated imports/usages on each page.
pages/operators/chain-operators.mdx (2)
26-26: Header case nitpickPer the style guide, H1/H2/H3 should use sentence case unless preserving proper nouns. Consider “Chain operators.”
-# Chain Operators +# Chain operators
22-24: DRY opportunity for banner renderingAs this banner appears across multiple Chain Operators pages, consider injecting it in a shared layout or MDX partial to minimize duplication.
pages/operators/chain-operators/deploy.mdx (1)
21-23: Consider centralizing banner injectionTo avoid repeating imports/usages, place the banner in a section layout or MDX include.
pages/operators/chain-operators/tutorials.mdx (2)
42-42: Card title capitalization: DA/Alt DA consistencyEnsure capitalization aligns with nouns.txt. Suggest:
- <Card title="Integrating a new da layer with alt Da" href="/operators/chain-operators/tutorials/integrating-da-layer" /> + <Card title="Integrating a new DA layer with Alt DA" href="/operators/chain-operators/tutorials/integrating-da-layer" />If nouns.txt prefers “Alt-DA,” use “Alt-DA” instead.
25-27: Reduce duplication by centralizing the bannerSame as other pages: consider moving this banner into a shared layout or partial for the Chain Operators section.
pages/operators/chain-operators/architecture.mdx (2)
23-23: Normalize spacing in named import for consistency.Match the surrounding style (spaces inside braces).
-import {OpProposerDescriptionShort} from '@/content/index.js' +import { OpProposerDescriptionShort } from '@/content/index.js'
24-26: Prefer path alias for ChainOperatorsBanner importUpdate the import in
pages/operators/chain-operators/architecture.mdx:-import { ChainOperatorsBanner } from '../../../components/ChainOperatorsBanner' +import { ChainOperatorsBanner } from '@/components/ChainOperatorsBanner'To confirm there are no remaining deep-relative imports of this component, you can run a quick grep over your MDX/TSX pages:
grep -R "ChainOperatorsBanner" -n pages/operatorsand verify all paths use
@/components/ChainOperatorsBanner.components/ChainOperatorsBanner.tsx (3)
29-37: Mark decorative SVG as hidden from assistive tech.The info icon is decorative; hide it from screen readers.
<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' style={{ color: 'rgb(59, 130, 246)' }} className='banner-icon' + aria-hidden='true' + focusable='false' >
51-53: Avoid using a heading tag inside a promotional banner.Using a heading here can confuse page outline/TOC. Prefer non-heading text.
- <h3 style={{ fontSize: '1rem', fontWeight: '600', lineHeight: '1.25', margin: 0 }}> - One-click deploy is live! - </h3> + <p style={{ fontSize: '1rem', fontWeight: '600', lineHeight: '1.25', margin: 0 }}> + One-click deploy is live! + </p>
67-71: Use CSS hover/focus styles instead of JS handlers; add an accessible label.Inline JS hover handlers are unnecessary and bypass keyboard focus states. Move the hover effect to CSS and add an aria-label for clarity.
<a href='https://localchain.dev/' target='_blank' rel='noopener noreferrer' + aria-label='Try LocalChain.dev (opens in a new tab)' style={{ flexShrink: 0, - backgroundColor: 'rgb(59, 130, 246)', color: 'white', padding: '10px 24px', borderRadius: '6px', fontWeight: '500', fontSize: '14px', textDecoration: 'none', - transition: 'background-color 0.2s' }} className='banner-button' - onMouseEnter={(e) => { - e.currentTarget.style.backgroundColor = 'rgb(37, 99, 235)' - }} - onMouseLeave={(e) => { - e.currentTarget.style.backgroundColor = 'rgb(59, 130, 246)' - }} > Try now </a>And extend the scoped styles to handle default, hover, and focus-visible states:
<style jsx>{` .banner-container { background-color: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); } + .banner-button { + background-color: rgb(59, 130, 246); + transition: background-color 0.2s; + } + .banner-button:hover, + .banner-button:focus-visible { + background-color: rgb(37, 99, 235); + outline: none; + } `}</style>Optional: consider using CSS variables or prefers-color-scheme to better integrate with light/dark themes. Happy to wire that up if desired.
Also applies to: 72-82, 83-88, 94-99
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (7)
components/ChainOperatorsBanner.tsx(1 hunks)pages/operators/chain-operators.mdx(1 hunks)pages/operators/chain-operators/architecture.mdx(1 hunks)pages/operators/chain-operators/configuration.mdx(1 hunks)pages/operators/chain-operators/deploy.mdx(1 hunks)pages/operators/chain-operators/tools.mdx(1 hunks)pages/operators/chain-operators/tutorials.mdx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.mdx
⚙️ CodeRabbit Configuration File
**/*.mdx: "ALWAYS review Markdown content THOROUGHLY with the following criteria:
- First, check the frontmatter section at the top of the file:
- For regular pages, ensure ALL these fields are present and not empty:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] personas: [non-empty array] categories: [non-empty array] content_type: [valid type] ---
- For landing pages (index.mdx or files with ), only these fields are required:
--- title: [non-empty] lang: [non-empty] description: [non-empty] topic: [non-empty] ---
- If any required fields are missing or empty, comment:
'This file appears to be missing required metadata. Please check keywords.config.yaml for valid options and add the required fields manually. You can validate your changes by running:pnpm validate-metadata ```'- Use proper nouns in place of personal pronouns like 'We' and 'Our' to maintain consistency in communal documentation.
- Avoid gender-specific language and use the imperative form.
- Monitor capitalization for emphasis. Avoid using all caps, italics, or bold for emphasis.
- Ensure proper nouns are capitalized in sentences.
- Apply the Oxford comma.
- Use proper title case for buttons, tab names, page names, and links. Sentence case should be used for body content and short phrases, even in links.
- Use correct spelling and grammar at all times (IMPORTANT).
- For H1, H2, and H3 headers:
- Use sentence case, capitalizing only the first word.
- Preserve the capitalization of proper nouns, technical terms, and acronyms as defined in the 'nouns.txt' file located in the root directory of the project.
- Do not automatically lowercase words that appear in the 'nouns.txt' file, regardless of their position in the header.
- Flag any headers that seem to inconsistently apply these rules for manual review.
- When rev...
Files:
pages/operators/chain-operators.mdxpages/operators/chain-operators/tutorials.mdxpages/operators/chain-operators/tools.mdxpages/operators/chain-operators/configuration.mdxpages/operators/chain-operators/deploy.mdxpages/operators/chain-operators/architecture.mdx
🪛 LanguageTool
pages/operators/chain-operators/architecture.mdx
[grammar] ~23-~23: There might be a mistake here.
Context: ...criptionShort} from '@/content/index.js' import { ChainOperatorsBanner } from '.....
(QB_NEW_EN)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - docs-optimism
- GitHub Check: Header rules - docs-optimism
- GitHub Check: Pages changed - docs-optimism
🔇 Additional comments (16)
pages/operators/chain-operators/configuration.mdx (3)
1-16: Frontmatter looks valid for a landing pageAll required fields for a landing page (title, lang, description, topic) are present and non-empty.
21-21: Good placement of the bannerRendering the banner above the H1 makes it consistently visible without interfering with the Cards grid.
19-19: ✅ Import Path and Export VerifiedThe file
components/ChainOperatorsBanner.tsxexists and declares a named export:export function ChainOperatorsBanner(): ReactElement { … }The import in
pages/operators/chain-operators/configuration.mdxcorrectly resolves to this component.pages/operators/chain-operators/tools.mdx (3)
1-22: Frontmatter is complete for a landing pageRequired fields (title, lang, description, topic) are present and non-empty.
25-25: Import path and named import are consistentThe path depth is correct from this file location and aligns with a named export.
27-27: Banner placement is appropriateRendering above the H1 keeps the banner prominent without disrupting the Cards grid.
pages/operators/chain-operators.mdx (3)
1-19: Frontmatter passes landing page requirementstitle, lang, description, and topic are present and non-empty.
24-24: Banner location is consistent and clearGood to see the banner before the H1 on the landing page.
22-22: Import path and named import are correctThe component is exported as a named function (
export function ChainOperatorsBanner) and all MDX pages consistently import it using named syntax. No changes required.pages/operators/chain-operators/deploy.mdx (3)
1-18: Frontmatter meets landing page requirementstitle, lang, description, and topic are present and non-empty.
21-21: Import path and named import are correctThe relative path depth and named import align with the expected component export.
23-23: Banner placement is appropriatePlaced before the H1, consistent with other pages.
pages/operators/chain-operators/tutorials.mdx (3)
1-22: Frontmatter is complete for a landing pagetitle, lang, description, and topic are present and non-empty.
25-25: Import path and named import validatedThe relative path and named import pattern are consistent with other pages.
27-27: Banner placement consistent with the sectionAppears before the H1; consistent with other Chain Operators pages.
pages/operators/chain-operators/architecture.mdx (1)
1-19: Frontmatter metadata looks complete and valid.All required fields are present and non-empty for a regular page.
No description provided.