[Website] Fix heading color inconsistency in Getting Started section#2569
[Website] Fix heading color inconsistency in Getting Started section#2569Mashikha1 wants to merge 7 commits intomeshery:masterfrom
Conversation
Signed-off-by: Padhmashikha <padhmashikhaiyapparaju@Padhmashikhas-MacBook-Pro.local>
✅ Deploy Preview for mesheryio-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Summary of ChangesHello @Mashikha1, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request enhances the visual consistency and accessibility of the website's 'Getting Started' page. It specifically addresses a styling issue with a key heading by correcting its HTML element, ensuring it aligns visually with other similar elements. Additionally, the PR includes minor code formatting adjustments to improve the overall maintainability and readability of the page's source. Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
There was a problem hiding this comment.
Code Review
This pull request successfully addresses the heading color inconsistency by changing a <span> to an <h2> tag, which is a good semantic improvement. The PR also includes a lot of code reformatting for readability.
However, the reformatting has introduced several critical issues:
- Invalid HTML: A
<div>element is placed inside a<p>tag, which is invalid and can cause rendering problems. - Broken Copy-Paste Functionality: In many places, the
clipboard_textattribute for the copy-to-clipboard functionality has been split across multiple lines. This introduces newlines and extra whitespace into the copied commands, which will cause them to fail when pasted into a terminal. - Duplicate HTML IDs: There are multiple elements with the same
id(e.g.,start-helm-v3,start-windows). Element IDs must be unique within a document. This will break the UI feedback for the copy buttons.
I've added specific comments with suggestions for each of these issues. Please address them to ensure the page functions correctly.
| The fastest way to put your hands on Meshery is in its playground. No installation required. Just click and go! | ||
| <div class="button-para"><a class="highlight" href="https://play.meshery.io">Use Meshery Playground</a></div> | ||
| </p> |
There was a problem hiding this comment.
Placing a block-level element like <div> inside a <p> tag is not valid HTML. This can lead to unexpected rendering issues in browsers. The <p> tag should be closed before the <div> starts.
| The fastest way to put your hands on Meshery is in its playground. No installation required. Just click and go! | |
| <div class="button-para"><a class="highlight" href="https://play.meshery.io">Use Meshery Playground</a></div> | |
| </p> | |
| The fastest way to put your hands on Meshery is in its playground. No installation required. Just click and go! | |
| </p> | |
| <div class="button-para"><a class="highlight" href="https://play.meshery.io">Use Meshery Playground</a></div> |
There was a problem hiding this comment.
@Mashikha1 this comment is valid and needs to be addressed.
|
@Mashikha1 Thank you for your contribution! Let's discuss this during the website call tomorrow at 6:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂 |
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: Mashikha <padhmashikha.i@gmail.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: Mashikha <padhmashikha.i@gmail.com>
There was a problem hiding this comment.
@Mashikha1 Keep only the minimal change required to fix this issue.
Specifically, replace the <span> with an <h2> for that heading, and kindly revert all other unrelated changes.
|
@Mashikha1 Thank you for your contribution! Let's discuss this during the website call tomorrow at 6:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂 |
| The fastest way to put your hands on Meshery is in its playground. No installation required. Just click and go! | ||
| <div class="button-para"><a class="highlight" href="https://play.meshery.io">Use Meshery Playground</a></div> | ||
| </p> |
There was a problem hiding this comment.
@Mashikha1 this comment is valid and needs to be addressed.
Description
This PR fixes the inconsistent color of the "Use Meshery Playground" heading in the Getting Started section.
The heading was inheriting an incorrect text color, making it appear different from other step headings.
This change updates the markup to ensure consistent styling and better visual clarity.
Notes for Reviewers
Signed commits
This PR fixes #2568
Notes for Reviewers
Signed commits