feat: add dynamic sidebar

stjudecloud · Dec 28, 2020 · a4f581f · a4f581f
1 parent 4bf1e3e
commit a4f581f
Show file tree

Hide file tree

Showing 12 changed files with 159 additions and 104 deletions.
diff --git a/docs/genomics-platform/faq/index.md → ...m/faq/frequently-asked-questions/index.md b/docs/genomics-platform/faq/index.md → ...m/faq/frequently-asked-questions/index.md
diff --git a/...-a-data-request/data-browser-overview.png → ...-a-data-request/data-browser-overview.png b/...-a-data-request/data-browser-overview.png → ...-a-data-request/data-browser-overview.png
diff --git a/...s-platform/making-a-data-request/index.md → ...ng-started/making-a-data-request/index.md b/...s-platform/making-a-data-request/index.md → ...ng-started/making-a-data-request/index.md
diff --git a/...data-request/request-data-select-DAUs.png → ...data-request/request-data-select-DAUs.png b/...data-request/request-data-select-DAUs.png → ...data-request/request-data-select-DAUs.png
diff --git a/...data-request/request-data-select-data.gif → ...data-request/request-data-select-data.gif b/...data-request/request-data-select-data.gif → ...data-request/request-data-select-data.gif
diff --git a/...ta-request/request-data-setup-wizard1.gif → ...ta-request/request-data-setup-wizard1.gif b/...ta-request/request-data-setup-wizard1.gif → ...ta-request/request-data-setup-wizard1.gif
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -22,7 +22,7 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
     createNodeField({
       node,
       name: `slug`,
-      value: slug
+      value: slug,
     })
   }
 }
@@ -56,11 +56,11 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
   result.data.allMarkdownRemark.edges.forEach(({ node }) => {
     createPage({
-      path: node.fields.slug,
-      component: path.resolve(`./src/templates/doc.js`),
+      path: "/docs" + node.fields.slug,
+      component: path.resolve(`./src/templates/docs-layout.js`),
       context: {
-        slug: node.fields.slug
-      }
+        slug: node.fields.slug,
+      },
     })
   })
-}
+}
diff --git a/src/components/sidebars/ActionsSidebarRight.js b/src/components/sidebars/ActionsSidebarRight.js
@@ -22,10 +22,10 @@ function editOnGitHub(fileAbsolutePath) {
 
   const position = fileAbsolutePath.indexOf(token) + token.length
   const relativeFilePath = fileAbsolutePath.substring(position)
-
+  console.log(relativeFilePath)
   return function () {
     let url =
-      "https://github.com/stjudecloud/docs-v2/edit/master/docs/" +
+      "https://github.com/stjudecloud/university/edit/master/docs/" +
       relativeFilePath
     window.open(url)
   }

diff --git a/src/components/sidebars/ContentSidebarLeft.js b/src/components/sidebars/ContentSidebarLeft.js
@@ -1,5 +1,6 @@
 import React, { useState } from "react"
-import { StaticQuery, graphql } from "gatsby"
+import { ScrollContainer } from "gatsby-react-router-scroll"
+import { StaticQuery, graphql, Link } from "gatsby"
 import { globalHistory } from "@reach/router"
 import Chevron from "../../icons/chevron.svg"
 import GenomicsPlatformLogo from "../../icons/stjudecloud-genomics-platform-logo.svg"
@@ -18,6 +19,13 @@ const ContentsSidebarLeft = () => {
               icon
               path
               title
+              chapters {
+                title
+                pages {
+                  title
+                  path
+                }
+              }
             }
           }
         }
