SONAR-11017 Add ToC component to markdowns

2 files changed, 36 insertions, 1 deletions

diff --git a/server/sonar-docs/src/pages/branches/index.md b/server/sonar-docs/src/pages/branches/index.md
index d248125a626..0bf242db08d 100644
--- a/server/sonar-docs/src/pages/branches/index.md
+++ b/server/sonar-docs/src/pages/branches/index.md
@@ -2,6 +2,8 @@
 title: Branches
 ---
 
+## Table of Contents
+
 <!-- sonarqube -->
 
 _Branch analysis is available as part of [Developer Edition](https://redirect.sonarsource.com/editions/developer.html)_
diff --git a/server/sonar-docs/src/templates/page.js b/server/sonar-docs/src/templates/page.js
index de57fc1a2a4..37edc9dbc77 100644
--- a/server/sonar-docs/src/templates/page.js
+++ b/server/sonar-docs/src/templates/page.js
@@ -22,7 +22,7 @@ import Helmet from 'react-helmet';
 
 export default ({ data }) => {
   const page = data.markdownRemark;
-  const htmlWithInclusions = cutSonarCloudContent(page.html).replace(
+  let htmlWithInclusions = cutSonarCloudContent(page.html).replace(
     /\<p\>@include (.*)\<\/p\>/,
     (_, path) => {
       const chunk = data.allMarkdownRemark.edges.find(edge => edge.node.fields.slug === path);
@@ -30,6 +30,14 @@ export default ({ data }) => {
     }
   );
 
+  if (
+    page.headings &&
+    page.headings.length > 0 &&
+    page.html.match(/<h[1-9]>Table Of Contents<\/h[1-9]>/i)
+  ) {
+    htmlWithInclusions = generateTableOfContents(htmlWithInclusions, page.headings);
+  }
+
   return (
     <div css={{ paddingTop: 24, paddingBottom: 24 }}>
       <Helmet title={page.frontmatter.title} />
@@ -53,6 +61,10 @@ export const query = graphql`
     }
     markdownRemark(fields: { slug: { eq: $slug } }) {
       html
+      headings {
+        depth
+        value
+      }
       frontmatter {
         title
       }
@@ -60,6 +72,27 @@ export const query = graphql`
   }
 `;
 
+function generateTableOfContents(content, headings) {
+  let html = '<h2>Table Of Contents</h2>';
+  let depth = headings[0].depth - 1;
+  for (let i = 1; i < headings.length; i++) {
+    while (headings[i].depth > depth) {
+      html += '<ul>';
+      depth++;
+    }
+    while (headings[i].depth < depth) {
+      html += '</ul>';
+      depth--;
+    }
+    html += `<li><a href="#header-${i}">${headings[i].value}</a></li>`;
+    content = content.replace(
+      new RegExp(`<h${headings[i].depth}>${headings[i].value}</h${headings[i].depth}>`, 'gi'),
+      `<h${headings[i].depth} id="header-${i}">${headings[i].value}</h${headings[i].depth}>`
+    );
+  }
+  return content.replace(/<h[1-9]>Table Of Contents<\/h[1-9]>/, html);
+}
+
 function cutSonarCloudContent(content) {
   const beginning = '<!-- sonarcloud -->';
   const ending = '<!-- /sonarcloud -->';