fixup!

Author: avivkeller

src/generators/web/constants.mjs

@@ -49,6 +49,10 @@ export const JSX_IMPORTS = {
     name: 'AlertBox',
     source: '@node-core/ui-components/Common/AlertBox',
   },
+  Badge: {
+    name: 'Badge',
+    source: '@node-core/ui-components/Common/Badge',
+  },
   Blockquote: {
     name: 'Blockquote',
     source: '@node-core/ui-components/Common/Blockquote',

src/generators/web/utils/synthetic/404.mjs

@@ -18,7 +18,16 @@ export const buildNotFoundPage = () => {
             {
               type: 'text',
               value:
-                'The page you requested could not be found. Use the navigation to find the documentation you are looking for.',
+                'The page you requested could not be found. Use the navigation to find the documentation you are looking for, or return to the ',
+            },
+            {
+              type: 'link',
+              url: 'index.html',
+              children: [{ type: 'text', value: 'API index' }],
+            },
+            {
+              type: 'text',
+              value: '.',
             },
           ],
         },

src/generators/web/utils/synthetic/__tests__/404.test.mjs

@@ -24,6 +24,11 @@ describe('buildNotFoundPage', () => {
 
     assert.ok(paragraph, 'expected a paragraph node in the content tree');
     assert.match(paragraph.children[0].value, /could not be found/);
+
+    const link = paragraph.children.find(child => child.type === 'link');
+
+    assert.equal(link.url, 'index.html');
+    assert.equal(link.children[0].value, 'API index');
   });
 
   it('places the head heading at the start of the content tree', () => {

src/generators/web/utils/synthetic/__tests__/index.test.mjs

@@ -37,13 +37,34 @@ describe('buildStabilityOverview', () => {
     assert.equal(findChild(table, 'tbody').children.length, 2);
   });
 
-  it('formats the stability cell as `(index) <first sentence>`', () => {
+  it('formats the stability cell with a colored badge and first sentence', () => {
     const table = buildStabilityOverview([fakeHead('fs', 'fs', 1)]);
 
     const row = findChild(table, 'tbody').children[0];
     const stabilityCell = row.children[1];
+    const badge = stabilityCell.children[0];
 
-    assert.equal(stabilityCell.children[0].value, '(1) fs stable');
+    assert.equal(badge.name, 'Badge');
+    assert.deepEqual(
+      badge.attributes.map(({ name, value }) => [name, value]),
+      [
+        ['size', 'small'],
+        ['kind', 'warning'],
+        ['aria-label', 'Stability: 1'],
+      ]
+    );
+    assert.equal(badge.children[0].value, '1');
+    assert.equal(stabilityCell.children[1].value, ' fs stable');
+  });
+
+  it('uses a default badge for stable entries', () => {
+    const table = buildStabilityOverview([fakeHead('fs', 'fs', 2)]);
+
+    const row = findChild(table, 'tbody').children[0];
+    const badge = row.children[1].children[0];
+    const kind = badge.attributes.find(attr => attr.name === 'kind');
+
+    assert.equal(kind.value, 'default');
   });
 
   it('builds a relative link to the module HTML page', () => {

src/generators/web/utils/synthetic/index.mjs

@@ -3,6 +3,25 @@
 import { h as createElement } from 'hastscript';
 
 import { createSyntheticHead, wrapAsEntry } from './synthetic.mjs';
+import { createJSXElement } from '../../../jsx-ast/utils/ast.mjs';
+import { JSX_IMPORTS } from '../../constants.mjs';
+
+const STABILITY_BADGE_KINDS = [
+  'error',
+  'warning',
+  'default',
+  'info',
+  'neutral',
+  'neutral',
+];
+
+/**
+ * Maps a Node.js stability index to a UI badge kind.
+ *
+ * @param {string} index
+ */
+const getStabilityBadgeKind = index =>
+  STABILITY_BADGE_KINDS[parseInt(index, 10)] ?? 'neutral';
 
 /**
  * Builds the Stability Overview table from module heads that declare a
@@ -28,7 +47,13 @@ export const buildStabilityOverview = headEntries =>
           ),
           createElement(
             'td',
-            `(${stability.data.index}) ${stability.data.description.split('. ')[0]}`
+            createJSXElement(JSX_IMPORTS.Badge.name, {
+              size: 'small',
+              kind: getStabilityBadgeKind(stability.data.index),
+              'aria-label': `Stability: ${stability.data.index}`,
+              children: stability.data.index,
+            }),
+            ` ${stability.data.description.split('. ')[0]}`
           ),
         ])
       )