feat: support name only TOC node

docs/docs/toc.yml

@@ -1,50 +1,47 @@
 - name: Getting Started
-  expanded: true
-  items:
-  - name: Quick Start
-    href: ../index.md
+- name: Quick Start
+  href: ../index.md
+
 - name: Essentials
-  expanded: true
-  items:
-  - name: Markdown
-    href: markdown.md
-  - name: Table of Contents
-    href: table-of-contents.md
-  - name: Config
-    href: config.md
-  - name: Template
-    href: template.md
-  - name: .NET API Docs
-    href: dotnet-api-docs.md
-  - name: REST API Docs
-    href: rest-api-docs.md
-  - name: PDF
-    href: pdf.md
+- name: Markdown
+  href: markdown.md
+- name: Table of Contents
+  href: table-of-contents.md
+- name: Config
+  href: config.md
+- name: Template
+  href: template.md
+- name: .NET API Docs
+  href: dotnet-api-docs.md
+- name: REST API Docs
+  href: rest-api-docs.md
+- name: PDF
+  href: pdf.md
+
 - name: Advanced
-  items:
-  - name: User Manual
-    href: ../tutorial/docfx.exe_user_manual.md
-  - name: Links and Cross References
-    href: ../tutorial/links_and_cross_references.md
-  - name: Overwrite Files
-    href: ../tutorial/intro_overwrite_files.md
-  - name: Introduction to the DocFX Template System
-    href: ../tutorial/intro_template.md
-  - name: "How-to: Create A Custom Template"
-    href: ../tutorial/howto_create_custom_template.md
-  - name: Metadata YAML Format
-    href: ../spec/metadata_format_spec.md
-  - name: .NET YAML Format
-    href: dotnet-yaml-format.md
-  - name: Document Schema
-    href: ../spec/docfx_document_schema.md
-  - name: Schema Document Processor
-    href: ../spec/sdp_design_spec.md
+- name: User Manual
+  href: ../tutorial/docfx.exe_user_manual.md
+- name: Links and Cross References
+  href: ../tutorial/links_and_cross_references.md
+- name: Overwrite Files
+  href: ../tutorial/intro_overwrite_files.md
+- name: Introduction to the DocFX Template System
+  href: ../tutorial/intro_template.md
+- name: "How-to: Create A Custom Template"
+  href: ../tutorial/howto_create_custom_template.md
+- name: Metadata YAML Format
+  href: ../spec/metadata_format_spec.md
+- name: .NET YAML Format
+  href: dotnet-yaml-format.md
+- name: Document Schema
+  href: ../spec/docfx_document_schema.md
+- name: Schema Document Processor
+  href: ../spec/sdp_design_spec.md
+
 - name: Extensibility
-  items:
-  - name: Create a Custom Plugin
-    href: ../tutorial/howto_build_your_own_type_of_documentation_with_custom_plug-in.md
-  - name: Add a Custom Post Processor
-    href: ../tutorial/howto_add_a_customized_post_processor.md
-  - name: "Advanced: Support Hyperlink"
-    href: ../tutorial/advanced_support_hyperlink.md
+- name: Create a Custom Plugin
+  href: ../tutorial/howto_build_your_own_type_of_documentation_with_custom_plug-in.md
+- name: Add a Custom Post Processor
+  href: ../tutorial/howto_add_a_customized_post_processor.md
+- name: "Advanced: Support Hyperlink"
+  href: ../tutorial/advanced_support_hyperlink.md

samples/seed/articles/toc.yml

@@ -3,6 +3,7 @@
 - name: Engineering Docs
   expanded: true
   items:
+  - name: Section 1
   - name: Engineering Guidelines
     href: engineering_guidelines.md
   - name: CSharp Coding Standards

templates/modern/src/toc.scss

@@ -60,4 +60,10 @@ $expand-stub-width: .85rem;
   li.expanded > .expand-stub::before {
     transform: rotate(90deg);
   }
+
+  span.name-only {
+    font-weight: 600;
+    display: inline-block;
+    margin: .4rem 0;
+  }
 }

templates/modern/src/toc.ts

