Skip to content

Conversation

@brokewhale
Copy link
Contributor

@brokewhale brokewhale commented Jun 26, 2024

Description

Adds support for custom callout messages in the WipCallout component. This feature allows you to add a custom callout to a page, notifying users that it is currently undergoing maintenance.

Additional context

... in mdx file

<WipCallout /> // with default message

<WipCallout context="this tutorial is outdated" /> // with custom message

// with a custom `.md` file
import WipMsg from "@/message/WipMsg.md" //import the md file

<WipCallout context={<WipMsg/>} />  // with custom .md file

Callout image

This is an image showing that the callout sticks to the top when the page is scrolled

This is an image showing that the callout sticks to the top when the page is scrolled

image

The color scheme is open for suggestions, and I'll update this PR accordingly.

Example link:
http://localhost:3000/builders/app-developers/tutorials/cross-dom-bridge-erc20

@brokewhale brokewhale requested a review from a team as a code owner June 26, 2024 10:09
@netlify
Copy link

netlify bot commented Jun 26, 2024

Deploy Preview for docs-optimism ready!

Name Link
🔨 Latest commit 1003674
🔍 Latest deploy log https://app.netlify.com/sites/docs-optimism/deploys/667e811b2960c40008b0776c
😎 Deploy Preview https://deploy-preview-769--docs-optimism.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jun 26, 2024

Walkthrough

This update introduces the WipCallout React component across various files, enhances the usage of imported messages in markdown, and updates configurations for content reuse and styling consistency. Additionally, improvements are made to tutorials, definitions, and descriptions within the project documentation to boost readability, accuracy, and developer experience.

Changes

