feat(redesign): Homepage Hero component by g-francesca · Pull Request #2203 · expressjs/expressjs.com

g-francesca · 2026-03-02T11:57:55Z

Preview
This PR implements the homepage Hero component.

What's included

Background video (light/dark mode variants) with poster images for mobile fallback
Code blocks using Expressive Code. It was installed primarily to get a built-in copy button on the Hero code blocks, something Shiki doesn't provide out of the box.
Fully responsive layout

Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
have the right to submit it under the open source license
indicated in the file; or

(b) The contribution is based upon previous work that, to the best
of my knowledge, is covered under an appropriate open source
license and I have the right under that license to submit that
work with modifications, whether created in whole or in part
by me, under the same open source license (unless I am
permitted to submit under a different license), as indicated
in the file; or

(c) The contribution was provided directly to me by some other
person who certified (a), (b) or (c) and I have not modified
it.

(d) I understand and agree that this project and the contribution
are public and that a record of the contribution (including all
personal information I submit with it, including my sign-off) is
maintained indefinitely and may be redistributed consistent with
this project or the open source license(s) involved.

netlify · 2026-03-02T11:57:59Z

✅ Deploy Preview for expressjscom-preview ready!

Name	Link
🔨 Latest commit	`34fdcd9`
🔍 Latest deploy log	https://app.netlify.com/projects/expressjscom-preview/deploys/69a70090c2a4bf00084e1f34
😎 Deploy Preview	https://deploy-preview-2203--expressjscom-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (🟢 up 4 from production) Accessibility: 100 (🟢 up 13 from production) Best Practices: 100 (no change from production) SEO: 100 (🟢 up 6 from production) PWA: 80 (🟢 up 50 from production) View the detailed breakdown and full score reports

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

socket-security · 2026-03-02T11:58:30Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/typescript-eslint@8.53.1
	npm/astro-expressive-code@0.41.7
	npm/typescript@5.9.3

View full report

bjohansebas · 2026-03-02T13:20:13Z

astro/src/components/patterns/Hero/Hero.astro

+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
+const EXPRESS_VERSION = '5.2.1';


Currently we have an automation on the site to update the version. I’m not sure how to suggest it here, since it could be done with a fetch on each build or we could continue with the automation.

Right, I can fetch the latest version from the npm registry, so we're sure it's updated on every build. I can add a fallback (that can be just for example 5.x) just in case the npm registry is not reachable. wdyt?

Yes, I think that sounds good. I think it would be fine to use https://npm.antfu.dev/express to simplify things.

Now that I think about it, we don’t need that many automations anymore. Astro can handle them for us, which is pretty cool. I’m just saying this for pulling in the READMEs from our middlewares.
https://github.com/withastro/docs/blob/8e216293f74f38cc64db427622de74060403d5a8/src/content.config.ts#L168

Nice! I didn't know that. I've reviewed the content config to use the content collection loader

krzysdz

I was wondering what is the pause/play button supposed to do, because in my browser the (light) video did not play so it did nothing. The light video is encoded with 4:4:4 chroma subsampling, which is not supported by my browser's decoder. AVC/H264 4:4:4 is not even listed in AMD, Intel or Nvidia video decode support matrix.

Error Code: NS_ERROR_DOM_MEDIA_FATAL_ERR (0x806e0005)
Details: auto __cdecl mozilla::SupportChecker::AddMediaFormatChecker(const TrackInfo &)::(anonymous class)::operator()(void) const: Decoder may not have the capability to handle the requested video format with YUV444 chroma subsampling.

The video files are small, which is nice, but look very much compressed and so does the light static fallback image.

If someone blocks autoplay, then the initial button state is wrong - pause button must be clicked to play the video (later the state is synchronised).

The button, when hovered, is partially clipped by the code block in mobile view (open page with enough width to load in desktop mode and then make it smaller to force mobile mode).

g-francesca · 2026-03-02T18:03:04Z

I was wondering what is the pause/play button supposed to do, because in my browser the (light) video did not play so it did nothing. The light video is encoded with 4:4:4 chroma subsampling, which is not supported by my browser's decoder. AVC/H264 4:4:4 is not even listed in AMD, Intel or Nvidia video decode support matrix.

Error Code: NS_ERROR_DOM_MEDIA_FATAL_ERR (0x806e0005)
Details: auto __cdecl mozilla::SupportChecker::AddMediaFormatChecker(const TrackInfo &)::(anonymous class)::operator()(void) const: Decoder may not have the capability to handle the requested video format with YUV444 chroma subsampling.

@krzysdz Can you please check now and tell me if the video plays now? The pause/play button is supposed to play or pause the video on demand, I've also reviewed the style so that, in case the video fails loading for any reasons, the button is not displayed.

The video files are small, which is nice, but look very much compressed and so does the light static fallback image.

Ok, so in this case I can try to review video/images to find a better compromise between quality and size.

If someone blocks autoplay, then the initial button state is wrong - pause button must be clicked to play the video (later the state is synchronised).

Right, thanks for reporting it. It's fixed now

