Homepage #4
Homepage #4
Conversation
Codacy's Analysis Summary48 new issues, 1 flagged as potential false positive (≤ 0 issue) Review Pull Request in Codacy →
|
![codacy-production[bot]](https://avatars.githubusercontent.com/in/56611?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull Request Overview
This Pull Request introduces a new homepage, but it is currently not up to standards, primarily due to 48 new style-related issues and 2 instances of code duplication identified by Codacy. Addressing these will significantly improve code quality and maintainability.
About this PR
- Codacy has identified a significant number of new issues (48) and code duplications (2) within this PR, preventing it from being up to standards. Most of these are related to CSS styling inconsistencies and code structure. Please address these findings to improve the overall quality and maintainability of the codebase.
- Please update the PR description to accurately reflect the changes made, why they are required, and what problem they solve. This helps in understanding the context and scope of the PR.
- The Codacy analysis report indicates missing test coverage information. For a new homepage with multiple UI components, it's essential to ensure critical logic is covered by tests. Please ensure coverage reporting is properly configured for this project.
💡 Codacy uses AI. Check for mistakes.
| background: #ffffff; | ||
| } | ||
|
|
||
| .searchButton { |
There was a problem hiding this comment.
🟡 MEDIUM RISK
Codacy found multiple Stylelint_selector-class-pattern issues, indicating that class selectors like .searchButton do not follow the expected kebab-case convention. To ensure consistent and readable styling across the project, update this and other similar selectors to use kebab-case (e.g., .search-button). This pattern is repeated for many selectors in this file. It would be beneficial to configure Stylelint to automatically enforce this rule or to review all new selectors in this file for consistency.
Try running the following prompt in your IDE agent:
Refactor all CSS class selectors in
docusaurus/src/pages/index.module.cssto follow the kebab-case convention, updating both the class definitions and any references in the HTML/JSX.
| <section className={styles.featureCardsContainer}> | ||
| <article className={styles.featureCard}> | ||
| <div className={styles.featureCardHeader}> | ||
| <div className={styles.featureIcon}>🚀</div> | ||
| <h2>Get started</h2> | ||
| </div> | ||
| <p>Codacy is an automated code quality and coverage platform that analyzes your source code and identifies issues as you go.</p> | ||
| <div className={styles.featureCardContent}> | ||
| {/* Placeholder for embedded content */} | ||
| <div className={styles.featureCardPlaceholder}> | ||
| <p>Configuring poc-codacy</p> | ||
| </div> | ||
| </div> | ||
| </article> | ||
| <article className={styles.card}> | ||
| <h2>Integrations</h2> | ||
| <p>Connect Codacy with your CI and SCM tools.</p> | ||
| <Link to="/docs/repositories-configure/">See integrations</Link> | ||
|
|
||
| <article className={styles.featureCard}> | ||
| <div className={styles.featureCardHeader}> | ||
| <div className={styles.featureIcon}>📁</div> | ||
| <h2>Manage organizations</h2> | ||
| </div> | ||
| <p>Codacy let you automatically import your Git provider organizations, repositories and team members into Codacy with a few clicks.</p> | ||
| <div className={styles.featureCardContent}> | ||
| {/* Placeholder for embedded content */} | ||
| <div className={styles.featureCardPlaceholder}> | ||
| <p>Organizations</p> | ||
| </div> | ||
| </div> | ||
| </article> | ||
| </section> | ||
|
|
||
| {/* Codacy AI Section */} | ||
| <section className={styles.codacyAiSection}> | ||
| <div className={styles.codacyAiContent}> | ||
| <img src="/img/icons/sparkles.svg" alt="Codacy AI" className={styles.codacyAiIcon} width={36} height={36} /> | ||
| <h2>Codacy AI</h2> | ||
| </div> | ||
| <Link to="/docs/codacy-ai/" className={styles.viewDocsLink}> | ||
| View documentation → | ||
| </Link> | ||
| </section> | ||
|
|
||
| {/* Most Popular Topics */} | ||
| <section className={styles.topicsSection}> | ||
| <h2 className={styles.sectionTitle}>Most popular topics</h2> | ||
|
|
||
| <div className={styles.topicsGrid}> | ||
| <article className={styles.topicCard}> | ||
| <div className={styles.topicCardHeader}> | ||
| <h3>Adding coverage to your repository</h3> | ||
| <span className={styles.topicArrow}>→</span> | ||
| </div> | ||
| <p>Set up your repositories to show code coverage reports directly on Codacy.</p> | ||
| </article> | ||
|
|
||
| <article className={styles.topicCard}> | ||
| <div className={styles.topicCardHeader}> | ||
| <h3>Understanding issues</h3> | ||
| <span className={styles.topicArrow}>→</span> | ||
| </div> | ||
| <p>Learn how Codacy report issues, how to triage them, and what to do next.</p> | ||
| </article> | ||
|
|
||
| <article className={styles.topicCard}> | ||
| <div className={styles.topicCardHeader}> | ||
| <h3>Managing people in organizations</h3> | ||
| <span className={styles.topicArrow}>→</span> | ||
| </div> | ||
| <p>Invite your teammates to join Codacy to analyze their commits on private repositories.</p> | ||
| </article> | ||
|
|
||
| <article className={styles.topicCard}> | ||
| <div className={styles.topicCardHeader}> | ||
| <h3>Using the Codacy API</h3> | ||
| <span className={styles.topicArrow}>→</span> | ||
| </div> | ||
| <p>Retrieve and analyze data from Codacy and perform configuration changes programmatically.</p> | ||
| </article> | ||
| </div> | ||
| </section> | ||
|
|
||
| {/* Help and Support Section */} | ||
| <section className={styles.supportSection}> | ||
| <h2 className={styles.sectionTitle}>Help and support</h2> | ||
|
|
||
| <div className={styles.supportGrid}> | ||
| <article className={styles.supportCard}> | ||
| <div className={styles.supportCardHeader}> | ||
| <span className={styles.supportIcon}>🔍</span> | ||
| <h3>Did you find everything you need?</h3> | ||
| </div> | ||
| <p>Help us improve your experience. Let us know whether this page answered your questions, so we can make our documentation clearer and more useful for you.</p> | ||
| <div className={styles.supportCardActions}> | ||
| <button className={styles.supportButtonYes}>Yes</button> | ||
| <button className={styles.supportButtonNo}>No</button> | ||
| </div> | ||
| </article> | ||
|
|
||
| <article className={styles.supportCard}> | ||
| <div className={styles.supportCardHeader}> | ||
| <span className={styles.supportIcon}>💬</span> | ||
| <h3>Support</h3> | ||
| </div> | ||
| <p>Our support team is here to assist you with any questions about using Codacy effectively in your workflow.</p> | ||
| <Link to="#" className={styles.supportCardLink}>Contact us →</Link> | ||
| </article> | ||
|
|
||
| <article className={styles.supportCard}> | ||
| <div className={styles.supportCardHeader}> | ||
| <span className={styles.supportIcon}>❓</span> | ||
| <h3>FAQs</h3> | ||
| </div> | ||
| <p>Browse our frequently asked questions to find clear explanations and best practices for getting the most out of Codacy. No support ticket required.</p> | ||
| <Link to="/docs/faq/" className={styles.supportCardLink}>View FAQs →</Link> | ||
| </article> | ||
| </div> |
There was a problem hiding this comment.
🟡 MEDIUM RISK
Suggestion: Codacy detected duplication in this file, specifically between the structure of the <article> elements used for 'Feature Cards', 'Most Popular Topics', and 'Help and Support' sections. Consider extracting a reusable Card or SectionCard React component that can accept props for icon, title, description, and action links. This will reduce code repetition, improve maintainability, and make it easier to add new cards in the future.
Try running the following prompt in your IDE agent:
Create a reusable
CardReact component that can be used for the 'Feature Cards', 'Most Popular Topics', and 'Help and Support' sections indocusaurus/src/pages/index.tsx, extracting common JSX structure and allowing for custom content via props. Then, refactor these sections to use the newCardcomponent.
| border: 1px solid #e1e5ea; | ||
| border-radius: 1rem; | ||
| padding: 2rem; | ||
| box-shadow: 0 4px 12px rgba(13, 23, 38, 0.08); |
There was a problem hiding this comment.
⚪ LOW RISK
Codacy found a Stylelint_alpha-value-notation issue. The alpha value '0.08' should be expressed as '8%' for consistency with the project's configured style. Please update this and similar alpha values throughout the file.
This might be a simple fix:
| box-shadow: 0 4px 12px rgba(13, 23, 38, 0.08); | |
| box-shadow: 0 4px 12px rgba(13, 23, 38, 8%); |
| /* 1st layer: A mask that allows the dots to show only in the center. | ||
| 2nd layer: The actual dotted grid. | ||
| */ | ||
| background-image: | ||
| radial-gradient(circle at center, #ffffff96 35%, #ffffffab 35%, transparent 30%), | ||
| radial-gradient(circle at 1px 1px, rgba(13, 23, 38, 0.3) 1px, transparent 1px); | ||
|
|
||
| background-size: cover, 20px 20px; | ||
| background-position: center, 0 0; | ||
| background-repeat: no-repeat, repeat; | ||
| } | ||
|
|
||
| .heroInner { | ||
| margin: 0 auto; | ||
| max-width: 960px; | ||
| padding: 0 1.5rem; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .kicker { | ||
| text-transform: uppercase; | ||
| letter-spacing: 0.18em; | ||
| font-size: 0.75rem; | ||
| margin: 0 0 0.75rem; | ||
| color: #5b6775; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .title { | ||
| font-size: clamp(2.2rem, 2.8vw + 1.5rem, 3.6rem); | ||
| line-height: 1.05; | ||
| .heroTitle { | ||
| font-size: clamp(2rem, 2.5vw + 1rem, 3rem); | ||
| line-height: 1.2; | ||
| margin: 0 0 1rem; | ||
| color: #0d1726; | ||
| } | ||
|
|
||
| .subtitle { | ||
| font-size: 1.125rem; | ||
| max-width: 40rem; | ||
| .heroSubtitle { | ||
| font-size: 1rem; | ||
| margin: 0 0 2rem; | ||
| color: #3b4654; | ||
| color: #5b6775; | ||
| } | ||
|
|
||
| .ctaRow { | ||
| .searchBox { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 0.75rem; | ||
| justify-content: center; | ||
| margin-top: 2rem; | ||
| } | ||
|
|
||
| .primaryCta, | ||
| .secondaryCta { | ||
| border-radius: 999px; | ||
| padding: 0.75rem 1.6rem; | ||
| .searchInput { | ||
| flex: 0 1 300px; | ||
| padding: 0.75rem 1rem; | ||
| border: 1px solid #d4d9e0; | ||
| border-radius: 0.5rem; | ||
| font-size: 0.9rem; | ||
| background: #ffffff; | ||
| } | ||
|
|
||
| .searchButton { | ||
| padding: 0.75rem 1.5rem; | ||
| background: #0052cc; | ||
| color: #ffffff; | ||
| border: none; | ||
| border-radius: 0.5rem; | ||
| font-weight: 600; | ||
| cursor: pointer; | ||
| font-size: 0.9rem; | ||
| } | ||
|
|
||
| .searchButton:hover { | ||
| background: #003fa3; | ||
| } | ||
|
|
||
| /* Feature Cards Section */ | ||
| .featureCardsContainer { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); | ||
| gap: 2rem; | ||
| margin-bottom: 3rem auto; | ||
| max-width: 1200px; | ||
| padding: 0 1.5rem; | ||
| } | ||
|
|
||
| .featureCard { | ||
| background: #ffffff; | ||
| border: 1px solid #e1e5ea; | ||
| border-radius: 1rem; | ||
| padding: 2rem; | ||
| box-shadow: 0 4px 12px rgba(13, 23, 38, 0.08); |
There was a problem hiding this comment.
⚪ LOW RISK
Nitpick: Codacy detected several Stylelint issues in this file related to code style, such as comment-empty-line-before (line 8), declaration-empty-line-before (line 15), color-hex-length (line 7), and color-function-notation (lines 13, 86). While individually minor, these contribute to style inconsistency. Consider configuring Stylelint rules to enforce a unified style, or updating these instances manually for improved readability and adherence to a consistent style guide. This will help maintain code quality across the codebase.
See Issue in Codacy
See Issue in Codacy
See Issue in Codacy
See Issue in Codacy
See Issue in Codacy
👀 Live preview
🚧 To do