chore(docs): add passing test results to documentation (#3541)

* chore(docs): add test results to documentation

* chore: apply suggestion

Co-authored-by: Tony Brix <tony@brix.ninja>

* fix: lint

---------

Co-authored-by: Tony Brix <tony@brix.ninja>

docs/INDEX.md

@@ -143,11 +143,7 @@ Marked offers [advanced configurations](/using_advanced) and [extensibility](/us
 
 We actively support the features of the following [Markdown flavors](https://github.com/commonmark/CommonMark/wiki/Markdown-Flavors).
 
-| Flavor                                                     | Version | Status                                                             |
-| :--------------------------------------------------------- | :------ | :----------------------------------------------------------------- |
-| The original markdown.pl                                   | --      |                                                                    |
-| [CommonMark](http://spec.commonmark.org/0.31.2/)             | 0.31    | [Work in progress](https://github.com/markedjs/marked/issues/1202) |
-| [GitHub Flavored Markdown](https://github.github.com/gfm/) | 0.29    | [Work in progress](https://github.com/markedjs/marked/issues/1202) |
+<!--{{test-results-table}}-->
 
 By supporting the above Markdown flavors, it's possible that Marked can help you use other flavors as well; however, these are not actively supported by the community.
 

docs/build.js

@@ -2,18 +2,41 @@
 import '../marked.min.js';
 import { promises } from 'fs';
 import { join, dirname, parse, format } from 'path';
+import { fileURLToPath } from 'url';
 import { markedHighlight } from 'marked-highlight';
 import { HighlightJS } from 'highlight.js';
 import titleize from 'titleize';
+import { getTests } from '@markedjs/testutils';
 
 const { mkdir, rm, readdir, stat, readFile, writeFile, copyFile } = promises;
 const { highlight, highlightAuto } = HighlightJS;
 const cwd = process.cwd();
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 const inputDir = join(cwd, 'docs');
 const outputDir = join(cwd, 'public');
 const templateFile = join(inputDir, '_document.html');
 const isUppercase = str => /[A-Z_]+/.test(str);
 const getTitle = str => str === 'INDEX' ? '' : titleize(str.replace(/_/g, ' ')) + ' - ';
+function convertTestsToTable(name, tests) {
+  let total = 0;
+  let passing = 0;
+  let table = '\n| Section | Passing | Percent |\n';
+  table += '|:--------|:--------|--------:|\n';
+  for (const [key, value] of Object.entries(tests)) {
+    total += value.total;
+    passing += value.pass;
+    table += ` | ${key}`;
+    table += ` | ${(value.pass)} of ${(value.total)}`;
+    table += ` | ${((value.pass) / value.total * 100).toFixed()}%`;
+    table += ' |\n';
+  }
+  return `\n<details name="markdown-spec">
+  <summary>${name} (${(passing / total * 100).toFixed()}%)</summary>
+  ${table}
+</details>\n`;
+}
+
 const markedInstance = new marked.Marked(markedHighlight((code, language) => {
   if (!language) {
     return highlightAuto(code).value;
@@ -31,7 +54,16 @@ async function init() {
   await copyFile(join(cwd, 'marked.min.js'), join(outputDir, 'marked.min.js'));
   const tmpl = await readFile(templateFile, 'utf8');
   console.log('Building markdown...');
-  await build(inputDir, tmpl);
+  const [original, commonmark, gfm] = await getTests([
+    join(__dirname, '../test/specs/original'),
+    join(__dirname, '../test/specs/commonmark'),
+    join(__dirname, '../test/specs/gfm'),
+  ]);
+  const testResultsTable =
+    convertTestsToTable('Markdown 1.0', original)
+    + convertTestsToTable('CommonMark 0.31', commonmark)
+    + convertTestsToTable('GitHub Flavored Markdown 0.29', gfm);
+  await build(inputDir, tmpl, testResultsTable);
   console.log('Build complete!');
 }
 
@@ -41,7 +73,7 @@ const ignoredFiles = [
   join(cwd, 'docs', '_document.html'),
 ];
 
-async function build(currentDir, tmpl) {
+async function build(currentDir, tmpl, testResultsTable) {
   const files = await readdir(currentDir);
   for (const file of files) {
     const filename = join(currentDir, file);
@@ -56,7 +88,9 @@ async function build(currentDir, tmpl) {
       let html = await readFile(filename, 'utf8');
       const parsed = parse(filename);
       if (parsed.ext === '.md' && isUppercase(parsed.name)) {
-        const mdHtml = markedInstance.parse(html);
+        const mdHtml = markedInstance.parse(
+          html.replace('<!--{{test-results-table}}-->', testResultsTable),
+        );
         html = tmpl
           .replace('<!--{{title}}-->', getTitle(parsed.name))
           .replace('<!--{{content}}-->', mdHtml);

docs/css/style.css

@@ -112,6 +112,15 @@ pre code {
     border-radius: 3px;
 }
 
+summary {
+    cursor: pointer;
+    padding: 3px 0px;
+}
+
+summary:hover {
+    color: #0366d6;
+}
+
 .div-copy {
     position: absolute;
     top: 0;