Table of contents (ToC) in index (home page)

[Eccenux]

Hi. I was wondering if you could create an option to create a table of contents with a list of functions in the index.

I've made this for my project, but it is rather awkward to process index.html and replace it with my own version. It seem to be working fine for the moment, but it would be nice if this would be built into the docdash template.

Example

Screen

This is an example render of one module.

HTML and CSS

My "template" for this is:

<div id="main">
	<h1 class="page-title">Index</h1>
	<section>[[contents]]</section>

<style>
.idx-methods {
	/* docdash theme colors */
    color: #fff;
    background: #6d426d;
    
	/* extra for idx */
    .idx-name {
        color: white;
    }
    .idx-type {
        color: #fbcdfb;
    }
}		
</style>

</div>

Prepare contents

Below is my code for preparing ToC contents.

let docs = JSON.parse(fs.readFileSync(jsonPath, 'utf8'));

// build classes list
let classes = [];
let classesList = [];
let classesDocs = docs.filter(d => d.kind === 'class');
for (const cls of classesDocs) {
	if (classesList.includes(cls.longname)) {
		continue;
	}
	classesList.push(cls.longname);
	classes.push(cls);
}

// build inner HTML content
let content = classes
	.map(cls => {
		console.log('Class: ', cls.longname);
		let methods = docs
			.filter(m => m.memberof === cls.longname && (m.kind === 'function' || m.kind === 'method'))
			.map(m => {
				const params = (m.params || [])
					.map(p => {
						let optional = p.optional ? '<span class="signature-attributes">opt</span>' : '';
						let typeName = p.type && p.type.names ? p.type.names[0] : 'any';
						let type = `<span class="idx-type">${(typeName)}</span>`;
						return `${p.name}${optional}:${type}`;
					})
					.join(', ');
				const asyncMark = m.async ? '<span class="type-signature type-signature-async">(async) </span>' : '';
				return `
					<li class="idx-method">
					${asyncMark}
					<a href="${cls.name}.html#${m.name}" class="idx-name">${m.name}</a>
					<span class="signature">(${params})</span>
				`;
			})
			.join('\n')
		;
		return `<h2>${cls.name}</h2><ul class="idx-methods">${methods}</ul>`;
	})
	.join('\n')
;