feat: create announcements banner by araujogui · Pull Request #617 · nodejs/doc-kit

araujogui · 2026-02-20T19:56:25Z

Description

Create announcements banner component

Validation

Related Issues

Fixes #327

Check List

I have read the Contributing Guidelines and made commit messages that follow the guideline.
I have run node --run test and all tests passed.
I have check code formatting with node --run format & node --run lint.
I've covered new added functionality with unit tests if necessary.

vercel · 2026-02-20T19:56:29Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
api-docs-tooling	Ready	Preview	Apr 14, 2026 4:24pm

codecov · 2026-02-20T19:57:50Z

Codecov Report

❌ Patch coverage is 1.05263% with 94 lines in your changes missing coverage. Please review.
✅ Project coverage is 77.95%. Comparing base (58d8571) to head (5243f37).
⚠️ Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
e2e/announcement-banner.spec.js	0.00%	66 Missing ⚠️
playwright.config.js	0.00%	14 Missing ⚠️
src/generators/web/utils/generate.mjs	0.00%	7 Missing ⚠️
src/generators/web/utils/config.mjs	0.00%	5 Missing ⚠️
src/generators/web/utils/processing.mjs	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #617      +/-   ##
==========================================
- Coverage   78.44%   77.95%   -0.49%     
==========================================
  Files         157      159       +2     
  Lines       13967    14055      +88     
  Branches     1152     1152              
==========================================
+ Hits        10956    10957       +1     
- Misses       3006     3093      +87     
  Partials        5        5

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

github-actions · 2026-02-20T19:58:54Z

`web` Generator

