chore: add index.html listing page to charts dev pages (#10009)

DiegoCardoso · web-flow · commit a521b1a8c3e3 · 2025-08-15T19:35:52.000+03:00
diff --git a/dev/charts/index.html b/dev/charts/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dev pages</title>
+    <script type="module" src="../common.js"></script>
+  </head>
+  <body>
+    <h1>Charts development pages</h1>
+
+    <ul id="listing"></ul>
+  </body>
+</html>
diff --git a/dev/index.html b/dev/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Dev pages</title>
     <script type="module" src="./common.js"></script>
diff --git a/dev/rollup.config.js b/dev/rollup.config.js
@@ -12,7 +12,13 @@ export default {
     nodeResolve(),
     html({
       flattenOutput: false, // Preserve "charts" folder
-      transformHtml: [(html) => appendStyles(html), (html) => generateListing(html)],
+      transformHtml: [
+        (html) => appendStyles(html),
+        (html, { htmlFileName }) => {
+          const folderPath = htmlFileName === 'charts/index.html' ? '/charts' : '';
+          return generateListing(html, `.${folderPath}`);
+        },
+      ],
       transformAsset: [
         async (content, filePath) => {
           if (filePath.endsWith('.css')) {
diff --git a/wds-utils.js b/wds-utils.js
@@ -24,18 +24,23 @@ export function appendStyles(html) {
 export function generateListing(html, dir, path) {
   if (html.includes('<ul id="listing">')) {
     // Add <base> to make index.html work when opening
-    // http://localhost:8000/dev without trailing slash
-    if (path && path.endsWith('/dev')) {
-      html = html.replace('<head>', '<head>\n<base href="dev/">');
+    // http://localhost:8000/dev or http://localhost:8000/dev/charts without trailing slash
+    const match = /\/(?<section>dev|charts)$/u.exec(path);
+    if (match) {
+      html = html.replace('<head>', `<head>\n<base href="${match.groups.section}/">`);
     }
 
     const listing = `
       <ul id="listing">
         ${fs
           .readdirSync(dir || '.')
           .filter((file) => file !== 'index.html')
-          .filter((file) => file.endsWith('.html'))
-          .map((file) => `<li><a href="${file}">${file}</a></li>`)
+          .filter((file) => file.endsWith('.html') || file === 'charts')
+          .map(
+            (file) => `<li>
+            <a href="${file}${file.endsWith('.html') ? '' : '/'}">${file}</a>
+          </li>`,
+          )
           .join('')}
       </ul>`;
 
diff --git a/web-dev-server.config.js b/web-dev-server.config.js
@@ -76,8 +76,13 @@ export default {
           body = appendStyles(body);
 
           // Index page listing
-          if (['/dev/index.html', '/dev', '/dev/'].includes(context.path)) {
-            body = generateListing(body, './dev', context.path);
+          const devPageMatch = /^\/dev(?:\/(?<section>charts))?(?:\/index\.html|\/)?$/u.exec(context.path);
+
+          if (devPageMatch) {
+            // If a group was captured, then it's in the /dev/charts path,
+            // otherwise it should list the pages under the /dev folder
+            const dir = devPageMatch.groups.section ? './dev/charts' : './dev';
+            body = generateListing(body, dir, context.path);
           }
 
           return { body };