Files/Groups Change Summary
components/WipCallout.tsx Introduced WipCallout React component to render maintenance messages with customizable context text.
messages/WipMsg.md Added a maintenance message advising users not to rely on current content and inviting contributions.
notes/wip-callout.md Documented the WipCallout component's functionality and usage.
pages/.../cross-dom-bridge-erc20.mdx, .../oracles.mdx, .../block-explorers.mdx Enhanced tutorial formatting, added new components (WipCallout, WipMsg), and introduced/expanded content on oracles and block explorers like Superscan by Routescan.
styles/global.css Standardized import statements and adjusted styling rules for margins and custom callouts.
tsconfig.json Added a new path mapping for @/message/* to messages/*.
words.txt Added new terms and entities like blockhash, Drand, Fraxtal, Gelato, QRNG, Routescan, RWAs, and Schnorr.
content/OpProposerDescriptionShort.md Introduced the op-proposer service for trustless L2-to-L1 messaging and insights.
content/index.js Exported OpProposerDescriptionShort from OpProposerDescriptionShort.md.
next-sitemap.config.js Updated siteUrl to 'https://docs.optimism.io/'.
notes/content-reuse.md Provided guidelines for creating reusable markdown content components.
pages/.../architecture.mdx, .../op-challenger.mdx Added or updated import statements for reusable content components and standardization of terminologies like "bisection game".
pages/.../rpc-providers.mdx, .../stack-contribute.mdx Included minor changes like adding information about Chainstack in RPC providers and updating a hyperlink URL in the contribution guide.
pages/.../standard-bridge-custom-token.mdx Updated the _BRIDGE address in deployment instructions for the MyCustomL2Token contract.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Documentation
    participant WipCallout Component 
    participant WipMsg Content

    User->>Documentation: Visits a tutorial page
    Documentation->>WipCallout Component: Renders callout component
    WipCallout Component->>WipMsg Content: Fetches maintenance message
    WipMsg Content-->>WipCallout Component: Returns message content
    WipCallout Component-->>Documentation: Displays maintenance message
    Documentation-->>User: Shows updated tutorial with maintenance callout
Loading
sequenceDiagram
    participant Developer
    participant tsconfig.json
    participant messages/WipMsg.md
    participant components/WipCallout.tsx
    participant Application

    Developer->>tsconfig.json: Adds new path mappings
    Developer->>messages/WipMsg.md: Creates maintenance message
    Developer->>components/WipCallout.tsx: Creates `WipCallout` component
    Application->>components/WipCallout.tsx: Imports and uses `WipCallout`
    components/WipCallout.tsx->>messages/WipMsg.md: Fetches maintenance message content
    messages/WipMsg.md-->>components/WipCallout.tsx: Returns message content
    components/WipCallout.tsx-->>Application: Renders maintenance callout
Loading

Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between addfde4 and 1003674.

Files selected for processing (1)
  • components/WipCallout.tsx (1 hunks)
Additional comments not posted (2)
components/WipCallout.tsx (2)

12-15: Ensure proper import and prop types.

The import of ReactElement and the interface Props are correctly defined. The context prop is optional and well-documented, which aligns with the component's flexible message display functionality.


16-39: Review the WipCallout component implementation.

The function WipCallout is well-structured. It uses conditional rendering based on the context prop to display either the custom message or a default message. The JSX structure is clear and follows best practices for readability and maintainability.

However, consider adding a PropTypes validation for the context prop to ensure type safety, especially useful in larger projects where props might be passed down through multiple components.

import PropTypes from 'prop-types';

WipCallout.propTypes = {
  context: PropTypes.string,
};

Additionally, the use of Tailwind CSS classes for styling is noted. Ensure these classes are correctly defined in your Tailwind configuration.


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai generate interesting stats about this repository and render them as a table.
    • @coderabbitai show all the console.log statements in this repository.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Outside diff range and nitpick comments (2)
words.txt (1)

Line range hint 1-350: Address duplication in word list.

The list contains several instances where words are duplicated in different cases (e.g., "ACCOUNTQUEUE" and "accountqueue"). This might be intentional for case-insensitive matching, but if not necessary, consider removing duplicates to streamline the list.

Tools
LanguageTool

[duplication] ~132-~132: Möglicher Tippfehler: ein Wort wird wiederholt (GERMAN_WORD_REPEAT_RULE)
Context: ...lesky IGNOREPRICE ignoreprice implicity Inator inator INFLUXDBV influxdbv initcode IPCDISABLE...


[duplication] ~134-~134: Möglicher Tippfehler: ein Wort wird wiederholt (GERMAN_WORD_REPEAT_RULE)
Context: ...ICE ignoreprice implicity Inator inator INFLUXDBV influxdbv initcode IPCDISABLE ipcdisable ipcfile ...


[duplication] ~137-~137: Möglicher Tippfehler: ein Wort wird wiederholt (GERMAN_WORD_REPEAT_RULE)
Context: ...tor inator INFLUXDBV influxdbv initcode IPCDISABLE ipcdisable ipcfile IPCPATH ipcpath IPFS ipfs JALR ...

pages/builders/app-developers/tutorials/cross-dom-bridge-erc20.mdx (1)

Line range hint 1-343: Comprehensive review of the tutorial content.

The tutorial is well-structured and informative. The step-by-step instructions are clear, and the code snippets appear to be correct. However, consider the following improvements for clarity and variety in phrasing:

  1. In the section about the Standard Bridge, consider rephrasing "if you want to learn more" to "to learn more" for a stronger, more direct expression.
  2. Avoid repetitive phrasing such as "if you want to use" by substituting with alternatives like "to use" or "for using".

These changes will enhance the readability and engagement of the tutorial.

- if you want to learn more about how the bridge works
+ to learn more about how the bridge works

- If you want to use a network that isn't included by default
+ To use a network that isn't included by default

iJaack and others added 20 commits June 28, 2024 10:10
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
- added RNG section 
- added RNG info to providers that support it 
- added 2 providers: API3 and Chronicle
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
the constructor's bridge params should be L2StandardBridge.sol deployed address, not L2CrossDomainMessenger's address
Chainstack's been an OP node provider for a 1.5 years as of today. We are also providing the free OP nodes as one of the default options in ethers. See here ethers-io/ethers.js#4762
@brokewhale brokewhale requested a review from 0xmariniere as a code owner June 28, 2024 09:13
@brokewhale brokewhale requested a review from a team June 28, 2024 09:13
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 7

Outside diff range and nitpick comments (3)
pages/connect/contribute/stack-contribute.mdx (1)

Line range hint 38-38: Add a comma for clarity.

Adding a comma after "YOU" will improve the readability of the sentence.

- The OP Stack needs YOU (yes you!) to help review the codebase for bugs and vulnerabilities.
+ The OP Stack needs YOU (yes, you!) to help review the codebase for bugs and vulnerabilities.
Tools
LanguageTool

[style] ~19-~19: Consider replacing this word to strengthen your wording.
Context: ...ck is a decentralized development stack and is constantly evolving as new layers an...

(AND_THAT)


[uncategorized] ~19-~19: Possible missing comma found.
Context: ...s that can be considered part of the OP Stack as long as those components fit the sta...

(AI_HYDRA_LEO_MISSING_COMMA)


[style] ~20-~20: For a more polite and respectful tone, consider rephrasing with ‘please’.
Context: ...contributions) and get to building! And don't forget that projects can also receive grants f...

(DONT_FORGET)

pages/builders/chain-operators/architecture.mdx (1)

Line range hint 14-14: Correct grammatical issues and improve clarity.

Several sentences need minor adjustments for grammatical correctness and clarity.

- This page contains information about the components of the rollup protocol and how they work together to build the layer 2 blockchain from the Chain Operator's perspective.
+ This page contains information about the components of the rollup protocol and how they work together to build a layer 2 blockchain from the Chain Operator's perspective.

- `op-geth` implements the layer 2 execution layer, with [minimal changes](https://op-geth.optimism.io/)
+ `op-geth` implements the layer 2 execution layer with [minimal changes](https://op-geth.optimism.io/)

- `op-node` implements most rollup-specific functionality as the layer 2 consensus layer, similar to a layer 1 beacon-node.
+ `op-node` implements most rollup-specific functionality as a layer 2 consensus layer, similar to a layer 1 beacon-node.

- It is important to setup a robust chain architecture to handle large volumes of RPC requests from your users.
+ It is important to set up a robust chain architecture to handle large volumes of RPC requests from your users.

- This tool is a RPC request router and proxy.
+ This tool is an RPC request router and proxy.

Also applies to: 33-33, 39-39, 54-54, 68-68

pages/builders/tools/build/oracles.mdx (1)

Line range hint 30-30: Grammar correction: Hyphenation needed.

- always have up to date information available onchain.
+ always have up-to-date information available onchain.

Ensure that "up-to-date" is hyphenated to maintain grammatical correctness.

Tools
LanguageTool

[typographical] ~23-~23: Consider adding a comma after ‘Usually’ for more clarity.
Context: ...d different levels of decentralization. Usually they are either run by the organization...

(RB_LY_COMMA)

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.

8 participants