Merge remote-tracking branch 'upstream/master'

iterative · Aug 10, 2019 · 796e799 · 796e799
2 parents b949520 + a6ba1d5
commit 796e799
Show file tree

Hide file tree

Showing 30 changed files with 713 additions and 542 deletions.
diff --git a/pages/_document.js b/pages/_document.js
@@ -4,7 +4,8 @@ import reset from 'styled-reset'
 import { global } from '../src/styles'
 import Router from 'next/router'
 
-const DESCRIPTION = `Open-source version control system for Data Science and` +
+const DESCRIPTION =
+  `Open-source version control system for Data Science and` +
   ` Machine Learning projects. Track your data, models, and experiments with` +
   ` a Git-like tool.`
 const KEYWORDS = `data version control machine learning models management`

diff --git a/pages/doc.js b/pages/doc.js
@@ -8,27 +8,22 @@ import { RightPanel } from '../src/Documentation/RightPanel/RightPanel'
 import Page from '../src/Page'
 import SearchForm from '../src/SearchForm'
 import Page404 from '../src/Page404'
-import PerfectScrollbar from 'perfect-scrollbar'
 import Hamburger from '../src/Hamburger'
 // utils
 import fetch from 'isomorphic-fetch'
 import kebabCase from 'lodash.kebabcase'
-import compact from 'lodash.compact'
-import flatten from 'lodash.flatten'
 import { scroller, animateScroll } from 'react-scroll'
-import 'core-js/fn/array/find-index'
 // styles
 import styled from 'styled-components'
 import { media } from '../src/styles'
-// json
-import sidebar from '../src/Documentation/sidebar'
+// sidebar data and helpers
+import sidebar, { getItemByPath } from '../src/Documentation/SidebarMenu/helper'
 
 export default class Documentation extends Component {
   constructor() {
     super()
     this.state = {
-      currentSection: 0,
-      currentFile: null,
+      currentItem: {},
       markdown: '',
       headings: [],
       pageNotFound: false,
@@ -54,52 +49,14 @@ export default class Documentation extends Component {
         search: false
       })
     }
-    window.addEventListener('popstate', this.loadStateFromURL)
-    this.ps = new PerfectScrollbar('#sidebar-menu', {
-      // wheelPropagation: window.innerWidth <= 572
-      wheelPropagation: true
-    })
-  }
 
-  componentDidUpdate() {
-    this.ps.update()
+    window.addEventListener('popstate', this.loadStateFromURL)
   }
 
   componentWillUnmount() {
     window.removeEventListener('popstate', this.loadStateFromURL)
   }
 
