GeezerVison is showing github.com — doc: optimize HTML rendering · nodejs/node@dd054ca
File treeExpand file treeCollapse file tree Open diff view settings Expand file treeCollapse file tree Open diff view settings Collapse file Copy file name to clipboardExpand all lines: doc/api_assets/style.css +5Lines changed: 5 additions & 0 deletions | Original file line number | Diff line number | Diff line change |
|---|
@@ -372,6 +372,11 @@ dd + dt.pre { | 372 | 372 | #apicontent { | 373 | 373 | padding-top: 1rem; | 374 | 374 | } | | 375 | + | | 376 | +#apicontent section { | | 377 | + content-visibility: auto; | | 378 | + contain-intrinsic-size: 1px 5000px; | | 379 | +} | 375 | 380 |
| 376 | 381 | #apicontent .line { | 377 | 382 | width: calc(50% - 1rem); | |
Collapse file Copy file name to clipboardExpand all lines: tools/doc/allhtml.js +2-2Lines changed: 2 additions & 2 deletions | Original file line number | Diff line number | Diff line change |
|---|
@@ -36,8 +36,8 @@ for (const link of toc.match(/<a.*?>/g)) { | 36 | 36 | contents += data.slice(0, match.index) | 37 | 37 | .replace(/[\s\S]*?id="toc"[^>]*>\s*<\w+>.*?<\/\w+>\s*(<ul>\s*)?/, ''); | 38 | 38 |
| 39 | | - apicontent += data.slice(match.index + match[0].length) | 40 | | - .replace(/<!-- API END -->[\s\S]*/, '') | | 39 | + apicontent += '<section>' + data.slice(match.index + match[0].length) | | 40 | + .replace(/<!-- API END -->[\s\S]*/, '</section>') | 41 | 41 | .replace(/<a href="(\w[^#"]*)#/g, (match, href) => { | 42 | 42 | return htmlFiles.includes(href) ? '<a href="#' : match; | 43 | 43 | }) | |
Collapse file Copy file name to clipboardExpand all lines: tools/doc/html.js +13-1Lines changed: 13 additions & 1 deletion | Original file line number | Diff line number | Diff line change |
|---|
@@ -66,6 +66,18 @@ const gtocHTML = unified() | 66 | 66 | const templatePath = path.join(docPath, 'template.html'); | 67 | 67 | const template = fs.readFileSync(templatePath, 'utf8'); | 68 | 68 |
| | 69 | +function wrapSections(content) { | | 70 | + let firstTime = true; | | 71 | + return content.toString() | | 72 | + .replace(/<h2/g, (heading) => { | | 73 | + if (firstTime) { | | 74 | + firstTime = false; | | 75 | + return '<section>' + heading; | | 76 | + } | | 77 | + return '</section><section>' + heading; | | 78 | + }) + (firstTime ? '' : '</section>'); | | 79 | +} | | 80 | + | 69 | 81 | function toHTML({ input, content, filename, nodeVersion, versions }) { | 70 | 82 | filename = path.basename(filename, '.md'); | 71 | 83 |
| @@ -79,7 +91,7 @@ function toHTML({ input, content, filename, nodeVersion, versions }) { | 79 | 91 | .replace('__GTOC__', gtocHTML.replace( | 80 | 92 | `class="nav-${id}"`, `class="nav-${id} active"`)) | 81 | 93 | .replace('__EDIT_ON_GITHUB__', editOnGitHub(filename)) | 82 | | - .replace('__CONTENT__', content.toString()); | | 94 | + .replace('__CONTENT__', wrapSections(content)); | 83 | 95 |
| 84 | 96 | const docCreated = input.match( | 85 | 97 | /<!--\s*introduced_in\s*=\s*v([0-9]+)\.([0-9]+)\.[0-9]+\s*-->/); | |
|