Include height of the editors

.bobconfigrc

@@ -10,5 +10,6 @@
     "fontsMediaDest": "./docs/media/fonts/",
     "metaGlob": "./live-examples/**/meta.json",
     "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

@@ -6,77 +6,109 @@ 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 height of every interactive example present in that file
+ * 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, record is skipped
+ * 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 getPagesHeightData(metaContent) {
+function getPagesEditorNames(metaContent) {
   const pages = Object.values(metaContent.pages);
-  const heightData = {};
+  const editorNames = {};
 
   for (const page of pages) {
-    const height = getPageHeight(page);
+    const height = getEditorName(page);
     if (height !== undefined) {
       const path = getPagePath(page);
-      heightData[path] = height;
+      editorNames[path] = height;
     }
   }
-  return heightData;
+  return editorNames;
 }
 
 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
+ * 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|undefined} height - YARI class name used for setting height of interactive example
+ * @return {String} - editor name
  */
-function getPageHeight(page) {
-  if (page.height !== undefined) {
-    return page.height;
-  }
-  let jsHeight;
-
+function getEditorName(page) {
   switch (page.type) {
     case "css":
-      return "default"; // All examples have the same height
+      return "css";
     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);
+      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:
-      console.error(
+      throw new 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
+ * 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 = {};
+  const heightData = {
+    ...getEditorHeights(),
+  };
+  heightData.examples = {};
 
   for (const metaJson of metaJSONArray) {
     const file = fse.readJsonSync(metaJson);
 
-    const metaHeights = getPagesHeightData(file);
-    Object.assign(heightData, metaHeights);
+    const names = getPagesEditorNames(file);
+    Object.assign(heightData.examples, names);
   }
 
   const jsonData = JSON.stringify(heightData, null, 4);