Merge pull request #16 from jdestefano-mongo/gen-toc

DOCSP-709 - Generate ToC at renderer level.

Author: kirbyk

themes/mongodb-tutorials/src/single.js

@@ -45,56 +45,25 @@ class Single extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
-      searchResults: null,
-      sections: this._getSections(),
+      searchResults: null
     }
   }
 
   componentDidMount() {
     setupCopyButtons()
   }
 
-  _getSections () {
-    const sectionElements = document.querySelectorAll('.single h2')
-    let sections = []
-
-    sectionElements.forEach((el) => {
-      sections.push({
-        name: el.innerHTML,
-        link: `#${el.id}`,
-      })
-    })
-
-    return sections
-  }
-
   onResults = (results) => {
     this.setState({searchResults: results})
   }
 
   render () {
-    const sections = this._getSections().map((section, i) => {
-      return (
-        <li key={i} className="menu__item"><a href={section.link} className="menu__link">{section.name}</a></li>
-      )
-    })
 
     return (
       <div>
         <Navbar baseURL={baseURL}>
           <Search baseURL={baseURL} onResults={this.onResults} />
         </Navbar>
-
-        <div className="main">
-          <aside className="main__sidebar main__sidebar--single">
-            <div className="main__sidebar__header">
-              MongoDB Manual Sections:
-            </div>
-            <Menu>
-              { sections }
-            </Menu>
-          </aside>
-        </div>
       </div>
     )
   }

themes/mongodb-tutorials/src/styles/bem-components/main.scss

@@ -39,5 +39,9 @@ $sidebar-width: 330px;
     flex: 1;
     margin-left: $sidebar-width;
     max-width: 900px; // TODO: Check with Melissa
+    
+    &--single {
+      margin-left: 410px; // Add 80px to space nav and content 
+    }
   }
 }

themes/mongodb-tutorials/src/styles/bem-components/single.scss

@@ -1,10 +1,9 @@
 @import '../colors';
 
 .single {
-  margin-left: 330px;
   margin-top: 45px;
-  max-width: 990px;
-  padding: 20px 80px;
+  max-width: 1260px; // 990px +330px(nav in single div) - 80px (content padding)
+  padding: 20px 0px;
 
   h1 {
     border-bottom: 1px solid $light-grey-primary;

themes/mongodb-tutorials/src/styles/bem-components/toc.scss

@@ -10,4 +10,19 @@
   &__item:last-child {
     border-bottom: 1px solid $light-grey-primary;
   }
+
+  &__link {
+    color: $black-primary;
+    display: inline-block;
+    font-family: Akzidenz;
+    outline: none;
+    padding: 20px;
+    text-decoration: none;
+    width: 100%;
+  }
+
+  &__nestedlist {
+    list-style: none;
+    padding: 0px;
+  }
 }