Add the bit-toc component

Right now it’s removed and re-added to the DOM every time a new page is loaded. Waiting for bit-docs/bit-docs-html-toc#26 to be implemented.

Part of canjs/canjs#4744

Author: Chasen Le Hara

make-example.js

@@ -28,7 +28,8 @@ var siteConfig = {
             //  we get an error without this, here, though
             "steal-stache": "^4.0.1",
             "steal-conditional": "^0.3.6",
-            "bit-docs-html-codepen-link": "^1.0.0"
+            "bit-docs-html-codepen-link": "^1.0.0",
+            "bit-docs-html-toc": "^1.1.1"
         },
         staticDist: [
             path.join(__dirname, "dist", "static")

static/canjs.js

@@ -156,6 +156,18 @@ function init() {
 		sidebarViewModel.selectedPageName = window.docObject.name;
 	}
 
+	// Set up the client-side TOC
+	var tocContainer = document.querySelector("#toc-sidebar");
+	var oldToc = document.querySelector("bit-toc");
+	if (oldToc) {
+		tocContainer.removeChild(oldToc);
+	}
+	var newToc = document.createElement("bit-toc");
+	newToc.depth = window.docObject.outline;
+	newToc.headingContainerSelector = "#right > article";
+	newToc.scrollSelector = "#toc-sidebar";
+	tocContainer.appendChild(newToc);
+
 	hasShownSearch = true;
 }
 

static/layout.less

@@ -5,15 +5,15 @@
   transition: padding-bottom @transition-speed ease;
   display:-ms-grid;
   display: grid;
-  -ms-grid-columns: 300px 1fr;
-  grid-template-columns: max-content 1fr;
-  grid-template-areas: "header header" "left-nav content";
+  -ms-grid-columns: 300px 1fr 300px;
+  grid-template-columns: max-content 1fr max-content;
+  grid-template-areas: "header header header" "nav-sidebar content toc-sidebar";
 }
 #left {
   -ms-grid-row: 2;
   -ms-grid-column: 1;
   -ms-grid-column-span: 1;
-  grid-area: left-nav;
+  grid-area: nav-sidebar;
   height: calc(~"100vh - " @brand-height);// 53px header
   overflow-y: scroll;
   position: fixed;
@@ -40,6 +40,9 @@
   .transition-left;
   flex-grow: 1;
 }
+#toc-sidebar {
+  grid-area: toc-sidebar;
+}
 .column {
   height: 100%;
   overflow-y: auto;

templates/content.mustache

@@ -22,4 +22,6 @@
       {{/with}}
 
   </div>
+  <div class="column" id="toc-sidebar">
+  </div>
 </div>