Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: fixed and improved "View Source" on docusaurus code blocks #6396

Merged
merged 4 commits into from
May 30, 2024

Conversation

srdtrk
Copy link
Member

@srdtrk srdtrk commented May 27, 2024

Description

closes: #6372

Would be nice to switch to typescript at some point.


Before we can merge this PR, please make sure that all the following items have been
checked off. If any of the checklist items are not applicable, please leave them but
write a little note why.

  • Targeted PR against the correct branch (see CONTRIBUTING.md).
  • Linked to GitHub issue with discussion and accepted design, OR link to spec that describes this work.
  • Code follows the module structure standards and Go style guide.
  • Wrote unit and integration tests.
  • Updated relevant documentation (docs/).
  • Added relevant godoc comments.
  • Provide a conventional commit message to follow the repository standards.
  • Include a descriptive changelog entry when appropriate. This may be left to the discretion of the PR reviewers. (e.g. chores should be omitted from changelog)
  • Re-reviewed Files changed in the GitHub PR explorer.
  • Review SonarCloud Report in the comment section below once CI passes.

Summary by CodeRabbit

  • New Features

    • Introduced a "View Source" link in code blocks for enhanced code visibility.
  • Documentation

    • Updated blockchain setup tutorial to fetch the latest versions of Cosmos SDK and IBC-Go.
    • Refined React app scaffolding tutorial with updated source links and bug fixes.

@srdtrk srdtrk added the docs Improvements or additions to documentation label May 27, 2024
Copy link
Contributor

coderabbitai bot commented May 27, 2024

Walkthrough

The changes introduce a CodeBlockWrapper component that wraps the existing CodeBlock component to add a "View Source" link. This enhancement is applied to documentation files to display source code links in the fee middleware tutorial. Additionally, the tutorial commands for fetching Cosmos SDK and IBC-Go versions are updated.

Changes

Files/Groups Change Summary
docs/src/theme/CodeBlock/index.js Introduced CodeBlockWrapper to wrap CodeBlock and render a "View Source" link if source prop is provided.
docs/tutorials/01-fee/03-scaffold-chain.md Updated fetch commands for Cosmos SDK and IBC-Go to latest versions; modified CodeBlock usage to include source prop.
docs/tutorials/01-fee/05-scaffold-react.md Updated CodeBlock usage to include source prop for scaffolding a React app and generating hooks.

Sequence Diagram(s) (Beta)

sequenceDiagram
    participant User
    participant CodeBlockWrapper
    participant CodeBlock
    User->>CodeBlockWrapper: Render with props
    CodeBlockWrapper->>CodeBlockWrapper: Check for source prop
    alt Source prop exists
        CodeBlockWrapper->>User: Display "View Source" link
    end
    CodeBlockWrapper->>CodeBlock: Render CodeBlock
    CodeBlock->>User: Display code block
Loading

Assessment against linked issues

Objective Addressed Explanation
"View Source" button on the fee middleware tutorial is not showing up (#6372)

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: 0

Outside diff range and nitpick comments (3)
docs/tutorials/01-fee/03-scaffold-chain.md (1)

34-34: Consider using a less frequent alternative to "feel free to" to enhance the professionalism of the documentation.

docs/tutorials/01-fee/05-scaffold-react.md (2)

Line range hint 155-155: Consider using a less frequent alternative to "feel free to" to enhance the professionalism of the documentation.


[!TIP]
Codebase Verification

The verification process revealed that the ignite and npm commands are not available, and the ts-client directory does not exist in the repository. This indicates that the commands and instructions provided in the documentation may not be executable as described.

  • The ignite command is not found in the repository.
  • The npm command is not found in the repository.
  • The ts-client directory does not exist in the repository.

Please ensure that the necessary tools (ignite and npm) are installed and available in the environment, and that the ts-client directory is correctly set up before running the provided commands.

Analysis chain

Line range hint 86-113: Ensure the updated commands and source links are correct.

Scripts Executed

The following scripts were executed for the analysis:


Script:

#!/bin/bash
# Description: Verify the validity of the source links and the correctness of the commands.

# Test: Check the source links.
curl -I https://github.com/srdtrk/cosmoverse2023-ibc-fee-demo/commit/51b8e3304f5c8c2e2e477dac9985237be676254b
curl -I https://github.com/srdtrk/cosmoverse2023-ibc-fee-demo/commit/6b31da02d1ca4fba70d58a3b3e56d9f1e3f06833
curl -I https://github.com/srdtrk/cosmoverse2023-ibc-fee-demo/commit/dffcf719fd8c223be06d3327e6bc24ec7cf0cec3
curl -I https://github.com/srdtrk/cosmoverse2023-ibc-fee-demo/commit/1c90ffddbab1655038dc296874f427b036afb749

Length of output: 19814



Script:

#!/bin/bash
# Description: Verify the correctness of the commands mentioned in the documentation.

# Test: Check if the ignite command is available and its version.
ignite --version

# Test: Check if the npm command is available and its version.
npm --version

# Test: Check if the ignite scaffold react command is valid.
ignite scaffold react --help

# Test: Check if the ignite generate hooks --clear-cache command is valid.
ignite generate hooks --clear-cache --help

# Test: Check if the npm install command with the specified packages is valid.
cd ts-client && npm install @cosmjs/launchpad@0.27.1 @cosmjs/proto-signing@0.31.1 @cosmjs/stargate@0.31.1 @keplr-wallet/types@0.11.14 --dry-run

Length of output: 510



Script:

#!/bin/bash
# Description: Verify the availability of the ignite and npm commands and the existence of the ts-client directory.

# Test: Search for the ignite command in the repository.
fd ignite

# Test: Search for the npm command in the repository.
fd npm

# Test: Search for the ts-client directory in the repository.
fd --type d ts-client

Length of output: 193

Review Details

Configuration used: .coderabbit.yml
Review profile: CHILL

Commits Files that changed from the base of the PR and between bce3e9e and f47ae0b.
Files selected for processing (3)
  • docs/src/theme/CodeBlock/index.js (1 hunks)
  • docs/tutorials/01-fee/03-scaffold-chain.md (1 hunks)
  • docs/tutorials/01-fee/05-scaffold-react.md (3 hunks)
Additional Context Used
LanguageTool (8)
docs/tutorials/01-fee/03-scaffold-chain.md (2)

Near line 25: Possible missing comma found.
Context: ...hain serve --reset-once ``` Once it is running quit by pressing q. This blockchain c...
Rule ID: AI_HYDRA_LEO_MISSING_COMMA


Near line 34: The phrase ‘feel free to’ is used quite frequently. Consider using a less frequent alternative to set your writing apart from others and make it sound more professional.
Context: .../v7@v7.3.0 && go mod tidy Feel free to test that the chain still runs with `ig...
Rule ID: FEEL_FREE_TO_STYLE_ME

docs/tutorials/01-fee/05-scaffold-react.md (6)

Near line 89: Use a comma after an introductory phrase.
Context: ...b"> ignite scaffold react For this will create a React app within the `rea...
Rule ID: COMMA_INTRODUCTORY_WORDS_PHRASES


Near line 120: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...e is a bug in the generated app that we need to fix. While this is fixed in the next ve...
Rule ID: REP_NEED_TO_VB


Near line 120: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...d in the next version of Ignite CLI, we need to fix it manually for now since we are us...
Rule ID: REP_NEED_TO_VB


Near line 120: Did you mean “or”? ‘Of’ refers to parts of a whole, while ‘or’ refers to alternatives.
Context: ...27.1`) of Ignite CLI. (The next version of ignite comes with the Fee Middleware wi...
Rule ID: CONFUSION_OF_OR


Near line 122: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ... the string =** in certain places. We need to remove this using replace. You can use ...
Rule ID: REP_NEED_TO_VB


Near line 155: The phrase ‘feel free to’ is used quite frequently. Consider using a less frequent alternative to set your writing apart from others and make it sound more professional.
Context: ...ected](./images/ignite-unmodified.png) Feel free to play around with the app. You can send ...
Rule ID: FEEL_FREE_TO_STYLE_ME

Markdownlint (4)
docs/tutorials/01-fee/03-scaffold-chain.md (1)

10: null
Multiple top-level headings in the same document

docs/tutorials/01-fee/05-scaffold-react.md (3)

109: Expected: 0 or 2; Actual: 1
Trailing spaces


114: Expected: 0 or 2; Actual: 1
Trailing spaces


10: null
Multiple top-level headings in the same document

Path-based Instructions (2)
docs/tutorials/01-fee/03-scaffold-chain.md (1)

Pattern **/*.md: "Assess the documentation for misspellings, grammatical errors, missing documentation and correctness"

docs/tutorials/01-fee/05-scaffold-react.md (1)

Pattern **/*.md: "Assess the documentation for misspellings, grammatical errors, missing documentation and correctness"

Additional comments not posted (2)
docs/src/theme/CodeBlock/index.js (1)

4-16: Ensure security by adding rel="noopener noreferrer" to the anchor tag.

- <a href={source} target="_blank">View Source</a>
+ <a href={source} target="_blank" rel="noopener noreferrer">View Source</a>

Likely invalid or redundant comment.

docs/tutorials/01-fee/03-scaffold-chain.md (1)

27-31: Ensure the updated versions of dependencies are correct and the source links are valid.

Verification successful

The source links provided in the code snippet are valid and accessible. Now, let's verify the correctness of the cosmos-sdk version mentioned in the code snippet.


The latest release version of cosmos-sdk is v0.50.6, but the tutorial uses v0.47.5. This discrepancy might be intentional for compatibility reasons or to match the state of the project at a specific point in time. Let's verify if v0.47.5 is a valid version and if it is appropriate for the tutorial context.


The version v0.47.5 of cosmos-sdk is a valid release. The source links provided in the code snippet are also valid and accessible.

  • The source links in the CodeBlock components are correct.
  • The cosmos-sdk version v0.47.5 is a valid release and appropriate for the tutorial context.
Scripts Executed

The following scripts were executed for the analysis:


Script:

#!/bin/bash
# Description: Verify the validity of the source links and the correctness of the dependency versions.

# Test: Check the source links.
curl -I https://github.com/srdtrk/cosmoverse2023-ibc-fee-demo/tree/88e2fa73c833523cba2122d4b2a41eb8e3b8d86e
curl -I https://github.com/srdtrk/cosmoverse2023-ibc-fee-demo/tree/2e2c2a3b8e13fd5e23c3b59894438494af6fc32a

Length of output: 9303



Script:

#!/bin/bash
# Description: Verify the correctness of the `cosmos-sdk` version mentioned in the code snippet.

# Test: Check the latest release version of `cosmos-sdk`.
curl -s https://api.github.com/repos/cosmos/cosmos-sdk/releases/latest | jq -r .tag_name

Length of output: 98



Script:

#!/bin/bash
# Description: Verify if `v0.47.5` is a valid version of `cosmos-sdk`.

# Test: Check the list of all releases of `cosmos-sdk` and see if `v0.47.5` is included.
curl -s https://api.github.com/repos/cosmos/cosmos-sdk/releases | jq -r '.[].tag_name' | grep '^v0.47.5$'

Length of output: 115

Copy link
Contributor

@crodriguezvega crodriguezvega left a comment

Choose a reason for hiding this comment

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

Thank you for the fix!

Copy link
Contributor

@DimitrisJim DimitrisJim left a comment

Choose a reason for hiding this comment

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

trusting you know what this does 🫡

@crodriguezvega crodriguezvega merged commit 2af0683 into main May 30, 2024
26 checks passed
@crodriguezvega crodriguezvega deleted the serdar/6372-docs-view-source branch May 30, 2024 07:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

"View Source" button on the fee middleware tutorial is not showing up
3 participants