Document Module - Render Table Of Contents on server-side

modules/docs/src/Volo.Docs.Web/Markdown/MarkDigMarkdownConverter.cs

@@ -1,5 +1,6 @@
 using System.Text;
 using Markdig;
+using Markdig.Extensions.AutoIdentifiers;
 using Volo.Abp.DependencyInjection;
 using Volo.Docs.Markdown.Extensions;
 
@@ -12,6 +13,7 @@ public class MarkDigMarkdownConverter : IMarkdownConverter, ISingletonDependency
         public MarkDigMarkdownConverter()
         {
             _markdownPipeline = new MarkdownPipelineBuilder()
+              .UseAutoIdentifiers(AutoIdentifierOptions.GitHub)
               .UseAutoLinks()
               .UseBootstrap()
               .UseGridTables()

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml

@@ -39,7 +39,6 @@
     <abp-style-bundle name="@typeof(IndexModel).FullName">
         <abp-style type="@typeof(PrismjsStyleBundleContributor)"/>
         <abp-style type="@typeof(MalihuCustomScrollbarPluginStyleBundleContributor)"/>
-        <abp-style src="/Pages/Documents/Project/bootstrap-toc.css"/>
         <abp-style src="/Pages/Documents/Shared/Styles/vs.css"/>
         <abp-style src="/Pages/Documents/Project/index.css"/>
         @if (DocsUiOptions.Value.EnableEnlargeImage)
@@ -72,7 +71,6 @@
             <abp-script type="@typeof(PopperJsScriptBundleContributor)"/>
             <abp-script src="/client-proxies/docs-proxy.js"/>
             <abp-script src="/client-proxies/docs-common-proxy.js"/>
-            <abp-script src="/Pages/Documents/Project/bootstrap-toc.js"/>
             <abp-script src="/Pages/Documents/Shared/Scripts/vs.js"/>
             <abp-script src="/Pages/Documents/Project/index.js"/>
             @if (DocsUiOptions.Value.EnableEnlargeImage)
@@ -599,7 +597,8 @@
                         <h5 class="card-title">@L["InThisDocument"]</h5>
 
                         <div id="scroll-index" class="">
-                            <nav id="docs-sticky-index" class="navbar index-scroll">
+                            <nav id="toc" class="navbar index-scroll">
+                                    <partial name="/Pages/Documents/Project/TableOfContents.cshtml" model="Model.TocItems" />
                             </nav>
                             <div class="row">
                                 <div class="col p-0">

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml.cs

@@ -22,11 +22,12 @@
 using Volo.Docs.Common.Projects;
 using Volo.Docs.Documents;
 using Volo.Docs.Documents.Rendering;
+using Volo.Docs.GitHub.Documents.Version;
 using Volo.Docs.HtmlConverting;
+using Volo.Docs.Localization;
 using Volo.Docs.Models;
 using Volo.Docs.Projects;
-using Volo.Docs.GitHub.Documents.Version;
-using Volo.Docs.Localization;
+using Volo.Docs.TableOfContents;
 using Volo.Docs.Utils;
 
 namespace Volo.Docs.Pages.Documents.Project
@@ -75,6 +76,8 @@ public class IndexModel : AbpPageModel
 
         public string DocumentsUrlPrefix { get; set; }
 
+        public List<TocItem> TocItems { get; set; } = [];
+
         public bool ShowProjectsCombobox { get; set; }
 
         public bool ShowProjectsComboboxLabel { get; set; }
@@ -98,13 +101,15 @@ public class IndexModel : AbpPageModel
         public DocumentNavigationsDto DocumentNavigationsDto { get; private set; }
 
         private const int MaxDescriptionMetaTagLength = 200;
+        private const int TocLevelCount = 2;
         private readonly IDocumentAppService _documentAppService;
         private readonly IDocumentToHtmlConverterFactory _documentToHtmlConverterFactory;
         private readonly IProjectAppService _projectAppService;
         private readonly IWebDocumentSectionRenderer _webDocumentSectionRenderer;
         private readonly DocsUiOptions _uiOptions;
         private readonly IPermissionChecker _permissionChecker;
         private readonly IDocumentPdfAppService _documentPdfAppService;
+        private readonly ITocGeneratorService _tocGeneratorService;
 
         protected IDocsLinkGenerator DocsLinkGenerator => LazyServiceProvider.LazyGetRequiredService<IDocsLinkGenerator>();
 
@@ -117,7 +122,8 @@ public IndexModel(
             IOptions<DocsUiOptions> options,
             IWebDocumentSectionRenderer webDocumentSectionRenderer, 
             IPermissionChecker permissionChecker, 
-            IDocumentPdfAppService documentPdfAppService)
+            IDocumentPdfAppService documentPdfAppService,
+            ITocGeneratorService tocGeneratorService)
         {
             ObjectMapperContext = typeof(DocsWebModule);
 
@@ -128,6 +134,7 @@ public IndexModel(
             _permissionChecker = permissionChecker;
             _documentPdfAppService = documentPdfAppService;
             _uiOptions = options.Value;
+            _tocGeneratorService = tocGeneratorService;
 
             LocalizationResourceType = typeof(DocsResource);
         }
@@ -534,7 +541,14 @@ private async Task<bool> TrySetDocumentAsync()
                     DocumentLanguageCode = language;
                     DocumentNameWithExtension = Document.Name;
                     SetDocumentPageTitle();
+
+                    if (Document != null && !Document.Content.IsNullOrEmpty())
+                    {
+                        TocItems = _tocGeneratorService.GenerateTocItems(Document.Content, TocLevelCount);
+                    }
+
                     await ConvertDocumentContentToHtmlAsync();
+
                     return true;
                 }
                 catch (DocumentNotFoundException e)

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/TableOfContents.cshtml

