doc: wrap TOC in a <details> tag

Mattia Pontonio · ruyadorno · commit f99b38fedd62 · 2021-01-21T17:48:04.000-05:00
PR-URL: #36896 Fixes: #36885 Reviewed-By: James M Snell <jasnell@gmail.com> Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com>
diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
@@ -472,8 +472,8 @@ hr {
 margin: 0 0 1rem;
 }
 
-#toc h2 {
- margin: 1.5rem 0;
+#toc > ul {
+ margin-top: 1.5rem;
 }
 
 #toc p {
diff --git a/doc/template.html b/doc/template.html
@@ -55,10 +55,10 @@ <h1>Node.js __VERSION__ Documentation</h1>
 <hr>
 </header>
 
- <div id="toc">
- <h2>Table of Contents</h2>
+ <details id="toc" open>
+ <summary>Table of Contents</summary>
 __TOC__
- </div>
+ </details>
 
 <div id="apicontent">
 __CONTENT__
diff --git a/tools/doc/allhtml.js b/tools/doc/allhtml.js
@@ -31,10 +31,10 @@ for (const link of toc.match(/<a.*?>/g)) {
 const data = fs.readFileSync(source + '/' + href, 'utf8');
 
 // Split the doc.
- const match = /(<\/ul>\s*)?<\/div>\s*<div id="apicontent">/.exec(data);
+ const match = /(<\/ul>\s*)?<\/\w+>\s*<\w+ id="apicontent">/.exec(data);
 
 contents += data.slice(0, match.index)
- .replace(/[\s\S]*?<div id="toc">\s*<h2>.*?<\/h2>\s*(<ul>\s*)?/, '');
+ .replace(/[\s\S]*?id="toc"[^>]*>\s*<\w+>.*?<\/\w+>\s*(<ul>\s*)?/, '');
 
 apicontent += data.slice(match.index + match[0].length)
 .replace(/<!-- API END -->[\s\S]*/, '')
@@ -59,13 +59,13 @@ let all = toc.replace(/index\.html/g, 'all.html')
 all = all.replace(/<title>.*?\| /, '<title>');
 
 // Insert the combined table of contents.
-const tocStart = /<div id="toc">\s*<h2>.*?<\/h2>\s*/.exec(all);
+const tocStart = /<\w+ id="toc"[^>]*>\s*<\w+>.*?<\/\w+>\s*/.exec(all);
 all = all.slice(0, tocStart.index + tocStart[0].length) +
 '<ul>\n' + contents + '</ul>\n' +
 all.slice(tocStart.index + tocStart[0].length);
 
 // Replace apicontent with the concatenated set of apicontents from each source.
-const apiStart = /<div id="apicontent">\s*/.exec(all);
+const apiStart = /<\w+ id="apicontent">\s*/.exec(all);
 const apiEnd = all.lastIndexOf('<!-- API END -->');
 all = all.slice(0, apiStart.index + apiStart[0].length) +
 apicontent +

Original file line number	Diff line number	Diff line change
`@@ -472,8 +472,8 @@ hr {`
`472`	`472`	`margin:001rem;`
`473`	`473`	`}`
`474`	`474`
`475`		`-#toch2 {`
`476`		`-margin:1.5rem0;`
	`475`	`+#toc>ul {`
	`476`	`+margin-top:1.5rem;`
`477`	`477`	`}`
`478`	`478`
`479`	`479`	`#tocp {`
-Original file line number
+Diff line change
 constdata=fs.readFileSync(source+'/'+href,'utf8');
 // Split the doc.
 -constmatch=/(<\/ul>\s*)?<\/div>\s*<divid="apicontent">/.exec(data);
 +constmatch=/(<\/ul>\s*)?<\/\w+>\s*<\w+id="apicontent">/.exec(data);
 contents+=data.slice(0,match.index)
 -.replace(/[\s\S]*?<divid="toc">\s*<h2>.*?<\/h2>\s*(<ul>\s*)?/,'');
 +.replace(/[\s\S]*?id="toc"[^>]*>\s*<\w+>.*?<\/\w+>\s*(<ul>\s*)?/,'');
 apicontent+=data.slice(match.index+match[0].length)
 .replace(/<!--APIEND-->[\s\S]*/,'')
 all=all.replace(/<title>.*?\|/,'<title>');
 // Insert the combined table of contents.
 -consttocStart=/<divid="toc">\s*<h2>.*?<\/h2>\s*/.exec(all);
 +consttocStart=/<\w+id="toc"[^>]*>\s*<\w+>.*?<\/\w+>\s*/.exec(all);
 all=all.slice(0,tocStart.index+tocStart[0].length)+
 '<ul>\n'+contents+'</ul>\n'+
 all.slice(tocStart.index+tocStart[0].length);
 // Replace apicontent with the concatenated set of apicontents from each source.
 -constapiStart=/<divid="apicontent">\s*/.exec(all);
 +constapiStart=/<\w+id="apicontent">\s*/.exec(all);
 constapiEnd=all.lastIndexOf('<!-- API END -->');
 all=all.slice(0,apiStart.index+apiStart[0].length)+
 apicontent+