Conversation
✅ Deploy Preview for project-idea-board ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
Enhances the site’s front page to better explain the value of the content and guide users toward exploring the idea catalog.
Changes:
- Reworked the index page template layout to add an intro section, “what you’ll find” cards, and a call-to-action.
- Added new CSS module styling to support the updated sections and visual structure.
- Updated the index markdown frontmatter copy (title/subheading/main pitch) to match the new messaging.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| src/templates/index-page.tsx | Adds new front-page sections (intro/audience, content-type cards, CTA) and updates the GraphQL/frontmatter usage accordingly. |
| src/style/index-page.module.css | Introduces styling for the new sections (grid layout, cards, CTA, recent additions spacing). |
| src/pages/index.md | Updates frontmatter text for the refreshed homepage messaging. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| contentTypesInner, | ||
| cta, | ||
| ctaButtons, | ||
| ctaLink, |
There was a problem hiding this comment.
ctaLink is destructured from the CSS module but never used in this component. With the current ESLint config (@typescript-eslint/no-unused-vars), this will fail linting. Remove ctaLink from the destructure (and consider deleting the corresponding .ctaLink styles if they’re no longer needed), or render an element that uses it.
| ctaLink, |
| interface IndexPageTemplateProps { | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| image: any; // Replace `any` with a more specific type if possible | ||
| title: string; | ||
| heading: string; | ||
| subheading: string; | ||
| mainpitch: MainPitch; | ||
| description: string; | ||
| } |
There was a problem hiding this comment.
IndexPageTemplate no longer accepts/uses heading and description, but the CMS configuration and preview template still expose/pass those fields (see static/admin/config.yml and src/cms/preview-templates/IndexPagePreview.js). This makes the CMS UI misleading because edits to those fields won’t affect the rendered front page. Either wire these fields back into the template or update the CMS config/preview to remove them and align with the new content model.
| <Link to="/ideas"> | ||
| <Button size="large" type="primary"> | ||
| Browse Ideas | ||
| </Button> | ||
| </Link> |
There was a problem hiding this comment.
<Link> renders an <a>, and Ant Design’s <Button> renders a <button> by default, so this produces an interactive element nested inside another interactive element (<a><button>…</button></a>), which is invalid HTML and can cause accessibility/keyboard issues. Prefer a single interactive element (e.g., style the Gatsby Link as a button, or use an Ant Button that renders as a link via href/navigation).
| .ctaLink { | ||
| font-size: 14px; | ||
| color: var(--MEDIUM_GRAY); | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| .ctaLink:hover { | ||
| color: var(--primary-color); | ||
| } | ||
|
|
There was a problem hiding this comment.
.ctaLink styles are defined here but nothing in the updated index page uses this class. If you remove the unused ctaLink import from the template, consider removing these unused styles too to avoid dead CSS.
| .ctaLink { | |
| font-size: 14px; | |
| color: var(--MEDIUM_GRAY); | |
| text-decoration: underline; | |
| } | |
| .ctaLink:hover { | |
| color: var(--primary-color); | |
| } |
| gatsbyImageData(quality: 100, layout: FULL_WIDTH) | ||
| } | ||
| } | ||
| heading | ||
| subheading | ||
| mainpitch { | ||
| title | ||
| description | ||
| } | ||
| description | ||
| } |
There was a problem hiding this comment.
In this query, heading and description were removed from frontmatter, but the local QueryResult type above still requires frontmatter.heading and frontmatter.description. Please update the QueryResult interface (or switch to the generated Queries.* type for this query) so the TypeScript types match the actual GraphQL selection set.
|
Problem
The front page didn't have enough context about why the site is valuable
Solution
Added more text and and styling. I did not change the flow of the main page/verses the table page. I figured that would be a separate PR.
with claude
Type of change
Please delete options that are not relevant.
Steps to Verify:
Screenshots (optional):