Add TOC max-depth custom config support & styling

docs/api/config-file.md

@@ -38,6 +38,7 @@ module.exports = new Promise((resolve, reject) => {
 | table\_of_contents | object | | |
 | table\_of_contents.page | boolean | `true` | Whether to enable the table of contents for headers in the page. |
 | table\_of_contents.folder | boolean | `true` | Whether to enable the table of contents for pages in a folder (shown in the [index page](/index-files).) |
+| table\_of_contents.max_depth | number | `2` | Defines a maximum header level depth to render in the TOC. |
 | syntax | object | | |
 | syntax.theme | string | `atom-one-light` | The [syntax highlighting theme](/syntax-highlighting/#choosing-a-style) to use. |
 | syntax.renderer | string | `hljs` | The [syntax highlighting renderer](/syntax-highlighting/#choosing-a-renderer) to use. Options are `hljs` or `prism`. |

src/core/hydrate.js

@@ -6,6 +6,7 @@ const { mergeLeftByKey } = require('../utils/merge')
 const { getContent } = require('./filesystem')
 const { walkSource } = require('./source')
 const Sitemap = require('./sitemap')
+const DEFAULT_TOC_DEPTH = 2
 
 async function getMetaData (item, parentItems) {
   const data = item.type === 'file'
@@ -54,7 +55,7 @@ async function tableOfContents (toc, { input, items }) {
   if (input) {
     if (toc.page) {
       toc.page = markdownToc(await getContent(input))
-        .json.filter(i => i.lvl <= 2)
+        .json.filter(i => i.lvl <= (toc.max_depth || DEFAULT_TOC_DEPTH))
     }
 
     if (toc.folder) {

themes/default/markdown/overrides/Header.js

@@ -48,7 +48,5 @@ export default function (props) {
 
   const element = React.createElement(levels[level], { style }, children)
 
-  return level <= 2
-    ? <Link href={`#${itemId}`} id={itemId}>{element}</Link>
-    : element
+  return <Link href={`#${itemId}`} id={itemId}>{element}</Link>
 }

themes/default/toc/page.js

@@ -8,15 +8,15 @@ const Toc = (props) => {
 
   // Create TOC hierarchy and link to headers
   const items = props.items.map(t => (
-    <li key={`${props.items}-${t.slug}`}>
+    <li key={`${props.items}-${t.slug}`} className={`level-${t.lvl}`}>
       <a href={`#${t.slug}`}>
         {t.content}
       </a>
     </li>
   ))
 
   return (
-    <PageItem sticky={props.sticky}>
+    <PageItem sticky={props.sticky} items={props.items}>
       <div>
         <h5>Table of Contents</h5>
         <ul>{items}</ul>

themes/default/toc/styles.js

@@ -5,6 +5,10 @@ export const Wrapper = styled('nav')`
   margin: 60px 0 0 5px;
   position: relative;
 `
+const generateListItemLevels = items => items.map(({ lvl }) => `
+  li.level-${lvl} {
+    padding-left: ${(lvl - 1) * 8}px;
+  }`).join(' ')
 
 export const PageItem = styled('nav')`
   position: relative;
@@ -44,6 +48,8 @@ export const PageItem = styled('nav')`
     display: block;
   }
 
+  ${props => props.items && generateListItemLevels(props.items)}
+
   a {
     text-decoration: none;
     color: #626469;