old_contents: import React from "react";
  
  let stylesStr;
  if (process.env.NODE_ENV === `production`) {
    try {
      stylesStr = require(`!raw-loader!../public/styles.css`);
    } catch (e) {
      console.log(e);
    }
  }
  
  module.exports = class HTML extends React.Component {
    render() {
      let css;
      if (process.env.NODE_ENV === `production`) {
        css = (
          <style
            id="gatsby-inlined-css"
            dangerouslySetInnerHTML={{ __html: stylesStr }}
          />
        );
      }
      return (
        <html lang="en" prefix="og: http://ogp.me/ns#">
          <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"
            />
            {this.props.headComponents}
            <link
              rel="stylesheet"
              href="//fonts.googleapis.com/css?family=Open+Sans:400,700|Vollkorn:700"
            />
            {css}
          </head>
          <body>
            {this.props.preBodyComponents}
            <div
              key={`body`}
              id="___gatsby"
              dangerouslySetInnerHTML={{ __html: this.props.body }}
            />
            {this.props.postBodyComponents}
          </body>
        </html>
      );
    }
  };
  
new_contents: import React from "react";
  
  let stylesStr;
  if (process.env.NODE_ENV === `production`) {
    try {
      stylesStr = require(`!raw-loader!../public/styles.css`);
    } catch (e) {
      console.log(e);
    }
  }
  
  module.exports = class HTML extends React.Component {
    render() {
      let css;
      if (process.env.NODE_ENV === `production`) {
        css = (
          <style
            id="gatsby-inlined-css"
            dangerouslySetInnerHTML={{ __html: stylesStr }}
          />
        );
      }
      return (
        <html lang="en" prefix="og: http://ogp.me/ns#">
          <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"
            />
            {this.props.headComponents}
            <link rel="dns-prefetch" href="//fonts.googleapis.com/"/>
            <link
              rel="stylesheet"
              href="//fonts.googleapis.com/css?family=Open+Sans:400,700|Vollkorn:700"
            />
            {css}
          </head>
          <body>
            {this.props.preBodyComponents}
            <div
              key={`body`}
              id="___gatsby"
              dangerouslySetInnerHTML={{ __html: this.props.body }}
            />
            {this.props.postBodyComponents}
          </body>
        </html>
      );
    }
  };
  
subject: add dns prefetch for google fonts