docs: Add new tableOfContent script (#6667)

Author: huguestennier

docs/scripts/index.js

@@ -1,7 +1,9 @@
 var breadcrumb = require("./breadcrumb")(hexo);
 var removeContent = require("./removeContent")(hexo);
 var replaceContent = require("./replaceContent")(hexo);
+var tableOfContent = require("./tableOfContent")(hexo);
 
 hexo.extend.helper.register("breadcrumb", breadcrumb, { async: true });
 hexo.extend.helper.register("removeContent", removeContent, { async: true });
 hexo.extend.helper.register("replaceContent", replaceContent, { async: true });
+hexo.extend.helper.register("tableOfContent", tableOfContent, { async: true });

docs/scripts/tableOfContent.js

@@ -0,0 +1,24 @@
+const { tocObj } = require('hexo-util');
+
+module.exports = function () {
+  return function tableOfContent(str, options = {}) {
+
+      options = Object.assign({
+        min_depth: 1,
+        max_depth: 6,
+      }, options);
+    
+      const data = tocObj(str, { min_depth: options.min_depth, max_depth: options.max_depth });
+
+    
+      if (!data.length) return '';
+    
+      let html = '';
+
+      data.forEach(item => {
+        html += `<li class="toc-list-level-${item.level}"><a href="#${item.id}">${item.text}</a></li>`
+      });
+
+      return `<ol class="toc-list">${html}</ol>`;
+  };
+};

docs/themes/v2/layout/page.ejs

@@ -1,11 +1,10 @@
 <% const isEnterpriseTheme = theme.tier === "enterprise" %>
-<% const pageContainsHeadings = page.content.includes("<h2") %>
 <% const tocPageTypes = page.type === "guide" || page.type === "blog" || page.type === "templates" || page.type === "tags" %>
 
-<% const showToc = pageContainsHeadings && tocPageTypes %>
-
 <% const formattedContent = removeContent(page.content) %>
 <% const tocContent = replaceContent(formattedContent) %>
+<% const pageHasHeading = /<h[1-6]\b[^>]*>/i.test(formattedContent); %>
+<% const showToc = tocPageTypes && pageHasHeading %>
 
 <div class="content-grid">
   <div class="content-markdown">
@@ -21,7 +20,7 @@
     <% if (showToc) { %>
       <div class="toc">
         <%- partial("component/text", {text: "In this article", tag: "h3", size: "Eyebrow"}) %>
-        <%- toc(tocContent, {max_depth: 3, list_number: false, class: "toc-list"}) %>
+        <%- tableOfContent(tocContent, {max_depth: 3}) %>
       </div>
     <% } %>
     <div class="toc-enterprise-cta">

docs/themes/v2/source/css/styles.css

@@ -1223,6 +1223,10 @@ ul {
   margin-top: 1em;
 }
 
+.toc-list-level-2~.toc-list-level-3 {
+  padding-left: 1em;
+}
+
 .toc-list-child {
   list-style: none;
   padding-left: 0.825em;