File	Base	Head	Diff
`styles.css`	137.49 KB	139.42 KB	+1.93 KB (+1.40%)
`addons.html`	262.76 KB	262.77 KB	+11.00 B (+0.00%)
`assert.html`	330.20 KB	330.21 KB	+11.00 B (+0.00%)
`async_context.html`	187.77 KB	187.78 KB	+11.00 B (+0.01%)
`async_hooks.html`	159.91 KB	159.92 KB	+11.00 B (+0.01%)
`buffer.html`	908.43 KB	908.44 KB	+11.00 B (+0.00%)
`child_process.html`	381.89 KB	381.91 KB	+11.00 B (+0.00%)
`cli.html`	501.86 KB	501.87 KB	+11.00 B (+0.00%)
`cluster.html`	196.50 KB	196.51 KB	+11.00 B (+0.01%)
`console.html`	146.97 KB	146.98 KB	+11.00 B (+0.01%)
`crypto.html`	1.09 MB	1.09 MB	+11.00 B (+0.00%)
`debugger.html`	54.42 KB	54.43 KB	+11.00 B (+0.02%)
`deprecations.html`	505.55 KB	505.56 KB	+11.00 B (+0.00%)
`dgram.html`	194.56 KB	194.58 KB	+11.00 B (+0.01%)
`diagnostics_channel.html`	303.62 KB	303.63 KB	+11.00 B (+0.00%)
`dns.html`	296.01 KB	296.02 KB	+11.00 B (+0.00%)
`documentation.html`	38.24 KB	38.25 KB	+11.00 B (+0.03%)
`domain.html`	105.30 KB	105.31 KB	+11.00 B (+0.01%)
`embedding.html`	59.62 KB	59.63 KB	+11.00 B (+0.02%)
`environment_variables.html`	44.24 KB	44.25 KB	+11.00 B (+0.02%)
`errors.html`	461.85 KB	461.87 KB	+11.00 B (+0.00%)
`esm.html`	155.54 KB	155.55 KB	+11.00 B (+0.01%)
`events.html`	455.47 KB	455.48 KB	+11.00 B (+0.00%)
`ffi.html`	116.78 KB	116.79 KB	+11.00 B (+0.01%)
`fs.html`	1.43 MB	1.43 MB	+11.00 B (+0.00%)
`globals.html`	230.58 KB	230.59 KB	+11.00 B (+0.00%)
`http.html`	746.36 KB	746.37 KB	+11.00 B (+0.00%)
`http2.html`	768.79 KB	768.80 KB	+11.00 B (+0.00%)
`https.html`	150.55 KB	150.56 KB	+11.00 B (+0.01%)
`index.html`	36.48 KB	36.49 KB	+11.00 B (+0.03%)
`inspector.html`	171.58 KB	171.59 KB	+11.00 B (+0.01%)
`intl.html`	58.34 KB	58.35 KB	+11.00 B (+0.02%)
`module.html`	326.86 KB	326.87 KB	+11.00 B (+0.00%)
`modules.html`	178.85 KB	178.86 KB	+11.00 B (+0.01%)
`n-api.html`	807.45 KB	807.46 KB	+11.00 B (+0.00%)
`net.html`	382.49 KB	382.50 KB	+11.00 B (+0.00%)
`os.html`	142.93 KB	142.94 KB	+11.00 B (+0.01%)
`packages.html`	154.85 KB	154.86 KB	+11.00 B (+0.01%)
`path.html`	139.46 KB	139.47 KB	+11.00 B (+0.01%)
`perf_hooks.html`	381.69 KB	381.70 KB	+11.00 B (+0.00%)
`permissions.html`	55.84 KB	55.85 KB	+11.00 B (+0.02%)
`process.html`	676.41 KB	676.42 KB	+11.00 B (+0.00%)
`punycode.html`	63.39 KB	63.40 KB	+11.00 B (+0.02%)
`querystring.html`	64.05 KB	64.06 KB	+11.00 B (+0.02%)
`quic.html`	375.40 KB	375.41 KB	+11.00 B (+0.00%)
`readline.html`	252.37 KB	252.38 KB	+11.00 B (+0.00%)
`repl.html`	183.54 KB	183.55 KB	+11.00 B (+0.01%)
`report.html`	176.11 KB	176.13 KB	+11.00 B (+0.01%)
`single-executable-applications.html`	107.16 KB	107.17 KB	+11.00 B (+0.01%)
`sqlite.html`	284.68 KB	284.69 KB	+11.00 B (+0.00%)
`stream.html`	863.42 KB	863.43 KB	+11.00 B (+0.00%)
`stream_iter.html`	352.58 KB	352.59 KB	+11.00 B (+0.00%)
`string_decoder.html`	55.59 KB	55.60 KB	+11.00 B (+0.02%)
`synopsis.html`	42.87 KB	42.88 KB	+11.00 B (+0.03%)
`test.html`	783.85 KB	783.86 KB	+11.00 B (+0.00%)
`timers.html`	133.70 KB	133.71 KB	+11.00 B (+0.01%)
`tls.html`	373.99 KB	374.00 KB	+11.00 B (+0.00%)
`tracing.html`	84.36 KB	84.37 KB	+11.00 B (+0.01%)
`tty.html`	95.49 KB	95.50 KB	+11.00 B (+0.01%)
`typescript.html`	53.67 KB	53.68 KB	+11.00 B (+0.02%)
`url.html`	347.87 KB	347.88 KB	+11.00 B (+0.00%)
`util.html`	695.97 KB	695.98 KB	+11.00 B (+0.00%)
`v8.html`	339.30 KB	339.31 KB	+11.00 B (+0.00%)
`vm.html`	371.00 KB	371.01 KB	+11.00 B (+0.00%)
`wasi.html`	69.57 KB	69.58 KB	+11.00 B (+0.02%)
`webcrypto.html`	522.20 KB	522.21 KB	+11.00 B (+0.00%)
`webstreams.html`	357.40 KB	357.42 KB	+11.00 B (+0.00%)
`worker_threads.html`	370.80 KB	370.81 KB	+11.00 B (+0.00%)
`zlib.html`	290.44 KB	290.45 KB	+11.00 B (+0.00%)
`zlib_iter.html`	88.26 KB	88.27 KB	+11.00 B (+0.01%)

Copilot

Pull request overview

This PR implements an announcement banner component that fetches configuration from a remote JSON endpoint to display global and version-specific banners on the API documentation pages. The banners support date-based activation/deactivation and can include links to relevant resources.

Changes:

Added AnnouncementBanner component that asynchronously fetches and displays banners from a remote config
Implemented isBannerActive utility function to filter banners based on date ranges
Added versionMajor and remoteConfig fields to static data passed from server to client

Reviewed changes

Copilot reviewed 7 out of 9 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
`src/generators/web/index.mjs`	Adds remote config URL to web generator default configuration
`src/generators/web/types.d.ts`	Adds `remoteConfig` type definition for the web generator
`src/generators/web/utils/data.mjs`	Extracts version major and remote config URL from server config to client static data
`src/generators/web/constants.mjs`	Registers `AnnouncementBanner` component in JSX imports map
`src/generators/jsx-ast/utils/buildContent.mjs`	Adds `AnnouncementBanner` to document layout above navigation bar
`src/generators/web/ui/utils/banner.mjs`	Implements date range checking logic for banner activation
`src/generators/web/ui/utils/__tests__/banner.test.mjs`	Comprehensive tests for banner date range logic
`src/generators/web/ui/components/AnnouncementBanner/types.d.ts`	Type definitions for banner entries and remote config structure
`src/generators/web/ui/components/AnnouncementBanner/index.jsx`	Main component that fetches config and renders active banners

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-20T20:01:14Z

