Skip to content

Commit

Permalink
doc: optimize HTML rendering
Browse files Browse the repository at this point in the history
Defer rendering sections of docs until they are displayed on
the user's screen.

PR-URL: #37301
Reviewed-By: Darshan Sen <[email protected]>
Reviewed-By: James M Snell <[email protected]>
  • Loading branch information
aduh95 authored and targos committed May 1, 2021
1 parent 8b5e42e commit 2a3feff
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 3 deletions.
5 changes: 5 additions & 0 deletions doc/api_assets/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -372,6 +372,11 @@ dd + dt.pre {
#apicontent {
padding-top: 1rem;
}

#apicontent section {
content-visibility: auto;
contain-intrinsic-size: 1px 5000px;
}

#apicontent .line {
width: calc(50% - 1rem);
Expand Down
4 changes: 2 additions & 2 deletions tools/doc/allhtml.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ for (const link of toc.match(/<a.*?>/g)) {
contents += data.slice(0, match.index)
.replace(/[\s\S]*?id="toc"[^>]*>\s*<\w+>.*?<\/\w+>\s*(<ul>\s*)?/, '');

apicontent += data.slice(match.index + match[0].length)
.replace(/<!-- API END -->[\s\S]*/, '')
apicontent += '<section>' + data.slice(match.index + match[0].length)
.replace(/<!-- API END -->[\s\S]*/, '</section>')
.replace(/<a href="(\w[^#"]*)#/g, (match, href) => {
return htmlFiles.includes(href) ? '<a href="#' : match;
})
Expand Down
14 changes: 13 additions & 1 deletion tools/doc/html.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,18 @@ const gtocHTML = unified()
const templatePath = path.join(docPath, 'template.html');
const template = fs.readFileSync(templatePath, 'utf8');

function wrapSections(content) {
let firstTime = true;
return content.toString()
.replace(/<h2/g, (heading) => {
if (firstTime) {
firstTime = false;
return '<section>' + heading;
}
return '</section><section>' + heading;
}) + (firstTime ? '' : '</section>');
}

function toHTML({ input, content, filename, nodeVersion, versions }) {
filename = path.basename(filename, '.md');

Expand All @@ -79,7 +91,7 @@ function toHTML({ input, content, filename, nodeVersion, versions }) {
.replace('__GTOC__', gtocHTML.replace(
`class="nav-${id}"`, `class="nav-${id} active"`))
.replace('__EDIT_ON_GITHUB__', editOnGitHub(filename))
.replace('__CONTENT__', content.toString());
.replace('__CONTENT__', wrapSections(content));

const docCreated = input.match(
/<!--\s*introduced_in\s*=\s*v([0-9]+)\.([0-9]+)\.[0-9]+\s*-->/);
Expand Down

0 comments on commit 2a3feff

Please sign in to comment.