@@ -81,12 +81,16 @@ export async function renderToc(): Promise<TocNode[]> {
       const { href, name, items, expanded } = node
       const isLeaf = !items || items.length <= 0
 
+      const dom = href
+        ? html`<a class='${classMap({ 'nav-link': !activeNodes.includes(node) })}' href=${href}>${breakWordLit(name)}</a>`
+        : (isLeaf
+          ? html`<span class='text-body-tertiary name-only'>${breakWordLit(name)}</a>`
+          : html`<a class='${classMap({ 'nav-link': !activeNodes.includes(node) })}' href='#' @click=${toggleExpand}>${breakWordLit(name)}</a>`)
+
       return html`
         <li class=${classMap({ expanded })}>
           ${isLeaf ? null : html`<span class='expand-stub' @click=${toggleExpand}></span>`}
-          ${href
-            ? html`<a class='${classMap({ 'nav-link': !activeNodes.includes(node) })}' href=${href}>${breakWordLit(name)}</a>`
-            : html`<a class='${classMap({ 'nav-link': !activeNodes.includes(node) })}' href='#' @click=${toggleExpand}>${breakWordLit(name)}</a>`}
+          ${dom}
           ${isLeaf ? null : html`<ul>${renderTocNodes(items)}</ul>`}
         </li>`
 
@@ -117,8 +121,8 @@ function renderNextArticle(items: TocNode[], node: TocNode) {
     return
   }
 
-  const prevButton = prev ? html`<div class="prev"><span><i class='bi bi-chevron-left'></i> Previous</span> <a href="${prev.href}">${breakWordLit(prev.name)}</a></div>` : null
-  const nextButton = next ? html`<div class="next"><span>Next <i class='bi bi-chevron-right'></i></span> <a href="${next.href}">${breakWordLit(next.name)}</a></div>` : null
+  const prevButton = prev ? html`<div class="prev"><span><i class='bi bi-chevron-left'></i> Previous</span> <a href="${prev.href}" rel="prev">${breakWordLit(prev.name)}</a></div>` : null
+  const nextButton = next ? html`<div class="next"><span>Next <i class='bi bi-chevron-right'></i></span> <a href="${next.href}" rel="next">${breakWordLit(next.name)}</a></div>` : null
 
   render(html`${prevButton} ${nextButton}`, nextArticle)
 

test/docfx.Snapshot.Tests/SamplesTest.Seed/articles/toc.html.view.verified.json

@@ -12,6 +12,14 @@
     {
       "name": "Engineering Docs",
       "items": [
+        {
+          "name": "Section 1",
+          "topicHref": null,
+          "tocHref": null,
+          "level": 3.0,
+          "items": [],
+          "leaf": true
+        },
         {
           "name": "Engineering Guidelines",
           "href": "engineering_guidelines.html",

test/docfx.Snapshot.Tests/SamplesTest.Seed/articles/toc.json.view.verified.json

@@ -1,3 +1,3 @@
 {
-  "content": "{\"items\":[{\"name\":\"Getting Started\",\"href\":\"docfx_getting_started.html\",\"topicHref\":\"docfx_getting_started.html\"},{\"name\":\"Engineering Docs\",\"items\":[{\"name\":\"Engineering Guidelines\",\"href\":\"engineering_guidelines.html\",\"topicHref\":\"engineering_guidelines.html\"},{\"name\":\"CSharp Coding Standards\",\"href\":\"csharp_coding_standards.html\",\"topicHref\":\"csharp_coding_standards.html\"}],\"expanded\":true},{\"name\":\"Markdown\",\"href\":\"markdown.html\",\"topicHref\":\"markdown.html\"}]}"
+  "content": "{\"items\":[{\"name\":\"Getting Started\",\"href\":\"docfx_getting_started.html\",\"topicHref\":\"docfx_getting_started.html\"},{\"name\":\"Engineering Docs\",\"items\":[{\"name\":\"Section 1\"},{\"name\":\"Engineering Guidelines\",\"href\":\"engineering_guidelines.html\",\"topicHref\":\"engineering_guidelines.html\"},{\"name\":\"CSharp Coding Standards\",\"href\":\"csharp_coding_standards.html\",\"topicHref\":\"csharp_coding_standards.html\"}],\"expanded\":true},{\"name\":\"Markdown\",\"href\":\"markdown.html\",\"topicHref\":\"markdown.html\"}]}"
 }

test/docfx.Snapshot.Tests/SamplesTest.Seed/articles/toc.verified.json

@@ -8,6 +8,9 @@
     {
       "name": "Engineering Docs",
       "items": [
+        {
+          "name": "Section 1"
+        },
         {
           "name": "Engineering Guidelines",
           "href": "engineering_guidelines.html",

test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-csharp_coding_standards.html.verified.html

@@ -247,6 +247,11 @@ <h5 class="offcanvas-title" id="tocOffcanvasLabel">Table of Contents</h5>
           <ul><ul>
         <li class="  ">
 
+          <span class="text-body-tertiary name-only">Section 1</span>
+
+        </li>
+        <li class="  ">
+
           <a class=" nav-link " href="http://localhost:8089/articles/engineering_guidelines.html">Engineering Guidelines</a>
 
         </li>
@@ -469,7 +474,7 @@ <h4 id="parallel-tests">Parallel tests<a class="anchorjs-link " aria-label="Anch
           <a href="https://github.com/dotnet/docfx/blob/main/samples/seed/articles/csharp_coding_standards.md/#L1" class="edit-link">Edit this page</a>
         </div>
 
-        <div class="next-article d-print-none border-top" id="nextArticle"><div class="prev"><span><i class="bi bi-chevron-left"></i> Previous</span> <a href="http://localhost:8089/articles/engineering_guidelines.html">Engineering Guidelines</a></div> <div class="next"><span>Next <i class="bi bi-chevron-right"></i></span> <a href="http://localhost:8089/articles/markdown.html">Markdown</a></div></div>
+        <div class="next-article d-print-none border-top" id="nextArticle"><div class="prev"><span><i class="bi bi-chevron-left"></i> Previous</span> <a rel="prev" href="http://localhost:8089/articles/engineering_guidelines.html">Engineering Guidelines</a></div> <div class="next"><span>Next <i class="bi bi-chevron-right"></i></span> <a rel="next" href="http://localhost:8089/articles/markdown.html">Markdown</a></div></div>
 
       </div>
 

test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.html

@@ -247,6 +247,11 @@ <h5 class="offcanvas-title" id="tocOffcanvasLabel">Table of Contents</h5>
           <ul><ul>
         <li class="  ">
 
+          <span class="text-body-tertiary name-only">Section 1</span>
+
+        </li>
+        <li class="  ">
+
           <a class=" nav-link " href="http://localhost:8089/articles/engineering_guidelines.html">Engineering Guidelines</a>
 
         </li>
@@ -457,7 +462,7 @@ <h3 id="dependent-tabs">Dependent tabs<a class="anchorjs-link " aria-label="Anch
           <a href="https://github.com/dotnet/docfx/blob/main/samples/seed/articles/markdown.md/#L1" class="edit-link">Edit this page</a>
         </div>
 
-        <div class="next-article d-print-none border-top" id="nextArticle"><div class="prev"><span><i class="bi bi-chevron-left"></i> Previous</span> <a href="http://localhost:8089/articles/csharp_coding_standards.html">CSharp Coding Standards</a></div> </div>
+        <div class="next-article d-print-none border-top" id="nextArticle"><div class="prev"><span><i class="bi bi-chevron-left"></i> Previous</span> <a rel="prev" href="http://localhost:8089/articles/csharp_coding_standards.html">CSharp Coding Standards</a></div> </div>
 
       </div>
 

test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/index.html.verified.html

@@ -316,7 +316,7 @@ <h2 id="further-information-about-docfx">Further information about <code>docfx</
           <a href="https://github.com/dotnet/docfx/blob/main/samples/seed/index.md/#L1" class="edit-link">Edit this page</a>
         </div>
 
-        <div class="next-article d-print-none border-top" id="nextArticle"> <div class="next"><span>Next <i class="bi bi-chevron-right"></i></span> <a href="http://localhost:8089/articles/docfx_getting_started.html">Articles</a></div></div>
+        <div class="next-article d-print-none border-top" id="nextArticle"> <div class="next"><span>Next <i class="bi bi-chevron-right"></i></span> <a rel="next" href="http://localhost:8089/articles/docfx_getting_started.html">Articles</a></div></div>
 
       </div>