[WIP] Gatsby migration fixes (#1068)

* Add 404 error code for not found page * Fix images loaded status checker for the right column in the documentation * Move images helpers to 'src/utils'. Use these helpers for waiting images load before scroll to anchor after page change. Remove smooth scroll behavior for scroll to top of the page * Rename 'property' to 'name' attribute for description and keywords meta tags * Remove duplication of modal root node * Use 'serve-handler' package for handling trailings slashed in the proper way instead of express.static() * Fix caption styles after code blocks in the docs * Remove wrapper for markdown component * Add compression middleware to server.js * Load algolia docsearch asynchronously to increase initial page load performance * Add bundle-analyzer plugin to allow analyze result webpack bundles * Sentry: DVC-ORG-25. Use crossbrowser method of scrolling to necessary position in the element * Replace Promise polyfill with more lightweight version * Sentry: DVC-ORG-27. Add polyfill for fetch (for IE 11) * Update license in the package.json Co-authored-by: Pavel Grinchenko <[email protected]>
iterative · Mar 19, 2020 · a629031 · a629031
1 parent 0381090
commit a629031
Show file tree

Hide file tree

Showing 20 changed files with 372 additions and 139 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -85,6 +85,16 @@ if (process.env.CONTEXT === 'production') {
   })
 }
 
+if (process.env.ANALYZE) {
+  plugins.push({
+    resolve: 'gatsby-plugin-webpack-bundle-analyzer',
+    options: {
+      analyzerPort: 4000,
+      production: process.env.NODE_ENV === 'production'
+    }
+  })
+}
+
 module.exports = {
   plugins,
   siteMetadata: {

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -105,10 +105,24 @@ exports.createPages = async ({ graphql, actions }) => {
   })
 }
 
+const notFoundRegexp = /^\/404/
+const trailingSlashRegexp = /\/$/
+
 exports.onCreatePage = ({ page, actions }) => {
-  if (/^\/404/.test(page.path)) {
-    const newPage = { ...page, context: { ...page.context, is404: true } }
+  let newPage = page
+
+  if (notFoundRegexp.test(newPage.path)) {
+    newPage = { ...newPage, context: { ...newPage.context, is404: true } }
+  }
+
+  if (page.path !== '/' && trailingSlashRegexp.test(newPage.path)) {
+    newPage = {
+      ...newPage,
+      path: newPage.path.replace(trailingSlashRegexp, '')
+    }
+  }
 
+  if (newPage !== page) {
     actions.deletePage(page)
     actions.createPage(newPage)
   }

diff --git a/middleware/notFound/index.js b/middleware/notFound/index.js
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "url": "git+https://github.com/iterative/dvc.org.git"
   },
   "author": "",
-  "license": "ISC",
+  "license": "Apache-2.0",
   "bugs": {
     "url": "https://github.com/iterative/dvc.org/issues"
   },
@@ -32,12 +32,14 @@
     "@reach/router": "^1.3.1",
     "@sentry/browser": "^5.12.1",
     "color": "^3.1.2",
+    "compression": "^1.7.4",
     "date-fns": "^2.8.1",
     "docsearch.js": "^2.6.3",
     "dom-scroll-into-view": "^2.0.1",
     "express": "^4.17.1",
     "gatsby": "^2.19.21",
     "gatsby-link": "^2.2.29",
+    "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
     "github-markdown-css": "^3.0.1",
     "isomorphic-fetch": "^2.2.1",
     "lodash.fill": "^3.4.0",
@@ -50,6 +52,7 @@
     "node-cache": "^5.1.0",
     "perfect-scrollbar": "^1.4.0",
     "prismjs": "^1.19.0",
+    "promise-polyfill": "^8.1.3",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-collapse": "^5.0.1",
@@ -64,6 +67,7 @@
     "react-use": "^13.24.0",
     "rehype-react": "^4.0.1",
     "request": "^2.88.0",
+    "serve-handler": "^6.1.2",
     "slick-carousel": "^1.8.1",
     "styled-components": "^4.4.1",
     "styled-reset": "^4.0.8",

diff --git a/server.js b/server.js
@@ -1,19 +1,47 @@
 /* eslint-env node */
 
 const express = require('express')
+const compression = require('compression')
+const serveHandler = require('serve-handler')
+
 const app = express()
 
 const apiMiddleware = require('./middleware/api')
 const redirectsMiddleware = require('./middleware/redirects')
-const notFoundMiddleware = require('./middleware/notFound')
 
 const port = process.env.PORT || 3000
 
+app.use(compression())
 app.use(redirectsMiddleware)
 app.use('/api', apiMiddleware)
 
-app.use(express.static('public', { cacheControl: true, maxAge: 0 }))
-
-app.use(notFoundMiddleware)
+app.use((req, res) => {
+  serveHandler(req, res, {
+    public: 'public',
+    cleanUrls: true,
+    trailingSlash: false,
+    directoryListing: false,
+    headers: [
+      {
+        source: '**/*.@(jpg|jpeg|gif|png)',
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'max-age=86400'
+          }
+        ]
+      },
+      {
+        source: '!**/*.@(jpg|jpeg|gif|png)',
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'max-age=0'
+          }
+        ]
+      }
+    ]
+  })
+})
 
 app.listen(port, () => console.log(`Ready on localhost:${port}!`))
