UNPKG

1.65 kBJavaScriptView Raw
1const shell = require('shelljs');
2const fs = require('fs');
3const path = require('path');
4
5const colors = ['purple', 'pink', 'orange', 'green', 'blue', 'red'];
6
7const generateRow = (package, index) => `
8 <a href="${path.join(package.name, 'index.html')}" class="package-row">
9 <span class="title is-${colors[index % colors.length]}">
10 ${package.name}
11 </span>
12 <span class="description">${package.description}</span>
13 </a>
14`;
15
16const generateHTML = packages => `
17 <!DOCTYPE html>
18 <html>
19 <head>
20 <meta charset="utf-8" />
21 <meta http-equiv="X-UA-Compatible" content="IE=edge">
22 <title>Storybooks</title>
23 <meta name="viewport" content="width=device-width, initial-scale=1">
24 <link rel="stylesheet" type="text/css" href="monorepo-index.css">
25 </head>
26 <body>
27 <img class="banner" src="storybook.svg" alt="Storybook"/>
28 <div class="content">
29 ${packages.map(generateRow).join('')}
30 </div>
31 </body>
32 </html>
33`;
34
35module.exports = function buildMonorepoIndex(
36 packages,
37 customHTMLGenerate,
38 outputDir
39) {
40 let index;
41
42 console.log('=> Building index.html for monorepo');
43
44 if (customHTMLGenerate) {
45 const fn = require(path.join(process.cwd(), customHTMLGenerate));
46
47 if (typeof fn === 'function') {
48 index = fn(packages, outputDir);
49 }
50 } else {
51 index = generateHTML(packages);
52
53 shell.cp(
54 path.join(__dirname, 'storybook.svg'),
55 path.join(outputDir, 'storybook.svg')
56 );
57 shell.cp(
58 path.join(__dirname, 'monorepo-index.css'),
59 path.join(outputDir, 'monorepo-index.css')
60 );
61 }
62
63 fs.writeFileSync(path.join(outputDir, 'index.html'), index);
64};