Skip to content

feat(changelogs): add hero section with dinosaur and Firehose title #704

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.

Sign up for GitHub

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

Merged
castrojo merged 1 commit into from
Apr 1, 2026
Merged

feat(changelogs): add hero section with dinosaur and Firehose title #704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 53 additions & 17 deletions src/components/CommunityFeeds.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,64 @@
.header {
text-align: center;
margin-bottom: 1.5rem;
/* ── Hero ──────────────────────────────────────────────────────────────────── */

.hero {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
padding: 1.5rem 0;
border-bottom: 1px solid var(--ifm-color-emphasis-200);
}

.header h1 {
color: var(--ifm-color-primary);
margin-bottom: 1rem;
.heroDino {
width: 90px;
height: auto;
flex-shrink: 0;
object-fit: contain;
}

.heroText {
flex: 1;
}

.heroTitle {
font-size: 2.5rem;
font-weight: 700;
margin: 0 0 0.25rem;
color: var(--ifm-color-primary);
line-height: 1.1;
}

.header p {
font-size: 1.1rem;
.heroSubtitle {
font-size: 1.15rem;
color: var(--ifm-color-emphasis-700);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
margin: 0 0 0.5rem;
line-height: 1.4;
}

.overviewPanel {
border: 1px solid var(--ifm-color-emphasis-300);
border-radius: 12px;
padding: 1.25rem;
margin-bottom: 2.5rem;
background: color-mix(in srgb, var(--ifm-background-color) 92%, var(--ifm-color-emphasis-100));
.heroLinks {
font-size: 0.9rem;
color: var(--ifm-color-emphasis-600);
margin: 0;
}

@media (max-width: 600px) {
.hero {
flex-direction: column;
text-align: center;
gap: 1rem;
}

.heroDino {
width: 72px;
}

.heroTitle {
font-size: 1.9rem;
}

.heroSubtitle {
font-size: 1rem;
}
}

.overviewLead {
Expand Down
16 changes: 12 additions & 4 deletions src/components/CommunityFeeds.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,18 @@
description="Stay up to date with Bluefin releases, discussions, and announcements. Stay frosty."
>
<div className="container margin-vert--lg">
<div className={styles.overviewPanel}>
<div className={styles.header}>
<h1>Changelogs and Feeds</h1>
<p className={styles.overviewLinks}>
<div className={styles.hero}>
<img
src="/img/angry-dinosaur.webp"
alt="Bluefin angry dinosaur mascot"
className={styles.heroDino}
/>
Comment on lines +14 to +18
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Apr 1, 2026

Choose a reason for hiding this comment

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

high

The image path is hardcoded as a string literal and is missing explicit dimensions.

  1. Portability: Using a hardcoded path like /img/angry-dinosaur.webp can lead to broken images if the site is deployed to a subpath (e.g., GitHub Pages). Using require() ensures the build system correctly resolves the asset path relative to the base URL.
  2. Layout Shift (CLS): Missing width and height attributes on the img tag 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}
          />

<div className={styles.heroText}>
<h1 className={styles.heroTitle}>Bluefin Firehose</h1>

Check warning on line 20 in src/components/CommunityFeeds.tsx

View workflow job for this annotation

GitHub Actions / Build Docusaurus 

Do not use any of the `<hn>` tags for headings. Use the `<Heading />` component from `@theme/Heading` instead
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Apr 1, 2026

Choose a reason for hiding this comment

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

high

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.

<p className={styles.heroSubtitle}>
Track updates for Bluefin OS, Flathub apps, and Homebrew packages
</p>
<p className={styles.heroLinks}>
Need project-wide status? See <a href="/reports">Monthly Reports</a>{" "}
for delivery summaries from <a href="https://todo.projectbluefin.io">todo.projectbluefin.io</a>.
</p>
Expand Down
Binary file added static/img/angry-dinosaur.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading