Skip to content
This repository was archived by the owner on May 14, 2025. It is now read-only.

Commit b4f2d09

Browse files
NiedziolkaMichalNiedziolkaMichal
authored
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
1 parent 60341bf commit b4f2d09

File tree

5 files changed

+294
-5
lines changed

5 files changed

+294
-5
lines changed

‎.bobconfigrc‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,7 @@
99
"examplesMediaDest": "./docs/media/",
1010
"fontsMediaDest": "./docs/media/fonts/",
1111
"metaGlob": "./live-examples/**/meta.json",
12-
"pagesDir": "./docs/pages/"
12+
"pagesDir": "./docs/pages/",
13+
"editorHeights": "./editor-heights.json",
14+
"heightData": "./docs/height-data.json"
1315
}

‎editor-heights.json‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
{
2+
"editors": [
3+
{
4+
"name": "css",
5+
"heights": [
6+
{
7+
"minFrameWidth": 0,
8+
"height": 675
9+
},
10+
{
11+
"minFrameWidth": 590,
12+
"height": 375
13+
}
14+
]
15+
},
16+
{
17+
"name": "js-taller",
18+
"heights": [
19+
{
20+
"minFrameWidth": 0,
21+
"height": 723
22+
},
23+
{
24+
"minFrameWidth": 590,
25+
"height": 654
26+
}
27+
]
28+
},
29+
{
30+
"name": "js-standard",
31+
"heights": [
32+
{
33+
"minFrameWidth": 0,
34+
"height": 513
35+
},
36+
{
37+
"minFrameWidth": 590,
38+
"height": 444
39+
}
40+
]
41+
},
42+
{
43+
"name": "js-smaller",
44+
"heights": [
45+
{
46+
"minFrameWidth": 0,
47+
"height": 433
48+
},
49+
{
50+
"minFrameWidth": 590,
51+
"height": 364
52+
}
53+
]
54+
},
55+
{
56+
"name": "wat-taller",
57+
"heights": [
58+
{
59+
"minFrameWidth": 0,
60+
"height": 686
61+
},
62+
{
63+
"minFrameWidth": 590,
64+
"height": 617
65+
}
66+
]
67+
},
68+
{
69+
"name": "wat-standard",
70+
"heights": [
71+
{
72+
"minFrameWidth": 0,
73+
"height": 476
74+
},
75+
{
76+
"minFrameWidth": 590,
77+
"height": 407
78+
}
79+
]
80+
},
81+
{
82+
"name": "wat-smaller",
83+
"heights": [
84+
{
85+
"minFrameWidth": 0,
86+
"height": 406
87+
},
88+
{
89+
"minFrameWidth": 590,
90+
"height": 337
91+
}
92+
]
93+
},
94+
{
95+
"name": "tabbed-taller",
96+
"heights": [
97+
{
98+
"minFrameWidth": 0,
99+
"height": 774
100+
},
101+
{
102+
"minFrameWidth": 590,
103+
"height": 630
104+
}
105+
]
106+
},
107+
{
108+
"name": "tabbed-standard",
109+
"heights": [
110+
{
111+
"minFrameWidth": 0,
112+
"height": 549
113+
},
114+
{
115+
"minFrameWidth": 590,
116+
"height": 420
117+
}
118+
]
119+
},
120+
{
121+
"name": "tabbed-shorter",
122+
"heights": [
123+
{
124+
"minFrameWidth": 0,
125+
"height": 487
126+
},
127+
{
128+
"minFrameWidth": 590,
129+
"height": 350
130+
}
131+
]
132+
}
133+
]
134+
}

‎lib/heightBuilder.js‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import fse from "fs-extra";
2+
import glob from "glob";
3+
4+
import getConfig from "./config.js";
5+
import { getJSPageHeight, getWatPageHeight } from "./processor.js";
6+
7+
const config = getConfig();
8+
9+
function getEditorHeights() {
10+
return fse.readJsonSync(config.editorHeights);
11+
}
12+
13+
/**
14+
* Converts content of meta.json to object containing path and editor name of every interactive example present in that file
15+
*
16+
* In case meta.json is missing required height property or it has unsupported value, exception is thrown
17+
* @param metaContent - Content of meta.json as an JS object
18+
*/
19+
function getPagesEditorNames(metaContent) {
20+
const pages = Object.values(metaContent.pages);
21+
const editorNames = {};
22+
23+
for (const page of pages) {
24+
const height = getEditorName(page);
25+
if (height !== undefined) {
26+
const path = getPagePath(page);
27+
editorNames[path] = height;
28+
}
29+
}
30+
return editorNames;
31+
}
32+
33+
function getPagePath(page) {
34+
return `pages/${page.type}/${page.fileName}`;
35+
}
36+
37+
/**
38+
* Returns editor name for a given page, based on its height
39+
* Every editor name must have a record in editor-heights.json
40+
* @param page - Object describing single interactive example
41+
* @return {String} - editor name
42+
*/
43+
function getEditorName(page) {
44+
switch (page.type) {
45+
case "css":
46+
return "css";
47+
case "tabbed":
48+
case "webapi-tabbed":
49+
switch (page.height) {
50+
case "tabbed-taller":
51+
case "tabbed-standard":
52+
case "tabbed-shorter":
53+
return page.height;
54+
default:
55+
throw new Error(
56+
`MDN-BOB: (heightBuilder.js) Invalid height property for ${page.fileName}`
57+
);
58+
}
59+
case "js": {
60+
const height = getJSPageHeight(page.exampleCode);
61+
switch (height) {
62+
case "taller":
63+
return "js-taller";
64+
case "":
65+
return "js-standard";
66+
case "shorter":
67+
return "js-smaller";
68+
default:
69+
throw new Error(
70+
`MDN-BOB: (heightBuilder.js) Height '${height}' calculated for JS example '${page.fileName}' is invalid`
71+
);
72+
}
73+
}
74+
case "wat": {
75+
const height = getWatPageHeight(page.watExampleCode);
76+
switch (height) {
77+
case "taller":
78+
return "wat-taller";
79+
case "standard":
80+
return "wat-standard";
81+
case "shorter":
82+
return "wat-smaller";
83+
default:
84+
throw new Error(
85+
`MDN-BOB: (heightBuilder.js) Height '${height}' calculated for WAT example '${page.fileName}' is invalid`
86+
);
87+
}
88+
}
89+
default:
90+
throw new Error(
91+
`MDN-BOB: (heightBuilder.js) Unsupported page type ${page.type}`
92+
);
93+
}
94+
}
95+
96+
/**
97+
* Builds height-data.json containing path and editor name of every interactive example in `examples` property,
98+
* together with content of editor-heights which contains name and the height of every editor type
99+
*/
100+
export default function buildHeightData() {
101+
const metaJSONArray = glob.sync(config.metaGlob, {});
102+
const heightData = {
103+
...getEditorHeights(),
104+
};
105+
heightData.examples = {};
106+
107+
for (const metaJson of metaJSONArray) {
108+
const file = fse.readJsonSync(metaJson);
109+
110+
const names = getPagesEditorNames(file);
111+
Object.assign(heightData.examples, names);
112+
}
113+
114+
const jsonData = JSON.stringify(heightData, null, 4);
115+
fse.outputFileSync(config.heightData, jsonData);
116+
}

