Cleaned up Sidebar code a little (#10841)

Author: bvaughn

www/src/components/MarkdownPage/MarkdownPage.js

@@ -24,6 +24,7 @@ import {urlRoot} from 'constants';
 
 const MarkdownPage = ({
   authors,
+  createLink,
   date,
   ogDescription,
   location,
@@ -93,6 +94,7 @@ const MarkdownPage = ({
 
             <div css={sharedStyles.articleLayout.sidebar}>
               <StickyResponsiveSidebar
+                createLink={createLink}
                 defaultActiveSection={findSectionForPath(
                   location.pathname,
                   sectionList,
@@ -123,6 +125,7 @@ MarkdownPage.defaultProps = {
 // TODO Better types
 MarkdownPage.propTypes = {
   authors: PropTypes.array.isRequired,
+  createLink: PropTypes.func.isRequired,
   date: PropTypes.string,
   location: PropTypes.object.isRequired,
   markdownRemark: PropTypes.object.isRequired,

www/src/pages/docs/error-decoder.html.js

@@ -17,9 +17,9 @@ import MarkdownHeader from 'components/MarkdownHeader';
 import React from 'react';
 import StickyResponsiveSidebar from 'components/StickyResponsiveSidebar';
 import {colors, sharedStyles} from 'theme';
+import {createLinkDocs} from 'utils/createLink';
 import findSectionForPath from 'utils/findSectionForPath';
-
-import sectionList from '../../../../docs/_data/nav_docs.yml';
+import {sectionListDocs} from 'utils/sectionList';
 
 const ErrorPage = ({data, location}) => (
   <Flex
@@ -76,12 +76,13 @@ const ErrorPage = ({data, location}) => (
 
         <div css={sharedStyles.articleLayout.sidebar}>
           <StickyResponsiveSidebar
+            createLink={createLinkDocs}
             defaultActiveSection={findSectionForPath(
               location.pathname,
-              sectionList,
+              sectionListDocs,
             )}
             location={location}
-            sectionList={sectionList}
+            sectionList={sectionListDocs}
             title={data.markdownRemark.frontmatter.title}
           />
         </div>

www/src/templates/blog.js

@@ -9,11 +9,11 @@
 
 'use strict';
 
-import MarkdownPage from 'components/MarkdownPage';
 import PropTypes from 'prop-types';
 import React from 'react';
+import MarkdownPage from 'components/MarkdownPage';
+import {createLinkBlog} from 'utils/createLink';
 
-// TODO This is hacky
 const toSectionList = allMarkdownRemark => [
   {
     title: 'Recent Posts',
@@ -32,6 +32,7 @@ const toSectionList = allMarkdownRemark => [
 const Blog = ({data, location}) => (
   <MarkdownPage
     authors={data.markdownRemark.frontmatter.author}
+    createLink={createLinkBlog}
     date={data.markdownRemark.fields.date}
     location={location}
     ogDescription={data.markdownRemark.excerpt}

www/src/templates/community.js

@@ -12,18 +12,15 @@
 import MarkdownPage from 'components/MarkdownPage';
 import PropTypes from 'prop-types';
 import React from 'react';
-
-import sectionList from '../../../docs/_data/nav_community.yml';
-
-sectionList.forEach(item => {
-  item.directory = 'community';
-});
+import {createLinkCommunity} from 'utils/createLink';
+import {sectionListCommunity} from 'utils/sectionList';
 
 const Community = ({data, location}) => (
   <MarkdownPage
+    createLink={createLinkCommunity}
     location={location}
     markdownRemark={data.markdownRemark}
-    sectionList={sectionList}
+    sectionList={sectionListCommunity}
     titlePostfix=" - React"
   />
 );

www/src/templates/components/Sidebar/Section.js

@@ -5,23 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @emails react-core
-*/
+ */
 
 'use strict';
 
-import isItemActive from 'utils/isItemActive';
-import Link from 'gatsby-link';
 import React from 'react';
-import slugify from 'utils/slugify';
 import {colors, media} from 'theme';
 import MetaTitle from '../MetaTitle';
-import ExternalLinkSvg from '../ExternalLinkSvg';
 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 = ({isActive, location, onClick, section}) => (
+const Section = ({createLink, isActive, location, onClick, section}) => (
   <div>
     <MetaTitle
       onClick={onClick}
@@ -63,13 +59,13 @@ const Section = ({isActive, location, onClick, section}) => (
           css={{
             marginTop: 5,
           }}>
-          {CreateLink(location, section, item)}
+          {createLink(location, section, item)}
 
           {item.subitems &&
             <ul css={{marginLeft: 20}}>
               {item.subitems.map(subitem => (
                 <li key={subitem.id}>
-                  {CreateLink(location, section, subitem)}
+                  {createLink(location, section, subitem)}
                 </li>
               ))}
             </ul>}
@@ -79,76 +75,4 @@ const Section = ({isActive, location, onClick, section}) => (
   </div>
 );
 
-const activeLinkCss = {
-  fontWeight: 'bold',
-};
-
-const activeLinkBefore = {
-  width: 4,
-  height: 25,
-  borderLeft: `4px solid ${colors.brand}`,
-  paddingLeft: 16,
-  position: 'absolute',
-  left: 0,
-  marginTop: -3,
-
-  [media.greaterThan('largerSidebar')]: {
-    left: 15,
-  },
-};
-
-const linkCss = {
-  color: colors.text,
-  display: 'inline-block',
-  borderBottom: '1px solid transparent',
-  transition: 'border 0.2s ease',
-  marginTop: 5,
-
-  '&:hover': {
-    color: colors.subtle,
-  },
-};
-
-const CreateLink = (location, section, item) => {
-  const isActive = isItemActive(location, item);
-  if (item.id.includes('.html')) {
-    return (
-      <Link css={[linkCss, isActive && activeLinkCss]} to={item.id}>
-        {isActive && <span css={activeLinkBefore} />}
-        {item.title}
-      </Link>
-    );
-  } else if (item.forceInternal) {
-    return (
-      <Link css={[linkCss, isActive && activeLinkCss]} to={item.href}>
-        {isActive && <span css={activeLinkBefore} />}
-        {item.title}
-      </Link>
-    );
-  } else if (item.href) {
-    return (
-      <a css={[linkCss]} href={item.href}>
-        {item.title}
-        <ExternalLinkSvg
-          cssProps={{
-            verticalAlign: -2,
-            display: 'inline-block',
-            marginLeft: 5,
-            color: colors.subtle,
-          }}
-        />
-      </a>
-    );
-  } else {
-    return (
-      <Link
-        css={[linkCss, isActive && activeLinkCss]}
-        to={slugify(item.id, section.directory)}>
-        {isActive && <span css={activeLinkBefore} />}
-        {item.title}
-      </Link>
-    );
-  }
-};
-
 export default Section;

www/src/templates/components/Sidebar/Sidebar.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @emails react-core
-*/
+ */
 
 'use strict';
 
@@ -24,7 +24,7 @@ class Sidebar extends Component {
   }
 
   render() {
-    const {location, sectionList} = this.props;
+    const {createLink, location, sectionList} = this.props;
     const {activeSection} = this.state;
 
     return (
@@ -47,6 +47,7 @@ class Sidebar extends Component {
         }}>
         {sectionList.map((section, index) => (
           <Section
+            createLink={createLink}
             isActive={activeSection === section || sectionList.length === 1}
             key={index}
             location={location}

www/src/templates/docs.js

@@ -12,27 +12,15 @@
 import MarkdownPage from 'components/MarkdownPage';
 import PropTypes from 'prop-types';
 import React from 'react';
-
-import sectionListA from '../../../docs/_data/nav_docs.yml';
-import sectionListB from '../../../docs/_data/nav_contributing.yml';
-
-const sectionList = sectionListA
-  .map(item => {
-    item.directory = 'docs';
-    return item;
-  })
-  .concat(
-    sectionListB.map(item => {
-      item.directory = 'contributing';
-      return item;
-    }),
-  );
+import {createLinkDocs} from 'utils/createLink';
+import {sectionListDocs} from 'utils/sectionList';
 
 const Docs = ({data, location}) => (
   <MarkdownPage
+    createLink={createLinkDocs}
     location={location}
     markdownRemark={data.markdownRemark}
-    sectionList={sectionList}
+    sectionList={sectionListDocs}
     titlePostfix=" - React"
   />
 );

www/src/templates/installation.js

@@ -17,25 +17,12 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import StickyResponsiveSidebar from 'components/StickyResponsiveSidebar';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
+import {createLinkDocs} from 'utils/createLink';
 import findSectionForPath from 'utils/findSectionForPath';
+import {sectionListDocs} from 'utils/sectionList';
 import {sharedStyles} from 'theme';
 import {urlRoot} from 'constants';
 
-import sectionListA from '../../../docs/_data/nav_docs.yml';
-import sectionListB from '../../../docs/_data/nav_contributing.yml';
-
-const sectionList = sectionListA
-  .map(item => {
-    item.directory = 'docs';
-    return item;
-  })
-  .concat(
-    sectionListB.map(item => {
-      item.directory = 'contributing';
-      return item;
-    }),
-  );
-
 // HACK: copied from 'installation.md'
 // TODO: clean this up.
 function setSelected(value) {
@@ -180,12 +167,13 @@ class InstallationPage extends Component {
 
               <div css={sharedStyles.articleLayout.sidebar}>
                 <StickyResponsiveSidebar
+                  createLink={createLinkDocs}
                   defaultActiveSection={findSectionForPath(
                     location.pathname,
-                    sectionList,
+                    sectionListDocs,
                   )}
                   location={location}
-                  sectionList={sectionList}
+                  sectionList={sectionListDocs}
                   title="Installation"
                 />
               </div>

www/src/templates/tutorial.js

@@ -12,14 +12,15 @@
 import MarkdownPage from 'components/MarkdownPage';
 import PropTypes from 'prop-types';
 import React from 'react';
-
-import sectionList from '../../../docs/_data/nav_tutorial.yml';
+import {createLinkTutorial} from 'utils/createLink';
+import {sectionListTutorial} from 'utils/sectionList';
 
 const Tutorial = ({data, location}) => (
   <MarkdownPage
+    createLink={createLinkTutorial}
     location={location}
     markdownRemark={data.markdownRemark}
-    sectionList={sectionList}
+    sectionList={sectionListTutorial}
     titlePostfix=" - React"
   />
 );