From dbd938549b16718f2e4cc2809746b8c44a191b1d Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Mon, 20 Jun 2022 14:36:00 +0200 Subject: [PATCH 1/4] tools: fix CJS/ESM toggle on small screens Fixes: https://github.com/nodejs/node/issues/43468 Co-authored-by: Moshe Atlow --- doc/api_assets/style.css | 2 ++ doc/template.html | 1 + tools/doc/html.mjs | 24 +++++++++++++++++++++++- 3 files changed, 26 insertions(+), 1 deletion(-) diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css index c567fbed1c23d4..8e7d74b0cbfed0 100644 --- a/doc/api_assets/style.css +++ b/doc/api_assets/style.css @@ -953,6 +953,8 @@ kbd { background-repeat: no-repeat; width: 142px; height: 20px; + display: block; + cursor: pointer; } .js-flavor-selector:checked { background-image: url(./js-flavor-esm.svg); diff --git a/doc/template.html b/doc/template.html index 86ba3c9581e004..a186e4fbded383 100644 --- a/doc/template.html +++ b/doc/template.html @@ -10,6 +10,7 @@ + __JS_FLAVORED_DYNAMIC_CSS__
diff --git a/tools/doc/html.mjs b/tools/doc/html.mjs index 1caffa7158c950..21e7fd6987a7f0 100644 --- a/tools/doc/html.mjs +++ b/tools/doc/html.mjs @@ -34,6 +34,8 @@ import { visit } from 'unist-util-visit'; import * as common from './common.mjs'; import * as typeParser from './type-parser.mjs'; +const dynamicSizes = Object.create(null); + const { highlight, getLanguage } = highlightJs; const docPath = new URL('../../doc/', import.meta.url); @@ -89,7 +91,21 @@ function processContent(content) { }) + (firstTime ? '' : ''); } +function buildCSSForFlavoredJS(dynamicSizes) { + if (dynamicSizes == null) return ''; + + return ``; +} + export function toHTML({ input, content, filename, nodeVersion, versions }) { + const dynamicSizesForThisFile = dynamicSizes[filename]; + filename = path.basename(filename, '.md'); const id = filename.replace(/\W+/g, '-'); @@ -99,6 +115,7 @@ export function toHTML({ input, content, filename, nodeVersion, versions }) { .replace('__SECTION__', content.section) .replace(/__VERSION__/g, nodeVersion) .replace(/__TOC__/g, content.toc) + .replace(/__JS_FLAVORED_DYNAMIC_CSS__/g, buildCSSForFlavoredJS(dynamicSizesForThisFile)) .replace(/__TOC_PICKER__/g, tocPicker(id, content)) .replace(/__GTOC_PICKER__/g, gtocPicker(id)) .replace(/__GTOC__/g, gtocHTML.replace( @@ -228,14 +245,19 @@ export function preprocessElements({ filename }) { const previousNode = parent.children[index - 1] || {}; const nextNode = parent.children[index + 1] || {}; + const charCountFirstTwoLines = Math.max(...node.value.split('\n', 2).map((str) => str.length)); + if (!isJSFlavorSnippet(previousNode) && isJSFlavorSnippet(nextNode) && nextNode.lang !== node.lang) { // Saving the highlight code as value to be added in the next node. node.value = highlighted; + node.charCountFirstTwoLines = charCountFirstTwoLines; } else if (isJSFlavorSnippet(previousNode) && previousNode.lang !== node.lang) { - node.value = '
' +
+            const actualCharCount = Math.max(charCountFirstTwoLines, previousNode.charCountFirstTwoLines);
+            (dynamicSizes[filename] ??= new Set()).add(actualCharCount);
+            node.value = `
` +
               '
Date: Wed, 22 Jun 2022 16:33:08 +0200
Subject: [PATCH 2/4] fixup! tools: fix CJS/ESM toggle on small screens

---
 tools/doc/allhtml.mjs               | 10 +++++++++-
 tools/doc/buildCSSForFlavoredJS.mjs | 11 +++++++++++
 tools/doc/html.mjs                  | 15 ++-------------
 3 files changed, 22 insertions(+), 14 deletions(-)
 create mode 100644 tools/doc/buildCSSForFlavoredJS.mjs

diff --git a/tools/doc/allhtml.mjs b/tools/doc/allhtml.mjs
index 50f145034ccb7a..fb0b719ac8a8a9 100644
--- a/tools/doc/allhtml.mjs
+++ b/tools/doc/allhtml.mjs
@@ -2,6 +2,7 @@
 // of the generated html files.
 
 import fs from 'fs';
+import buildCSSForFlavoredJS from './buildCSSForFlavoredJS.mjs';
 
 const source = new URL('../../out/doc/api/', import.meta.url);
 
@@ -90,7 +91,14 @@ all = all.slice(0, tocStart.index + tocStart[0].length) +
 // Replace apicontent with the concatenated set of apicontents from each source.
 const apiStart = /<\w+ id="apicontent">\s*/.exec(all);
 const apiEnd = all.lastIndexOf('');
-all = all.slice(0, apiStart.index + apiStart[0].length) +
+all = all.slice(0, apiStart.index + apiStart[0].length)
+    .replace(
+      '\n',
+      buildCSSForFlavoredJS(new Set(Array.from(
+        apicontent.matchAll(/(?<=
)/g),
+        (x) => Number(x[0])
+      ))) + '\n'
+    ) +
   apicontent +
   all.slice(apiEnd);
 
diff --git a/tools/doc/buildCSSForFlavoredJS.mjs b/tools/doc/buildCSSForFlavoredJS.mjs
new file mode 100644
index 00000000000000..262c7b141c5528
--- /dev/null
+++ b/tools/doc/buildCSSForFlavoredJS.mjs
@@ -0,0 +1,11 @@
+export default function buildCSSForFlavoredJS(dynamicSizes) {
+  if (dynamicSizes == null || dynamicSizes.length === 0) return '';
+
+  return ``;
+}
diff --git a/tools/doc/html.mjs b/tools/doc/html.mjs
index 21e7fd6987a7f0..373f5487a31d4b 100644
--- a/tools/doc/html.mjs
+++ b/tools/doc/html.mjs
@@ -33,6 +33,7 @@ import { visit } from 'unist-util-visit';
 
 import * as common from './common.mjs';
 import * as typeParser from './type-parser.mjs';
+import buildCSSForFlavoredJS from './buildCSSForFlavoredJS.mjs';
 
 const dynamicSizes = Object.create(null);
 
@@ -91,18 +92,6 @@ function processContent(content) {
     }) + (firstTime ? '' : '');
 }
 
-function buildCSSForFlavoredJS(dynamicSizes) {
-  if (dynamicSizes == null) return '';
-
-  return ``;
-}
-
 export function toHTML({ input, content, filename, nodeVersion, versions }) {
   const dynamicSizesForThisFile = dynamicSizes[filename];
 
@@ -115,7 +104,7 @@ export function toHTML({ input, content, filename, nodeVersion, versions }) {
                      .replace('__SECTION__', content.section)
                      .replace(/__VERSION__/g, nodeVersion)
                      .replace(/__TOC__/g, content.toc)
-                     .replace(/__JS_FLAVORED_DYNAMIC_CSS__/g, buildCSSForFlavoredJS(dynamicSizesForThisFile))
+                     .replace('__JS_FLAVORED_DYNAMIC_CSS__', buildCSSForFlavoredJS(dynamicSizesForThisFile))
                      .replace(/__TOC_PICKER__/g, tocPicker(id, content))
                      .replace(/__GTOC_PICKER__/g, gtocPicker(id))
                      .replace(/__GTOC__/g, gtocHTML.replace(

From e6adc23200de23009355aea3af7cdbce4d4f83c2 Mon Sep 17 00:00:00 2001
From: Antoine du Hamel 
Date: Thu, 23 Jun 2022 17:07:40 +0200
Subject: [PATCH 3/4] fixup! tools: fix CJS/ESM toggle on small screens

---
 tools/doc/buildCSSForFlavoredJS.mjs | 44 ++++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/tools/doc/buildCSSForFlavoredJS.mjs b/tools/doc/buildCSSForFlavoredJS.mjs
index 262c7b141c5528..6b355ab1760a64 100644
--- a/tools/doc/buildCSSForFlavoredJS.mjs
+++ b/tools/doc/buildCSSForFlavoredJS.mjs
@@ -1,8 +1,50 @@
+const CHAR_THRESHOLD = 68; // Around 68 characters, we have to take into
+//                            account the left column that appears on screen
+//                            wider than 1024px.
+
+const ESTIMATED_CHAR_WIDTH = 8; // If the root element font-size is 16px (default value), 1ch is 7.8025px.
+const TOGGLE_WIDTH = 142; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L954
+
+const PRE_MARGIN_LEFT = 16; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L516
+const PRE_MARGIN_RIGHT = 16; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L516
+const PRE_PADDING_LEFT = 16; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L513
+const PRE_PADDING_RIGHT = 16; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L513
+
+
+const COLUMN_RIGHT_MARGIN_LEFT_LARGE_SCREEN = 234; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L653
+const COLUMN_RIGHT_MARGIN_LEFT_SMALL_SCREEN = 0; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L906
+const COLUMN_RIGHT_MARGIN_RIGHT_LARGE_SCREEN = 0;
+const COLUMN_RIGHT_MARGIN_RIGHT_SMALL_SCREEN = 0;
+const COLUMN_RIGHT_PADDING_LEFT_LARGE_SCREEN = 24; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L655
+const COLUMN_RIGHT_PADDING_LEFT_SMALL_SCREEN = 8; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L907
+const COLUMN_RIGHT_PADDING_RIGHT_LARGE_SCREEN = 32; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L654
+const COLUMN_RIGHT_PADDING_RIGHT_SMALL_SCREEN = 8; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L908
+
+const getMarginLeft = (charCount) =>
+  (charCount > CHAR_THRESHOLD ?
+    COLUMN_RIGHT_MARGIN_LEFT_LARGE_SCREEN :
+    COLUMN_RIGHT_MARGIN_LEFT_SMALL_SCREEN) + PRE_MARGIN_LEFT;
+const getPaddingLeft = (charCount) =>
+  (charCount > CHAR_THRESHOLD ?
+    COLUMN_RIGHT_PADDING_LEFT_LARGE_SCREEN :
+    COLUMN_RIGHT_PADDING_LEFT_SMALL_SCREEN) + PRE_PADDING_LEFT;
+const getPaddingRight = (charCount) =>
+  (charCount > CHAR_THRESHOLD ?
+    COLUMN_RIGHT_PADDING_RIGHT_LARGE_SCREEN :
+    COLUMN_RIGHT_PADDING_RIGHT_SMALL_SCREEN) + PRE_PADDING_RIGHT;
+const getMarginRight = (charCount) =>
+  (charCount > CHAR_THRESHOLD ?
+    COLUMN_RIGHT_MARGIN_RIGHT_LARGE_SCREEN :
+    COLUMN_RIGHT_MARGIN_RIGHT_SMALL_SCREEN) + PRE_MARGIN_RIGHT;
+
+
 export default function buildCSSForFlavoredJS(dynamicSizes) {
   if (dynamicSizes == null || dynamicSizes.length === 0) return '';
 
   return `