@@ -26,81 +34,89 @@ const ContentsSidebarLeft = () => {
         const {
           configYaml: { modules },
         } = data
-        const path = globalHistory.location.pathname
+        const currentPathBeingViewed = globalHistory.location.pathname
         let currentModule = null
 
         for (let i = 0; i < modules.length; i++) {
-          if (path.startsWith(modules[i].path)) {
+          if (currentPathBeingViewed.startsWith(modules[i].path)) {
             currentModule = modules[i]
             break
           }
         }
 
         if (!currentModule) {
-          throw new Error(`Could not find current module for page: ${path}.`)
+          throw new Error(
+            `Could not find current module for page: ${currentPathBeingViewed}.`
+          )
         }
 
-        const { icon: currentIcon, title: currentTitle } = currentModule
-        console.log(`Current icon: ${currentIcon}`)
+        const {
+          icon: currentIcon,
+          title: currentTitle,
+          chapters: currentChapters,
+        } = currentModule
         const CurrentIconImported = require("../../icons/" + currentIcon)
 
         return (
-          <div className="invisible xl:visible z-30 contents-sidebar fixed w-1/5 bg-coolGray-50 min-h-screen border-r border-coolGray-100 border-solid">
-            <div className="absolute inset-x-0">
-              <div className="flex w-full items-center justify-center bg-coolGray-100 hover:bg-coolGray-200 px-4 h-28 cursor-pointer">
-                <div
-                  className="w-full flex items-center justify-center"
-                  onMouseEnter={() => {
-                    setIsOpen(true)
-                  }}
-                  onMouseLeave={() => setIsOpen(false)}
-                >
-                  {}
-                  <CurrentIconImported
-                    className="mr-2"
-                    width="48px"
-                    height="48px"
-                  />
-                  <span
-                    className="font-semibold text-coolGray-700"
-                    style={{ fontSize: "18px" }}
-                  >
-                    {currentTitle}
-                  </span>
-                  <Chevron
-                    style={{ transform: [{ rotate: "90deg" }] }}
-                    className="ml-2 fill-current text-coolGray-500"
-                    width="16px"
-                    height="16px"
-                  />
+          <ScrollContainer key="content-sidebar">
+            <div className="invisible xl:visible z-30 contents-sidebar fixed w-1/5 bg-coolGray-50 min-h-screen border-r border-coolGray-100 border-solid overflow-y-auto">
+              <div className="absolute inset-0">
+                <div id="module" className="h-28">
+                  <div className="flex w-full items-center justify-center bg-coolGray-100 hover:bg-coolGray-200 px-4 h-28 cursor-pointer">
+                    <div
+                      className="w-full flex items-center justify-center"
+                      onMouseEnter={() => {
+                        setIsOpen(true)
+                      }}
+                      onMouseLeave={() => setIsOpen(false)}
+                    >
+                      {}
+                      <CurrentIconImported
+                        className="mr-2"
+                        width="48px"
+                        height="48px"
+                      />
+                      <span
+                        className="font-semibold text-coolGray-700"
+                        style={{ fontSize: "18px" }}
+                      >
+                        {currentTitle}
+                      </span>
+                      <Chevron
+                        style={{ transform: [{ rotate: "90deg" }] }}
+                        className="ml-2 fill-current text-coolGray-500"
+                        width="16px"
+                        height="16px"
+                      />
+                    </div>
+                    <ModulePopUp show={isOpen} modules={modules} />
+                  </div>
+                </div>
+                <div className="my-5 ml-7 mr-3 pb-28">
+                  {currentChapters.map(e => {
+                    return (
+                      <ul className="chapter">
+                        <li className="title">{e.title}</li>
+                        {e.pages.map(page => {
+                          return (
+                            <li
+                              className={
+                                currentPathBeingViewed === page.path
+                                  ? "active"
+                                  : ""
+                              }
+                            >
+                              <Link to={page.path}>{page.title}</Link>
+                            </li>
+                          )
+                        })}
+                      </ul>
+                    )
+                  })}
                 </div>
-                <ModulePopUp show={isOpen} modules={modules} />
               </div>
             </div>
-            <ul className="pt-6 pl-7 pr-3">
-              <li className="title">Getting Started</li>
-              <li>First Steps</li>
-              <li>Accounts / Billing</li>
-              <li>Requesting Data</li>
-              <li>About Our Data</li>
-              <li className="active">Making a Data Request</li>
-              <li>Filling Out the DAA</li>
-              <li>Decision Making Criteria</li>
-
-              <li className="title">Managing Data</li>
-              <li>Overview</li>
-              <li>Uploading / Downloading Data</li>
-              <li>Renewing Your DAA</li>
-
-              <li className="title">Analyzing Data</li>
-              <li>Command Line Interaction</li>
-              <li>Running Our Workflows</li>
-              <li>Create Your Own Workflow</li>
-
-              <li className="title">Frequently Asked Questions</li>
-              <li>Frequently Asked Questions</li>
-            </ul>
-          </div>
+          </ScrollContainer>
         )
       }}
     />

diff --git a/src/config/docs.yaml b/src/config/docs.yaml
@@ -3,22 +3,58 @@ github:
   edit_path: edit/master/src/chapters # no preceding '/'
 modules:
   - title: "Genomics Platform"
-    path: /genomics-platform/
+    path: /docs/genomics-platform/
     icon: stjudecloud-genomics-platform-logo.svg
     chapters:
       - title: "Getting Started"
