feat(redesign): blog listing page

[g-francesca]

Preview
This PR implements the blog listing page as part of the site redesign, replacing the temporary placeholder with a fully functional layout.

New components

• Avatar: displays author avatar, supports multiple authors
• Tag: renders a styled label/badge
• Tabs: accessible tab switcher with a custom tabs-change event for client-side filtering
• PostCard: blog post card with cover image (it will be replaced with a generated OG image), tags, title, and author info
• PageHead: section header with title and description
• Pagination: previous/next controls with page count

Blog listing page (/[lang]/blog)

• Replaces the old stub index.astro with a dynamic [...page].astro
• Posts are sorted by date (derived from filename), filtered by tag via the Tabs component, and paginated client-side (6 posts per page, we can change this value), all without a full page reload
• All existing languages are supported via getStaticPaths, posts are currently provided for English only

Blog post page (/[lang]/blog/[slug])

• Draft implementation to avoid broken links from the listing page
• Renders post content with title, date, first tag, and primary author avatar

Content

• Adds english blog posts taken from existing content (legacy app)
• Defines the blog content collection schema in content.config.ts (title, description, authors, tags)

---

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]

✅ Deploy Preview for expressjscom-preview ready!

Name	Link
🔨 Latest commit	3bae1fc
🔍 Latest deploy log	https://app.netlify.com/projects/expressjscom-preview/deploys/69b3be21b8d93c00095c9dd0
😎 Deploy Preview	https://deploy-preview-2207--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.

[bjohansebas]

I can't quite understand that text about partnerships.

Another thing: we have too many tags; we should start reducing them. We should keep vulnerabilities, announcements, and releases. cc: @UlisesGascon

Also, I would like that on the blog page we could reference other blogs, something like:

[ShubhamOulkar]

Need light mode color contrast improvements. Tags taking lot of space on small screens. DO we really need so many tags?

[bjohansebas]

Okay, security and announcements tags are enough, confirmed with Ulises on Slack. The rest can be removed.

[g-francesca]

Improvements I did:

• I cleaned up the tags used for the posts, so now we're only using security and announcements
• I improved the color contrast for the Tag component, so now we have:
  • Light mode: gray-900 on gray-200 → ~14.6:1 (AAA ✓)
  • Dark mode: gray-100 on gray-600 → ~7.2:1 (AAA ✓)

About Related Posts, I've noted this for when I'll work on the post page.
@bjohansebas @ShubhamOulkar @UlisesGascon

[ShubhamOulkar]

see icons flashing issue: https://www.awesomescreenshot.com/video/50273460?key=fd1f8ad53d32bd5a995a856d2c96ad2e

[g-francesca]

I see you've fixed it. Thanks!

[ShubhamOulkar]

[g-francesca]

@ShubhamOulkar I've reviewed the layout on tablet, and it now displays two columns per row.
Regarding the main menu not covering the entire screen height, I’m unable to reproduce the issue. Could you please let me know which browser/device/os you’re using? Thanks!

[ShubhamOulkar]

I’m unable to reproduce the issue. Could you please let me know which browser/device/os you’re using?

This is happening while taking screen shots on awesomescreenshot and Firefox default Take screen shots. (Windows 11)

[bjohansebas]

I think the H2s have quite a large font size; we should reduce it.

The tags you show here, shouldn’t they have more padding-top? And if the idea is to show that these are tags, we could maybe give them a border/outline like the tags shown on the blog’s main page. Here are some examples of how other blogs do it

examples:

Or maybe we shouldn’t show the tags on those pages at all, and only display them on the blog’s main page. Either option seems fine to me

[bjohansebas]

For reference, we’ll have OG images generated automatically, but that will be handled in a separate PR.

[bjohansebas]

I think we should use pagination based on the URL rather than a script running in the browser, for SEO reasons and to make the URLs easier to share (for example https://astro.build/blog/2/ https://nodejs.org/en/blog/all/page/2, I like the way the URL is structured on the Astro website more.)

[bjohansebas]

To clarify, the filtering by tags should still run in the browser, but the pagination should be generated by static pages.

[g-francesca]

Makes sense! I'll review this today. Thanks

[g-francesca]

@bjohansebas can you please verify this is the expected behaviour? https://www.awesomescreenshot.com/video/50351892?key=96a5442b9e3ac4ef328e5147f8082420
I did not generate static pages for tags filtering, as you mentioned.

[bjohansebas]

yeah, that's right

[g-francesca]

Can you please check now @bjohansebas? ty

[g-francesca]

I think the H2s have quite a large font size; we should reduce it.

The tags you show here, shouldn’t they have more padding-top? And if the idea is to show that these are tags, we could maybe give them a border/outline like the tags shown on the blog’s main page. Here are some examples of how other blogs do it examples:

Or maybe we shouldn’t show the tags on those pages at all, and only display them on the blog’s main page. Either option seems fine to me

@bjohansebas I'm not covering the blog post page in this PR, so what you see is just a draft implementation to avoid broken links from the listing page. I will dedicate a PR to the blog post page. On that occasion, I will consider this feedback. TY!

[g-francesca]

I’m unable to reproduce the issue. Could you please let me know which browser/device/os you’re using?

This is happening while taking screen shots on awesomescreenshot and Firefox default Take screen shots. (Windows 11)

This is fixed now. Can you please double check?

[ShubhamOulkar]

LGTM!

Should we move resources to bottom?

[ShubhamOulkar]

Have added this to focus main content if user click on skip to content button. I found that our website layout need some rearrangements as main content container top section overlays over top header component. As shown below. It creates top container crop visuals on focus state.

[g-francesca]

@ShubhamOulkar Thanks for reporting. I noticed that the focus isn’t visible even when the sections inside the main element have a background set. It might be better to address this in a separate PR so we can test different scenarios and identify the best solution.