Use bit-docs-html-toc plugin istead of old content-lists code

Author: Manuel Mujica

make-example.js

@@ -17,7 +17,8 @@ generate(docMap, {
 		dependencies: {
 			"bit-docs-docjs-theme": __dirname,
 			"bit-docs-prettify": "^0.1.0",
-			"bit-docs-html-highlight-line": "^0.2.2"
+			"bit-docs-html-highlight-line": "^0.2.2",
+			"bit-docs-html-toc": "^0.2.1"
 		}
 	},
 	dest: path.join(__dirname, "temp"),

package.json

@@ -20,9 +20,7 @@
   },
   "homepage": "https://github.com/bit-docs/bit-docs-docjs-theme#readme",
   "devDependencies": {
-    "bit-docs-generate-html": "^0.3.3"
-  },
-  "dependencies": {
-    "jquery": "^3.1.1"
+    "bit-docs-generate-html": "^0.3.3",
+    "bit-docs-html-toc": "^0.2.1"
   }
 }

static/docjs.js

@@ -1,69 +1 @@
-var $ = require("jquery");
-
 require("./styles/styles.less");
-
-$(function() {
-	var sections = [];
-	var $element = $(".contents");
-
-	collectSignatures().each(function(ix) {
-		var $h2 = $(this).find("h2");
-		var id = "sig_" + $h2.text().replace(/\s/g, "").replace(/[^\w]/g, "_");
-
-		$(this).attr("id", "id");
-		sections.push({ id: id, text: $h2.text() });
-	});
-
-	collectHeadings().each(function(ix) {
-		var $el = $(this);
-		var id = "section_" + $el.text().replace(/\s/g, "").replace(/[^\w]/g, "_");
-
-		$el.attr("id", id).prepend(anchorTemplate({ id: id }));
-		sections.push({ id: id, text: $el.text() });
-	});
-
-	$element.html(contentListTemplate({ sections: sections }));
-
-	if (window.location.hash.length) {
-		var id = window.location.hash.replace("#", "");
-		var anchor = document.getElementById(id);
-
-		if (anchor) anchor.scrollIntoView(true);
-	}
-});
-
-function collectSignatures() {
-	var cloned = $(".content .signature").clone();
-	// remove release numbers
-	cloned.find(".release").remove();
-	return cloned;
-}
-
-function collectHeadings() {
-	return $(".content .comment h2, .content .comment h3");
-}
-
-function anchorTemplate(ctx) {
-	var id = encodeURIComponent(ctx.id);
-
-	return (
-		'<a class="anchor" href="#' + id + '" aria-hidden="true">' +
-			'<svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16">' +
-				'<path d="M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z"></path>' +
-			'</svg>' +
-		'</a>'
-	);
-}
-
-function contentListTemplate(ctx) {
-	var sections = ctx.sections || [];
-
-	var items = sections.map(function(section) {
-		var text = section.text;
-		var id = encodeURIComponent(section.id);
-
-		return '<li><a href="#' + id + '">' + text + '</a></li>';
-	});
-
-	return '<ul>' + items.join('') + '</li>';
-}

templates/content.mustache

@@ -13,22 +13,23 @@
 		{{> menu.mustache}}
 	</nav>
 	{{/unless}}
-	
+
 	{{#unless hideArticle}}
 	<article class="content docs">
 	{{/unless}}
-	
+
 		{{#unless hideTitle}}
 		<section class="title">
 			{{> title.mustache}}
 		</section>
 		{{/unless}}
-		
+
 		{{#unless hideArticle}}
 		<section class="contents">
+			<div class="on-this-page-container"></div>
 		</section>
 		{{/unless}}
-		
+
 		{{#if deprecated.length}}
 			<section class='warnings'>
 				{{#deprecated}}
@@ -61,13 +62,13 @@
 			</section>
 			{{/if}}
 		{{/if}}
-		
+
 		{{#ifAny params returns}}
 			<section class="signature">
 				{{> signature.mustache}}
 			</section>
 		{{/ifAny}}
-		
+
 
 		{{#if body}}
 		<section class="comment">
@@ -83,7 +84,7 @@
 				<section class="comment">
 					<h2>{{title}}</h2>
 				</section>
-				
+
 				{{#if description}}
 				<section class="description">
 					{{{chain "makeHtml" "makeLinks" description}}}
@@ -106,11 +107,11 @@
 			{{{makeApiSection}}}
 		</section>
 		{{/if}}
-	
+
 	{{#unless hideArticle}}
 	</article>
 	{{/unless}}
-	
+
 {{#unless hideContainer}}
 </div>
 {{/unless}}

templates/layout.mustache

@@ -32,6 +32,8 @@
 <body class="docs">
 	{{#unless hideHeader}}
 	<header>
+		{{! workaround for https://github.com/bit-docs/bit-docs-html-toc/issues/2 }}
+		<div style="display: none;" class="navbar"></div>
 		<nav class="container">
 			<div class="logo-menu">
 				<a class="brand" href="./index.html">{{makeParentTitle}}</a>

templates/title.mustache

@@ -14,7 +14,7 @@
 	{{/if}}
 	{{/if}}
 	{{#if types}}
-	<h2><code>{{{makeTypesString types}}}</code></h2>
+	<code>{{{makeTypesString types}}}</code>
 	{{/if}}
 	<span class="inherits">{{#if inherits}}inherits: <a href="{{urlTo inherits}}">{{inherits}}</a>{{else}}&nbsp;{{/if}}</span>
 </div>