Merge a932450 into 8ae4475

dotnet · Apr 10, 2023 · 503cf40 · 503cf40
2 parents 8ae4475 + a932450
commit 503cf40
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 49 deletions.
diff --git a/docs/docs/toc.yml b/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
diff --git a/samples/seed/articles/toc.yml b/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

diff --git a/templates/modern/src/toc.scss b/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;
+  }
 }
diff --git a/templates/modern/src/toc.ts b/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>`