@@ -0,0 +1,41 @@
+@using Volo.Docs.TableOfContents
+@model List<TocItem>
+@{
+    if (Model == null || Model.Count == 0)
+    {
+        return;
+    }
+}
+
+<ul class="nav nav-pills flex-column">
+    @foreach (var item in Model)
+    {
+        <li class="nav-item @(item.Children.Any() ? "toc-item-has-children" : "")">
+            <a class="nav-link" href="#@item.Heading.Id">@item.Heading.Text</a>
+
+            @if (item.Children.Any())
+            {
+                RenderChildrenRecursive(item.Children, 1);
+            }
+        </li>
+    }
+</ul>
+
+@{
+    void RenderChildrenRecursive(List<TocItem> children, int depth)
+    {
+        <ul class="nav nav-pills flex-column toc-depth-@depth">
+            @foreach (var child in children)
+            {
+                <li class="nav-item @(child.Children.Any() ? "toc-item-has-children" : "")">
+                    <a class="nav-link" href="#@child.Heading.Id">@child.Heading.Text</a>
+
+                    @if (child.Children.Any())
+                    {
+                        RenderChildrenRecursive(child.Children, depth + 1);
+                    }
+                </li>
+            }
+        </ul>
+    }
+}

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js

@@ -42,8 +42,6 @@ var doc = doc || {};
 
                 $ul.append($li);
                 $lazyLiElement.append($ul)
-
-                window.Toc.helpers.initNavEvent();
             },
             loadAll : function(lazyLiElements){
                 if(doc.lazyExpandableNavigation.isAllLoaded){

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.scss

@@ -71,4 +71,16 @@ body {
     background-color: transparent;
     border-color: transparent;
     font-size: 14px;
+}
+
+.toc-item-has-children > ul {
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+
+.toc-item-has-children.open > ul {
+    max-height: 1000px;
+    opacity: 1;
 }

modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js

@@ -1,8 +1,6 @@
 (function ($) {
     $(function () {
 
-        window.Toc.helpers.initNavEvent();
-
         var scrollTopBtn = $('.scroll-top-btn');
         var enoughHeight = $('.docs-sidebar-wrapper > .docs-top').height();
         var enoughHeightPlus = 500;
@@ -64,10 +62,10 @@
             handleCustomScrolls();
 
             var $myNav = $('#docs-sticky-index');
-            Toc.init($myNav);
 
             $('body').scrollspy({
                 target: $myNav,
+                offset:100
             });
 
             $('#docs-sticky-index a').on('click', function (event) {
@@ -86,6 +84,23 @@
                 }
             });
 
+            $("body").on('activate.bs.scrollspy', function (e) {
+                var $activeLink = $('.nav-link.active', $('#docs-sticky-index'));
+
+                var $activeLi = $activeLink.parent('li.nav-item');
+
+                $myNav.find('li.toc-item-has-children.open').each(function () {
+                    if ($(this).has($activeLi).length === 0) {
+                        $(this).removeClass('open');
+                    }
+                });
+
+                var $parentToOpen = $activeLi.closest('li.toc-item-has-children');
+                if ($parentToOpen.length > 0) {
+                    $parentToOpen.addClass('open');
+                }
+            });
+
             $('.btn-toggle').on('click', function () {
                 $('.toggle-row').slideToggle(400);
                 $(this).toggleClass('less');
@@ -99,6 +114,7 @@
                 $('.docs-tree-list').slideToggle();
             });
 
+            initMenuToggle();
             scrollToHashLink();
         });
 
@@ -125,26 +141,7 @@
         });
     }
 
-    window.Toc.helpers.createNavList = function () {
-        return $('<ul class="nav nav-pills flex-column"></ul>');
-    };
-
-    window.Toc.helpers.createChildNavList = function ($parent) {
-        var $childList = this.createNavList();
-        $parent.append($childList);
-        return $childList;
-    };
-
-    window.Toc.helpers.generateNavEl = function (anchor, text) {
-        var $a = $('<a class="nav-link"></a>');
-        $a.attr('href', '#' + anchor);
-        $a.text(text);
-        var $li = $('<li class="nav-item"></li>');
-        $li.append($a);
-        return $li;
-    };
-
-    window.Toc.helpers.initNavEvent = function () {
+     function initMenuToggle() {
         $('li:not(.last-link) a.tree-toggle').off('click');
         $('li:not(.last-link) span.plus-icon i.fa-chevron-right').off('click');
 

modules/docs/src/Volo.Docs.Web/TableOfContents/ITocGeneratorService.cs

@@ -0,0 +1,15 @@
+using System.Collections.Generic;
+using Volo.Abp.Application.Services;
+
+namespace Volo.Docs.TableOfContents;
+
+public interface ITocGeneratorService : IApplicationService
+{
+    List<TocHeading> GenerateTocHeadings(string markdownContent);
+
+    List<TocItem> GenerateTocItems(List<TocHeading> tocHeadings, int topLevel, int levelCount);
+
+    int GetTopLevel(List<TocHeading> tocHeadings);
+
+    List<TocItem> GenerateTocItems(string markdownContent, int levelCount, int? topLevel = null);
+}