Port scroll improvements

src/components/app.js

@@ -68,25 +68,40 @@ var App = React.createClass({
   },
   componentDidMount() {
     this.mediaQueryChanged();
+    this.onScroll = debounce(this._onScroll, 100);
+    document.addEventListener('scroll', this.onScroll);
+    this._onScroll();
+  },
+  _onScroll() {
+    var sections = document.querySelectorAll('div.section');
+    if (!sections.length) return;
+    for (var i = 0; i < sections.length; i++) {
+      var rect = sections[i].getBoundingClientRect();
+      if (rect.bottom > 0) {
+        this.setState({
+          activeSection: sections[i].title
+        });
+        return;
+      }
+    }
   },
   mediaQueryChanged() {
-    var queries = {
-      mobile: this.state.mqls.mobile.matches,
-      tablet: this.state.mqls.tablet.matches,
-      desktop: this.state.mqls.desktop.matches
-    };
-    this.setState({ queries });
+    this.setState({
+      queries: {
+        mobile: this.state.mqls.mobile.matches,
+        tablet: this.state.mqls.tablet.matches,
+        desktop: this.state.mqls.desktop.matches
+      }
+    });
   },
   componentWillUnmount() {
     Object.keys(this.state.mqls).forEach(key =>
       this.state.mqls[key].removeListener(this.mediaQueryChanged));
+    document.body.removeEventListener('scroll', this.onScroll);
   },
   onChangeLanguage(language) {
     this.setState({ language });
   },
-  onSpy(activeSection) {
-    this.setState({ activeSection });
-  },
   componentDidUpdate(_, prevState) {
     if (prevState.activeSection !== this.state.activeSection) {
       // when the section changes, replace the hash
@@ -127,7 +142,6 @@ var App = React.createClass({
         <Content
           ast={ast}
           queries={queries}
-          onSpy={this.onSpy}
           language={this.state.language}/>
       </div>
 
@@ -143,10 +157,10 @@ var App = React.createClass({
 
       {/* Header */ }
       <div className={`fill-gray fixed-top ${queries.tablet ? 'pad1y pad2x col6' : 'pad0 width16'}`}>
-        <a href='/' className='active space-top1 space-left1 pin-topleft icon round fill-red dark pad0'></a>
+        <a href='/' className='active space-top1 space-left1 pin-topleft icon round fill-blue dark pad0 mapbox'></a>
         <div className={`strong small pad0 ${queries.mobile && 'space-left3'} ${queries.tablet ? 'space-left2' : 'space-left4 line-height15' }`}>
-          {queries.desktop ? 'Example API Documentation' :
-            queries.mobile ? 'API Docs' : 'Example API Docs'}
+          {queries.desktop ? 'API Documentation' :
+            queries.mobile ? 'API Docs' : 'API Docs'}
         </div>
         {queries.tablet && <div>
             <button

src/components/content.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import Section from './section';
 import PureRenderMixin from 'react-pure-render/mixin';
+import GithubSlugger from 'github-slugger';
+let slugger = new GithubSlugger();
+let slug = title => { slugger.reset(); return slugger.slug(title); };
 
 function highlightTokens(str) {
   return str.replace(/{[\w_]+}/g,
@@ -92,7 +95,7 @@ function chunkifyAST(ast, language) {
         left.push(node);
       }
     });
-    return { left, right, title, preview };
+    return { left, right, title, preview, slug: slug(title) };
   });
 }
 
@@ -100,13 +103,11 @@ var Content = React.createClass({
   mixins: [PureRenderMixin],
   propTypes: {
     ast: React.PropTypes.object.isRequired,
-    language: React.PropTypes.string.isRequired,
-    onSpy: React.PropTypes.func.isRequired
+    language: React.PropTypes.string.isRequired
   },
   render() {
     return (<div className='clearfix'>
       {chunkifyAST(this.props.ast, this.props.language).map((chunk, i) => <Section
-        onSpy={this.props.onSpy}
         chunk={chunk}
         key={i} />)}
     </div>);

src/components/section.js

@@ -2,7 +2,6 @@ import React from 'react';
 import remark from 'remark';
 import remarkHTML from 'remark-html';
 import remarkHighlight from 'remark-highlight.js';
-import Waypoint from 'react-waypoint';
 import PureRenderMixin from 'react-pure-render/mixin';
 
 function renderHighlighted(nodes) {
@@ -22,33 +21,20 @@ function renderHighlighted(nodes) {
 var Section = React.createClass({
   mixins: [PureRenderMixin],
   propTypes: {
-    chunk: React.PropTypes.object.isRequired,
-    onSpy: React.PropTypes.func.isRequired
-  },
-  waypointEnterFromAbove(e, direction) {
-    if (direction === 'above') {
-      this.props.onSpy(this.props.chunk.title);
-    }
-  },
-  waypointEnterFromBelow(e, direction) {
-    if (direction === 'below') {
-      this.props.onSpy(this.props.chunk.title);
-    }
+    chunk: React.PropTypes.object.isRequired
   },
   render() {
     let { chunk } = this.props;
     let { left, right, preview } = chunk;
-    return (<div className={`contain clearfix ${preview ? 'preview' : ''}`}>
-      <Waypoint onEnter={this.waypointEnterFromBelow} />
+    return (<div
+      title={chunk.title}
+      className={`section pad2y contain clearfix ${preview ? 'preview' : ''}`}>
       <div
         className='col6 pad2x prose clip'
         dangerouslySetInnerHTML={renderHighlighted(left)} />
-      {(right.length > 0) && <div
+      {right.length > 0 && <div
         className='col6 pad2 prose dark space-top5 clip keyline-top fill-dark'
         dangerouslySetInnerHTML={renderHighlighted(right)} />}
-      <div className='pin-bottom'>
-        <Waypoint onEnter={this.waypointEnterFromAbove} />
-      </div>
     </div>);
   }
 });