src/html.jsx
/* eslint import/no-unresolved:"off" */
/* eslint import/extensions:"off" */
/* eslint global-require:"off" */
import React from "react"
import favicon from "./favicon.png"
let inlinedStyles = ""
if (process.env.NODE_ENV === "production") {
try {
/* eslint import/no-webpack-loader-syntax: off */
inlinedStyles = require("!raw-loader!../public/styles.css")
} catch (e) {
/* eslint no-console: "off"*/
console.log(e)
}
}
export default class HTML extends React.Component {
render() {
let css
if (process.env.NODE_ENV === "production") {
css = (
<style
id="gatsby-inlined-css"
dangerouslySetInnerHTML={{ __html: inlinedStyles }}
/>
)
}
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link rel="shortcut icon" href={favicon} />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous"
/>
{this.props.headComponents}
{css}
</head>
<body>
<div
id="___gatsby"
dangerouslySetInnerHTML={{ __html: this.props.body }}
/>
{this.props.postBodyComponents}
</body>
</html>
)
}
}