Skip to content

Instantly share code, notes, and snippets.

@duwerq
Last active July 10, 2020 15:52
Show Gist options
  • Save duwerq/90bc3c7c66010f9506f88f2db6cf8b7b to your computer and use it in GitHub Desktop.
Save duwerq/90bc3c7c66010f9506f88f2db6cf8b7b to your computer and use it in GitHub Desktop.
Gatsby html.js example
import React from "react"
import PropTypes from "prop-types"
export default function HTML(props) {
return (
<html {...props.htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
{props.headComponents}
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
</head>
<body {...props.bodyAttributes}>
{props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: props.body }}
/>
{props.postBodyComponents}
</body>
</html>
)
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
}
/*
This file should be place innside /src folder of your gatsby project.
More details at https://www.gatsbyjs.org/docs/custom-html/
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment