From 94270569a5bc03b8e80c5ecb655f8a751cf0420d Mon Sep 17 00:00:00 2001
From: jxom <jakemoxey@gmail.com>
Date: Sat, 7 Oct 2017 18:33:53 +1100
Subject: [PATCH 1/5] Tweak sidebar to update navigation highlight on scroll

---
 content/tutorial/nav.yml                    |   2 +-
 src/templates/components/Sidebar/Section.js | 227 +++++++++++++-------
 src/utils/createLink.js                     |  15 +-
 3 files changed, 162 insertions(+), 82 deletions(-)

diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml
index f3570cc9..adc5cf3a 100644
--- a/content/tutorial/nav.yml
+++ b/content/tutorial/nav.yml
@@ -1,6 +1,6 @@
 - title: Tutorial
   items:
-    - id: tutorial
+    - id: before-we-start
       title: Before We Start
       href: /tutorial/tutorial.html#before-we-start
       forceInternal: true
diff --git a/src/templates/components/Sidebar/Section.js b/src/templates/components/Sidebar/Section.js
index e212f03e..a264ebfd 100644
--- a/src/templates/components/Sidebar/Section.js
+++ b/src/templates/components/Sidebar/Section.js
@@ -9,88 +9,161 @@
 
 'use strict';
 
-import React from 'react';
+import React, {Component} from 'react';
 import {colors, media} from 'theme';
 import MetaTitle from '../MetaTitle';
 import ChevronSvg from '../ChevronSvg';
 
