Adds height-data.json (#839)

* Apply border-radius in JS frame

* Add border around every type of example

* Adds height-data.json

* Add missing exports in processor.js

* Apply prettier on processor.js

* Include height of the editors

.bobconfigrc

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

editor-heights.json

@@ -0,0 +1,134 @@
+{
+  "editors": [
+    {
+      "name": "css",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 675
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 375
+        }
+      ]
+    },
+    {
+      "name": "js-taller",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 723
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 654
+        }
+      ]
+    },
+    {
+      "name": "js-standard",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 513
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 444
+        }
+      ]
+    },
+    {
+      "name": "js-smaller",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 433
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 364
+        }
+      ]
+    },
+    {
+      "name": "wat-taller",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 686
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 617
+        }
+      ]
+    },
+    {
+      "name": "wat-standard",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 476
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 407
+        }
+      ]
+    },
+    {
+      "name": "wat-smaller",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 406
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 337
+        }
+      ]
+    },
+    {
+      "name": "tabbed-taller",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 774
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 630
+        }
+      ]
+    },
+    {
+      "name": "tabbed-standard",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 549
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 420
+        }
+      ]
+    },
+    {
+      "name": "tabbed-shorter",
+      "heights": [
+        {
+          "minFrameWidth": 0,
+          "height": 487
+        },
+        {
+          "minFrameWidth": 590,
+          "height": 350
+        }
+      ]
+    }
+  ]
+}

lib/heightBuilder.js

@@ -0,0 +1,116 @@
+import fse from "fs-extra";
+import glob from "glob";
+
+import getConfig from "./config.js";
+import { getJSPageHeight, getWatPageHeight } from "./processor.js";
+
+const config = getConfig();
+
+function getEditorHeights() {
+  return fse.readJsonSync(config.editorHeights);
+}
+
+/**
+ * Converts content of meta.json to object containing path and editor name of every interactive example present in that file
+ *
+ * In case meta.json is missing required height property or it has unsupported value, exception is thrown
+ * @param metaContent - Content of meta.json as an JS object
+ */
+function getPagesEditorNames(metaContent) {
+  const pages = Object.values(metaContent.pages);
+  const editorNames = {};
+
+  for (const page of pages) {
+    const height = getEditorName(page);
+    if (height !== undefined) {
+      const path = getPagePath(page);
+      editorNames[path] = height;
+    }
+  }
+  return editorNames;
+}
+
+function getPagePath(page) {
+  return `pages/${page.type}/${page.fileName}`;
+}
+
+/**
+ * Returns editor name for a given page, based on its height
+ * Every editor name must have a record in editor-heights.json
+ * @param page - Object describing single interactive example
+ * @return {String} - editor name
+ */
+function getEditorName(page) {
+  switch (page.type) {
+    case "css":
+      return "css";
+    case "tabbed":
+    case "webapi-tabbed":
+      switch (page.height) {
+        case "tabbed-taller":
+        case "tabbed-standard":
+        case "tabbed-shorter":
+          return page.height;
+        default:
+          throw new Error(
+            `MDN-BOB: (heightBuilder.js) Invalid height property for ${page.fileName}`
+          );
+      }
+    case "js": {
+      const height = getJSPageHeight(page.exampleCode);
+      switch (height) {
+        case "taller":
+          return "js-taller";
+        case "":
+          return "js-standard";
+        case "shorter":
+          return "js-smaller";
+        default:
+          throw new Error(
+            `MDN-BOB: (heightBuilder.js) Height '${height}' calculated for JS example '${page.fileName}' is invalid`
+          );
+      }
+    }
+    case "wat": {
+      const height = getWatPageHeight(page.watExampleCode);
+      switch (height) {
+        case "taller":
+          return "wat-taller";
+        case "standard":
+          return "wat-standard";
+        case "shorter":
+          return "wat-smaller";
+        default:
+          throw new Error(
+            `MDN-BOB: (heightBuilder.js) Height '${height}' calculated for WAT example '${page.fileName}' is invalid`
+          );
+      }
+    }
+    default:
+      throw new Error(
+        `MDN-BOB: (heightBuilder.js) Unsupported page type ${page.type}`
+      );
+  }
+}
+
+/**
+ * Builds height-data.json containing path and editor name of every interactive example in `examples` property,
+ * together with content of editor-heights which contains name and the height of every editor type
+ */
+export default function buildHeightData() {
+  const metaJSONArray = glob.sync(config.metaGlob, {});
+  const heightData = {
+    ...getEditorHeights(),
+  };
+  heightData.examples = {};
+
+  for (const metaJson of metaJSONArray) {
+    const file = fse.readJsonSync(metaJson);
+
+    const names = getPagesEditorNames(file);
+    Object.assign(heightData.examples, names);
+  }
+
+  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";
 
 /**
@@ -80,6 +81,10 @@ async function init() {
       );
     }
 
+    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,23 @@ 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
+ */
+export 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 +148,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
+ */
+export 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