Add dynamic indexing of elements for raw demo page (#253)

castastrophe · mwcz · commit 006f2d1f6240 · 2018-12-03T13:46:13.000-05:00
* Add dynamic doc listing

* Remove index file from git project

* rename file and create post-new npm script

* --append

* remove index from npm start
diff --git a/.gitignore b/.gitignore
@@ -2,9 +2,12 @@
 node_modules
 tmp
 
+# Compiled index
+doc/index.html
+
 # Logs
 lerna-debug.log
-npm-debug.log
+npm-debug.log*
 
 # Local files
 *.local.umd.js
diff --git a/doc/index.html b/doc/index.html
diff --git a/doc/wrapper.html b/doc/wrapper.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+        <title>RH Elements</title>
+
+        <link href="../elements/rhelement/rhelement.min.css" rel="stylesheet">
+    </head>
+    <body unresolved>
+        <h1>Demos</h1>
+        <ul id="demos"><!-- Inject list --></ul>
+    </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,11 +9,13 @@
     "bootstrap": "lerna bootstrap --hoist",
     "postinstall": "npm run bootstrap",
     "test-suite-inject": "node scripts/test-suite-inject.js",
+    "doc-listing-inject": "node scripts/doc-listing-inject.js",
     "storybook": "start-storybook -c .storybook -p 9001 -s ./elements",
     "build-storybook": "build-storybook -c .storybook -o .storybook_out",
     "gh-pages-storybook": "storybook-to-ghpages",
     "deploy-storybook": "npm run build-storybook && npm run gh-pages-storybook",
-    "new": "cd elements && yo --no-insight --no-update-notifier rhelement && npm run test-suite-inject && npm run bootstrap"
+    "new": "cd elements && yo --no-insight --no-update-notifier rhelement && npm run post-new",
+    "post-new": "npm run test-suite-inject && npm run doc-listing-inject && npm run bootstrap"
   },
   "husky": {
     "hooks": {
diff --git a/scripts/doc-listing-inject.js b/scripts/doc-listing-inject.js
@@ -0,0 +1,36 @@
+const fs = require("fs");
+const path = require("path");
+
+const elementsDir = path.join(__dirname, "../elements");
+
+let elementNames = fs
+  .readdirSync(elementsDir)
+  .filter(file => fs.statSync(path.join(elementsDir, file)).isDirectory());
+
+// Remove rhelement core from listing
+elementNames = elementNames.filter(folder => folder !== "rhelement");
+
+// Remove themesets and sass helpers from the listings
+elementNames = elementNames.filter(
+  folder => !folder.includes("themeset") && !folder.includes("sass")
+);
+
+let markup = "";
+elementNames.forEach(
+  element =>
+    (markup += `\n\t\t\t\t\t<li><a href="../elements/${element}/demo">${element}</a></li>`)
+);
+
+const wrapper = path.join(__dirname, "../doc/wrapper.html");
+const index = path.join(__dirname, "../doc/index.html");
+
+// Read in the wrapper template
+fs.readFile(wrapper, (err, data) => {
+  if (err) throw err;
+  let content = data.toString();
+  content = content.replace("<!-- Inject list -->", markup + "\n\t\t\t\t");
+  // Output the updated index file
+  fs.writeFile(index, content, function(err) {
+    if (err) throw err;
+  });
+});