-// TODO Update isActive link as document scrolls past anchor tags
-// Maybe used 'hashchange' along with 'scroll' to set/update active links
-
-const Section = ({
-  createLink,
-  isActive,
-  location,
-  onLinkClick,
-  onSectionTitleClick,
-  section,
-}) => (
-  <div>
-    <MetaTitle
-      onClick={onSectionTitleClick}
-      cssProps={{
-        marginTop: 10,
-
-        [media.greaterThan('small')]: {
-          color: isActive ? colors.text : colors.subtle,
-
-          ':hover': {
-            color: colors.text,
-          },
-        },
-      }}>
-      {section.title}
-      <ChevronSvg
-        cssProps={{
-          marginLeft: 7,
-          transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
-          transition: 'transform 0.2s ease',
-
-          [media.lessThan('small')]: {
-            display: 'none',
-          },
-        }}
-      />
-    </MetaTitle>
-    <ul
-      css={{
-        marginBottom: 10,
-
-        [media.greaterThan('small')]: {
-          display: isActive ? 'block' : 'none',
-        },
-      }}>
-      {section.items.map(item => (
-        <li
-          key={item.id}
+class Section extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      activeItemId: null,
+      itemTopOffsets: [],
+    };
+
+    this.handleScroll = this.handleScroll.bind(this);
+  }
+
+  componentDidMount() {
+    const {section} = this.props;
+
+    const itemIds = _getItemIds(section.items);
+    this.setState({
+      itemTopOffsets: _getElementTopOffsetsById(itemIds),
+    });
+
+    window.addEventListener('scroll', this.handleScroll);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
+  handleScroll() {
+    const {itemTopOffsets} = this.state;
+    const item = itemTopOffsets.find((itemTopOffset, i) => {
+      const nextItemTopOffset = itemTopOffsets[i + 1];
+      if (nextItemTopOffset) {
+        return (
+          window.scrollY >= itemTopOffset.offsetTop &&
+          window.scrollY < nextItemTopOffset.offsetTop
+        );
+      }
+      return window.scrollY >= itemTopOffset.offsetTop;
+    });
+    this.setState({
+      activeItemId: item ? item.id : null,
+    });
+  }
+
+  render() {
+    const {
+      createLink,
+      isActive,
+      location,
+      onLinkClick,
+      onSectionTitleClick,
+      section,
+    } = this.props;
+    const {activeItemId} = this.state;
+    return (
+      <div>
+        <MetaTitle
+          onClick={onSectionTitleClick}
+          cssProps={{
+            marginTop: 10,
+
+            [media.greaterThan('small')]: {
+              color: isActive ? colors.text : colors.subtle,
+
+              ':hover': {
+                color: colors.text,
+              },
+            },
+          }}>
+          {section.title}
+          <ChevronSvg
+            cssProps={{
+              marginLeft: 7,
+              transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
+              transition: 'transform 0.2s ease',
+
+              [media.lessThan('small')]: {
+                display: 'none',
+              },
+            }}
+          />
+        </MetaTitle>
+        <ul
           css={{
-            marginTop: 5,
+            marginBottom: 10,
+
+            [media.greaterThan('small')]: {
+              display: isActive ? 'block' : 'none',
+            },
           }}>
-          {createLink({
-            item,
-            location,
-            onLinkClick,
-            section,
-          })}
-
-          {item.subitems && (
-            <ul css={{marginLeft: 20}}>
-              {item.subitems.map(subitem => (
-                <li key={subitem.id}>
-                  {createLink({
-                    item: subitem,
-                    location,
-                    onLinkClick,
-                    section,
-                  })}
-                </li>
-              ))}
-            </ul>
-          )}
-        </li>
-      ))}
-    </ul>
-  </div>
-);
+          {section.items.map(item => (
+            <li
+              key={item.id}
+              css={{
+                marginTop: 5,
+              }}>
+              {createLink({
+                item,
+                location,
+                onLinkClick,
+                section,
+                isActive: activeItemId === item.id,
+              })}
+
+              {item.subitems && (
+                <ul css={{marginLeft: 20}}>
+                  {item.subitems.map(subitem => (
+                    <li key={subitem.id}>
+                      {createLink({
+                        item: subitem,
+                        location,
+                        onLinkClick,
+                        section,
+                        isActive: activeItemId === subitem.id,
+                      })}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+}
+
+const _getItemIds = items =>
+  items
+    .map(item => {
+      let subItemIds = [];
+      if (item.subitems) {
+        subItemIds = item.subitems.map(subitem => subitem.id);
+      }
+      return [item.id, ...subItemIds];
+    })
+    .reduce((prev, current) => prev.concat(current));
+
+const _getElementTopOffsetsById = ids =>
+  ids
+    .map(id => {
+      const element = document.getElementById(id);
+      if (!element) {
+        return null;
+      }
+      return {
+        id,
+        offsetTop: element.offsetTop,
+      };
+    })
+    .filter(item => item);
 
 export default Section;
diff --git a/src/utils/createLink.js b/src/utils/createLink.js
index 88bac825..a2871d5f 100644
--- a/src/utils/createLink.js
+++ b/src/utils/createLink.js
@@ -65,15 +65,22 @@ const createLinkDocs = ({item, location, section}) => {
   );
 };
 
-const createLinkTutorial = ({item, location, onLinkClick, section}) => {
-  const isActive = isItemActive(location, item);
+const createLinkTutorial = ({
+  item,
+  location,
+  onLinkClick,
+  section,
+  isActive,
+}) => {
+  const active =
+    typeof isActive === 'boolean' ? isActive : isItemActive(location, item);
 
   return (
     <Link
-      css={[linkCss, isActive && activeLinkCss]}
+      css={[linkCss, active && activeLinkCss]}
       onClick={onLinkClick}
       to={item.href}>
-      {isActive && <span css={activeLinkBefore} />}
+      {active && <span css={activeLinkBefore} />}
       {item.title}
     </Link>
   );

From 63280cca1d4c6635a0d25c118997b188853c2c02 Mon Sep 17 00:00:00 2001
From: jxom <jakemoxey@gmail.com>
Date: Sat, 7 Oct 2017 18:41:26 +1100
Subject: [PATCH 2/5] Make createLinkBlog and createLinkDocs consistent with
 createLinkTutorial

---
 src/utils/createLink.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/utils/createLink.js b/src/utils/createLink.js
index a2871d5f..2d1b1e99 100644
--- a/src/utils/createLink.js
+++ b/src/utils/createLink.js
@@ -18,12 +18,13 @@ import isItemActive from 'utils/isItemActive';
 import slugify from 'utils/slugify';
 import {colors, media} from 'theme';
 
-const createLinkBlog = ({item, location, section}) => {
-  const isActive = isItemActive(location, item);
+const createLinkBlog = ({item, location, section, isActive}) => {
+  const active =
+    typeof isActive === 'boolean' ? isActive : isItemActive(location, item);
 
   return (
-    <Link css={[linkCss, isActive && activeLinkCss]} to={item.id}>
-      {isActive && <span css={activeLinkBefore} />}
+    <Link css={[linkCss, active && activeLinkCss]} to={item.id}>
+      {active && <span css={activeLinkBefore} />}
       {item.title}
     </Link>
   );
@@ -52,14 +53,15 @@ const createLinkCommunity = ({item, location, section}) => {
   });
 };
 
-const createLinkDocs = ({item, location, section}) => {
-  const isActive = isItemActive(location, item);
+const createLinkDocs = ({item, location, section, isActive}) => {
+  const active =
+    typeof isActive === 'boolean' ? isActive : isItemActive(location, item);
 
   return (
     <Link
-      css={[linkCss, isActive && activeLinkCss]}
+      css={[linkCss, active && activeLinkCss]}
       to={slugify(item.id, section.directory)}>
-      {isActive && <span css={activeLinkBefore} />}
+      {active && <span css={activeLinkBefore} />}
       {item.title}
     </Link>
   );

From e9d0884a430641475e4025a57f515ea7cb394211 Mon Sep 17 00:00:00 2001
From: jxom <jakemoxey@gmail.com>
Date: Sun, 8 Oct 2017 11:33:36 +1100
Subject: [PATCH 3/5] PR Changes

---
 src/components/MarkdownPage/MarkdownPage.js   |   7 +-
 .../components/Sidebar/ScrollSyncSection.js   | 108 +++++++++
 src/templates/components/Sidebar/Section.js   | 228 ++++++------------
 src/templates/components/Sidebar/Sidebar.js   |   9 +-
 src/templates/tutorial.js                     |   1 +
 src/utils/createLink.js                       |  37 +--
 src/utils/isItemActive.js                     |   2 +-
 7 files changed, 210 insertions(+), 182 deletions(-)
 create mode 100644 src/templates/components/Sidebar/ScrollSyncSection.js

diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js
index cb4249a2..f4bc96ef 100644
--- a/src/components/MarkdownPage/MarkdownPage.js
+++ b/src/components/MarkdownPage/MarkdownPage.js
@@ -25,7 +25,8 @@ import createOgUrl from 'utils/createOgUrl';
 const MarkdownPage = ({
   authors,
   createLink,
-  date,
+	date,
+	enableScrollSync,
   ogDescription,
   location,
   markdownRemark,
@@ -98,6 +99,7 @@ const MarkdownPage = ({
 
             <div css={sharedStyles.articleLayout.sidebar}>
               <StickyResponsiveSidebar
+								enableScrollSync={enableScrollSync}
                 createLink={createLink}
                 defaultActiveSection={findSectionForPath(
                   location.pathname,
@@ -131,7 +133,8 @@ MarkdownPage.defaultProps = {
 MarkdownPage.propTypes = {
   authors: PropTypes.array.isRequired,
   createLink: PropTypes.func.isRequired,
-  date: PropTypes.string,
+	date: PropTypes.string,
+	enableScrollSync: PropTypes.bool,
   location: PropTypes.object.isRequired,
   markdownRemark: PropTypes.object.isRequired,
   sectionList: PropTypes.array.isRequired,
diff --git a/src/templates/components/Sidebar/ScrollSyncSection.js b/src/templates/components/Sidebar/ScrollSyncSection.js
new file mode 100644
index 00000000..45adcc54
--- /dev/null
+++ b/src/templates/components/Sidebar/ScrollSyncSection.js
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the CC-BY-4.0 license found
+ * in the LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import React, {Component} from 'react';
+import Section from './Section';
+
+class ScrollSyncSection extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      activeItemId: '',
+      itemTopOffsets: [],
+    };
+
+		this.calculateItemTopOffsets = this.calculateItemTopOffsets.bind(this);
+		this.handleResize = this.handleResize.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+  }
+
+  componentDidMount() {
+    this.calculateItemTopOffsets();
+
+		window.addEventListener('resize', this.handleResize);
+		window.addEventListener('scroll', this.handleScroll);
+  }
+
+  componentWillUnmount() {
+		window.removeEventListener('resize', this.handleResize);
+		window.removeEventListener('scroll', this.handleScroll);
+	}
+
+	calculateItemTopOffsets() {
+		const {section} = this.props;
+
+		const itemIds = _getItemIds(section.items);
+		this.setState({
+			itemTopOffsets: _getElementTopOffsetsById(itemIds),
+		});
+	}
+
+	handleResize() {
+		this.calculateItemTopOffsets();
+		this.handleScroll();
+	}
+
+  handleScroll() {
+    const {itemTopOffsets} = this.state;
+    const item = itemTopOffsets.find((itemTopOffset, i) => {
+      const nextItemTopOffset = itemTopOffsets[i + 1];
+      if (nextItemTopOffset) {
+        return (
+          window.scrollY >= itemTopOffset.offsetTop &&
+          window.scrollY < nextItemTopOffset.offsetTop
+        );
+      }
+      return window.scrollY >= itemTopOffset.offsetTop;
+		});
+    this.setState({
+      activeItemId: item ? item.id : '',
+    });
+  }
+
+  render() {
+    const {activeItemId} = this.state;
+    return (
+      <Section
+				isScrollSync
+				activeItemId={activeItemId} {...this.props}
+			/>
+    );
+  }
+}
+
+const _getItemIds = items =>
+  items
+    .map(item => {
+      let subItemIds = [];
+      if (item.subitems) {
+        subItemIds = item.subitems.map(subitem => subitem.id);
+      }
+      return [item.id, ...subItemIds];
+    })
+    .reduce((prev, current) => prev.concat(current));
+
+const _getElementTopOffsetsById = ids =>
+  ids
+    .map(id => {
+      const element = document.getElementById(id);
+      if (!element) {
+        return null;
+      }
+      return {
+        id,
+        offsetTop: element.offsetTop,
+      };
+    })
+		.filter(item => item);
+
+export default ScrollSyncSection;
diff --git a/src/templates/components/Sidebar/Section.js b/src/templates/components/Sidebar/Section.js
index a264ebfd..99215c66 100644
--- a/src/templates/components/Sidebar/Section.js
+++ b/src/templates/components/Sidebar/Section.js
@@ -9,161 +9,89 @@
 
 'use strict';
 
-import React, {Component} from 'react';
 import {colors, media} from 'theme';
+import isItemActive from 'utils/isItemActive';
 import MetaTitle from '../MetaTitle';
 import ChevronSvg from '../ChevronSvg';
 
-class Section extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      activeItemId: null,
-      itemTopOffsets: [],
-    };
-
-    this.handleScroll = this.handleScroll.bind(this);
-  }
-
-  componentDidMount() {
-    const {section} = this.props;
-
-    const itemIds = _getItemIds(section.items);
-    this.setState({
-      itemTopOffsets: _getElementTopOffsetsById(itemIds),
-    });
-
-    window.addEventListener('scroll', this.handleScroll);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('scroll', this.handleScroll);
-  }
-
-  handleScroll() {
-    const {itemTopOffsets} = this.state;
-    const item = itemTopOffsets.find((itemTopOffset, i) => {
-      const nextItemTopOffset = itemTopOffsets[i + 1];
-      if (nextItemTopOffset) {
-        return (
-          window.scrollY >= itemTopOffset.offsetTop &&
-          window.scrollY < nextItemTopOffset.offsetTop
-        );
-      }
-      return window.scrollY >= itemTopOffset.offsetTop;
-    });
-    this.setState({
-      activeItemId: item ? item.id : null,
-    });
-  }
-
-  render() {
-    const {
-      createLink,
-      isActive,
-      location,
-      onLinkClick,
-      onSectionTitleClick,
-      section,
-    } = this.props;
-    const {activeItemId} = this.state;
-    return (
-      <div>
-        <MetaTitle
-          onClick={onSectionTitleClick}
-          cssProps={{
-            marginTop: 10,
-
-            [media.greaterThan('small')]: {
-              color: isActive ? colors.text : colors.subtle,
-
-              ':hover': {
-                color: colors.text,
-              },
-            },
-          }}>
-          {section.title}
-          <ChevronSvg
-            cssProps={{
-              marginLeft: 7,
-              transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
-              transition: 'transform 0.2s ease',
-
-              [media.lessThan('small')]: {
-                display: 'none',
-              },
-            }}
-          />
-        </MetaTitle>
-        <ul
+const Section = ({
+	activeItemId,
+  createLink,
+	isActive,
+	isScrollSync,
+  location,
+  onLinkClick,
+  onSectionTitleClick,
+  section,
+}) => (
+  <div>
+    <MetaTitle
+      onClick={onSectionTitleClick}
+      cssProps={{
+        marginTop: 10,
+
+        [media.greaterThan('small')]: {
+          color: isActive ? colors.text : colors.subtle,
+
+          ':hover': {
+            color: colors.text,
+          },
+        },
+      }}>
+      {section.title}
+      <ChevronSvg
+        cssProps={{
+          marginLeft: 7,
+          transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
+          transition: 'transform 0.2s ease',
+
+          [media.lessThan('small')]: {
+            display: 'none',
+          },
+        }}
+      />
+    </MetaTitle>
+    <ul
+      css={{
+        marginBottom: 10,
+
+        [media.greaterThan('small')]: {
+          display: isActive ? 'block' : 'none',
+        },
+      }}>
+      {section.items.map(item => (
+        <li
+          key={item.id}
           css={{
-            marginBottom: 10,
-
-            [media.greaterThan('small')]: {
-              display: isActive ? 'block' : 'none',
-            },
+            marginTop: 5,
           }}>
-          {section.items.map(item => (
-            <li
-              key={item.id}
-              css={{
-                marginTop: 5,
-              }}>
-              {createLink({
-                item,
-                location,
-                onLinkClick,
-                section,
-                isActive: activeItemId === item.id,
-              })}
-
-              {item.subitems && (
-                <ul css={{marginLeft: 20}}>
-                  {item.subitems.map(subitem => (
-                    <li key={subitem.id}>
-                      {createLink({
-                        item: subitem,
-                        location,
-                        onLinkClick,
-                        section,
-                        isActive: activeItemId === subitem.id,
-                      })}
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </li>
-          ))}
-        </ul>
-      </div>
-    );
-  }
-}
-
-const _getItemIds = items =>
-  items
-    .map(item => {
-      let subItemIds = [];
-      if (item.subitems) {
-        subItemIds = item.subitems.map(subitem => subitem.id);
-      }
-      return [item.id, ...subItemIds];
-    })
-    .reduce((prev, current) => prev.concat(current));
-
-const _getElementTopOffsetsById = ids =>
-  ids
-    .map(id => {
-      const element = document.getElementById(id);
-      if (!element) {
-        return null;
-      }
-      return {
-        id,
-        offsetTop: element.offsetTop,
-      };
-    })
-    .filter(item => item);
+          {createLink({
+						isActive: isScrollSync ? activeItemId === item.id : isItemActive(location, item),
+            item,
+            location,
+            onLinkClick,
+            section,
+          })}
+
+          {item.subitems && (
+            <ul css={{marginLeft: 20}}>
+              {item.subitems.map(subitem => (
+                <li key={subitem.id}>
+                  {createLink({
+										isActive: isScrollSync ? activeItemId === subitem.id : isItemActive(location, subitem),
+                    item: subitem,
+                    location,
+                    onLinkClick,
+                    section,
+                  })}
+                </li>
+              ))}
+            </ul>
+          )}
+        </li>
+      ))}
+    </ul>
+  </div>
+);
 
 export default Section;
diff --git a/src/templates/components/Sidebar/Sidebar.js b/src/templates/components/Sidebar/Sidebar.js
index 830b23e4..5765a4c8 100644
--- a/src/templates/components/Sidebar/Sidebar.js
+++ b/src/templates/components/Sidebar/Sidebar.js
@@ -12,6 +12,7 @@
 import React, {Component} from 'react';
 import Flex from 'components/Flex';
 import Section from './Section';
+import ScrollSyncSection from './ScrollSyncSection';
 import {media} from 'theme';
 
 class Sidebar extends Component {
@@ -24,8 +25,10 @@ class Sidebar extends Component {
   }
 
   render() {
-    const {closeParentMenu, createLink, location, sectionList} = this.props;
-    const {activeSection} = this.state;
+    const {closeParentMenu, createLink, enableScrollSync, location, sectionList} = this.props;
+		const {activeSection} = this.state;
+
+		const SectionComponent = enableScrollSync ? ScrollSyncSection : Section;
 
     return (
       <Flex
@@ -46,7 +49,7 @@ class Sidebar extends Component {
           },
         }}>
         {sectionList.map((section, index) => (
-          <Section
+          <SectionComponent
             createLink={createLink}
             isActive={activeSection === section || sectionList.length === 1}
             key={index}
diff --git a/src/templates/tutorial.js b/src/templates/tutorial.js
index 3909c183..f628f89a 100644
--- a/src/templates/tutorial.js
+++ b/src/templates/tutorial.js
@@ -27,6 +27,7 @@ const Tutorial = ({data, location}) => {
 
   return (
     <MarkdownPage
+			enableScrollSync
       createLink={createLinkTutorial}
       location={location}
       markdownRemark={data.markdownRemark}
diff --git a/src/utils/createLink.js b/src/utils/createLink.js
index 2d1b1e99..89549a75 100644
--- a/src/utils/createLink.js
+++ b/src/utils/createLink.js
@@ -18,19 +18,16 @@ import isItemActive from 'utils/isItemActive';
 import slugify from 'utils/slugify';
 import {colors, media} from 'theme';
 
-const createLinkBlog = ({item, location, section, isActive}) => {
-  const active =
-    typeof isActive === 'boolean' ? isActive : isItemActive(location, item);
-
+const createLinkBlog = ({isActive, item, section}) => {
   return (
-    <Link css={[linkCss, active && activeLinkCss]} to={item.id}>
-      {active && <span css={activeLinkBefore} />}
+    <Link css={[linkCss, isActive && activeLinkCss]} to={item.id}>
+      {isActive && <span css={activeLinkBefore} />}
       {item.title}
     </Link>
   );
 };
 
-const createLinkCommunity = ({item, location, section}) => {
+const createLinkCommunity = ({isActive, item, section}) => {
   if (item.href) {
     return (
       <a css={[linkCss]} href={item.href} target="_blank" rel="noopener">
@@ -47,42 +44,30 @@ const createLinkCommunity = ({item, location, section}) => {
     );
   }
   return createLinkDocs({
+		isActive,
     item,
-    location,
     section,
   });
 };
 
-const createLinkDocs = ({item, location, section, isActive}) => {
-  const active =
-    typeof isActive === 'boolean' ? isActive : isItemActive(location, item);
-
+const createLinkDocs = ({isActive, item, section}) => {
   return (
     <Link
-      css={[linkCss, active && activeLinkCss]}
+      css={[linkCss, isActive && activeLinkCss]}
       to={slugify(item.id, section.directory)}>
-      {active && <span css={activeLinkBefore} />}
+      {isActive && <span css={activeLinkBefore} />}
       {item.title}
     </Link>
   );
 };
 
-const createLinkTutorial = ({
-  item,
-  location,
-  onLinkClick,
-  section,
-  isActive,
-}) => {
-  const active =
-    typeof isActive === 'boolean' ? isActive : isItemActive(location, item);
-
+const createLinkTutorial = ({isActive, item, onLinkClick, section}) => {
   return (
     <Link
-      css={[linkCss, active && activeLinkCss]}
+      css={[linkCss, isActive && activeLinkCss]}
       onClick={onLinkClick}
       to={item.href}>
-      {active && <span css={activeLinkBefore} />}
+      {isActive && <span css={activeLinkBefore} />}
       {item.title}
     </Link>
   );
diff --git a/src/utils/isItemActive.js b/src/utils/isItemActive.js
index 076b50aa..ba69c090 100644
--- a/src/utils/isItemActive.js
+++ b/src/utils/isItemActive.js
@@ -20,7 +20,7 @@ const toAnchor = (href = '') => {
 // This comment should not be true anymore since we're using 300 redirects
 
 const isItemActive = (location, item) => {
-  if (location.hash) {
+	if (location.hash) {
     if (item.href) {
       return location.hash === toAnchor(item.href);
     }

From 15fc32561f9128fa9f7ba7179249d307d2d21c3e Mon Sep 17 00:00:00 2001
From: jxom <jakemoxey@gmail.com>
Date: Sun, 8 Oct 2017 11:34:24 +1100
Subject: [PATCH 4/5] Run check-all script

---
 src/components/MarkdownPage/MarkdownPage.js   | 10 ++--
 .../components/Sidebar/ScrollSyncSection.js   | 47 +++++++++----------
 src/templates/components/Sidebar/Section.js   | 14 ++++--
 src/templates/components/Sidebar/Sidebar.js   | 12 +++--
 src/templates/tutorial.js                     |  2 +-
 src/utils/createLink.js                       |  2 +-
 src/utils/isItemActive.js                     |  2 +-
 7 files changed, 47 insertions(+), 42 deletions(-)

diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js
index f4bc96ef..737a84d1 100644
--- a/src/components/MarkdownPage/MarkdownPage.js
+++ b/src/components/MarkdownPage/MarkdownPage.js
@@ -25,8 +25,8 @@ import createOgUrl from 'utils/createOgUrl';
 const MarkdownPage = ({
   authors,
   createLink,
-	date,
-	enableScrollSync,
+  date,
+  enableScrollSync,
   ogDescription,
   location,
   markdownRemark,
@@ -99,7 +99,7 @@ const MarkdownPage = ({
 
             <div css={sharedStyles.articleLayout.sidebar}>
               <StickyResponsiveSidebar
-								enableScrollSync={enableScrollSync}
+                enableScrollSync={enableScrollSync}
                 createLink={createLink}
                 defaultActiveSection={findSectionForPath(
                   location.pathname,
@@ -133,8 +133,8 @@ MarkdownPage.defaultProps = {
 MarkdownPage.propTypes = {
   authors: PropTypes.array.isRequired,
   createLink: PropTypes.func.isRequired,
-	date: PropTypes.string,
-	enableScrollSync: PropTypes.bool,
+  date: PropTypes.string,
+  enableScrollSync: PropTypes.bool,
   location: PropTypes.object.isRequired,
   markdownRemark: PropTypes.object.isRequired,
   sectionList: PropTypes.array.isRequired,
diff --git a/src/templates/components/Sidebar/ScrollSyncSection.js b/src/templates/components/Sidebar/ScrollSyncSection.js
index 45adcc54..a1a717b6 100644
--- a/src/templates/components/Sidebar/ScrollSyncSection.js
+++ b/src/templates/components/Sidebar/ScrollSyncSection.js
@@ -21,36 +21,36 @@ class ScrollSyncSection extends Component {
       itemTopOffsets: [],
     };
 
-		this.calculateItemTopOffsets = this.calculateItemTopOffsets.bind(this);
-		this.handleResize = this.handleResize.bind(this);
+    this.calculateItemTopOffsets = this.calculateItemTopOffsets.bind(this);
+    this.handleResize = this.handleResize.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
   }
 
   componentDidMount() {
     this.calculateItemTopOffsets();
 
-		window.addEventListener('resize', this.handleResize);
-		window.addEventListener('scroll', this.handleScroll);
+    window.addEventListener('resize', this.handleResize);
+    window.addEventListener('scroll', this.handleScroll);
   }
 
   componentWillUnmount() {
-		window.removeEventListener('resize', this.handleResize);
-		window.removeEventListener('scroll', this.handleScroll);
-	}
+    window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener('scroll', this.handleScroll);
+  }
 
-	calculateItemTopOffsets() {
-		const {section} = this.props;
+  calculateItemTopOffsets() {
+    const {section} = this.props;
 
-		const itemIds = _getItemIds(section.items);
-		this.setState({
-			itemTopOffsets: _getElementTopOffsetsById(itemIds),
-		});
-	}
+    const itemIds = _getItemIds(section.items);
+    this.setState({
+      itemTopOffsets: _getElementTopOffsetsById(itemIds),
+    });
+  }
 
-	handleResize() {
-		this.calculateItemTopOffsets();
-		this.handleScroll();
-	}
+  handleResize() {
+    this.calculateItemTopOffsets();
+    this.handleScroll();
+  }
 
   handleScroll() {
     const {itemTopOffsets} = this.state;
@@ -63,7 +63,7 @@ class ScrollSyncSection extends Component {
         );
       }
       return window.scrollY >= itemTopOffset.offsetTop;
-		});
+    });
     this.setState({
       activeItemId: item ? item.id : '',
     });
@@ -71,12 +71,7 @@ class ScrollSyncSection extends Component {
 
   render() {
     const {activeItemId} = this.state;
-    return (
-      <Section
-				isScrollSync
-				activeItemId={activeItemId} {...this.props}
-			/>
-    );
+    return <Section isScrollSync activeItemId={activeItemId} {...this.props} />;
   }
 }
 
@@ -103,6 +98,6 @@ const _getElementTopOffsetsById = ids =>
         offsetTop: element.offsetTop,
       };
     })
-		.filter(item => item);
+    .filter(item => item);
 
 export default ScrollSyncSection;
diff --git a/src/templates/components/Sidebar/Section.js b/src/templates/components/Sidebar/Section.js
index 99215c66..4630ccda 100644
--- a/src/templates/components/Sidebar/Section.js
+++ b/src/templates/components/Sidebar/Section.js
@@ -15,10 +15,10 @@ import MetaTitle from '../MetaTitle';
 import ChevronSvg from '../ChevronSvg';
 
 const Section = ({
-	activeItemId,
+  activeItemId,
   createLink,
-	isActive,
-	isScrollSync,
+  isActive,
+  isScrollSync,
   location,
   onLinkClick,
   onSectionTitleClick,
@@ -66,7 +66,9 @@ const Section = ({
             marginTop: 5,
           }}>
           {createLink({
-						isActive: isScrollSync ? activeItemId === item.id : isItemActive(location, item),
+            isActive: isScrollSync
+              ? activeItemId === item.id
+              : isItemActive(location, item),
             item,
             location,
             onLinkClick,
@@ -78,7 +80,9 @@ const Section = ({
               {item.subitems.map(subitem => (
                 <li key={subitem.id}>
                   {createLink({
-										isActive: isScrollSync ? activeItemId === subitem.id : isItemActive(location, subitem),
+                    isActive: isScrollSync
+                      ? activeItemId === subitem.id
+                      : isItemActive(location, subitem),
                     item: subitem,
                     location,
                     onLinkClick,
diff --git a/src/templates/components/Sidebar/Sidebar.js b/src/templates/components/Sidebar/Sidebar.js
index 5765a4c8..770781ff 100644
--- a/src/templates/components/Sidebar/Sidebar.js
+++ b/src/templates/components/Sidebar/Sidebar.js
@@ -25,10 +25,16 @@ class Sidebar extends Component {
   }
 
   render() {
-    const {closeParentMenu, createLink, enableScrollSync, location, sectionList} = this.props;
-		const {activeSection} = this.state;
+    const {
+      closeParentMenu,
+      createLink,
+      enableScrollSync,
+      location,
+      sectionList,
+    } = this.props;
+    const {activeSection} = this.state;
 
-		const SectionComponent = enableScrollSync ? ScrollSyncSection : Section;
+    const SectionComponent = enableScrollSync ? ScrollSyncSection : Section;
 
     return (
       <Flex
diff --git a/src/templates/tutorial.js b/src/templates/tutorial.js
index f628f89a..d4854f8b 100644
--- a/src/templates/tutorial.js
+++ b/src/templates/tutorial.js
@@ -27,7 +27,7 @@ const Tutorial = ({data, location}) => {
 
   return (
     <MarkdownPage
-			enableScrollSync
+      enableScrollSync
       createLink={createLinkTutorial}
       location={location}
       markdownRemark={data.markdownRemark}
diff --git a/src/utils/createLink.js b/src/utils/createLink.js
index 89549a75..c5cedb54 100644
--- a/src/utils/createLink.js
+++ b/src/utils/createLink.js
@@ -44,7 +44,7 @@ const createLinkCommunity = ({isActive, item, section}) => {
     );
   }
   return createLinkDocs({
-		isActive,
+    isActive,
     item,
     section,
   });
diff --git a/src/utils/isItemActive.js b/src/utils/isItemActive.js
index ba69c090..076b50aa 100644
--- a/src/utils/isItemActive.js
+++ b/src/utils/isItemActive.js
@@ -20,7 +20,7 @@ const toAnchor = (href = '') => {
 // This comment should not be true anymore since we're using 300 redirects
 
 const isItemActive = (location, item) => {
-	if (location.hash) {
+  if (location.hash) {
     if (item.href) {
       return location.hash === toAnchor(item.href);
     }

From 39def4b50c34f0259d4fa25bb784d4a4181734c0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sun, 8 Oct 2017 10:39:57 -0700
Subject: [PATCH 5/5] Removed no-longer-used isItemActive

---
 src/utils/createLink.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/utils/createLink.js b/src/utils/createLink.js
index c5cedb54..f864725c 100644
--- a/src/utils/createLink.js
+++ b/src/utils/createLink.js
@@ -14,7 +14,6 @@
 import Link from 'gatsby-link';
 import React from 'react';
 import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
-import isItemActive from 'utils/isItemActive';
 import slugify from 'utils/slugify';
 import {colors, media} from 'theme';