refactor: review

Author: araujogui

src/generators/jsx-ast/utils/buildContent.mjs

@@ -287,7 +287,10 @@ export const createDocumentLayout = (
   remark
 ) =>
   createTree('root', [
-    createJSXElement(JSX_IMPORTS.AnnouncementBanner.name),
+    createJSXElement(JSX_IMPORTS.AnnouncementBanner.name, {
+      remoteConfig: getConfig('web').remoteConfig,
+      versionMajor: getConfig('web').version?.major ?? null,
+    }),
     createJSXElement(JSX_IMPORTS.NavBar.name),
     createJSXElement(JSX_IMPORTS.Article.name, {
       children: [

src/generators/web/index.mjs

@@ -35,7 +35,7 @@ export default {
       '#config/Logo': '@node-core/ui-components/Common/NodejsLogo',
     },
     remoteConfig:
-      'https://gist.githubusercontent.com/araujogui/8ea72ffaf574f58fca1482e764e8b5c8/raw/16af51e4efbf37da7b6aff9b7e5dd967d955aacf/api-docs.config.json',
+      'https://raw.githubusercontent.com/nodejs/nodejs.org/main/apps/site/site.json',
   },
 
   /**

src/generators/web/types.d.ts

@@ -5,7 +5,7 @@ export type Generator = GeneratorMetadata<
     templatePath: string;
     title: string;
     imports: Record<string, string>;
-    remoteConfig: string | null;
+    remoteConfig: string;
   },
   Generate<Array<JSXContent>, AsyncGenerator<{ html: string; css: string }>>
 >;

src/generators/web/ui/components/AnnouncementBanner/index.jsx

@@ -2,7 +2,6 @@ import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
 import Banner from '@node-core/ui-components/Common/Banner';
 import { useEffect, useState } from 'preact/hooks';
 
-import { STATIC_DATA } from '../../constants.mjs';
 import { isBannerActive } from '../../utils/banner.mjs';
 
 /** @import { BannerEntry, RemoteConfig } from './types.d.ts' */
@@ -11,13 +10,13 @@ import { isBannerActive } from '../../utils/banner.mjs';
  * Asynchronously fetches and displays announcement banners from the remote config.
  * Global banners are rendered above version-specific ones.
  * Non-blocking: silently ignores fetch/parse failures.
+ *
+ * @param {{ remoteConfig: string, versionMajor: number | null }} props
  */
-export default () => {
+export default ({ remoteConfig, versionMajor }) => {
   const [banners, setBanners] = useState(/** @type {BannerEntry[]} */ ([]));
 
   useEffect(() => {
-    const { remoteConfig, versionMajor } = STATIC_DATA;
-
     if (!remoteConfig) {
       return;
     }
@@ -40,9 +39,11 @@ export default () => {
           active.push(globalBanner);
         }
 
-        const versionBanner = config[`v${versionMajor}`]?.banner;
-        if (versionBanner && isBannerActive(versionBanner)) {
-          active.push(versionBanner);
+        if (versionMajor != null) {
+          const versionBanner = config[`v${versionMajor}`]?.banner;
+          if (versionBanner && isBannerActive(versionBanner)) {
+            active.push(versionBanner);
+          }
         }
 
         setBanners(active);
@@ -57,11 +58,17 @@ export default () => {
   }
 
   return (
-    <div>
+    <div role="region" aria-label="Announcements">
       {banners.map(banner => (
-        <Banner key={banner.link} type={banner.type}>
-          {banner.link ? <a href={banner.link}>{banner.text}</a> : banner.text}
-          {banner.link && <ArrowUpRightIcon />}
+        <Banner key={banner.text ?? banner.text} type={banner.type}>
+          {banner.link ? (
+            <a href={banner.link} target="_blank" rel="noopener noreferrer">
+              {banner.text}
+              <ArrowUpRightIcon />
+            </a>
+          ) : (
+            banner.text
+          )}
         </Banner>
       ))}
     </div>

src/generators/web/utils/data.mjs

@@ -32,8 +32,6 @@ export const createStaticData = () => {
     shikiDisplayNameMap,
     title: config.title,
     repository: config.repository,
-    versionMajor: config.version?.major ?? null,
-    remoteConfig: config.remoteConfig ?? null,
   };
 };