The button, when hovered, is partially clipped by the code block in mobile view (open page with enough width to load in desktop mode and then make it smaller to force mobile mode).

As the video are not loaded on mobile for performance reasons, I've actually hidden the button on mobile.

bjohansebas · 2026-03-03T03:04:59Z

astro/src/pages/[lang]/index.astro

For the others, there are still some things to add, as well as the banner

g-francesca · 2026-03-03T10:32:55Z

The video files are small, which is nice, but look very much compressed and so does the light static fallback image.

@krzysdz I've reviewed video/poster images to find a better compromise between size and quality. Let me know how they look to you now. TY

ShubhamOulkar · 2026-03-03T12:47:30Z

astro/src/components/patterns/Hero/Hero.astro

+          }
+        });
+      },
+      { rootMargin: '5rem' }


Suggested change

{ rootMargin: '5rem' }

{ rootMargin: '80px' }

I didn't review all the code, but this caught my attention. rem is not supported by rootMargin. Please fix it. Also, you can verify it in your console.

Actually it is spec bug w3c/IntersectionObserver#308

right, it's fixed now. thanks for catching it

krzysdz · 2026-03-03T12:49:46Z

astro/src/components/patterns/Hero/Hero.astro

+          }
+        });
+      },
+      { rootMargin: '5rem' }


Uncaught DOMException: IntersectionObserver constructor: rootMargin must be specified in pixels or percent.

The specification says that it has to be "a string of 1-4 components, each either an absolute length or a percentage".

Because of this exception more things are broken for me (e.g. the resize listener)

ShubhamOulkar · 2026-03-03T12:52:27Z

Also Light theme looks weird.

EDIT :- It is because of my browser 3g throttle. We might have performance issue. Let's test it in separate PR. Now theme looks OK to me.

krzysdz · 2026-03-03T12:57:05Z

I can confirm that now both videos can be played by my browser.

The exception thrown by the IntersectionObserver aborts the script execution, so some more things are broken - e.g. I can start the video as "desktop", resize to mobile (video keeps playing, but play/pause button is gone) and then changing the theme doesn't work on the video allowing for light video in dark mode or video with black background in light mode (with black text on black background).

socket-security · 2026-03-03T13:27:51Z

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert (click "▶" to expand/collapse)
Warn		Obfuscated code: npm `vite` is 91.0% likely obfuscated Confidence: 0.91 Location: Package overview From: astro/package-lock.json → `npm/astro@5.18.0` → `npm/vite@6.4.1` ℹ Read more on: This package \| This alert \| What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at `support@socket.dev`. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment `@SocketSecurity ignore npm/vite@6.4.1`. You can also ignore all packages with `@SocketSecurity ignore-all`. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

g-francesca · 2026-03-03T13:31:47Z

Also Light theme looks weird.
EDIT :- It is because of my browser 3g throttle. We might have performance issue. Let's test it in separate PR. Now theme looks OK to me.

~~mmm yes, I could reproduce that with slow connection. I've noted this for later fix. Thanks~~

I spotted the issue @ShubhamOulkar, should be solved now.

bjohansebas · 2026-03-03T13:37:49Z

astro/astro.config.mjs


 // https://astro.build/config
 export default defineConfig({
-  site: 'https://expressjs.com',


We still need the site.

I removed it by mistake. Thanks for the catch. Fixed now.

bjohansebas · 2026-03-03T13:38:46Z

astro/src/pages/[lang]/index.astro

-    <ul>
-      <li>
-        {t('home.reviewDesignSystemPrefix')}
-        <a href={`/${lang}/ds-foundations`}>{t('home.reviewDesignSystemLink')}</a>


I really like having that page, could we add it to the menu under the Resources section?

I added the ds-foundations page for internal reference, but of course if you find this useful, we can add it. I leave the decision to you, let me know in case :)

g-francesca · 2026-03-03T13:40:19Z

I can confirm that now both videos can be played by my browser.

The exception thrown by the IntersectionObserver aborts the script execution, so some more things are broken - e.g. I can start the video as "desktop", resize to mobile (video keeps playing, but play/pause button is gone) and then changing the theme doesn't work on the video allowing for light video in dark mode or video with black background in light mode (with black text on black background).

@krzysdz I fixed the IntersectionObserver, so you should not reproduce the other related bugs. About the theme switcher not updating the video accordingly, is it a problem you can reproduce in specific cases? Or it's always like this?

bjohansebas · 2026-03-03T13:41:55Z

astro/src/components/patterns/Hero/Hero.astro

And when the user has animations disabled, does this respect that as well?

@bjohansebas do you mean blocking the autoplay when animation is disabled?

Yes, it's blocked if user preference is set to reduced motion

krzysdz · 2026-03-03T14:30:12Z

About the theme switcher not updating the video accordingly, is it a problem you can reproduce in specific cases? Or it's always like this?

It works now after the IntersectionObserver fix.

ShubhamOulkar · 2026-03-03T14:31:37Z

astro/src/components/patterns/Hero/Hero.astro

+      return;
+    }
+
+    const isMobile = window.innerWidth < breakpointMd;


