From 1d229769c6a0df6d578096ce6a0ff34c2d4af5c4 Mon Sep 17 00:00:00 2001
From: Chasen Le Hara <git@chasenlehara.com>
Date: Mon, 29 Apr 2019 18:59:44 -0700
Subject: [PATCH] Add the bit-toc component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Part of https://github.com/canjs/canjs/issues/4744
---
 make-example.js            |  3 ++-
 static/canjs.js            | 12 ++++++++++++
 templates/content.mustache |  2 ++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/make-example.js b/make-example.js
index cf3916d7..0c0d199f 100644
--- a/make-example.js
+++ b/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")
diff --git a/static/canjs.js b/static/canjs.js
index ef6f5782..2f1c79de 100644
--- a/static/canjs.js
+++ b/static/canjs.js
@@ -156,6 +156,18 @@ function init() {
 		sidebarViewModel.selectedPageName = window.docObject.name;
 	}
 
+	// Set up the client-side TOC
+	var tocContainer = document.querySelector("#scroll-toc");
+	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 = "#scroll-toc";
+	tocContainer.appendChild(newToc);
+
 	hasShownSearch = true;
 }
 
diff --git a/templates/content.mustache b/templates/content.mustache
index 2639f860..728eded9 100644
--- a/templates/content.mustache
+++ b/templates/content.mustache
@@ -22,4 +22,6 @@
       {{/with}}
 
   </div>
+  <div class="column" id="scroll-toc">
+  </div>
 </div>