old_contents: const shell = require('shelljs');
  const fs = require('fs');
  const path = require('path');
  
  const colors = ['purple', 'pink', 'orange', 'green', 'blue', 'red'];
  
  function generateHTML(packages) {
    const packageRows = [...packages, ...packages, ...packages, ...packages].map(
      (package, index) => `
        <a href="${path.join(package.name, 'index.html')}" class="package-row">
          <span class="title is-${colors[index % colors.length]}">
            ${package.name}
          </span>
          <span class="description">${package.description}</span>
        </a>
      `
    );
    const index = `
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="monorepo-index.css">
      </head>
      <body>
        <img class="banner" src="storybook.svg" alt="Storybook"/>
        <div class="content">
          ${packageRows.join('')}
        </div>
      </body>
      </html>
    `;
  
    return index;
  }
  
  module.exports = function buildMonorepoIndex(
    packages,
    customHTMLGenerate,
    outputDir
  ) {
    let index;
  
    console.log(`=> Building index.html for monorepo`);
  
    if (customHTMLGenerate) {
      const fn = require(path.join(process.cwd(), customHTMLGenerate));
  
      if (typeof fn === 'function') {
        index = fn(packages, outputDir);
      }
    } else {
      index = generateHTML(packages);
  
      shell.cp(
        path.join(__dirname, 'storybook.svg'),
        path.join(outputDir, 'storybook.svg')
      );
      shell.cp(
        path.join(__dirname, 'monorepo-index.css'),
        path.join(outputDir, 'monorepo-index.css')
      );
    }
  
    fs.writeFileSync(path.join(outputDir, 'index.html'), index);
  };
  
new_contents: const shell = require('shelljs');
  const fs = require('fs');
  const path = require('path');
  
  const colors = ['purple', 'pink', 'orange', 'green', 'blue', 'red'];
  
  function generateHTML(packages) {
    const packageRows = packages.map(
      (package, index) => `
        <a href="${path.join(package.name, 'index.html')}" class="package-row">
          <span class="title is-${colors[index % colors.length]}">
            ${package.name}
          </span>
          <span class="description">${package.description}</span>
        </a>
      `
    );
    const index = `
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="monorepo-index.css">
      </head>
      <body>
        <img class="banner" src="storybook.svg" alt="Storybook"/>
        <div class="content">
          ${packageRows.join('')}
        </div>
      </body>
      </html>
    `;
  
    return index;
  }
  
  module.exports = function buildMonorepoIndex(
    packages,
    customHTMLGenerate,
    outputDir
  ) {
    let index;
  
    console.log(`=> Building index.html for monorepo`);
  
    if (customHTMLGenerate) {
      const fn = require(path.join(process.cwd(), customHTMLGenerate));
  
      if (typeof fn === 'function') {
        index = fn(packages, outputDir);
      }
    } else {
      index = generateHTML(packages);
  
      shell.cp(
        path.join(__dirname, 'storybook.svg'),
        path.join(outputDir, 'storybook.svg')
      );
      shell.cp(
        path.join(__dirname, 'monorepo-index.css'),
        path.join(outputDir, 'monorepo-index.css')
      );
    }
  
    fs.writeFileSync(path.join(outputDir, 'index.html'), index);
  };
  
subject: remove test code