Generate ToC on build time

lesnitsky · Dec 12, 2018 · d06ecf4 · d06ecf4
1 parent 0278264
commit d06ecf4
Show file tree

Hide file tree

Showing 18 changed files with 181 additions and 119 deletions.
diff --git a/components/BackToToc.js b/components/BackToToc.js
@@ -1,6 +1,6 @@
 export default ({ isVisible }) => (
     <a
-        href="#toc"
+        href="#table-of-contents"
         className="back-to-toc"
         style={{
             transform: `translateY(${isVisible ? 0 : 200}%)`,

diff --git a/components/Toc.js b/components/Toc.js
diff --git a/components/md/Example.js b/components/md/Example.js
@@ -1,7 +1,7 @@
 export default ({ children, reactnative, flutter }) => (
     <div className="example-container">
-        {reactnative ? <h2>React Native</h2> : null}
-        {flutter ? <h2>Flutter</h2> : null}
+        {reactnative ? <h3>React Native</h3> : null}
+        {flutter ? <h3>Flutter</h3> : null}
 
         {children}
         <style jsx>{`
@@ -12,17 +12,18 @@ export default ({ children, reactnative, flutter }) => (
                 padding-right: 10px;
             }
 
+            .example-container + .example-container {
+                padding-right: 0;
+                padding-left: 10px;
+            }
+
             @media only screen and (max-width: 1100px) {
                 .example-container {
                     flex-basis: 100%;
                     max-width: 100%;
+                    padding: 0;
                 }
             }
-
-            .example-container + .example-container {
-                padding-right: 0;
-                padding-left: 10px;
-            }
         `}</style>
     </div>
 );
diff --git a/next.config.js b/next.config.js
@@ -1,10 +1,16 @@
 const rehypePrism = require('@mapbox/rehype-prism');
+const rehypeSlug = require('rehype-slug');
+
+const emoji = require('remark-emoji');
+const toc = require('remark-toc');
+
+const withCSS = require('@zeit/next-css');
 const withMDX = require('@zeit/next-mdx')({
     options: {
-        hastPlugins: [rehypePrism],
+        hastPlugins: [rehypePrism, rehypeSlug],
+        mdPlugins: [toc, emoji],
     },
     extension: /\.(md|mdx)$/,
 });
-const withCSS = require('@zeit/next-css');
 
 module.exports = withCSS(withMDX());
diff --git a/package.json b/package.json
@@ -24,6 +24,9 @@
         "@mdx-js/mdx": "^0.16.5",
         "@zeit/next-css": "^1.0.1",
         "@zeit/next-mdx": "^1.1.1-canary.3",
-        "prismjs": "^1.15.0"
+        "prismjs": "^1.15.0",
+        "rehype-slug": "^2.0.2",
+        "remark-emoji": "^2.0.2",
+        "remark-toc": "^5.1.1"
     }
 }
diff --git a/pages/index.js b/pages/index.js
@@ -3,24 +3,12 @@ import Head from 'next/head';
 import 'prismjs/themes/prism-tomorrow.css';
 
 import Description from '../components/Description';
-import Toc from '../components/Toc';
 import Footer from '../components/Footer';
 import BackToToc from '../components/BackToToc';
-
-import HelloWorld from '../recipes/hello-world.md';
-import Fetch from '../recipes/fetch.md';
-import JSON from '../recipes/json.md';
-import StatefulComponent from '../recipes/stateful-component.md';
-import PureComponent from '../recipes/pure-component.md';
-import Arrays from '../recipes/arrays.md';
-import HideStatusbar from '../recipes/hide-statusbar.md';
-import CombiningPropsAndState from '../recipes/combining-props-and-state.md';
-import RequiredAndDefaultProps from '../recipes/required-and-default-props.md';
-// <EXAMPLE_IMPORT>
+import Examples from '../recipes/index.md';
 
 export default class App extends Component {
     state = {
-        toc: [],
         backToTocVisible: false,
     };
 
@@ -32,18 +20,10 @@ export default class App extends Component {
                 </Head>
 
                 <Description />
-                <Toc tocItems={this.state.toc} />
-
-                <HelloWorld />
-                <PureComponent />
-                <RequiredAndDefaultProps />
-                <StatefulComponent />
-                <CombiningPropsAndState />
-                <HideStatusbar />
-                <Arrays />
-                <Fetch />
-                <JSON />
-                {/* EXAMPLE_USAGE */}
+
+                <div className="examples-container">
+                    <Examples />
+                </div>
 
                 <BackToToc isVisible={this.state.backToTocVisible} />
 
@@ -62,11 +42,12 @@ export default class App extends Component {
                         font-family: 'Roboto Slab', serif;
                     }
 
-                    h1 {
+                    h1,
+                    h2 {
                         color: #cc99cd;
                     }
 
-                    h2 {
+                    h3 {
                         color: #6196cc;
                     }
 
@@ -80,11 +61,15 @@ export default class App extends Component {
                         margin: 0 auto;
                     }
 
-                    .app > div {
+                    .examples-container > div > div {
                         display: flex;
                         flex-wrap: wrap;
                     }
 
+                    .toc-container > h2:empty {
+                        display: none;
+                    }
+
                     pre[class*='language-'] {
                         border-radius: 10px;
                         margin-bottom: 20px;
@@ -93,6 +78,7 @@ export default class App extends Component {
                     pre[class*='language-'],
                     code[class*='language-'] {
                         font-family: 'Fira Code', monospace;
+                        font-size: 0.95em;
                     }
 
                     a {
@@ -118,35 +104,15 @@ export default class App extends Component {
     }
 
     componentDidMount() {
-        this.setState({
-            toc: Array.from(document.querySelectorAll('.app > div > h1')).reduce((items, node) => {
-                const text = node.textContent;
-                const id = text.split(' ').join('-');
-
-                node.id = id;
-
-                const item = {
-                    text,
-                    id,
-                };
-
-                return [...items, item];
-            }, []),
-        });
-
         const toc = document.querySelector('.toc-container');
 
         window.addEventListener('scroll', () => {
             requestAnimationFrame(() => {
                 const tocBottom = toc.offsetTop + toc.offsetHeight;
-
                 if (window.scrollY >= tocBottom && !this.state.backToTocVisible) {
-                    console.log('v');
                     this.setState({ backToTocVisible: true });
                 }
-
                 if (window.scrollY < tocBottom && this.state.backToTocVisible) {
-                    console.log('nv');
                     this.setState({ backToTocVisible: false });
                 }
             });

diff --git a/recipes/arrays.md b/recipes/arrays.md
@@ -1,7 +1,5 @@
 import Example from '../components/md/Example';
 
-# Arrays
-
 <Example reactnative>
 
 ```js

diff --git a/recipes/combining-props-and-state.md b/recipes/combining-props-and-state.md
@@ -1,7 +1,5 @@
 import Example from '../components/md/Example';
 
-# Combining props and state
-
 <Example reactnative>
 
 ```js

diff --git a/recipes/fetch.md b/recipes/fetch.md
@@ -1,7 +1,5 @@
 import Example from '../components/md/Example';
 
-# Fetching data
-
 <Example reactnative>
 
 ```js

diff --git a/recipes/hello-world.md b/recipes/hello-world.md
@@ -1,7 +1,5 @@
 import Example from '../components/md/Example';
 
-# Hello world
-
 <Example reactnative>
 
 ```js

diff --git a/recipes/hide-statusbar.md b/recipes/hide-statusbar.md
@@ -1,7 +1,5 @@
 import Example from '../components/md/Example';
 
-# Hide status bar
-
 <Example reactnative>
 
 ```js

diff --git a/recipes/index.md b/recipes/index.md
@@ -0,0 +1,58 @@
+import HelloWorld from './hello-world.md';
+import Fetch from './fetch.md';
+import JSON from './json.md';
+import StatefulComponent from './stateful-component.md';
+import PureComponent from './pure-component.md';
+import Arrays from './arrays.md';
+import HideStatusbar from './hide-statusbar.md';
+import CombiningPropsAndState from './combining-props-and-state.md';
+import RequiredAndDefaultProps from './required-and-default-props.md';
+
+<div className="toc-container">
+
+## Table of contents
+
+<!--
+    Put empty heading because remark-toc replaces content until the first heading of the same level,
+    so it removes closing div tag
+-->
+
+##
+
+</div>
+
+## Hello World
+
+<HelloWorld />
+
+## Pure Component
+
+<PureComponent />
+
+## Required and default props
+
+<RequiredAndDefaultProps />
+
+## Stateful component
+
+<StatefulComponent />
+
+## Combining props and state
+
+<CombiningPropsAndState />
+
+## Hide status bar
+
+<HideStatusbar />
+
+## Arrays
+
+<Arrays />
+
+## Fetch
+
+<Fetch />
+
+## JSON
+
+<JSON />
diff --git a/recipes/json.md b/recipes/json.md
@@ -1,7 +1,5 @@
 import Example from '../components/md/Example';
 
-# JSON
-
 <Example reactnative>
 
 ```js

diff --git a/recipes/pure-component.md b/recipes/pure-component.md
@@ -1,7 +1,5 @@
 import Example from '../components/md/Example';
 
-# Pure Component
-
 <Example reactnative>
 
 ```js

diff --git a/recipes/required-and-default-props.md b/recipes/required-and-default-props.md
@@ -1,7 +1,5 @@
 import Example from '../components/md/Example';
 
-# Required and default props
-
 <Example reactnative>
 
 ```js

diff --git a/recipes/stateful-component.md b/recipes/stateful-component.md
@@ -1,7 +1,5 @@
 import Example from '../components/md/Example';
 
-# Stateful component
-
 <Example reactnative>
 
 ```js