From 8861d7611061a34a2639835cf44c3fa7b8e3e539 Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Wed, 4 Dec 2019 20:33:04 +0900 Subject: [PATCH 01/16] Enable SSR for docs --- pages/doc.js | 280 ++++++------------- server.js | 4 +- src/Documentation/Markdown/Markdown.js | 26 +- src/Documentation/SidebarMenu/SidebarMenu.js | 13 +- 4 files changed, 97 insertions(+), 226 deletions(-) diff --git a/pages/doc.js b/pages/doc.js index 87e044d42f..251ea5fc2c 100644 --- a/pages/doc.js +++ b/pages/doc.js @@ -1,242 +1,126 @@ /* global docsearch:readonly */ -import React, { Component } from 'react' +import React, { useCallback, useState, useEffect } from 'react' +import PropTypes from 'prop-types' // components import Page from '../src/Page' import { HeadInjector } from '../src/Documentation/HeadInjector' import Hamburger from '../src/Hamburger' import SearchForm from '../src/SearchForm' import SidebarMenu from '../src/Documentation/SidebarMenu/SidebarMenu' -import Loader from '../src/Loader/Loader' -import Page404 from '../src/Page404' import Markdown from '../src/Documentation/Markdown/Markdown' import RightPanel from '../src/Documentation/RightPanel/RightPanel' // utils import fetch from 'isomorphic-fetch' import kebabCase from 'lodash.kebabcase' -// constants -import { HEADER } from '../src/consts' // sidebar data and helpers import sidebar, { getItemByPath } from '../src/Documentation/SidebarMenu/helper' // styles import styled from 'styled-components' import { media } from '../src/styles' -const ROOT_ELEMENT = 'bodybag' const SIDEBAR_MENU = 'sidebar-menu' -export default class Documentation extends Component { - constructor() { - super() - this.state = { - currentItem: {}, - headings: [], - isLoading: false, - isMenuOpen: false, - isSmoothScrollEnabled: true, - search: false, - markdown: '', - pageNotFound: false - } - } - - componentDidMount() { - this.loadStateFromURL() - try { - docsearch - this.setState( - { - search: true - }, - () => { - this.initDocsearch() - } - ) - } catch (ReferenceError) { - this.setState({ - search: false +const parseHeadings = text => { + const headingRegex = /\n(## \s*)(.*)/g + const matches = [] + let match + do { + match = headingRegex.exec(text) + if (match) + matches.push({ + text: match[2], + slug: kebabCase(match[2]) }) - } + } while (match) - window.addEventListener('popstate', this.loadStateFromURL) - } + return matches +} - componentWillUnmount() { - window.removeEventListener('popstate', this.loadStateFromURL) - } +export default function Documentation({ item, headings, markdown }) { + const { source, path, label, next, prev, tutorials } = item - initDocsearch = () => { - docsearch({ - apiKey: '755929839e113a981f481601c4f52082', - indexName: 'dvc', - inputSelector: '#doc-search', - debug: false // Set debug to true if you want to inspect the dropdown - }) - } + const [isMenuOpen, setIsMenuOpen] = useState(false) + const [isSearchAvaible, setIsSearchAvaible] = useState(false) - onNavigate = (path, e) => { - if (e && (e.ctrlKey || e.metaKey)) return + const toggleMenu = useCallback(() => setIsMenuOpen(!isMenuOpen), [isMenuOpen]) - if (e) e.preventDefault() + useEffect(() => { + try { + docsearch - window.history.pushState(null, null, path) - this.loadPath(path) - } + setIsSearchAvaible(true) - loadStateFromURL = () => this.loadPath(window.location.pathname) - - loadPath = path => { - const { currentItem } = this.state - const item = getItemByPath(path) - const isPageChanged = currentItem !== item - const isFirstPage = !currentItem.path - - if (!item) { - this.setState({ pageNotFound: true, currentItem: {} }) - } else if (!isFirstPage && !isPageChanged) { - this.updateScroll(isPageChanged) - } else { - this.setState({ isLoading: true, headings: [] }) - fetch(item.source) - .then(res => { - res.text().then(text => { - this.setState( - { - currentItem: item, - headings: this.parseHeadings(text), - isLoading: false, - isMenuOpen: false, - markdown: text, - pageNotFound: false - }, - () => this.updateScroll(!isFirstPage && isPageChanged) - ) - }) - }) - .catch(() => { - window.location.reload() - }) + docsearch({ + apiKey: '755929839e113a981f481601c4f52082', + indexName: 'dvc', + inputSelector: '#doc-search', + debug: false // Set debug to true if you want to inspect the dropdown + }) + } catch (ReferenceError) { + // nothing there } - } + }, []) - updateScroll(isPageChanged) { - const { hash } = window.location + const githubLink = `https://github.com/iterative/dvc.org/blob/master${source}` - if (isPageChanged) { - this.setState({ isSmoothScrollEnabled: false }, () => { - this.scrollTop() - this.setState({ isSmoothScrollEnabled: true }, () => { - if (hash) this.scrollToLink(hash) - }) - }) - } else if (hash) { - this.scrollToLink(hash) - } - } + return ( + + + + - parseHeadings = text => { - const headingRegex = /\n(## \s*)(.*)/g - const matches = [] - let match - do { - match = headingRegex.exec(text) - if (match) - matches.push({ - text: match[2], - slug: kebabCase(match[2]) - }) - } while (match) - - return matches - } + + + - scrollToLink = hash => { - const element = document.getElementById(hash.replace(/^#/, '')) + + {isSearchAvaible && ( + + + + )} - if (element) { - const headerHeight = document.getElementById(HEADER).offsetHeight - const elementBoundary = element.getBoundingClientRect() - const rootElement = document.getElementById(ROOT_ELEMENT) - rootElement.scroll({ top: elementBoundary.top - headerHeight }) - } - } + + + + + + + + + ) +} - scrollTop = () => { - const rootElement = document.getElementById(ROOT_ELEMENT) - if (rootElement) { - rootElement.scrollTop = 0 - } - } +Documentation.getInitialProps = async ({ asPath, req }) => { + const item = getItemByPath(asPath) - toggleMenu = () => { - this.setState(prevState => ({ - isMenuOpen: !prevState.isMenuOpen - })) - } + const textRes = await fetch(`http://${req.headers.host}${item.source}`) + const text = await textRes.text() - render() { - const { - currentItem: { source, path, label, tutorials, next, prev }, - headings, - markdown, - pageNotFound, - isLoading, - isMenuOpen, - isSmoothScrollEnabled - } = this.state - - const githubLink = `https://github.com/iterative/dvc.org/blob/master${source}` - - return ( - - - - - - - - - - - {this.state.search && ( - - - - )} - - - - - {isLoading ? ( - - ) : pageNotFound ? ( - - ) : ( - - )} - - - - ) + return { + item: item, + headings: parseHeadings(text), + markdown: text } } +Documentation.propTypes = { + item: PropTypes.object, + headings: PropTypes.array, + markdown: PropTypes.string +} + const Container = styled.div` display: flex; flex-direction: row; diff --git a/server.js b/server.js index d5e452f950..fb4e772e2b 100644 --- a/server.js +++ b/server.js @@ -19,7 +19,7 @@ const handle = app.getRequestHandler() app.prepare().then(() => { createServer((req, res) => { const parsedUrl = parse(req.url, true) - const { pathname, query } = parsedUrl + const { pathname, query, origin } = parsedUrl // Special URL redirects: if ( @@ -107,7 +107,7 @@ app.prepare().then(() => { }) res.end() } else { - app.render(req, res, '/doc', query) + app.render(req, res, '/doc', { ...query, origin }) } } else { handle(req, res, parsedUrl) diff --git a/src/Documentation/Markdown/Markdown.js b/src/Documentation/Markdown/Markdown.js index 048a0f545d..e8c97bedc7 100644 --- a/src/Documentation/Markdown/Markdown.js +++ b/src/Documentation/Markdown/Markdown.js @@ -164,26 +164,19 @@ export default class Markdown extends React.PureComponent { handleSwipeGesture = () => { if (this.isCodeBlock) return - const { prev, next, onNavigate } = this.props + // const { prev, next } = this.props if (this.touchstartX - this.touchendX > 100) { - next && onNavigate(next) + // add navigation menthod } if (this.touchendX - this.touchstartX > 100) { - prev && onNavigate(prev) + // add navigation menthod } } render() { - const { - markdown, - githubLink, - tutorials, - prev, - next, - onNavigate - } = this.props + const { markdown, githubLink, prev, next, tutorials } = this.props return ( @@ -209,11 +202,11 @@ export default class Markdown extends React.PureComponent { astPlugins={[linker()]} /> - - @@ -228,8 +221,7 @@ Markdown.propTypes = { githubLink: PropTypes.string.isRequired, tutorials: PropTypes.object, prev: PropTypes.string, - next: PropTypes.string, - onNavigate: PropTypes.func.isRequired + next: PropTypes.string } const Content = styled.article` @@ -337,8 +329,8 @@ const NavigationButtons = styled.div` font-size: 14px; ` -const Button = styled.div` - border: none; +const Button = styled.a` + text-decoration: none; background: white; padding: 10px 15px; text-transform: uppercase; diff --git a/src/Documentation/SidebarMenu/SidebarMenu.js b/src/Documentation/SidebarMenu/SidebarMenu.js index 6239581260..41ccc31f0b 100644 --- a/src/Documentation/SidebarMenu/SidebarMenu.js +++ b/src/Documentation/SidebarMenu/SidebarMenu.js @@ -40,7 +40,7 @@ class SidebarMenuItem extends React.PureComponent { } render() { - const { children, label, path, activePaths, onNavigate } = this.props + const { children, label, path, activePaths } = this.props const isActive = activePaths && includes(activePaths, path) const isRootParent = activePaths && activePaths.length > 1 && activePaths[0] === path @@ -50,7 +50,6 @@ class SidebarMenuItem extends React.PureComponent { onNavigate(path, e)} isActive={isActive} className={isRootParent ? 'docSearch-lvl0' : ''} > @@ -65,7 +64,6 @@ class SidebarMenuItem extends React.PureComponent { ))} @@ -83,8 +81,7 @@ SidebarMenuItem.propTypes = { activePaths: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.string), PropTypes.bool - ]).isRequired, - onNavigate: PropTypes.func.isRequired + ]).isRequired } export default class SidebarMenu extends Component { @@ -115,7 +112,7 @@ export default class SidebarMenu extends Component { } render() { - const { id, sidebar, currentPath, onNavigate } = this.props + const { id, sidebar, currentPath } = this.props const activePaths = currentPath && getParentsListFromPath(currentPath) return ( @@ -126,7 +123,6 @@ export default class SidebarMenu extends Component { ))} @@ -145,8 +141,7 @@ export default class SidebarMenu extends Component { SidebarMenu.propTypes = { id: PropTypes.string.isRequired, sidebar: PropTypes.arrayOf(PropTypes.object).isRequired, - currentPath: PropTypes.string, - onNavigate: PropTypes.func.isRequired + currentPath: PropTypes.string } const Menu = styled.div` From e31201f274e5c1134fcc2d027ce2adbc957a6262 Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Wed, 4 Dec 2019 22:01:39 +0900 Subject: [PATCH 02/16] Fix links and add 404 --- pages/doc.js | 34 +++++++++++++++--- src/Documentation/Markdown/Markdown.js | 36 ++++++++++++-------- src/Documentation/SidebarMenu/SidebarMenu.js | 21 +++++++----- src/consts.js | 2 ++ 4 files changed, 65 insertions(+), 28 deletions(-) diff --git a/pages/doc.js b/pages/doc.js index 251ea5fc2c..8f8c9dd868 100644 --- a/pages/doc.js +++ b/pages/doc.js @@ -2,6 +2,7 @@ import React, { useCallback, useState, useEffect } from 'react' import PropTypes from 'prop-types' +import Error from 'next/error' // components import Page from '../src/Page' import { HeadInjector } from '../src/Documentation/HeadInjector' @@ -37,7 +38,11 @@ const parseHeadings = text => { return matches } -export default function Documentation({ item, headings, markdown }) { +export default function Documentation({ item, headings, markdown, errorCode }) { + if (errorCode) { + return + } + const { source, path, label, next, prev, tutorials } = item const [isMenuOpen, setIsMenuOpen] = useState(false) @@ -102,11 +107,29 @@ export default function Documentation({ item, headings, markdown }) { ) } -Documentation.getInitialProps = async ({ asPath, req }) => { +Documentation.getInitialProps = async ({ asPath }) => { const item = getItemByPath(asPath) - const textRes = await fetch(`http://${req.headers.host}${item.source}`) - const text = await textRes.text() + if (!item) { + return { + errorCode: 404 + } + } + + const source = + typeof window !== 'undefined' + ? item.source + : `http://localhost:3000${item.source}` + + const res = await fetch(source) + + if (res.status !== 200) { + return { + errorCode: res.status + } + } + + const text = await res.text() return { item: item, @@ -118,7 +141,8 @@ Documentation.getInitialProps = async ({ asPath, req }) => { Documentation.propTypes = { item: PropTypes.object, headings: PropTypes.array, - markdown: PropTypes.string + markdown: PropTypes.string, + errorCode: PropTypes.bool } const Container = styled.div` diff --git a/src/Documentation/Markdown/Markdown.js b/src/Documentation/Markdown/Markdown.js index e8c97bedc7..8390e90a2c 100644 --- a/src/Documentation/Markdown/Markdown.js +++ b/src/Documentation/Markdown/Markdown.js @@ -1,5 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' +import Link from 'next/link' +import Router from 'next/router' // components import ReactMarkdown from 'react-markdown' import { LightButton } from '../LightButton' @@ -18,6 +20,8 @@ import vim from 'react-syntax-highlighter/dist/cjs/languages/hljs/vim' import usage from './lang/usage' import dvc from './lang/dvc' import linker from './utils/remark-linker' +// consts +import { PAGE_DOC } from '../../consts' // utils import kebabCase from 'lodash.kebabcase' // styles @@ -105,7 +109,7 @@ CodeBlock.propTypes = { value: PropTypes.node.isRequired } -const Link = ({ children, ...props }) => { +const MDLink = ({ children, ...props }) => { const externalLink = props.href.match(/^(\/\/|http(s)?:\/\/)/) const showIcon = externalLink && children && typeof children[0].props.children === 'string' @@ -121,7 +125,7 @@ const Link = ({ children, ...props }) => { return {children} } -Link.propTypes = { +MDLink.propTypes = { children: PropTypes.node.isRequired, href: PropTypes.string.isRequired } @@ -164,14 +168,14 @@ export default class Markdown extends React.PureComponent { handleSwipeGesture = () => { if (this.isCodeBlock) return - // const { prev, next } = this.props + const { prev, next } = this.props if (this.touchstartX - this.touchendX > 100) { - // add navigation menthod + Router.push({ asPath: PAGE_DOC, pathname: next }) } if (this.touchendX - this.touchstartX > 100) { - // add navigation menthod + Router.push({ asPath: PAGE_DOC, pathname: prev }) } } @@ -194,7 +198,7 @@ export default class Markdown extends React.PureComponent { escapeHtml={false} source={markdown} renderers={{ - link: Link, + link: MDLink, code: CodeBlock, heading: HeadingRenderer, virtualHtml: HtmlRenderer @@ -202,14 +206,18 @@ export default class Markdown extends React.PureComponent { astPlugins={[linker()]} /> - - + + + + + + ) diff --git a/src/Documentation/SidebarMenu/SidebarMenu.js b/src/Documentation/SidebarMenu/SidebarMenu.js index 41ccc31f0b..4bb76c5fdb 100644 --- a/src/Documentation/SidebarMenu/SidebarMenu.js +++ b/src/Documentation/SidebarMenu/SidebarMenu.js @@ -2,7 +2,9 @@ import React, { Component } from 'react' import PerfectScrollbar from 'perfect-scrollbar' import scrollIntoView from 'dom-scroll-into-view' import PropTypes from 'prop-types' - +import Link from 'next/link' +// consts +import { PAGE_DOC } from '../../consts' // components import DownloadButton from '../../DownloadButton' // utils @@ -47,14 +49,15 @@ class SidebarMenuItem extends React.PureComponent { return ( <> - - {label} - + + + {label} + + {children && ( Date: Wed, 4 Dec 2019 22:03:21 +0900 Subject: [PATCH 03/16] Remove unused param in server.js --- server.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/server.js b/server.js index fb4e772e2b..d5e452f950 100644 --- a/server.js +++ b/server.js @@ -19,7 +19,7 @@ const handle = app.getRequestHandler() app.prepare().then(() => { createServer((req, res) => { const parsedUrl = parse(req.url, true) - const { pathname, query, origin } = parsedUrl + const { pathname, query } = parsedUrl // Special URL redirects: if ( @@ -107,7 +107,7 @@ app.prepare().then(() => { }) res.end() } else { - app.render(req, res, '/doc', { ...query, origin }) + app.render(req, res, '/doc', query) } } else { handle(req, res, parsedUrl) From c15e3e4c26603ea5527aebf9d7490f5bf6c871df Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Wed, 4 Dec 2019 22:12:13 +0900 Subject: [PATCH 04/16] Fix url generation logic --- pages/doc.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/pages/doc.js b/pages/doc.js index 8f8c9dd868..512e8f6d7b 100644 --- a/pages/doc.js +++ b/pages/doc.js @@ -107,7 +107,7 @@ export default function Documentation({ item, headings, markdown, errorCode }) { ) } -Documentation.getInitialProps = async ({ asPath }) => { +Documentation.getInitialProps = async ({ asPath, req }) => { const item = getItemByPath(asPath) if (!item) { @@ -116,12 +116,10 @@ Documentation.getInitialProps = async ({ asPath }) => { } } - const source = - typeof window !== 'undefined' - ? item.source - : `http://localhost:3000${item.source}` + const host = req ? req.headers['host'] : window.location.host + const protocol = host.indexOf('localhost') > -1 ? 'http:' : 'https:' - const res = await fetch(source) + const res = await fetch(`${protocol}//${host}${item.source}`) if (res.status !== 200) { return { From aee48c610ec084ee12fdd973a13771a9ae561588 Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Wed, 4 Dec 2019 22:34:14 +0900 Subject: [PATCH 05/16] Fix search initialization --- pages/doc.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/pages/doc.js b/pages/doc.js index 512e8f6d7b..44f4ff8e0d 100644 --- a/pages/doc.js +++ b/pages/doc.js @@ -56,16 +56,18 @@ export default function Documentation({ item, headings, markdown, errorCode }) { setIsSearchAvaible(true) - docsearch({ - apiKey: '755929839e113a981f481601c4f52082', - indexName: 'dvc', - inputSelector: '#doc-search', - debug: false // Set debug to true if you want to inspect the dropdown - }) + if (isSearchAvaible) { + docsearch({ + apiKey: '755929839e113a981f481601c4f52082', + indexName: 'dvc', + inputSelector: '#doc-search', + debug: false // Set debug to true if you want to inspect the dropdown + }) + } } catch (ReferenceError) { // nothing there } - }, []) + }, [isSearchAvaible]) const githubLink = `https://github.com/iterative/dvc.org/blob/master${source}` From db082fde44628a8a212230f96e80822bda15a124 Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Wed, 4 Dec 2019 22:48:59 +0900 Subject: [PATCH 06/16] Add scroll to top of the page after navigation --- pages/doc.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/pages/doc.js b/pages/doc.js index 44f4ff8e0d..7f633cf7c0 100644 --- a/pages/doc.js +++ b/pages/doc.js @@ -3,6 +3,7 @@ import React, { useCallback, useState, useEffect } from 'react' import PropTypes from 'prop-types' import Error from 'next/error' +import Router from 'next/router' // components import Page from '../src/Page' import { HeadInjector } from '../src/Documentation/HeadInjector' @@ -20,6 +21,7 @@ import sidebar, { getItemByPath } from '../src/Documentation/SidebarMenu/helper' import styled from 'styled-components' import { media } from '../src/styles' +const ROOT_ELEMENT = 'bodybag' const SIDEBAR_MENU = 'sidebar-menu' const parseHeadings = text => { @@ -69,6 +71,19 @@ export default function Documentation({ item, headings, markdown, errorCode }) { } }, [isSearchAvaible]) + useEffect(() => { + const handleRouteChange = () => { + const rootElement = document.getElementById(ROOT_ELEMENT) + if (rootElement) { + rootElement.scrollTop = 0 + } + } + + Router.events.on('routeChangeComplete', handleRouteChange) + + return () => Router.events.off('routeChangeComplete', handleRouteChange) + }, []) + const githubLink = `https://github.com/iterative/dvc.org/blob/master${source}` return ( From 0d1551ea47ccbc90b2bdab1401b9de272f734371 Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Thu, 5 Dec 2019 22:58:15 +0900 Subject: [PATCH 07/16] Rewrite all links to use next/link --- src/Diagram/index.js | 25 +++++---- src/Documentation/Markdown/Markdown.js | 35 +++++++----- src/Documentation/SidebarMenu/SidebarMenu.js | 7 ++- src/Footer/index.js | 39 +++++++++----- src/HamburgerMenu/index.js | 52 +++++++++--------- src/Nav/index.js | 56 +++++++++++--------- src/PromoSection/index.js | 3 +- src/TopMenu/index.js | 19 ++++--- src/TrySection/index.js | 5 +- 9 files changed, 141 insertions(+), 100 deletions(-) diff --git a/src/Diagram/index.js b/src/Diagram/index.js index ff25ee4e4f..a42bfc6fea 100644 --- a/src/Diagram/index.js +++ b/src/Diagram/index.js @@ -1,5 +1,8 @@ +/* eslint jsx-a11y/anchor-is-valid: off */ + import React, { Component } from 'react' import PropTypes from 'prop-types' +import NextLink from 'next/link' import styled from 'styled-components' import { media, @@ -13,16 +16,18 @@ import { Element } from 'react-scroll' import Slider from 'react-slick' const LearnMore = ({ href }) => ( - - - Learn more - - + + + + Learn more + + + ) diff --git a/src/Documentation/Markdown/Markdown.js b/src/Documentation/Markdown/Markdown.js index 8390e90a2c..e0068f2371 100644 --- a/src/Documentation/Markdown/Markdown.js +++ b/src/Documentation/Markdown/Markdown.js @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import Link from 'next/link' +import NextLink from 'next/link' import Router from 'next/router' // components import ReactMarkdown from 'react-markdown' @@ -109,8 +109,8 @@ CodeBlock.propTypes = { value: PropTypes.node.isRequired } -const MDLink = ({ children, ...props }) => { - const externalLink = props.href.match(/^(\/\/|http(s)?:\/\/)/) +const Link = ({ children, href, ...props }) => { + const externalLink = href.match(/^(\/\/|http(s)?:\/\/)/) const showIcon = externalLink && children && typeof children[0].props.children === 'string' @@ -119,13 +119,25 @@ const MDLink = ({ children, ...props }) => { : props if (showIcon) { - return {children} + return ( + + {children} + + ) } - return {children} + const nextProps = href.match(/^\/doc/) + ? { href: PAGE_DOC, as: href } + : { href } + + return ( + + {children} + + ) } -MDLink.propTypes = { +Link.propTypes = { children: PropTypes.node.isRequired, href: PropTypes.string.isRequired } @@ -198,7 +210,7 @@ export default class Markdown extends React.PureComponent { escapeHtml={false} source={markdown} renderers={{ - link: MDLink, + link: Link, code: CodeBlock, heading: HeadingRenderer, virtualHtml: HtmlRenderer @@ -206,18 +218,18 @@ export default class Markdown extends React.PureComponent { astPlugins={[linker()]} /> - + - - + + - + ) @@ -346,7 +358,6 @@ const Button = styled.a` border-bottom: 3px solid #13adc7; display: inline-flex; align-items: center; - cursor: pointer; transition: 0.2s border-color ease-out; &:hover { diff --git a/src/Documentation/SidebarMenu/SidebarMenu.js b/src/Documentation/SidebarMenu/SidebarMenu.js index 4bb76c5fdb..3542e35604 100644 --- a/src/Documentation/SidebarMenu/SidebarMenu.js +++ b/src/Documentation/SidebarMenu/SidebarMenu.js @@ -2,7 +2,7 @@ import React, { Component } from 'react' import PerfectScrollbar from 'perfect-scrollbar' import scrollIntoView from 'dom-scroll-into-view' import PropTypes from 'prop-types' -import Link from 'next/link' +import NextLink from 'next/link' // consts import { PAGE_DOC } from '../../consts' // components @@ -49,7 +49,7 @@ class SidebarMenuItem extends React.PureComponent { return ( <> - + {label} - + {children && ( diff --git a/src/Footer/index.js b/src/Footer/index.js index 286516eaf1..3c851adf18 100644 --- a/src/Footer/index.js +++ b/src/Footer/index.js @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' +import NextLink from 'next/link' import { columns, container, media } from '../styles' const SocialLink = ({ src, href, children }) => ( @@ -20,32 +21,44 @@ export default function Footer(props) { - - site logo - + + + site logo + + Product - Overview - Features + + Overview + + + Features + Help - Support - Get started + + Support + + + Get started + Chat - Documentation + + Documentation + diff --git a/src/HamburgerMenu/index.js b/src/HamburgerMenu/index.js index 57cbbf2852..fb47841237 100644 --- a/src/HamburgerMenu/index.js +++ b/src/HamburgerMenu/index.js @@ -1,6 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' +import NextLink from 'next/link' import { media } from '../styles' import Hamburger from '../Hamburger' @@ -62,39 +63,40 @@ export default class HamburgerMenu extends Component {
- - dvc.org - + + + dvc.org + + Product - - Overview - - - Features - + + Overview + + + Features + Help - - Support - - - Get started - + + Support + + + + Get started + + Chat - - Documentation - + + Documentation + diff --git a/src/Nav/index.js b/src/Nav/index.js index a77e79a134..851c7bfa5b 100644 --- a/src/Nav/index.js +++ b/src/Nav/index.js @@ -3,32 +3,37 @@ import PropTypes from 'prop-types' import styled from 'styled-components' import { media } from '../styles' import { logEvent } from '../utils/ga' +import NextLink from 'next/link' +import Router from 'next/router' const getStarted = () => { logEvent('menu', 'get-started') - window.location = '/doc/get-started' + + Router.push('/doc/get-started') } export default function Nav({ mobile = false }) { return ( - { - logEvent('menu', 'features') - }} - > - Features - - { - logEvent('menu', 'doc') - }} - > - Doc - + + { + logEvent('menu', 'features') + }} + > + Features + + + + { + logEvent('menu', 'doc') + }} + > + Doc + + { @@ -53,14 +58,15 @@ export default function Nav({ mobile = false }) { > GitHub - { - logEvent('menu', 'support') - }} - > - Support - + + { + logEvent('menu', 'support') + }} + > + Support + + Get Started diff --git a/src/PromoSection/index.js b/src/PromoSection/index.js index a5da8476cd..48c1ac672a 100644 --- a/src/PromoSection/index.js +++ b/src/PromoSection/index.js @@ -1,5 +1,6 @@ import React from 'react' import styled from 'styled-components' +import Router from 'next/router' import { media } from '../styles' import { logEvent } from '../utils/ga' @@ -10,7 +11,7 @@ function goToDocGetStarted() { function goToFeatures() { logEvent('promo', 'features') - window.location = '/features' + Router.push('/features') } export default function PromoSection() { diff --git a/src/TopMenu/index.js b/src/TopMenu/index.js index c3204dbfa0..f50080c057 100644 --- a/src/TopMenu/index.js +++ b/src/TopMenu/index.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import NextLink from 'next/link' // components import Nav from '../Nav' // utils @@ -56,14 +57,16 @@ class TopMenu extends Component { scrolled={isDocPage || scrolled} wide={isDocPage} > - - dvc.org - + + + dvc.org + +