-        path: getting-started/
-      - title: "Requesting Data"
-        path: requesting-data/
+        pages:
+          - title: "First Steps"
+            path: /docs/genomics-platform/getting-started/first-steps/
+          - title: "Accounts / Billing"
+            path: /docs/genomics-platform/getting-started/accounts-and-billing/
+          - title: "About Our Data"
+            path: /docs/genomics-platform/getting-started/about-our-data/
+          - title: "Requesting Data"
+            path: /docs/genomics-platform/getting-started/requesting-data/
+          - title: "Making a Data Request"
+            path: /docs/genomics-platform/getting-started/making-a-data-request/
+          - title: "Filling Out the DAA"
+            path: /docs/genomics-platform/getting-started/filling-out-the-daa/
+          - title: "Decision Making Criteria"
+            path: /docs/genomics-platform/getting-started/decision-making-criteria/
       - title: "Managing Data"
-        path: managing-data/
-      - title: "Accounts and Billing"
-        path: accounts-and-billing/
-      - title: "Frequently Asked Questions"
-        path: faq/
+        pages:
+          - title: "Overview"
+            path: /docs/genomics-platform/managing-data/overview/
+          - title: "Uploading / Downloading Data"
+            path: /docs/genomics-platform/managing-data/uploading-downloading-data/
+          - title: "Renewing Your DAA"
+            path: /docs/genomics-platform/managing-data/renewing-your-daa/
+      - title: "Analyzing Data"
+        pages:
+          - title: "Command Line Interaction"
+            path: /docs/genomics-platform/analyzing-data/command-line-interaction/
+          - title: "Running Our Workflows"
+            path: /docs/genomics-platform/analyzing-data/running-our-workflows/
+          - title: "Create Your Own Workflow"
+            path: /docs/genomics-platform/analyzing-data/create-your-own-workflow
+      - title: "FAQ"
+        pages:
+          - title: "Frequently Asked Questions"
+            path: /docs/genomics-platform/faq/frequently-asked-questions/
   - title: "PeCan"
-    path: /pecan/
+    path: /docs/pecan/
     icon: stjudecloud-pecan-logo.svg
+    chapters:
+      - title: "Getting Started"
+        pages:
+          - title: "PeCan Test Chapter"
+            path: /docs/pecan/getting-started/first-steps/
   - title: "Visualization Community"
-    path: /visualization-community/
+    path: /docs/visualization-community/
     icon: stjudecloud-visualization-community-logo.svg
+    chapters:
+      - title: "Getting Started"
+        pages:
+          - title: "VisComm Test Chapter"
+            path: /docs/visualization-community/getting-started/first-steps/
diff --git a/src/styles/contentsbar.scss b/src/styles/contentsbar.scss
@@ -1,38 +1,41 @@
 .contents-sidebar {
-  li {
-    @apply pt-2;
-    @apply pl-7;
-    @apply text-coolGray-600;
+  @apply pb-10;
 
-    &:not(.title):hover {
-      @apply font-semibold;
-      @apply cursor-pointer;
+  .chapter {
+    @apply pt-6;
+    @apply px-0;
+    &:first-of-type {
+      @apply pt-0;
     }
+    li {
+      @apply pt-2;
+      @apply pl-7;
+      @apply text-coolGray-600;
 
-    &.title {
-      @apply pt-6;
-      @apply px-0;
-      @apply uppercase;
-      @apply font-semibold;
-      @apply cursor-default;
-      @apply select-none;
+      &:not(.title):hover {
+        @apply font-semibold;
+        @apply cursor-pointer;
+      }
 
-      &:first-of-type {
-        @apply pt-0;
+      &.title {
+        @apply uppercase;
+        @apply font-semibold;
+        @apply cursor-default;
+        @apply select-none;
       }
     }
-  }
 
-  .active {
-    @apply text-purple;
-    @apply font-semibold;
+    .active {
+      @apply text-purple;
+      @apply font-semibold;
 
-    &:before {
-      @apply absolute;
-      font-size: 2rem;
-      line-height: 22.5px;
-      translate: -150%;
-      content: "•";
+      &:before {
+        @apply absolute;
+        font-size: 2rem;
+        line-height: 22.5px;
+        translate: -150%;
+        content: "•";
+      }
     }
   }
 }
diff --git a/src/templates/doc.js → src/templates/docs-layout.js b/src/templates/doc.js → src/templates/docs-layout.js