‎lib/mdn-bob.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import webpack from "webpack";
66
import webpackConfig from "../webpack.config.js";
77
import getConfig from "./config.js";
88
import * as pageBuilder from "./pageBuilder.js";
9+
import buildHeightData from "./heightBuilder.js";
910
import * as utils from "./utils.js";
1011

1112
/**
@@ -80,6 +81,10 @@ async function init() {
8081
);
8182
}
8283

84+
console.info("MDN-BOB: Building height-data");
85+
buildHeightData();
86+
console.info("MDN-BOB: Height Data was successfully constructed");
87+
8388
console.info("MDN-BOB: Building pages....");
8489
console.log(await pageBuilder.buildPages());
8590

‎lib/processor.js‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -107,11 +107,23 @@ function getJSExampleHeightByLineCount(lineCount) {
107107
* @returns {String} jsExample - The example wrapped into code tag
108108
*/
109109
function preprocessJSExample(exampleCode) {
110-
const lineCount = (exampleCode.match(/\n/g) || []).length + 1;
111-
const height = getJSExampleHeightByLineCount(lineCount);
110+
const height = getHeightByLineCount(
111+
exampleCode,
112+
getJSExampleHeightByLineCount
113+
);
112114
return `<pre><code id="static-js" data-height="${height}">${exampleCode}</code></pre>`;
113115
}
114116

117+
/**
118+
* Returns BOB class name used for setting height for JavaScript interactive example present at provided path
119+
* @param {String} sourcePath - Path to JS example source code. For example: 'pages/tabbed/header.html'
120+
* @return {String} height - BOB class name used for setting height
121+
*/
122+
export function getJSPageHeight(sourcePath) {
123+
const exampleCode = fse.readFileSync(sourcePath, "utf8");
124+
return getHeightByLineCount(exampleCode, getJSExampleHeightByLineCount);
125+
}
126+
115127
/**
116128
* Returns the height of the example block based on the line count
117129
* @param {Number} lineCount - Count of lines in the source code
@@ -136,14 +148,34 @@ function getWatExampleHeightByLineCount(lineCount) {
136148
* @returns {String} jsExample - The examples wrapped into code tag
137149
*/
138150
function preprocessWatExample(watCode, jsCode) {
139-
const lineCount = (watCode.match(/\n/g) || []).length + 1;
140-
const height = getWatExampleHeightByLineCount(lineCount);
151+
const height = getHeightByLineCount(watCode, getWatExampleHeightByLineCount);
141152
return `
142153
<pre><code id="static-wat" data-height="${height}">${watCode}</code></pre>
143154
<pre><code id="static-js" data-height="${height}">${jsCode}</code></pre>
144155
`;
145156
}
146157

158+
/**
159+
* Returns BOB class name used for setting height for WAT interactive example present at provided path
160+
* @param {String} sourcePath - Path to WAT example source code. For example: 'pages/tabbed/header.html'
161+
* @return {Number} height - BOB class name used for setting height
162+
*/
163+
export function getWatPageHeight(watSrc) {
164+
const watCode = fse.readFileSync(watSrc, "utf8");
165+
return getHeightByLineCount(watCode, getWatExampleHeightByLineCount);
166+
}
167+
168+
/**
169+
* Counts amount of lines in provided source code, executes provided function with that amount as an argument and returns result of that function
170+
* @param {String} sourceCode
171+
* @param {Function} linesToHeightFunc - function accepting amount of lines as an argument and returning BOB class name used for setting height
172+
* @return {String} - BOB class name used for setting height
173+
*/
174+
function getHeightByLineCount(sourceCode, linesToHeightFunc) {
175+
const lineCount = (sourceCode.match(/\n/g) || []).length + 1;
176+
return linesToHeightFunc(lineCount);
177+
}
178+
147179
/**
148180
* Process JS example which has written in HTML.
149181
* @param {String} exampleCode - The example source code itself

0 commit comments

Comments
 (0)