Add pdf slideshow partial

Author: nygrenh

package-lock.json

@@ -33,6 +33,7 @@
     "interactjs": "^1.3.4",
     "jquery": "^3.3.1",
     "moment": "^2.23.0",
+    "pdf-slideshow": "^0.1.2",
     "prismjs": "^1.15.0",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",

package.json

@@ -0,0 +1,7 @@
+import React from 'react'
+import PdfSlideshow, { setPdfJsWorkerPath } from 'pdf-slideshow'
+import { withPrefix } from 'gatsby'
+
+setPdfJsWorkerPath(withPrefix('/pdf.worker.min.js'))
+
+export default props => <PdfSlideshow {...props} />

src/partials/PdfSlideshow/PdfSlideshowLoader.js

@@ -0,0 +1,56 @@
+import React, { Fragment, lazy, Suspense } from 'react'
+import { Paper } from '@material-ui/core'
+import styled from 'styled-components'
+import withSimpleErrorBoundary from '../../util/withSimpleErrorBoundary'
+import Loading from '../../components/Loading'
+const PdfSlideshow = lazy(() => import('./PdfSlideshowLoader'))
+
+const HiddenLinkWrapper = styled.div`
+  display: none;
+`
+
+const StyledPaper = styled(Paper)`
+  @media only screen and (max-width: 800px) {
+    overflow-y: scroll;
+  }
+`
+
+class PdfSlideshowWrapper extends React.Component {
+  state = {
+    render: false,
+    path: undefined,
+  }
+
+  constructor(props) {
+    super(props)
+    this.linkContainer = React.createRef()
+  }
+
+  componentDidMount() {
+    const links = this.linkContainer.current
+    const path = links.querySelector('a').href
+    this.setState({ render: true, path })
+  }
+
+  render() {
+    if (!this.state.render) {
+      return (
+        <Fragment>
+          <Loading loading={true} heightHint="540px" />
+          <HiddenLinkWrapper ref={this.linkContainer}>
+            {this.props.children}
+          </HiddenLinkWrapper>
+        </Fragment>
+      )
+    }
+    return (
+      <Suspense fallback={<div style={{ height: '540px' }}>Loading...</div>}>
+        <StyledPaper>
+          <PdfSlideshow slideWidth={800} pdfLocation={this.state.path} />
+        </StyledPaper>
+      </Suspense>
+    )
+  }
+}
+
+export default withSimpleErrorBoundary(PdfSlideshowWrapper)

src/partials/PdfSlideshow/index.js

@@ -32,6 +32,7 @@ import Quiznator from './Quiznator'
 import PleaseLogin from './PleaseLogin'
 import FloatImageRight from './FloatImageRight'
 import CodeStatesVisualizer from './CodeStatesVisualizer'
+import PdfSlideshow from './PdfSlideshow'
 
 import {
   Table,
@@ -52,6 +53,7 @@ const mapping = {
   'please-login': PleaseLogin,
   'float-image-right': FloatImageRight,
   'code-states-visualizer': CodeStatesVisualizer,
+  'pdf-slideshow': PdfSlideshow,
   youtube: Youtube,
   quiznator: Quiznator,
   table: Table,