feat(changelogs): add hero section with dinosaur and Firehose title#704
Conversation
Replace the plain 'Changelogs and Feeds' text header with a hero layout: angry dinosaur mascot image + 'Bluefin Firehose' title + subtitle matching the original castrojo.github.io/bluefin-releases site. - static/img/angry-dinosaur.webp: copied from bluefin-releases source - CommunityFeeds.tsx: hero layout (dino + text block) - CommunityFeeds.module.css: hero styles, responsive collapse on mobile Assisted-by: Claude Sonnet 4.6 via GitHub Copilot Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request replaces the header and overview panel in the CommunityFeeds component with a new hero section, adding a mascot image and updating the layout styles. Reviewers identified opportunities to improve the image implementation by using relative path resolution and explicit dimensions to avoid layout shifts. It was also noted that the page title in the Layout component should be updated to match the new heading for SEO and accessibility consistency.
| <img | ||
| src="/img/angry-dinosaur.webp" | ||
| alt="Bluefin angry dinosaur mascot" | ||
| className={styles.heroDino} | ||
| /> |
There was a problem hiding this comment.
The image path is hardcoded as a string literal and is missing explicit dimensions.
- Portability: Using a hardcoded path like
/img/angry-dinosaur.webpcan lead to broken images if the site is deployed to a subpath (e.g., GitHub Pages). Usingrequire()ensures the build system correctly resolves the asset path relative to the base URL. - Layout Shift (CLS): Missing
widthandheightattributes on theimgtag can cause layout shifts during page load. Since this is a hero section, providing these attributes is important for performance and user experience.
Note: Ensure the width and height values match the intrinsic aspect ratio of the image.
<img
src={require("@site/static/img/angry-dinosaur.webp").default}
alt="Bluefin angry dinosaur mascot"
className={styles.heroDino}
width={90}
height={90}
/>
| className={styles.heroDino} | ||
| /> | ||
| <div className={styles.heroText}> | ||
| <h1 className={styles.heroTitle}>Bluefin Firehose</h1> |
There was a problem hiding this comment.
The new <h1> title ('Bluefin Firehose') does not match the page title defined in the Layout component ('Changelogs and Feeds'). This inconsistency can negatively impact SEO and accessibility. It is highly recommended to update the title prop of the Layout component to match this new heading.
1 participant
Replace the plain 'Changelogs and Feeds' text header with a hero layout: angry dinosaur mascot image + 'Bluefin Firehose' title + subtitle matching the original castrojo.github.io/bluefin-releases site.
Assisted-by: Claude Sonnet 4.6 via GitHub Copilot