feat(frontpage): add JS OS Award 2026

[Conaclos]

Summary

This PR adds the image of the JS OS Award Productivity booster on our frontpage.

Using SVGO and svgoptimizer, I managed to reduce the SVG file size by 40% to 12 KB without any visible changes. This matches the size of the blurry WebP image of the JS OS Award 2024 (I guess it is automatically generated by Astro from the original PNG file).

EDIT: I have replaced the blurry image of the JS OS Award 2024 with an SVG version. I created this image by manually editing the 2026 version and replacing the last digit of the year. I have also sent an email to the JSNation team to request the original image.

I updated the CSS code in order to add spacing between the two images and arrange them vertically when there is not enough space. There is some inconsistency in the content alignment: the first image is vertically centred, while the second one is not. Any help is welcome.

See also the related resource PR.

[netlify]

✅ Deploy Preview for biomejs ready!

Name	Link
🔨 Latest commit	6e7cf8a
🔍 Latest deploy log	https://app.netlify.com/projects/biomejs/deploys/6a4d563845b4a40008f8ab35
😎 Deploy Preview	https://deploy-preview-4358--biomejs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 5ff12a44-b93d-4f21-bc67-241c12f46f13

📥 Commits

Reviewing files that changed from the base of the PR and between 21f29c4 and 6e7cf8a.

📒 Files selected for processing (2)

• src/components/AwardBanner.astro
• src/styles/_award.css

✅ Files skipped from review due to trivial changes (1)

• src/styles/_award.css

---

Walkthrough

The award banner now renders both 2024 and 2026 SVG images. The .award container also adds a 20px gap and wraps its flex items onto multiple lines.

Changes

File	Change
src/components/AwardBanner.astro	Switches the 2024 asset to SVG and adds a 2026 banner image
src/styles/_award.css	Adds gap: 20px and flex-wrap: wrap to .award

Sequence Diagram(s)

Not applicable.

Estimated code review effort: Low

Related issues: None found

Related PRs: None found

Suggested labels: none

Suggested reviewers: none

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: adding the JS OS Award 2026 to the frontpage.
Description check	✅ Passed	The description is clearly related to the frontpage award image and layout changes in the pull request.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch jsosaward2026

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/AwardBanner.astro`:
- Around line 9-10: The two banner images in AwardBanner.astro are sized
inconsistently because the 2024 Image uses an explicit width while the 2026
Image relies on its native SVG size. Update the AwardBanner Image usage so both
banner variants share the same sizing approach, either by adding a matching
width to banner2026 or by moving both to a shared CSS-based size in the same
component. Keep the change localized to the Image elements in AwardBanner so the
layout remains visually consistent between awards.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e0edc635-a4c5-40d7-9b32-daee23e0d905

📥 Commits

Reviewing files that changed from the base of the PR and between 6aa7361 and 7e7f8d5.

⛔ Files ignored due to path filters (1)

• src/assets/JS_OSAward_2026_5_1.svg is excluded by !**/*.svg

📒 Files selected for processing (2)

• src/components/AwardBanner.astro
• src/styles/_award.css

[yanthomasdev]

Thanks @Conaclos, just a small nit from me.

[ematipico]

Looks good from mobile

[ematipico]

Actually, adding the new class made it worse on mobile cc @yanthomasdev

[Conaclos]

There is also an issue on desktop as indicated in my summary:

There is some inconsistency in the content alignment: the first image is vertically centred, while the second one is not. Any help is welcome.

I think it is coming from the flexbloxes.

[ematipico]

@Conaclos If you add flex-direction: column on mobile, and remove not-content, it works.

[yanthomasdev]

I'm sorry. Didn't notice at first it would break on mobile. This two suggestions will fix it on both desktop and mobile now.