Adds height-data.json

.bobconfigrc

@@ -9,5 +9,6 @@
     "examplesMediaDest": "./docs/media/",
     "fontsMediaDest": "./docs/media/fonts/",
     "metaGlob": "./live-examples/**/meta.json",
-    "pagesDir": "./docs/pages/"
+    "pagesDir": "./docs/pages/",
+    "heightData": "./docs/height-data.json"
 }

lib/heightBuilder.js

@@ -0,0 +1,84 @@
+import fse from "fs-extra";
+import glob from "glob";
+
+import getConfig from "./config.js";
+import { getJSPageHeight, getWatPageHeight } from "./processor.js";
+
+const config = getConfig();
+
+/**
+ * Converts content of meta.json to object containing path and height of every interactive example present in that file
+ *
+ * In case meta.json is missing required height property or it has unsupported value, record is skipped
+ * @param metaContent - Content of meta.json as an JS object
+ */
+function getPagesHeightData(metaContent) {
+  const pages = Object.values(metaContent.pages);
+  const heightData = {};
+
+  for (const page of pages) {
+    const height = getPageHeight(page);
+    if (height !== undefined) {
+      const path = getPagePath(page);
+      heightData[path] = height;
+    }
+  }
+  return heightData;
+}
+
+function getPagePath(page) {
+  return `pages/${page.type}/${page.fileName}`;
+}
+
+/**
+ * Returns YARI class name used for setting height of interactive example provided as an argument in form of an object which can be found in meta.json files
+ * @param page - Object describing single interactive example
+ * @return {String|undefined} height - YARI class name used for setting height of interactive example
+ */
+function getPageHeight(page) {
+  if (page.height !== undefined) {
+    return page.height;
+  }
+  let jsHeight;
+
+  switch (page.type) {
+    case "css":
+      return "default"; // All examples have the same height
+    case "tabbed":
+    case "webapi-tabbed":
+      console.error(
+        `MDN-BOB: (heightBuilder.js) Missing height property for ${page.fileName}`
+      );
+      return undefined;
+    case "js":
+      // Yari expects those values for JS editor: "shorter", "default", "taller"
+      jsHeight = getJSPageHeight(page.exampleCode);
+      return jsHeight === "" ? "default" : jsHeight;
+    case "wat":
+      // Yari expects those values for WAT editor: "tabbed-shorter", "tabbed-standard", "tabbed-taller"
+      return "tabbed-" + getWatPageHeight(page.watExampleCode);
+    default:
+      console.error(
+        `MDN-BOB: (heightBuilder.js) Unsupported page type ${page.type}`
+      );
+      return undefined;
+  }
+}
+
+/**
+ * Builds height-data.json containing object of path and height of every interactive example
+ */
+export default function buildHeightData() {
+  const metaJSONArray = glob.sync(config.metaGlob, {});
+  const heightData = {};
+
+  for (const metaJson of metaJSONArray) {
+    const file = fse.readJsonSync(metaJson);
+
+    const metaHeights = getPagesHeightData(file);
+    Object.assign(heightData, metaHeights);
+  }
+
+  const jsonData = JSON.stringify(heightData, null, 4);
+  fse.outputFileSync(config.heightData, jsonData);
+}

lib/mdn-bob.js

@@ -6,6 +6,7 @@ import webpack from "webpack";
 import webpackConfig from "../webpack.config.js";
 import getConfig from "./config.js";
 import * as pageBuilder from "./pageBuilder.js";
+import buildHeightData from "./heightBuilder.js";
 import * as utils from "./utils.js";
 
 function doWebpack() {
@@ -48,6 +49,10 @@ async function init() {
     console.info("MDN-BOB: Running Webpack...");
     await doWebpack();
 
+    console.info("MDN-BOB: Building height-data");
+    buildHeightData();
+    console.info("MDN-BOB: Height Data was successfully constructed");
+
     console.info("MDN-BOB: Building pages....");
     console.log(await pageBuilder.buildPages());
 

lib/processor.js

@@ -107,11 +107,20 @@ function getJSExampleHeightByLineCount(lineCount) {
  * @returns {String} jsExample - The example wrapped into code tag
  */
 function preprocessJSExample(exampleCode) {
-  const lineCount = (exampleCode.match(/\n/g) || []).length + 1;
-  const height = getJSExampleHeightByLineCount(lineCount);
+  const height = getHeightByLineCount(exampleCode, getJSExampleHeightByLineCount);
   return `<pre><code id="static-js" data-height="${height}">${exampleCode}</code></pre>`;
 }
 
+/**
+ * Returns BOB class name used for setting height for JavaScript interactive example present at provided path
+ * @param {String} sourcePath - Path to JS example source code. For example: 'pages/tabbed/header.html'
+ * @return {String} height - BOB class name used for setting height
+ */
+function getJSPageHeight(sourcePath) {
+    const exampleCode = fse.readFileSync(sourcePath, 'utf8');
+    return getHeightByLineCount(exampleCode, getJSExampleHeightByLineCount);
+}
+
 /**
  * Returns the height of the example block based on the line count
  * @param {Number} lineCount - Count of lines in the source code
@@ -136,14 +145,34 @@ function getWatExampleHeightByLineCount(lineCount) {
  * @returns {String} jsExample - The examples wrapped into code tag
  */
 function preprocessWatExample(watCode, jsCode) {
-  const lineCount = (watCode.match(/\n/g) || []).length + 1;
-  const height = getWatExampleHeightByLineCount(lineCount);
+  const height = getHeightByLineCount(watCode, getWatExampleHeightByLineCount);
   return `
         <pre><code id="static-wat" data-height="${height}">${watCode}</code></pre>
         <pre><code id="static-js" data-height="${height}">${jsCode}</code></pre>
     `;
 }
 
+/**
+ * Returns BOB class name used for setting height for WAT interactive example present at provided path
+ * @param {String} sourcePath - Path to WAT example source code. For example: 'pages/tabbed/header.html'
+ * @return {Number} height - BOB class name used for setting height
+ */
+function getWatPageHeight(watSrc) {
+    const watCode = fse.readFileSync(watSrc, 'utf8');
+    return getHeightByLineCount(watCode, getWatExampleHeightByLineCount);
+}
+
+/**
+ * Counts amount of lines in provided source code, executes provided function with that amount as an argument and returns result of that function
+ * @param {String} sourceCode
+ * @param {Function} linesToHeightFunc - function accepting amount of lines as an argument and returning BOB class name used for setting height
+ * @return {String} - BOB class name used for setting height
+ */
+function getHeightByLineCount(sourceCode, linesToHeightFunc) {
+    const lineCount = (sourceCode.match(/\n/g) || []).length + 1;
+    return linesToHeightFunc(lineCount);
+}
+
 /**
  * Process JS example which has written in HTML.
  * @param {String} exampleCode - The example source code itself