+    <div>
+      {banners.map(banner => (
+        <Banner key={banner.link} type={banner.type}>
+          {banner.link ? <a href={banner.link}>{banner.text}</a> : banner.text}


External URLs from the remote config are used directly in href attributes without validation. While React/Preact provides some protection against javascript: protocol URLs, there's still a potential security risk if the remote config source is compromised. Consider validating that banner.link uses an approved protocol (https://) or implementing an allowlist of acceptable domains to ensure only trusted URLs are rendered. This is especially important since the config is fetched from an external source.

@avivkeller @ovflowd what do you think? is this necessary? We don't do this on nodejs website

ovflowd · 2026-02-21T15:51:25Z

@araujogui please be aware this must 100% be a client-side only component. Since the value of this comes from being able to fetch this at page load, as docs are built only once for each version.

ovflowd · 2026-02-21T15:51:48Z

(this also means that this spec cannot ever change or needs to be forever retroactively compatible)

avivkeller · 2026-02-21T16:13:29Z

please be aware this must 100% be a client-side only component

It is

araujogui · 2026-02-21T16:40:11Z

@araujogui please be aware this must 100% be a client-side only component. Since the value of this comes from being able to fetch this at page load, as docs are built only once for each version.

uh, that also means we can't change the config url, so we should already create the config file on nodejs/node?

ovflowd · 2026-02-21T19:35:34Z

@araujogui please be aware this must 100% be a client-side only component. Since the value of this comes from being able to fetch this at page load, as docs are built only once for each version.

uh, that also means we can't change the config url, so we should already create the config file on nodejs/node?

Yeah... So we need to be very careful here 😓

araujogui · 2026-02-25T00:17:11Z

@araujogui please be aware this must 100% be a client-side only component. Since the value of this comes from being able to fetch this at page load, as docs are built only once for each version.

uh, that also means we can't change the config url, so we should already create the config file on nodejs/node?

Yeah... So we need to be very careful here 😓

We already have a site.json on website repo, having another config file on nodejs/node looks like duplication?

ovflowd · 2026-02-25T11:44:49Z

@araujogui please be aware this must 100% be a client-side only component. Since the value of this comes from being able to fetch this at page load, as docs are built only once for each version.

uh, that also means we can't change the config url, so we should already create the config file on nodejs/node?

Yeah... So we need to be very careful here 😓

We already have a site.json on website repo, having another config file on nodejs/node looks like duplication?

We can use site.json, but note that it is not publicly available, the link would either need to be through github.com/ghraw or we'd need to move the file to be publicly available.

araujogui · 2026-02-25T19:43:08Z

@araujogui please be aware this must 100% be a client-side only component. Since the value of this comes from being able to fetch this at page load, as docs are built only once for each version.

uh, that also means we can't change the config url, so we should already create the config file on nodejs/node?

Yeah... So we need to be very careful here 😓

We already have a site.json on website repo, having another config file on nodejs/node looks like duplication?

We can use site.json, but note that it is not publicly available, the link would either need to be through github.com/ghraw or we'd need to move the file to be publicly available.

I think github.com/ghraw is good enough

ovflowd · 2026-02-26T11:07:34Z

@araujogui please be aware this must 100% be a client-side only component. Since the value of this comes from being able to fetch this at page load, as docs are built only once for each version.

uh, that also means we can't change the config url, so we should already create the config file on nodejs/node?

Yeah... So we need to be very careful here 😓

We already have a site.json on website repo, having another config file on nodejs/node looks like duplication?

We can use site.json, but note that it is not publicly available, the link would either need to be through github.com/ghraw or we'd need to move the file to be publicly available.

I think github.com/ghraw is good enough

IDK about that...

MattIPv4 · 2026-02-26T11:11:15Z

I'd be fine with using github.com/ghraw at build time (like we do via nodevu on the site), but I don't think we should be reliant on hitting it client-side every time someone loads a page on the site, that feels like abuse of GitHub's service. Can we have a JSON file accessible via the site, or an API endpiont?

ovflowd · 2026-02-26T11:18:36Z

I'd be fine with using github.com/ghraw at build time (like we do via nodevu on the site), but I don't think we should be reliant on hitting it client-side every time someone loads a page on the site, that feels like abuse of GitHub's service. Can we have a JSON file accessible via the site, or an API endpiont?

We won't be loading this at build-time, cause it is supposed to be a client-side only, so it would hit indeed on every page load. I don't think github.com/ghraw has cache headers so it would not be good.

araujogui · 2026-02-26T13:18:20Z

I'd be fine with using github.com/ghraw at build time (like we do via nodevu on the site), but I don't think we should be reliant on hitting it client-side every time someone loads a page on the site, that feels like abuse of GitHub's service. Can we have a JSON file accessible via the site, or an API endpiont?

We won't be loading this at build-time, cause it is supposed to be a client-side only, so it would hit indeed on every page load. I don't think github.com/ghraw has cache headers so it would not be good.

Okay, maybe we could expose site.json in an endpoint of the website

ovflowd

Let's put a block on this for now as this needs to be done thoughtfully

araujogui requested a review from a team as a code owner February 20, 2026 19:56

Copilot AI review requested due to automatic review settings February 20, 2026 19:56

Copilot started reviewing on behalf of araujogui February 20, 2026 19:56 View session

vercel Bot deployed to Preview February 20, 2026 19:57 View deployment

Copilot AI reviewed Feb 20, 2026

View reviewed changes

avivkeller reviewed Feb 20, 2026

View reviewed changes

Comment thread src/generators/web/index.mjs Outdated

Comment thread src/generators/web/types.d.ts Outdated

Comment thread src/generators/web/ui/components/AnnouncementBanner/index.jsx Outdated

Comment thread src/generators/web/utils/data.mjs Outdated

vercel Bot deployed to Preview February 21, 2026 13:36 View deployment

avivkeller approved these changes Feb 21, 2026

View reviewed changes

Comment thread src/generators/jsx-ast/utils/buildContent.mjs Outdated

avivkeller reviewed Feb 21, 2026

View reviewed changes

Comment thread src/generators/web/index.mjs Outdated

vercel Bot deployed to Preview February 21, 2026 14:26 View deployment

araujogui added the blocked label Feb 21, 2026

ovflowd requested changes Mar 1, 2026

View reviewed changes

vercel Bot deployed to Preview March 12, 2026 22:29 View deployment

araujogui removed the blocked label Mar 12, 2026

araujogui requested a review from ovflowd March 12, 2026 22:30

araujogui added 26 commits April 14, 2026 17:21

refactor: split component files

ebc5431

test: fix test name

3a578c0

fix: review

85360ab

chore: remove testing library

1c024c1

refactor: remove type import

3a35079

refactor: inline type import

a4fe2e1

fix: remove duplicated banner

3315e5a

fix: web config

fd945cc

fix: simplify lazy

753aac1

fix: lazy loading

93eaac8

fix: add major version config

8d80dc1

refactor: nit

7a91653

refactor: remove unused type

b5d8230

refactor: assign promise

d523a9a

chore: revert package-lock.json

bf24092

chore: revert package-lock.json

bbf5c11

test: set up e2e test

f799ce9

test: create banner test

0b68e7d

ci: add e2e job

fa73da1

ci: build and serve before testing

8bab1b0

refactor: add missing curly braces

c78cedb

refactor: pass whole version object

153779b

chore: add todo issue link

0e58c96

refactor: inline version label

da0639c

refactor: restructure component

d102547

refactor: rename to remoteConfigUrl

5243f37

araujogui force-pushed the feat/banners branch from 4327c8a to 5243f37 Compare April 14, 2026 16:23

vercel Bot deployed to Preview April 14, 2026 16:24 View deployment

ovflowd merged commit 3d75c7a into main Apr 16, 2026
22 of 23 checks passed

ovflowd deleted the feat/banners branch April 16, 2026 11:10

Uh oh!

Conversation

araujogui commented Feb 20, 2026

Description

Validation

Related Issues

Check List

Uh oh!

vercel Bot commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions Bot commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

web Generator

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

araujogui Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ovflowd commented Feb 21, 2026

Uh oh!

ovflowd commented Feb 21, 2026

Uh oh!

avivkeller commented Feb 21, 2026

Uh oh!

araujogui commented Feb 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ovflowd commented Feb 21, 2026

Uh oh!

araujogui commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ovflowd commented Feb 25, 2026

Uh oh!

araujogui commented Feb 25, 2026

Uh oh!

ovflowd commented Feb 26, 2026

Uh oh!

MattIPv4 commented Feb 26, 2026

Uh oh!

ovflowd commented Feb 26, 2026

Uh oh!

araujogui commented Feb 26, 2026

Uh oh!

ovflowd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

vercel Bot commented Feb 20, 2026 •

edited

Loading

codecov Bot commented Feb 20, 2026 •

edited

Loading

github-actions Bot commented Feb 20, 2026 •

edited

Loading

`web` Generator

araujogui commented Feb 21, 2026 •

edited

Loading

araujogui commented Feb 25, 2026 •

edited

Loading