Fixed layout for page-level table of contents

src/core/hydrate.js

@@ -54,8 +54,8 @@ async function tableOfContents ({ toc, input, items }) {
   // only add items that have a file associated with it
   if (input) {
     if (toc.page) {
-      const content = await getContent(input)
-      toc.page = markdownToc(content).json
+      toc.page = markdownToc(await getContent(input))
+        .json.filter(i => i.lvl <= 2)
     }
 
     if (toc.folder) {

themes/default/application/index.js

@@ -73,8 +73,10 @@ class App extends Component {
               manifest={manifest}
               componentPage={Page}
               component404={NotFound}
-              socketUrl={`ws://${config.host}:${config.port}`}
-              sticky={this.state.sticky}
+              pageData={{
+                sticky: this.state.sticky,
+                socketUrl: `ws://${config.host}:${config.port}`,
+              }}
             />
           </WrapperPage>
         </Wrapper>

themes/default/page/index.js

@@ -6,7 +6,7 @@ import Loading from '../loading'
 import TocPage from '../toc/page'
 import TocFolder from '../toc/folder'
 import { ConfigContext } from '../context'
-import { Wrapper, ContentWrapper } from './styles'
+import { Wrapper, ContentWrapper, MarkdownWrapper } from './styles'
 
 const Content = ({ content, config, route }) => {
   const defaultContent = '##### _You don\'t have any content here yet!_'
@@ -18,12 +18,12 @@ const Content = ({ content, config, route }) => {
   }
 
   return (
-    <ContentWrapper>
+    <MarkdownWrapper>
       <Markdown
         source={md || defaultContent}
         {...config.syntax}
       />
-    </ContentWrapper>
+    </MarkdownWrapper>
   )
 }
 
@@ -39,8 +39,10 @@ export default class Page extends Component {
   }
 
   async componentDidMount () {
+    const { socketUrl } = this.props.pageData
+
     if (process.env.NODE_ENV === 'development') {
-      this._socket = new WebSocket(this.props.socketUrl)
+      this._socket = new WebSocket(socketUrl)
 
       this._socket.addEventListener('open', evt => {
         this._socket.send(this.props.route.input)
@@ -72,7 +74,7 @@ export default class Page extends Component {
   render () {
     const {
       route,
-      sticky,
+      pageData: { sticky },
     } = this.props
 
     const {
@@ -92,14 +94,16 @@ export default class Page extends Component {
               ? <Loading />
               : (
                 <div>
-                  <Content
-                    content={content}
-                    config={config}
-                    route={route}
-                  />
-
-                  {route.toc.page &&
-                    <TocPage items={route.toc.page} sticky={sticky} />}
+                  <ContentWrapper>
+                    <Content
+                      content={content}
+                      config={config}
+                      route={route}
+                    />
+
+                    {route.toc.page &&
+                      <TocPage items={route.toc.page} sticky={sticky} />}
+                  </ContentWrapper>
 
                   {route.toc.folder &&
                     <TocFolder items={route.toc.folder} />}

themes/default/page/styles.js

@@ -3,7 +3,7 @@ import styled from 'react-emotion'
 export const Wrapper = styled('div')`
   padding: 30px 50px;
   box-sizing: border-box;
-  display: flex;
+  position: relative;
 
   @media(max-width: 1200px) {
     flex-direction: column-reverse;
@@ -14,18 +14,18 @@ export const Wrapper = styled('div')`
   @media(max-width: 500px) {
     padding: 10px 20px;
   }
-
-  @media(min-width: 1450px) {
-    max-width: 1200px;
-  }
 `
 
 export const ContentWrapper = styled('div')`
-  padding: 0 50px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap-reverse;
+  justify-content: flex-start;
+`
 
-  @media(min-width: 1450px) {
-    max-width: 850px;
-  }
+export const MarkdownWrapper = styled('div')`
+  flex: 1;
+  max-width: 850px;
 
   @media(max-width: 1200px) {
     padding: 0 50px 0 0;

themes/default/routes.js

@@ -5,8 +5,7 @@ import { Switch, Route, Redirect } from 'react-router-dom'
 class Routes extends Component {
   route = ({ items = [], ...data }) => {
     const {
-      sticky,
-      socketUrl,
+      pageData,
       componentPage: Page,
     } = this.props
 
@@ -20,9 +19,8 @@ class Routes extends Component {
           path={data.url}
           render={({ staticContext }) => (
             <Page
+              pageData={pageData}
               route={staticContext || data}
-              socketUrl={socketUrl}
-              sticky={sticky}
             />
           )}
         />,
@@ -57,7 +55,7 @@ Routes.propTypes = {
   manifest: PropTypes.object.isRequired,
   componentPage: PropTypes.func.isRequired,
   component404: PropTypes.func.isRequired,
-  socketUrl: PropTypes.string.isRequired,
+  pageData: PropTypes.object.isRequired,
 }
 
 export default Routes

themes/default/toc/page.js

@@ -4,15 +4,11 @@ import { PageItem } from './styles'
 
 const Toc = (props) => {
   // Don't show this if there aren't enough headers
-  if (!props.items) return null
   if (props.items.length < 2) return null
 
   // Create TOC hierarchy and link to headers
   const items = props.items.map(t => (
-    <li
-      key={`${props.items}-${t.slug}`}
-      style={{ marginLeft: (t.lvl - 2) * 10 }}
-    >
+    <li key={`${props.items}-${t.slug}`}>
       <a href={`#${t.slug}`}>
         {t.content}
       </a>
@@ -21,10 +17,10 @@ const Toc = (props) => {
 
   return (
     <PageItem sticky={props.sticky}>
-      <ul>
-        <h5>Contents</h5>
-        {items}
-      </ul>
+      <div>
+        <h5>Table of Contents</h5>
+        <ul>{items}</ul>
+      </div>
     </PageItem>
   )
 }

themes/default/toc/styles.js

@@ -1,36 +1,41 @@
-import styled from 'react-emotion'
+import styled, { css } from 'react-emotion'
 import { Link } from 'react-router-dom'
 
 export const Wrapper = styled('nav')`
-  border-top: 1px solid #E6E9EB;
-  margin-top: 60px;
-  padding: 60px;
+  margin: 60px 0 0 30px;
+  position: relative;
 `
 
 export const PageItem = styled('nav')`
-  margin-left: 2rem;
+  position: relative;
+  margin: 0 0 30px 30px;
   width: 150px;
-  max-width: 150px;
-  min-width: 150px;
-  flex-grow: 0;
 
-  @media (min-width: 1200px) {
-    ul {
-      position: ${props => props.sticky ? 'fixed' : 'initial'};
-      top: 30px;
-      right: 30px;
+  ${props => props.sticky && css`
+    @media (min-width: 1180px) {
+      div {
+        position: fixed;
+        top: 30px;
+      }
     }
-  }
+  `}
 
-  ul {
-    list-style: none;
-    border-left: 1px solid #E6E9EB;
-    padding-left: 2rem;
+  @media (max-width: 1180px) {
+    width: 100%;
   }
 
   h5 {
     color: #848B8E;
+    margin: 0 0 10px 0;
+    opacity: .5;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
     margin: 0;
+    border-left: 1px solid #E6E9EB;
+    padding-left: 20px;
   }
 
   li {
@@ -63,6 +68,7 @@ export const FolderItem = styled(Link)`
   color: #4c555a;
   position: relative;
   font-size: .9rem;
+  transition: opacity .1s;
   b {
     display: block;
     font-weight: 600;