diff --git a/src/components/DocLayout/SidebarMenu/index.js b/src/components/DocLayout/SidebarMenu/index.js
@@ -76,7 +76,7 @@ export default function SidebarMenu({ id, sidebar, currentPath, onClick }) {
       })
     }
 
-    const node = document.getElementById(currentPath.replace(/\/$/, ''))
+    const node = document.getElementById(currentPath)
     const parent = document.getElementById(id)
 
     setIsScrollHidden(true)

diff --git a/src/components/DocLayout/index.js b/src/components/DocLayout/index.js
@@ -1,43 +1,21 @@
-/* global docsearch:readonly */
-
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import PropTypes from 'prop-types'
 import Hamburger from '../Hamburger'
 import SearchForm from '../SearchForm'
 import MainLayout from '../MainLayout'
 import SidebarMenu from './SidebarMenu'
 
-import { Container, Backdrop, SearchArea, Side, SideToggle } from './styles'
+import { Container, Backdrop, Side, SideToggle } from './styles'
 
 import { structure } from '../../utils/sidebar'
 
 const SIDEBAR_MENU = 'sidebar-menu'
 
 function DocLayout({ children, ...restProps }) {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const [isSearchAvaible, setIsSearchAvaible] = useState(false)
 
   const toggleMenu = useCallback(() => setIsMenuOpen(!isMenuOpen), [isMenuOpen])
 
-  useEffect(() => {
-    try {
-      docsearch
-
-      setIsSearchAvaible(true)
-
-      if (docsearch && isSearchAvaible) {
-        docsearch({
-          apiKey: '755929839e113a981f481601c4f52082',
-          indexName: 'dvc',
-          inputSelector: '#doc-search',
-          debug: false // Set to `true` if you want to inspect the dropdown
-        })
-      }
-    } catch (ReferenceError) {
-      // nothing there
-    }
-  }, [isSearchAvaible])
-
   return (
     <MainLayout {...restProps} isDocPage>
       <Container>
@@ -48,12 +26,7 @@ function DocLayout({ children, ...restProps }) {
         </SideToggle>
 
         <Side isOpen={isMenuOpen}>
-          {isSearchAvaible && (
-            <SearchArea>
-              <SearchForm />
-            </SearchArea>
-          )}
-
+          <SearchForm />
           <SidebarMenu
             sidebar={structure}
             currentPath={restProps.location.pathname}

diff --git a/src/components/DocLayout/styles.js b/src/components/DocLayout/styles.js
@@ -78,25 +78,6 @@ export const Side = styled.div`
   `};
 `
 
-export const SearchArea = styled.div`
-  height: 60px;
-  display: flex;
-  align-items: center;
-  background-color: #eef4f8;
-  z-index: 10;
-  position: sticky;
-  top: 0;
-
-  ${media.phablet`
-    position: relative;
-    padding: 0 20px;
-  `};
-
-  form {
-    height: 40px;
-  }
-`
-
 export const SideToggle = styled.div`
   display: none;
   position: fixed;

diff --git a/src/components/Documentation/Markdown/index.js b/src/components/Documentation/Markdown/index.js
@@ -55,6 +55,7 @@ ABBR.propTypes = {
 
 const renderAst = new rehypeReact({
   createElement: React.createElement,
+  Fragment: React.Fragment,
   components: { details: Details, abbr: ABBR }
 }).Compiler
 

diff --git a/src/components/Documentation/Markdown/styles.js b/src/components/Documentation/Markdown/styles.js
@@ -42,6 +42,10 @@ export const Content = styled.article`
       content: url(/img/external-link.svg);
     }
 
+    .anchor {
+      margin-left: -24px;
+    }
+
     pre[class*='language-'] {
       background: #40354d;
       color: #ccc;

diff --git a/src/components/Documentation/RightPanel/index.js b/src/components/Documentation/RightPanel/index.js
@@ -4,6 +4,8 @@ import throttle from 'lodash.throttle'
 
 import Tutorials from '../Tutorials'
 
+import { allImagesLoadedInContainer } from '../../../utils/images'
+
 import {
   Description,
   DiscordButton,
@@ -17,40 +19,6 @@ import {
 const ROOT_ELEMENT = 'bodybag'
 const MARKDOWN_ROOT = '#markdown-root'
 
-const imageChecker = (images, callback) => {
-  // IE can't use forEach on array-likes
-  const imagesArray = Array.prototype.slice.call(images)
-
-  if (imagesArray.length) {
-    let counter = imagesArray.length
-
-    const unsubscribe = () => {
-      imagesArray.forEach(img => {
-        img.removeEventListener('load', decrement)
-        img.removeEventListener('error', decrement)
-      })
-    }
-
-    const decrement = () => {
-      counter -= 1
-
-      if (!counter) {
-        callback()
-        unsubscribe()
-      }
-    }
-
-    imagesArray.forEach(img => {
-      img.addEventListener('load', decrement)
-      img.addEventListener('error', decrement)
-    })
-
-    setTimeout(() => {
-      if (counter) unsubscribe()
-    }, 5000)
-  }
-}
-
 export default class RightPanel extends React.PureComponent {
   state = {
     height: 0,
@@ -79,15 +47,10 @@ export default class RightPanel extends React.PureComponent {
     window.removeEventListener('resize', this.updateHeadingsPosition)
   }
 
-  initHeadingsPosition = () => {
-    const images = document.querySelectorAll(`${MARKDOWN_ROOT} img`)
-
-    if (images.length) {
-      imageChecker(images, this.updateHeadingsPosition)
-    } else {
-      this.updateHeadingsPosition()
-    }
-  }
+  initHeadingsPosition = () =>
+    allImagesLoadedInContainer(document.querySelector(MARKDOWN_ROOT)).then(
+      this.updateHeadingsPosition
+    )
 
   updateHeadingsPosition = () => {
     const coordinates = this.props.headings.reduce((result, { slug }) => {

diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
@@ -6,22 +6,28 @@ import { GlobalStyle } from '../../styles'
 import MainLayout from '../MainLayout'
 import DocLayout from '../DocLayout'
 
+import { allImagesLoadedInContainer } from '../../utils/images'
+
 import './fonts/fonts.css'
 
 const useAnchorNavigation = () => {
   const location = useLocation()
 
   useEffect(() => {
+    const bodybag = document.getElementById('bodybag')
+
+    if (!bodybag) {
+      return
+    }
+
     if (location.hash) {
       const node = document.querySelector(location.hash)
 
       if (node) {
-        node.scrollIntoView()
+        allImagesLoadedInContainer(bodybag).then(() => node.scrollIntoView())
       }
     } else {
-      document
-        .getElementById('bodybag')
-        .scrollTo({ top: 0, behavior: 'smooth' })
+      bodybag.scrollTop = 0
     }
   }, [location.href])
 }

diff --git a/src/components/SEO/index.js b/src/components/SEO/index.js
@@ -37,11 +37,11 @@ function SEO({
 
   const defaultMeta = [
     {
-      property: 'description',
+      name: 'description',
       content: metaDescription
     },
     {
-      property: 'keywords',
+      name: 'keywords',
       content: metaKeywords
     },
     {