Add basic display for tutorials

iterative · Dec 3, 2019 · 48c1e28 · 48c1e28
1 parent 696d32e
commit 48c1e28
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "lodash.kebabcase": "^4.1.1",
     "lodash.startcase": "^4.4.0",
     "lodash.throttle": "^4.1.1",
+    "lodash.topairs": "^4.3.0",
     "next": "^9.1.4",
     "perfect-scrollbar": "^1.4.0",
     "prop-types": "^15.7.2",

diff --git a/pages/doc.js b/pages/doc.js
@@ -176,7 +176,7 @@ export default class Documentation extends Component {
 
   render() {
     const {
-      currentItem: { source, path, label, next, prev },
+      currentItem: { source, path, label, tutorials, next, prev },
       headings,
       markdown,
       pageNotFound,
@@ -225,7 +225,11 @@ export default class Documentation extends Component {
               onNavigate={this.onNavigate}
             />
           )}
-          <RightPanel headings={headings} githubLink={githubLink} />
+          <RightPanel
+            headings={headings}
+            tutorials={tutorials}
+            githubLink={githubLink}
+          />
         </Container>
       </Page>
     )

diff --git a/src/Documentation/RightPanel/RightPanel.js b/src/Documentation/RightPanel/RightPanel.js
@@ -4,6 +4,8 @@ import styled from 'styled-components'
 import { LightButton } from '../LightButton'
 // utils
 import throttle from 'lodash.throttle'
+import topairs from 'lodash.topairs'
+import startCase from 'lodash.startcase'
 
 const ROOT_ELEMENT = 'bodybag'
 const MARKDOWN_ROOT = '#markdown-root'
@@ -109,33 +111,43 @@ export default class RightPanel extends React.PureComponent {
   }, 100)
 
   render() {
-    const { headings, githubLink } = this.props
+    const { headings, githubLink, tutorials } = this.props
     const { current } = this.state
 
+    const tutorialsData = topairs(tutorials)
+
     return (
       <Wrapper>
-        {headings.length ? (
+        {!headings.length && !tutorialsData.length && <Spacer />}
+        {headings.length > 0 && (
           <>
             <Header>Content</Header>
             <hr />
-            {headings.map(({ slug, text }, headingIndex) => (
+            {headings.map(({ slug, text }) => (
               <HeadingLink
                 isCurrent={current === slug}
                 level={3}
-                key={`link-${headingIndex}`}
+                key={`link-${slug}`}
                 href={`#${slug}`}
               >
                 {text}
               </HeadingLink>
             ))}
             <br />
           </>
-        ) : (
+        )}
+        {tutorialsData.length > 0 && (
           <>
-            <Spacer />
+            <Header>Tutorials</Header>
+            <hr />
+            {tutorialsData.map(([key, value]) => (
+              <HeadingLink href={value} key={value} isCurrent={true}>
+                {startCase(key)}
+              </HeadingLink>
+            ))}
+            <br />
           </>
         )}
-
         <Description>
           <span role="img" aria-label="bug">
             🐛
@@ -173,6 +185,7 @@ RightPanel.propTypes = {
       text: PropTypes.string.isRequired
     })
   ).isRequired,
+  tutorials: PropTypes.object,
   githubLink: PropTypes.string.isRequired
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -5702,6 +5702,11 @@ lodash.throttle@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
 
+lodash.topairs@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.topairs/-/lodash.topairs-4.3.0.tgz#3b6deaa37d60fb116713c46c5f17ea190ec48d64"
+  integrity sha1-O23qo31g+xFnE8RsXxfqGQ7EjWQ=
+
 lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"