why this logic is repeated? https://github.com/expressjs/expressjs.com/pull/2203/changes#diff-959176fc6245a55e46051932f45e47460870ef1acf3d57f64100ee864bd4a36dR250

Do you refer to the logic to disable video on mobile right? I moved it in a function that is called on load and on resize.

ShubhamOulkar · 2026-03-03T14:32:45Z

astro/src/components/patterns/Hero/Hero.astro

+      const targetSrc = getVideoSource();
+
+      if (currentSrc && targetSrc && !currentSrc.endsWith(targetSrc)) {
+        const source = video.querySelector('source');


We dont need to call DOM multiple times. https://github.com/expressjs/expressjs.com/pull/2203/changes#diff-959176fc6245a55e46051932f45e47460870ef1acf3d57f64100ee864bd4a36dR183

ShubhamOulkar · 2026-03-03T14:51:07Z

astro/src/components/patterns/Hero/Hero.astro

+    const alternateVideoSrc = getCurrentTheme() === 'dark' ? videoDesktopLight : videoDesktop;
+    if (alternateVideoSrc) {
+      const link = document.createElement('link');
+      link.rel = 'preload';


Why not to use two simple prefetch links in the html?

<link rel="prefetch" href="/hero-background-light.mp4" as="video"> <link rel="prefetch" href="/hero-background.mp4" as="video">

Instead of dynamically adding a preload link for the alternate theme video, we might consider using static prefetch links (possibly desktop-only) for both theme variants and simply switch the src on theme change. Since this is decorative background media, prefetch would be lower priority and less aggressive than preload, reducing bandwidth pressure while still keeping theme switching smooth.

You removed preload in 89531de

astro/src/components/patterns/Hero/Hero.astro

ShubhamOulkar · 2026-03-03T15:12:11Z

😅 It’s 8:41 PM, I’m hungry, and I’m just clicking anywhere at this point. That’s it for today. 👋 Bye!

g-francesca added 12 commits February 25, 2026 14:56

feat: setup home hero

b42c12a

style: refine responsive hero style

a9f5a1c

feat: add light mode video

ec23592

feat: review hero code blocks

cd2061a

style: customize expressive code copy

a57b64c

feat: set poster image for light and dark mode and mobile

3ffb4c2

Merge branch 'redesign' into redesign-homepage

b60e004

fix: replace video hero bg

2e98635

refactor: clean up hero component

f289b11

refactor: use astro image component

4bacf0c

feat: update Hero to use translations

836a53c

fix: use md breakpoint

ac10693

g-francesca requested a review from a team as a code owner March 2, 2026 11:57

bjohansebas reviewed Mar 2, 2026

View reviewed changes

krzysdz reviewed Mar 2, 2026

View reviewed changes

g-francesca added 2 commits March 2, 2026 18:40

fix: play button state when video is blocked

1148858

fix: hide play button on mobile

2790272

bjohansebas reviewed Mar 3, 2026

View reviewed changes

g-francesca added 2 commits March 3, 2026 10:15

feat: get latest express version via astro loader

dd39b24

fix: replace hero video and poster images

e63524b

g-francesca requested review from bjohansebas and krzysdz March 3, 2026 10:33

g-francesca mentioned this pull request Mar 3, 2026

feat(redesign): Homepage Features and Banner component #2204

Draft

ShubhamOulkar requested changes Mar 3, 2026

View reviewed changes

krzysdz reviewed Mar 3, 2026

View reviewed changes

fix: px value

a93a6a3

bjohansebas reviewed Mar 3, 2026

View reviewed changes

g-francesca added 2 commits March 3, 2026 14:44

fix: revert site key

f76d8c5

feat: preload alternate video

b575caa

refactor: clean up hero and avoid reloading video

89531de

g-francesca requested review from ShubhamOulkar, bjohansebas and krzysdz March 3, 2026 14:52

ShubhamOulkar reviewed Mar 3, 2026

View reviewed changes

ShubhamOulkar requested changes Mar 3, 2026

View reviewed changes

astro/src/components/patterns/Hero/Hero.astro Show resolved Hide resolved

refactor: logic for video on mobile

34fdcd9

Uh oh!

Conversation

g-francesca commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What's included

Uh oh!

netlify bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for expressjscom-preview ready!

Uh oh!

socket-security bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

krzysdz left a comment

Choose a reason for hiding this comment

Uh oh!

g-francesca commented Mar 2, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

g-francesca commented Mar 3, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ShubhamOulkar commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

krzysdz commented Mar 3, 2026

Uh oh!

socket-security bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

g-francesca commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

g-francesca commented Mar 3, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

krzysdz commented Mar 3, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

g-francesca commented Mar 2, 2026 •

edited

Loading

netlify bot commented Mar 2, 2026 •

edited

Loading

socket-security bot commented Mar 2, 2026 •

edited

Loading

ShubhamOulkar commented Mar 3, 2026 •

edited

Loading

socket-security bot commented Mar 3, 2026 •

edited

Loading

g-francesca commented Mar 3, 2026 •

edited

Loading