forked from COVID19Tracking/website
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(visualization): Create higher-order-component and gatsby plugin …
…to render components to png
- Loading branch information
1 parent
53a3cab
commit 6440e2d
Showing
15 changed files
with
2,770 additions
and
4,380 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| const puppeteer = require('puppeteer') | ||
| const mkdirp = require('mkdirp') | ||
| const path = require('path') | ||
| const Cache = require('file-system-cache').default | ||
|
|
||
| const cache = Cache({ | ||
| basePath: './.cache/component-rendering', | ||
| ns: 'component-rendering', | ||
| }) | ||
|
|
||
| exports.onPostBootstrap = () => cache.clear() | ||
|
|
||
| exports.onPostBuild = async (_, pluginOptions) => { | ||
| const browser = await puppeteer.launch() | ||
| const page = await browser.newPage() | ||
|
|
||
| const styles = await cache.get('_styles') | ||
| const stylesHTML = styles.styles | ||
| .map(styleHTML => `<style>${styleHTML}</style>`) | ||
| .reduce((acc, cur) => acc + cur, '') | ||
|
|
||
| const allCacheFiles = await cache.load() | ||
|
|
||
| // disable because we can't render more than one at a time without spinning up | ||
| // a ton of chromium pages | ||
| /* eslint-disable no-await-in-loop */ | ||
| for (let i = 0; i < allCacheFiles.files.length; i += 1) { | ||
| const entry = allCacheFiles.files[i].value | ||
| if (entry.isRenderable) { | ||
| try { | ||
| const { bodyHTML, width, height, dir, filename } = entry | ||
|
|
||
| const intWidth = Math.floor(width) | ||
| const intHeight = Math.floor(height) | ||
| await page.setViewport({ | ||
| width: intWidth, | ||
| height: intHeight, | ||
| }) | ||
|
|
||
| const pageHTML = `<!DOCTYPE html> | ||
| <meta charset="utf-8">${stylesHTML} | ||
| <body>${bodyHTML}</body>` | ||
|
|
||
| await page.setContent(pageHTML) | ||
|
|
||
| const renderPath = path.join(pluginOptions.path, dir) | ||
| await mkdirp(renderPath) | ||
| const screenshotPath = path.format({ dir: renderPath, base: filename }) | ||
| await page.screenshot({ | ||
| type: 'png', | ||
| clip: { | ||
| x: 0, | ||
| y: 0, | ||
| width: intWidth, | ||
| height: intHeight, | ||
| }, | ||
| omitBackground: true, | ||
| path: screenshotPath, | ||
| }) | ||
| } catch (e) { | ||
| console.error(e) | ||
| } | ||
| } | ||
| } | ||
| /* eslint-enable no-await-in-loop */ | ||
|
|
||
| await page.close() | ||
| await browser.close() | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| const Cache = require('file-system-cache').default | ||
| const path = require('path') | ||
| const { createElement } = require('react') | ||
| const { renderToStaticMarkup } = require('react-dom/server') | ||
|
|
||
| const prettifyUrl = require('./prettify-url') | ||
| const { setAddToRenderQueueCallback } = require('./rendered-component') | ||
|
|
||
| const cache = Cache({ | ||
| basePath: './.cache/component-rendering', | ||
| ns: 'component-rendering', | ||
| }) | ||
|
|
||
| /** | ||
| * Adds component HTML to the build cache so that gatsby-node can use puppeteer | ||
| * to render the markup | ||
| */ | ||
| setAddToRenderQueueCallback( | ||
| ({ Component, props, width, height, relativePath, filename }) => { | ||
| try { | ||
| const modifiedProps = { ...props, width, height } | ||
| const element = createElement(Component, modifiedProps) | ||
| const bodyHTML = renderToStaticMarkup(element) | ||
|
|
||
| const prettyPath = prettifyUrl(relativePath) | ||
| const prettyFileName = prettifyUrl(filename) | ||
| const componentPath = path.resolve(prettyPath, prettyFileName) | ||
|
|
||
| cache.setSync(componentPath, { | ||
| bodyHTML, | ||
| width, | ||
| height, | ||
| dir: prettyPath, | ||
| filename: prettyFileName, | ||
| isRenderable: true, | ||
| }) | ||
| } catch (e) { | ||
| console.error(e) | ||
| } | ||
| }, | ||
| ) | ||
|
|
||
| /** | ||
| * Grabs CSS information from the render so that it can be used for rendering | ||
| * components | ||
| */ | ||
| exports.onPreRenderHTML = ({ getHeadComponents }) => { | ||
| const headComponents = getHeadComponents() | ||
| const styles = headComponents.filter(headComponent => { | ||
| /* eslint-disable no-underscore-dangle */ | ||
| return headComponent.type === 'style' && | ||
| headComponent.props && | ||
| headComponent.props.dangerouslySetInnerHTML && | ||
| headComponent.props.dangerouslySetInnerHTML.__html | ||
| /* eslint-enable no-underscore-dangle */ | ||
| }).map(headComponent => headComponent.props.dangerouslySetInnerHTML.__html) | ||
|
|
||
| // cache.fileExists is asynchronous, so use getSync instead | ||
| if (cache.getSync('_styles') === undefined) { | ||
| cache.setSync('_styles', { styles, isRenderable: false }) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| exports.renderedComponent = require('./rendered-component').default |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| { | ||
| "name": "gatsby-render-components", | ||
| "version": "1.0.0", | ||
| "description": "A Gatsby plugin for generating a png file from a wrapped component", | ||
| "author": "", | ||
| "license": "Apache-2.0", | ||
| "dependencies": { | ||
| "file-system-cache": "^1.0.5", | ||
| "mkdirp": "^1.0.4", | ||
| "puppeteer": "^2.1.1", | ||
| "react": "^16.12.0", | ||
| "react-dom": "^16.12.0" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| const prettifyUrl = url => { | ||
| const spacesReplaced = url.replace(' ', '-') | ||
| return spacesReplaced.replace(/[^a-zA-Z0-9-_.]/g, '').toLowerCase() | ||
| } | ||
|
|
||
| module.exports = prettifyUrl |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React from 'react' | ||
|
|
||
| let addToRenderQueue = () => undefined | ||
|
|
||
| export const setAddToRenderQueueCallback = callback => { | ||
| addToRenderQueue = callback | ||
| } | ||
|
|
||
| const renderedComponent = Component => { | ||
| return class extends React.Component { | ||
| constructor(props) { | ||
| super(props) | ||
| const { renderOptions, ...passThroughProps } = props | ||
| const { width, height, relativePath, filename } = renderOptions | ||
| addToRenderQueue({ | ||
| Component, | ||
| props: passThroughProps, | ||
| width, | ||
| height, | ||
| relativePath, | ||
| filename, | ||
| }) | ||
| } | ||
|
|
||
| render() { | ||
| const { renderOptions, ...passThroughProps } = this.props | ||
| return <Component {...passThroughProps} /> | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export default renderedComponent |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| //noop | ||
| // noop |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters