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

What is JSX?: Remove ordered list from examples to prevent a markdown issue #27769

Merged
merged 7 commits into from May 1, 2024

Conversation

Darknab
Copy link
Contributor

@Darknab Darknab commented Apr 9, 2024

Because

Missing closing tags on li elements were causing a problem with the links in the "Lesson content" section.

This PR

  • Removed the ol lists from the examples as the closing tags issue in JSX files is covered by input tag in the same example.
  • Modified the text accordingly to the removal of the list.
  • Add line breaks inside the form to keep consistency accross all examples, and corrected the indentation of the circle elements as it was suggested in the issue discussion.

Issue

Closes #27737

Additional Information

Pull Request Requirements

  • I have thoroughly read and understand The Odin Project Contributing Guide
  • The title of this PR follows the location of change: brief description of change format, e.g. Intro to HTML and CSS lesson: Fix link text
  • The Because section summarizes the reason for this PR
  • The This PR section has a bullet point list describing the changes in this PR
  • If this PR addresses an open issue, it is linked in the Issue section
  • If any lesson files are included in this PR, they have been previewed with the Markdown preview tool to ensure it is formatted correctly
  • If any lesson files are included in this PR, they follow the Layout Style Guide

@github-actions github-actions bot added the Content: React Involves the React course label Apr 9, 2024
Copy link
Contributor

@MaoShizhong MaoShizhong left a comment

Choose a reason for hiding this comment

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

Thanks for doing this @Darknab.
I can't add individual comments below since they're not part of the diff, but we'd also need to change 175 do not mention the class bit, as we now only have to deal with changing stroke-width to strokeWidth.

Side request while we're at it, on line 45 there's a comment. Could you move that comment to above the return please?
i.e.

   ```jsx
   function App() {
     // Could replace <></> with <div></div>
     return (
       <>
         <h1>Example h1</h1>
         <h2>Example h2</h2>
       </>
     );
   }
   ```

@Darknab
Copy link
Contributor Author

Darknab commented May 1, 2024

Ok @MaoShizhong, I'm on it!

…e example.

Move the comment from line 45 to line 40.
Correct indentation.
@Darknab
Copy link
Contributor Author

Darknab commented May 1, 2024

Can someone help me on solving this lint error please?
Running linter locally don't throw any error, I'm running: markdownlint-cli2 react/getting_started_with_react/what_is_jsx.md
what did I miss?

@MaoShizhong
Copy link
Contributor

MaoShizhong commented May 1, 2024

Can someone help me on solving this lint error please? Running linter locally don't throw any error, I'm running: markdownlint-cli2 react/getting_started_with_react/what_is_jsx.md what did I miss?

Likely would be because those rules were added after your created the branch for this PR.
In this instance, manually fixing them would be easiest.
image
If you go to the lint action details, you can see the 4 errors and you can just replace the respective links with the markdown versions (as shown in the Expected bit).

For future PRs, if you update your fork's main then make a new branch off that updated main, then you'll have all the new stuff.

Copy link
Contributor

@MaoShizhong MaoShizhong left a comment

Choose a reason for hiding this comment

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

Thanks for fixing up the KC links.
Just noticed that your previous commit converted the 3-space indentation for the ordered list children to 2 spaces.
Could you please revert these to 3 spaces?

Ordered list items that take up multiple lines need all lines to start with a 3-space indent as per our [layout style guide], else they won't be considered part of the same item.

If you put your markdown into the markdown preview tool, you'll notice that the relevant ordered list contains only 1. instead of 1. 2. 3., because of the 2-space indent. The actual content won't be visually indented either, as opposed to with a 3-space indent where it's clear what content is part of which ol item.

Reverting them back to a 3-space indent will fix this.

Copy link
Contributor

@MaoShizhong MaoShizhong left a comment

Choose a reason for hiding this comment

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

🚀

@MaoShizhong MaoShizhong merged commit 73526f2 into TheOdinProject:main May 1, 2024
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content: React Involves the React course
Projects
None yet
Development

Successfully merging this pull request may close these issues.

What Is JSX?: Links to anchors in lesson contents not working
3 participants