-  loadStateFromURL = () => {
-    const { pathname } = window.location
-    const sectionURL = pathname.split('/')[2] // match section from URL
-    const sectionIndex = sidebar.findIndex(
-      section => (section.slug || kebabCase(section.name)) === sectionURL
-    )
-    if (sectionIndex === -1) {
-      sectionURL
-        ? this.setState({ pageNotFound: true })
-        : this.onSectionSelect(0)
-    } else {
-      const fileURL = pathname.split('/')[3] // match file from URL
-      const sectionFiles = flatten(sidebar[sectionIndex].files)
-      const fileIndex = sectionFiles.findIndex(
-        file => kebabCase(file.slice(0, -3)) === fileURL
-      )
-      if (fileIndex === -1) {
-        fileURL
-          ? this.setState({ pageNotFound: true })
-          : this.onSectionSelect(sectionIndex)
-      } else {
-        this.loadFile({
-          section: sectionIndex,
-          file: sectionFiles[fileIndex],
-          parseHeadings: true,
-          pageNotFound: false
-        })
-      }
-    }
-  }
-
   initDocsearch = () => {
     docsearch({
       apiKey: '755929839e113a981f481601c4f52082',
@@ -109,54 +66,42 @@ export default class Documentation extends Component {
     })
   }
 
-  getLinkHref = (section, file) => {
-    const sectionSlug =
-      sidebar[section].slug || kebabCase(sidebar[section].name)
-    const fileSlug = file ? kebabCase(file.slice(0, -3)) : undefined
-    return `/doc/${compact([sectionSlug, fileSlug]).join('/')}`
-  }
-
-  setCurrentPath = (section, file) => {
-    window.history.pushState(null, null, this.getLinkHref(section, file))
-  }
-
-  onSectionSelect = (section, e) => {
+  onNavigate = (path, e) => {
     e && e.preventDefault()
-    const { indexFile, files } = sidebar[section]
-    const file = indexFile || flatten(files)[0]
-    e && this.setCurrentPath(section, indexFile ? undefined : file)
-    this.loadFile({ file, section, parseHeadings: false })
+    window.history.pushState(null, null, path)
+    this.loadPath(path)
   }
 
-  onFileSelect = (file, section, e) => {
-    e && e.preventDefault()
-    this.setCurrentPath(section, file)
-    this.loadFile({ file, section, parseHeadings: true })
-  }
+  loadStateFromURL = () => this.loadPath(window.location.pathname)
+
+  loadPath = path => {
+    const item = getItemByPath(path)
 
-  loadFile = ({ file, section, parseHeadings }) => {
-    fetch(`${sidebar[section].folder}/${file}`)
-      .then(res => {
-        res.text().then(text => {
-          this.setState(
-            {
-              currentSection: section,
-              currentFile: file,
-              markdown: text,
-              headings: [],
-              pageNotFound: false,
-              isMenuOpen: false
-            },
-            () => {
-              this.scrollTop()
-              parseHeadings && this.parseHeadings(text)
-            }
-          )
+    if (!item) {
+      this.setState({ pageNotFound: true, currentItem: {} })
+    } else {
+      fetch(item.source)
+        .then(res => {
+          res.text().then(text => {
+            this.setState(
+              {
+                markdown: text,
+                headings: [],
+                pageNotFound: false,
+                isMenuOpen: false,
+                currentItem: item
+              },
+              () => {
+                this.scrollTop()
+                this.parseHeadings(text)
+              }
+            )
+          })
         })
-      })
-      .catch(() => {
-        window.location.reload()
-      })
+        .catch(() => {
+          window.location.reload()
+        })
+    }
   }
 
   parseHeadings = text => {
@@ -208,21 +153,18 @@ export default class Documentation extends Component {
 
   render() {
     const {
-      currentSection,
-      currentFile,
+      currentItem: { source, path, label, next, prev },
       headings,
       markdown,
       pageNotFound,
       isMenuOpen
     } = this.state
 
-    const directory = sidebar[currentSection].folder
-    const githubLink = `https://github.com/iterative/dvc.org/blob/master${directory}/${currentFile}`
-    const sectionName = sidebar[currentSection].name
+    const githubLink = `https://github.com/iterative/dvc.org/blob/master${source}`
 
     return (
       <Page stickHeader={true}>
-        <HeadInjector sectionName={sectionName} />
+        <HeadInjector sectionName={label} />
         <Container>
           <Backdrop onClick={this.toggleMenu} visible={isMenuOpen} />
 
@@ -239,13 +181,10 @@ export default class Documentation extends Component {
 
             <SidebarMenu
               sidebar={sidebar}
-              currentSection={currentSection}
-              currentFile={currentFile}
+              currentPath={path}
               headings={headings}
-              getLinkHref={this.getLinkHref}
               scrollToLink={this.scrollToLink}
-              onSectionSelect={this.onSectionSelect}
-              onFileSelect={this.onFileSelect}
+              onNavigate={this.onNavigate}
             />
           </Side>
 
@@ -255,12 +194,11 @@ export default class Documentation extends Component {
             <Markdown
               markdown={markdown}
               githubLink={githubLink}
-              section={currentSection}
-              file={currentFile}
-              onFileSelect={this.onFileSelect}
+              prev={prev}
+              next={next}
+              onNavigate={this.onNavigate}
             />
           )}
-
           <RightPanel
             headings={headings}
             scrollToLink={this.scrollToLink}

diff --git a/server.js b/server.js
@@ -24,7 +24,9 @@ app.prepare().then(() => {
     const chat = /^\/(help|chat)\/?$/i
 
     if (req.headers.host === 'man.dvc.org') {
-      const doc_pathname = '/doc/commands-reference' + pathname
+      let normalized_pathname =
+        pathname !== '/import-url' ? pathname.replace(/-/i, '/') : pathname
+      const doc_pathname = '/doc/commands-reference' + normalized_pathname
       res.writeHead(301, { Location: 'https://dvc.org' + doc_pathname })
       res.end()
     } else if (req.headers.host === 'pycon2019.dvc.org') {

diff --git a/src/Documentation/Markdown/Markdown.js b/src/Documentation/Markdown/Markdown.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 // components
 import ReactMarkdown from 'react-markdown'
 import { LightButton } from '../LightButton'
@@ -23,8 +23,6 @@ import kebabCase from 'lodash.kebabcase'
 // styles
 import styled from 'styled-components'
 import { media } from '../../../src/styles'
-// json
-import sidebar from '../../../src/Documentation/sidebar'
 
 registerLanguage('dvc', dvc)
 registerLanguage('python', python)
@@ -77,7 +75,7 @@ const CodeBlock = ({ value, language }) => {
   )
 }
 
-export default class Markdown extends Component {
+export default class Markdown extends React.PureComponent {
   constructor() {
     super()
     this.touchstartX = 0
@@ -115,35 +113,27 @@ export default class Markdown extends Component {
 
   handleSwipeGesture = () => {
     if (this.isCodeBlock) return
-    const { section, file, onFileSelect } = this.props
-    const files = sidebar[section].files
-    const fileIndex = files.findIndex(f => f === file)
-    const showPrev = fileIndex > 0
-    const showNext = fileIndex + 1 < sidebar[section].files.length
+    const { prev, next, onNavigate } = this.props
 
     if (this.touchstartX - this.touchendX > 100) {
-      showNext && onFileSelect(files[fileIndex + 1], section)
+      next && onNavigate(next)
     }
 
     if (this.touchendX - this.touchstartX > 100) {
-      showPrev && onFileSelect(files[fileIndex - 1], section)
+      prev && onNavigate(prev)
     }
   }
 
   render() {
-    const { markdown, githubLink, section, file, onFileSelect } = this.props
-    const files = sidebar[section].files
-    const fileIndex = files.findIndex(f => f === file)
-    const showPrev = fileIndex > 0
-    const showNext = fileIndex + 1 < sidebar[section].files.length
+    const { markdown, githubLink, prev, next, onNavigate } = this.props
 
     return (
       <Content>
         <GithubLink href={githubLink} target="_blank">
           <i /> Edit on Github
         </GithubLink>
         <ReactMarkdown
-          key={`${section}-${fileIndex}`}
+          key={githubLink}
           className="markdown-body"
           escapeHtml={false}
           source={markdown}
@@ -155,17 +145,11 @@ export default class Markdown extends Component {
           astPlugins={[linker()]}
         />
         <NavigationButtons>
-          <Button
-            onClick={() => onFileSelect(files[fileIndex - 1], section)}
-            disabled={!showPrev}
-          >
+          <Button onClick={() => onNavigate(prev)} disabled={!prev}>
             <i className="prev" />
             <span>Prev</span>
           </Button>
-          <Button
-            onClick={() => onFileSelect(files[fileIndex + 1], section)}
-            disabled={!showNext}
-          >
+          <Button onClick={() => onNavigate(next)} disabled={!next}>
             <span>Next</span>
             <i className="next" />
           </Button>

diff --git a/src/Documentation/Markdown/utils/remark-linker.js b/src/Documentation/Markdown/utils/remark-linker.js
@@ -1,23 +1,41 @@
 ;`use strict`
 
 import visit from 'unist-util-visit'
+import { getItemByPath } from '../../SidebarMenu/helper'
+
+const DVC_REGEXP = /dvc\s+[a-z][a-z-.]*/
+const COMMAND_REGEXP = /^[a-z][a-z-]*$/
+const COMMAND_ROOT = '/doc/commands-reference/'
 
 function linker() {
   function transformer(tree) {
     visit(tree, 'inlineCode', function(node, index, parent) {
-      if (parent.type !== 'link' && /dvc\s+[a-z-.]+/.test(node.value)) {
+      if (parent.type !== 'link' && DVC_REGEXP.test(node.value)) {
         let parts = node.value.split(/\s+/)
-        let url = '/doc/commands-reference/' + parts[1]
+        let url
+
+        const hasThirdSegment = parts[2] && COMMAND_REGEXP.test(parts[2])
+        const isCommandPageExists = getItemByPath(`${COMMAND_ROOT}${parts[1]}`)
+        const isSubcommandPageExists =
+          isCommandPageExists &&
+          hasThirdSegment &&
+          getItemByPath(`${COMMAND_ROOT}${parts[1]}/${parts[2]}`)
 
-        if (parts.length > 2) {
-          url += '#' + parts[2]
+        if (isSubcommandPageExists) {
+          url = `${COMMAND_ROOT}${parts[1]}/${parts[2]}`
+        } else if (isCommandPageExists && hasThirdSegment) {
+          url = `${COMMAND_ROOT}${parts[1]}#${parts[2]}`
+        } else if (isCommandPageExists) {
+          url = `${COMMAND_ROOT}${parts[1]}`
         }
 
-        parent.children[index] = {
-          type: 'link',
-          url: url,
-          children: [node],
-          position: node.position
+        if (url) {
+          parent.children[index] = {
+            type: 'link',
+            url: url,
+            children: [node],
+            position: node.position
+          }
         }
       }
     })