feature/toc-body-side

news/changelog-1.4.md

@@ -2,6 +2,9 @@
 
 - ([#4820](https://github.com/quarto-dev/quarto-cli/issues/4820)): Add support for setting the Giscus light/dark themes.
 
+## Table of Contents - side and body
+- Add support for `body-right` and `body-left` layouts for Website Table of Contents ([#3473](https://github.com/quarto-dev/quarto-cli/issues/3473))
+
 ## Languages
 
 - Add Slovak translation (thanks @tom67)

src/format/html/format-html-bootstrap.ts

@@ -276,10 +276,19 @@ function bootstrapHtmlPostprocessor(
     }
 
     // move the toc if there is a sidebar
-    const toc = doc.querySelector('nav[role="doc-toc"]');
+    let toc = doc.querySelector('nav[role="doc-toc"]');
 
     const tocTarget = doc.getElementById("quarto-toc-target");
+
+    const useDoubleToc = (format.metadata[kTocLocation] as string)?.includes('-body') ?? false;
+
     if (toc && tocTarget) {
+      if(useDoubleToc) {
+        const clonedToc = toc.cloneNode(true);
+        toc.id = "TOC-body";
+        toc = clonedToc as Element;
+      }
+
       // activate selection behavior for this
       toc.classList.add("toc-active");
 
@@ -294,7 +303,8 @@ function bootstrapHtmlPostprocessor(
         }
       }
       // add nav-link class to the TOC links
-      const tocLinks = doc.querySelectorAll('nav[role="doc-toc"] > ul a');
+      const tocLinks = doc.querySelectorAll('nav#TOC[role="doc-toc"] > ul a');
+
       for (let i = 0; i < tocLinks.length; i++) {
         // Mark the toc links as nav-links
         const tocLink = tocLinks[i] as Element;

src/resources/editor/tools/vs-code.mjs

@@ -17253,7 +17253,9 @@ var require_yaml_intelligence_resources = __commonJS({
             enum: [
               "body",
               "left",
-              "right"
+              "right",
+              "left-body",
+              "right-body"
             ]
           },
           default: "right",
@@ -17262,7 +17264,10 @@ var require_yaml_intelligence_resources = __commonJS({
               "$html-doc"
             ]
           },
-          description: "Location for table of contents (`body`, `left`, or `right` (default)).\n"
+          description: {
+            short: "Location for table of contents (`body`, `left`, `right` (default), 'left-body', 'right-body').\n",
+            long: "Location for table of contents (`body`, `left`, `right` (default), 'left-body', 'right-body').\n`body` - Show the Table of Contents in the center body of the document.\n`left` - Show the Table of Contents in left margin of the document.\n`left` - Show the Table of Contents in right margin of the document.\n`left-body` - Show two Tables of Contents in both the center body and the left margin of the document.\n`right-body` - Show two Tables of Contents in both the center body and the right margin of the document.\n"
+          }
         },
         {
           name: "toc-title",
@@ -20702,7 +20707,10 @@ var require_yaml_intelligence_resources = __commonJS({
           long: "Include an automatically generated table of contents (or, in the case\nof <code>latex</code>, <code>context</code>, <code>docx</code>,\n<code>odt</code>, <code>opendocument</code>, <code>rst</code>, or\n<code>ms</code>, an instruction to create one) in the output document.\nThis option has no effect if <code>standalone</code> is\n<code>false</code>.\nNote that if you are producing a PDF via <code>ms</code>, the table\nof contents will appear at the beginning of the document, before the\ntitle. If you would prefer it to be at the end of the document, use the\noption <code>pdf-engine-opt: --no-toc-relocation</code>."
         },
         "Specify the number of section levels to include in the table of\ncontents. The default is 3",
-        "Location for table of contents (<code>body</code>, <code>left</code>,\nor <code>right</code> (default)).",
+        {
+          short: "Location for table of contents (<code>body</code>, <code>left</code>,\n<code>right</code> (default), \u2018left-body\u2019, \u2018right-body\u2019).",
+          long: "Location for table of contents (<code>body</code>, <code>left</code>,\n<code>right</code> (default), \u2018left-body\u2019, \u2018right-body\u2019).\n<code>body</code> - Show the Table of Contents in the center body of the\ndocument. <code>left</code> - Show the Table of Contents in left margin\nof the document. <code>left</code> - Show the Table of Contents in right\nmargin of the document. <code>left-body</code> - Show two Tables of\nContents in both the center body and the left margin of the document.\n<code>right-body</code> - Show two Tables of Contents in both the center\nbody and the right margin of the document."
+        },
         "The title used for the table of contents.",
         "Specifies the depth of items in the table of contents that should be\ndisplayed as expanded in HTML output. Use <code>true</code> to expand\nall or <code>false</code> to collapse all.",
         "Print a list of figures in the document.",

src/resources/editor/tools/yaml/yaml-intelligence-resources.json

@@ -10229,7 +10229,9 @@
         "enum": [
           "body",
           "left",
-          "right"
+          "right",
+          "left-body",
+          "right-body"
         ]
       },
       "default": "right",
@@ -10238,7 +10240,10 @@
           "$html-doc"
         ]
       },
-      "description": "Location for table of contents (`body`, `left`, or `right` (default)).\n"
+      "description": {
+        "short": "Location for table of contents (`body`, `left`, `right` (default), 'left-body', 'right-body').\n",
+        "long": "Location for table of contents (`body`, `left`, `right` (default), 'left-body', 'right-body').\n`body` - Show the Table of Contents in the center body of the document.\n`left` - Show the Table of Contents in left margin of the document.\n`left` - Show the Table of Contents in right margin of the document.\n`left-body` - Show two Tables of Contents in both the center body and the left margin of the document.\n`right-body` - Show two Tables of Contents in both the center body and the right margin of the document.\n"
+      }
     },
     {
       "name": "toc-title",
@@ -13678,7 +13683,10 @@
       "long": "Include an automatically generated table of contents (or, in the case\nof <code>latex</code>, <code>context</code>, <code>docx</code>,\n<code>odt</code>, <code>opendocument</code>, <code>rst</code>, or\n<code>ms</code>, an instruction to create one) in the output document.\nThis option has no effect if <code>standalone</code> is\n<code>false</code>.\nNote that if you are producing a PDF via <code>ms</code>, the table\nof contents will appear at the beginning of the document, before the\ntitle. If you would prefer it to be at the end of the document, use the\noption <code>pdf-engine-opt: --no-toc-relocation</code>."
     },
     "Specify the number of section levels to include in the table of\ncontents. The default is 3",
-    "Location for table of contents (<code>body</code>, <code>left</code>,\nor <code>right</code> (default)).",
+    {
+      "short": "Location for table of contents (<code>body</code>, <code>left</code>,\n<code>right</code> (default), ‘left-body’, ‘right-body’).",
+      "long": "Location for table of contents (<code>body</code>, <code>left</code>,\n<code>right</code> (default), ‘left-body’, ‘right-body’).\n<code>body</code> - Show the Table of Contents in the center body of the\ndocument. <code>left</code> - Show the Table of Contents in left margin\nof the document. <code>left</code> - Show the Table of Contents in right\nmargin of the document. <code>left-body</code> - Show two Tables of\nContents in both the center body and the left margin of the document.\n<code>right-body</code> - Show two Tables of Contents in both the center\nbody and the right margin of the document."
+    },
     "The title used for the table of contents.",
     "Specifies the depth of items in the table of contents that should be\ndisplayed as expanded in HTML output. Use <code>true</code> to expand\nall or <code>false</code> to collapse all.",
     "Print a list of figures in the document.",

src/resources/formats/html/templates/before-body-article.ejs

@@ -1,13 +1,18 @@
-<div id="quarto-content" class="page-columns page-rows-contents page-layout-<%- pageLayout %><%- tocLocation === "left" ? " toc-left" : ""%>">
+<%
+const navbarTocLeft = tocLocation === "left" || tocLocation === "left-body";
+const navbarTocRight = tocLocation === "right" || tocLocation === "right-body";
+%>
 
-<% if (tocLocation === "left") { %>
+<div id="quarto-content" class="page-columns page-rows-contents page-layout-<%- pageLayout %><%- (navbarTocLeft) ? " toc-left" : ""%>">
+
+<% if (navbarTocLeft) { %>
 <div id="quarto-sidebar-toc-left" class="sidebar toc-left">
   <div id="quarto-toc-target"></div>
 </div>
 <% } %>
 
 <div id="quarto-margin-sidebar" class="sidebar margin-sidebar">
-  <% if (tocLocation === "right") { %>
+  <% if (navbarTocRight) { %>
   <div id="quarto-toc-target"></div>
   <% } %>
 </div>

src/resources/projects/website/templates/nav-before-body.ejs

@@ -1,5 +1,7 @@
 <%
 const navbarToolsClass = (nav.navbar && nav.navbar.right) ? 'quarto-navbar-tools' : 'quarto-navbar-tools ms-auto';
+const navbarTocLeft = nav['toc-location'] === "left" || nav['toc-location'] === "left-body";
+const navbarTocRight = nav['toc-location'] === "right" || nav['toc-location'] === "right-body";
 %>
 
 
@@ -85,14 +87,14 @@ if (nav.layout === "article" || nav.layout === "full") {
 <div id="quarto-content" class="quarto-container<%- gridClasses %> page-layout-<%- nav.layout %><%- nav.navbar ? ' page-navbar': ''%>">
 
 <!-- sidebar -->
-<% if (nav.sidebar || nav['toc-location'] === "left") { %>
-  <% partial('sidebar.ejs', { sidebar: nav.sidebar, sidebarStyle: nav.sidebarStyle, navbar: !!nav.navbar, toc: nav['toc-location'] === "left", language: nav.language }) %>
+<% if (nav.sidebar || navbarTocLeft) { %>
+  <% partial('sidebar.ejs', { sidebar: nav.sidebar, sidebarStyle: nav.sidebarStyle, navbar: !!nav.navbar, toc: navbarTocLeft, language: nav.language }) %>
 <% } %>
 
 <!-- margin-sidebar -->
 <% if (nav.layout === "article" || nav.layout === "full") { %>
     <div id="quarto-margin-sidebar" class="sidebar margin-sidebar">
-      <% if (nav.hasToc && nav['toc-location'] === "right") { %>
+      <% if (nav.hasToc && navbarTocRight) { %>
         <div id="quarto-toc-target"></div>
       <% } %>
     </div>

src/resources/schema/document-toc.yml

@@ -28,13 +28,20 @@
 
 - name: toc-location
   schema:
-    enum: ["body", "left", "right"]
+    enum: ["body", "left", "right", "left-body", "right-body"]
   default: "right"
   tags:
     formats: [$html-doc]
-  description: |
-    Location for table of contents (`body`, `left`, or `right` (default)).
-
+  description:
+    short: |
+      Location for table of contents (`body`, `left`, `right` (default), 'left-body', 'right-body').
+    long: |
+      Location for table of contents (`body`, `left`, `right` (default), 'left-body', 'right-body').
+      `body` - Show the Table of Contents in the center body of the document.
+      `left` - Show the Table of Contents in left margin of the document.
+      `left` - Show the Table of Contents in right margin of the document.
+      `left-body` - Show two Tables of Contents in both the center body and the left margin of the document.
+      `right-body` - Show two Tables of Contents in both the center body and the right margin of the document.
 - name: toc-title
   schema: string
   tags:

tests/docs/smoke-all/issues/3473-toc-side-body/.gitignore

@@ -0,0 +1,2 @@
+*.html
+*_files/

tests/docs/smoke-all/issues/3473-toc-side-body/body.qmd

@@ -0,0 +1,66 @@
+---
+title: 3473-toc-side-body
+format:
+  html:
+    toc: true
+    toc-location: body
+    toc-title: Contents
+    toc-expand: 5
+    toc-depth: 4
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        -
+          - "nav#TOC"
+        -
+          - "nav#TOC.toc-active"
+          - "nav#TOC-body"
+---
+
+# Section 1
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+
+# Section 2
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+
+## Section 2.1
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+
+### Section 2.1.1
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+
+#### Section 2.1.1.1
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+
+##### Section 2.1.1.1.1
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.
+
+
+# Section 3
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus mattis malesuada. Sed fringilla posuere ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos.