[Component Docs]: fix bad server listing

Now the component docs have some TS that gets compiled, the docs server
was listing out tsconfig and build files when it was supposed to only
list component directories. This fixes that and also tidies up the list
of links by removing underscores - a quick drive by fix to make it nicer
to look at!

Change-Id: Id9f05894a235f376cfd8a7ea98c5bf179c006869
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2560945
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
diff --git a/scripts/component_server/server.js b/scripts/component_server/server.js
index cfe96e1..ae46054 100644
--- a/scripts/component_server/server.js
+++ b/scripts/component_server/server.js
@@ -66,14 +66,22 @@
       <meta name="viewport" content="width=device-width" />
       <title>DevTools components</title>
       <style>
-        a { text-transform: capitalize; }
+        a:link, a:visited {
+          color: blue;
+          text-transform: capitalize;
+          text-decoration: none;
+        }
+        a:hover {
+          text-decoration: underline;
+        }
       </style>
     </head>
     <body>
       <h1>DevTools components</h1>
       <ul>
         ${componentNames.map(name => {
-          return `<li><a href='/${name}'>${name}</a></li>`;
+          const niceName = name.replace(/_/g, ' ');
+          return `<li><a href='/${name}'>${niceName}</a></li>`;
         }).join('\n')}
       </ul>
     </body>
@@ -141,7 +149,11 @@
 
   if (filePath === '/' || filePath === '/index.html') {
     const components = await fs.promises.readdir(path.join(devtoolsFrontendFolder, 'component_docs'));
-    const html = createServerIndexFile(components);
+    const html = createServerIndexFile(components.filter(filePath => {
+      const stats = fs.lstatSync(path.join(devtoolsFrontendFolder, 'component_docs', filePath));
+      // Filter out some build config files (tsconfig, d.ts, etc), and just list the directories.
+      return stats.isDirectory();
+    }));
     respondWithHtml(response, html);
   } else if (path.extname(filePath) === '') {
     // This means it's a component path like /breadcrumbs.