From 1912d812abb5d56d91a3558e2d3590734bd92fcc Mon Sep 17 00:00:00 2001
From: Ron <ron.tal@wework.com>
Date: Sat, 26 Oct 2019 18:53:11 +0300
Subject: [PATCH 1/2] add custom max_depth config support and style TOC nested
 items

---
 docs/api/config-file.md                     |  1 +
 src/core/hydrate.js                         | 41 +++++++++++----------
 themes/default/markdown/overrides/Header.js |  4 +-
 themes/default/toc/page.js                  |  4 +-
 themes/default/toc/styles.js                |  6 +++
 5 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/docs/api/config-file.md b/docs/api/config-file.md
index e9c61e0..52e75e4 100644
--- a/docs/api/config-file.md
+++ b/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`. |
diff --git a/src/core/hydrate.js b/src/core/hydrate.js
index f4da4e7..cd214e7 100644
--- a/src/core/hydrate.js
+++ b/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'
@@ -51,30 +52,30 @@ function normalizeItems (data) {
 
 async function tableOfContents (toc, { input, items }) {
   // only add items that have a file associated with it
-  if (input) {
-    if (toc.page) {
-      toc.page = markdownToc(await getContent(input))
-        .json.filter(i => i.lvl <= 2)
-    }
+    if (input) {
+      if (toc.page) {
+        toc.page = markdownToc(await getContent(input))
+          .json.filter(i => i.lvl <= (toc.max_depth || DEFAULT_TOC_DEPTH))
+      }
 
-    if (toc.folder) {
-      toc.folder = items
-        // only want children items that have an input
-        .filter(item => item.input)
-        // reduced data, since we don't need everything
-        .map(item => ({
-          title: item.title,
-          description: item.description,
-          url: item.url,
-        }))
+      if (toc.folder) {
+        toc.folder = items
+          // only want children items that have an input
+          .filter(item => item.input)
+          // reduced data, since we don't need everything
+          .map(item => ({
+            title: item.title,
+            description: item.description,
+            url: item.url,
+          }))
+      }
     }
-  }
 
-  // dont keep empty arrays
-  if (!toc.page || !toc.page.length) delete toc.page
-  if (!toc.folder || !toc.folder.length) delete toc.folder
+    // dont keep empty arrays
+    if (!toc.page || !toc.page.length) delete toc.page
+    if (!toc.folder || !toc.folder.length) delete toc.folder
 
-  return toc
+    return toc
 }
 
 async function hydrateTree (tree, config, opts = {}) {
diff --git a/themes/default/markdown/overrides/Header.js b/themes/default/markdown/overrides/Header.js
index 364f2ca..23c5082 100644
--- a/themes/default/markdown/overrides/Header.js
+++ b/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>
 }
diff --git a/themes/default/toc/page.js b/themes/default/toc/page.js
index 66fe33a..4151009 100644
--- a/themes/default/toc/page.js
+++ b/themes/default/toc/page.js
@@ -8,7 +8,7 @@ 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>
@@ -16,7 +16,7 @@ const Toc = (props) => {
   ))
 
   return (
-    <PageItem sticky={props.sticky}>
+    <PageItem sticky={props.sticky} items={props.items}>
       <div>
         <h5>Table of Contents</h5>
         <ul>{items}</ul>
diff --git a/themes/default/toc/styles.js b/themes/default/toc/styles.js
index 73db9c6..8ff0d5c 100644
--- a/themes/default/toc/styles.js
+++ b/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;

From 48663538abba0aa3c899884ec636a35bbcede315 Mon Sep 17 00:00:00 2001
From: Ron <ron.tal@wework.com>
Date: Sat, 26 Oct 2019 18:58:02 +0300
Subject: [PATCH 2/2] remove excidental spaces

---
 src/core/hydrate.js | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/core/hydrate.js b/src/core/hydrate.js
index cd214e7..fd7c434 100644
--- a/src/core/hydrate.js
+++ b/src/core/hydrate.js
@@ -52,30 +52,30 @@ function normalizeItems (data) {
 
 async function tableOfContents (toc, { input, items }) {
   // only add items that have a file associated with it
-    if (input) {
-      if (toc.page) {
-        toc.page = markdownToc(await getContent(input))
-          .json.filter(i => i.lvl <= (toc.max_depth || DEFAULT_TOC_DEPTH))
-      }
+  if (input) {
+    if (toc.page) {
+      toc.page = markdownToc(await getContent(input))
+        .json.filter(i => i.lvl <= (toc.max_depth || DEFAULT_TOC_DEPTH))
+    }
 
-      if (toc.folder) {
-        toc.folder = items
-          // only want children items that have an input
-          .filter(item => item.input)
-          // reduced data, since we don't need everything
-          .map(item => ({
-            title: item.title,
-            description: item.description,
-            url: item.url,
-          }))
-      }
+    if (toc.folder) {
+      toc.folder = items
+        // only want children items that have an input
+        .filter(item => item.input)
+        // reduced data, since we don't need everything
+        .map(item => ({
+          title: item.title,
+          description: item.description,
+          url: item.url,
+        }))
     }
+  }
 
-    // dont keep empty arrays
-    if (!toc.page || !toc.page.length) delete toc.page
-    if (!toc.folder || !toc.folder.length) delete toc.folder
+  // dont keep empty arrays
+  if (!toc.page || !toc.page.length) delete toc.page
+  if (!toc.folder || !toc.folder.length) delete toc.folder
 
-    return toc
+  return toc
 }
 
 async function hydrateTree (tree, config, opts = {}) {