chore: Compile static html for bootstrapping styleguidist

SpareBank1 · Feb 19, 2018 · c35f706 · c35f706
1 parent 9da258e
commit c35f706
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 26 deletions.
diff --git a/bin/build-content.js b/bin/build-content.js
@@ -6,35 +6,38 @@ const marked = require('marked');
 const Handlebars = require('handlebars');
 
 const settings = require('../styleguide.content.js');
+const styleguidistSettings = require('../styleguide.config.js');
 
 const promisedMap = (arr, cb) => Promise.all(arr.map(cb));
 
 const resolveDir = dir => path.normalize(path.join(__dirname, '..', dir));
 
 require(resolveDir(settings.helpers));
 
+const mkdir = dir => promisify(mkdirp)(resolveDir(dir));
+
 const readFile = promisify(fs.readFile);
 const writeFile = promisify(fs.writeFile);
 
-const createReader = relDir => {
-    const absDir = resolveDir(relDir);
-    return fname => readFile(path.join(absDir, fname), 'utf8');
-};
+const dataFromFileInDirReader = dir => fname =>
+    readFile(path.join(dir, fname), 'utf8');
+
+const createReader = dir => dataFromFileInDirReader(resolveDir(dir));
+
+const dataToFileWriter = file => data =>
+    writeFile(file, data).then(() => console.log(`Wrote ${file}.`));
+
+const dataToFileInDirWriter = dir => fname =>
+    dataToFileWriter(path.join(dir, fname));
+
+const createWriter = relDir => dataToFileInDirWriter(resolveDir(relDir));
 
-const createWriter = relDir => {
-    const absDir = resolveDir(relDir);
-    return fname => {
-        const file = path.join(absDir, fname);
-        return data =>
-            writeFile(file, data).then(() => console.log(`Wrote ${file}.`));
-    };
-};
 
 const readFromBaseDir = createReader('.');
+
 const readFromContentDir = createReader(settings.contentDir);
-const writeToOutputDir = createWriter(settings.outputDir);
 
-const mkDir = dir => promisify(mkdirp)(resolveDir(dir));
+const writeToOutputDir = createWriter(settings.outputDir);
 
 const prerenderSections = sectionsDef => {
     const getTarget = source =>
@@ -62,6 +65,16 @@ const getTemplateCompiler = fname =>
         .then(template => Handlebars.compile(template))
         .then(compile => opts => Promise.resolve(compile(opts)));
 
+const getStyleguidistCompiler = (source, destination) => {
+    return readFile(resolveDir(source), 'utf8')
+        .then(template => Handlebars.compile(template))
+        .then(compile => opts =>
+            Promise.resolve(compile(opts)).then(
+                dataToFileWriter(resolveDir(destination)),
+            ),
+        );
+};
+
 const registerPartials = partialsDef =>
     promisedMap(Object.entries(partialsDef), ([key, fname]) =>
         readFromBaseDir(fname).then(partial =>
@@ -70,18 +83,29 @@ const registerPartials = partialsDef =>
     );
 
 Promise.all([
-    prerenderSections(settings.sections),
-    getTemplateCompiler(settings.template),
+        prerenderSections(settings.sections),
+    getTemplateCompiler(
+        settings.template
+    ),
+    getStyleguidistCompiler(
+        settings.styleguidistTemplate,
+        styleguidistSettings.template
+    ),
     registerPartials(settings.partials),
-    mkDir(settings.outputDir),
+    mkdir(settings.outputDir),
 ])
-    .then(([sections, compile]) =>
-        promisedMap(sections, section =>
-            compile({
+    .then(([sections, compile, compileStyleguidist]) =>
+        Promise.all([
+            promisedMap(sections, section => compile({
+                    ...settings.context,
+                    sections,
+                    section,
+                }).then(writeToOutputDir(`${section.target}.html`))
+            ),
+            compileStyleguidist({
                 ...settings.context,
                 sections,
-                section,
-            }).then(writeToOutputDir(`${section.target}.html`)),
-        ),
+            }),
+        ])
     )
     .catch(err => console.error(err));
diff --git a/src/templates/index.hbs → src/templates/styleguidist.hbs b/src/templates/index.hbs → src/templates/styleguidist.hbs
@@ -6,8 +6,16 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	</head>
 	<body>
-		{{ header }}
+    <nav>
+      <ul>
+        {{#each sections}}
+          <li>
+            <a href="{{this.target}}.html">{{this.name}}</a>
+          </li>
+        {{/each}}
+      </ul>
+    </nav>
 
 		<div id="app"></div>
 	</body>
-</html>
+</html>
diff --git a/styleguide.config.js b/styleguide.config.js
@@ -45,7 +45,7 @@ module.exports = {
             ],
         },
     },
-    template: 'src/templates/index.hbs',
+    template: 'src/styleguidist.html',
     sections: [
         {
             name: 'Komponenter',

diff --git a/styleguide.content.js b/styleguide.content.js
@@ -7,6 +7,7 @@ module.exports = {
         section: 'src/templates/section.hbs',
         sectionsToc: 'src/templates/sectionsToc.hbs',
     },
+    styleguidistTemplate: 'src/templates/styleguidist.hbs',
     context: {
         title: 'FFE',
     },