[gatsby-plugin-react-helmet] Add support for htmlAttributes and bodyA…

…ttributes fixes #2447 (#2448)
gatsbyjs · Oct 13, 2017 · 25e3c6a · 25e3c6a
1 parent 3f88690
commit 25e3c6a
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 13 deletions.
diff --git a/packages/gatsby-plugin-react-helmet/src/gatsby-ssr.js b/packages/gatsby-plugin-react-helmet/src/gatsby-ssr.js
@@ -1,7 +1,12 @@
 import Helmet from "react-helmet"
 
-exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
+exports.onRenderBody = (
+  { setHeadComponents, setHtmlAttributes, setBodyAttributes },
+  pluginOptions
+) => {
   const helmet = Helmet.renderStatic()
+  setHtmlAttributes(helmet.htmlAttributes.toComponent())
+  setBodyAttributes(helmet.bodyAttributes.toComponent())
   setHeadComponents([
     helmet.title.toComponent(),
     helmet.link.toComponent(),

diff --git a/packages/gatsby/cache-dir/api-ssr-docs.js b/packages/gatsby/cache-dir/api-ssr-docs.js
@@ -9,6 +9,10 @@
  * @param {function} $0.setHeadComponents Takes an array of components as its
  * first argument which are added to the `headComponents` array which is passed
  * to the `html.js` component.
+ * @param {function} $0.setHtmlAttributes Takes an object of props which will
+ * spread into the `<html>` component.
+ * @param {function} $0.setBodyAttributes Takes an object of props which will
+ * spread into the `<body>` component.
  * @param {function} $0.setPreBodyComponents Takes an array of components as its
  * first argument which are added to the `preBodyComponents` array which is passed
  * to the `html.js` component.
@@ -55,6 +59,10 @@ exports.replaceRenderer = true
  * @param {function} $0.setHeadComponents Takes an array of components as its
  * first argument which are added to the `headComponents` array which is passed
  * to the `html.js` component.
+ * @param {function} $0.setHtmlAttributes Takes an object of props which will
+ * spread into the `<html>` component.
+ * @param {function} $0.setBodyAttributes Takes an object of props which will
+ * spread into the `<body>` component.
  * @param {function} $0.setPreBodyComponents Takes an array of components as its
  * first argument which are added to the `preBodyComponents` array which is passed
  * to the `html.js` component.
@@ -67,11 +75,20 @@ exports.replaceRenderer = true
  * @example
  * import helmet from "react-helmet"
  *
- * exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
+ * exports.onRenderBody = (
+ *   { setHeadComponents, setHtmlAttributes, setBodyAttributes },
+ *   pluginOptions
+ * ) => {
+ *   const helmet = Helmet.renderStatic()
+ *   setHtmlAttributes(helmet.htmlAttributes.toComponent())
+ *   setBodyAttributes(helmet.bodyAttributes.toComponent())
  *   setHeadComponents([
  *     helmet.title.toComponent(),
- *     helmet.meta.toComponent(),
  *     helmet.link.toComponent(),
+ *     helmet.meta.toComponent(),
+ *     helmet.noscript.toComponent(),
+ *     helmet.script.toComponent(),
+ *     helmet.style.toComponent(),
  *   ])
  * }
  */

diff --git a/packages/gatsby/cache-dir/default-html.js b/packages/gatsby/cache-dir/default-html.js
@@ -21,7 +21,7 @@ module.exports = class HTML extends React.Component {
       )
     }
     return (
-      <html>
+      <html {...this.props.htmlAttributes}>
         <head>
           <meta charSet="utf-8" />
           <meta httpEquiv="x-ua-compatible" content="ie=edge" />
@@ -32,7 +32,7 @@ module.exports = class HTML extends React.Component {
           {this.props.headComponents}
           {css}
         </head>
-        <body>
+        <body {...this.props.bodyAttributes}>
           {this.props.preBodyComponents}
           <div
             key={`body`}

diff --git a/packages/gatsby/cache-dir/develop-static-entry.js b/packages/gatsby/cache-dir/develop-static-entry.js
@@ -19,6 +19,8 @@ try {
 module.exports = (locals, callback) => {
   // const apiRunner = require(`${directory}/.cache/api-runner-ssr`)
   let headComponents = []
+  let htmlAttributes = {}
+  let bodyAttributes = {}
   let preBodyComponents = []
   let postBodyComponents = []
   let bodyProps = {}
@@ -28,6 +30,14 @@ module.exports = (locals, callback) => {
     headComponents = headComponents.concat(components)
   }
 
+  const setHtmlAttributes = attributes => {
+    htmlAttributes = merge(htmlAttributes, attributes)
+  }
+
+  const setBodyAttributes = attributes => {
+    bodyAttributes = merge(bodyAttributes, attributes)
+  }
+
   const setPreBodyComponents = components => {
     preBodyComponents = preBodyComponents.concat(components)
   }
@@ -42,6 +52,8 @@ module.exports = (locals, callback) => {
 
   apiRunner(`onRenderBody`, {
     setHeadComponents,
+    setHtmlAttributes,
+    setBodyAttributes,
     setPreBodyComponents,
     setPostBodyComponents,
     setBodyProps,

diff --git a/packages/gatsby/cache-dir/static-entry.js b/packages/gatsby/cache-dir/static-entry.js
@@ -2,6 +2,7 @@ import React from "react"
 import { renderToString, renderToStaticMarkup } from "react-dom/server"
 import { StaticRouter, Route, withRouter } from "react-router-dom"
 import { kebabCase, get, merge, isArray, isString } from "lodash"
+
 import apiRunner from "./api-runner-ssr"
 import pages from "./pages.json"
 import syncRequires from "./sync-requires"
@@ -44,20 +45,30 @@ module.exports = (locals, callback) => {
     pathPrefix = `${__PATH_PREFIX__}/`
   }
 
-  let bodyHTML = ``
+  let bodyHtml = ``
   let headComponents = []
+  let htmlAttributes = {}
+  let bodyAttributes = {}
   let preBodyComponents = []
   let postBodyComponents = []
   let bodyProps = {}
 
   const replaceBodyHTMLString = body => {
-    bodyHTML = body
+    bodyHtml = body
   }
 
   const setHeadComponents = components => {
     headComponents = headComponents.concat(components)
   }
 
+  const setHtmlAttributes = attributes => {
+    htmlAttributes = merge(htmlAttributes, attributes)
+  }
+
+  const setBodyAttributes = attributes => {
+    bodyAttributes = merge(bodyAttributes, attributes)
+  }
+
   const setPreBodyComponents = components => {
     preBodyComponents = preBodyComponents.concat(components)
   }
@@ -103,22 +114,27 @@ module.exports = (locals, callback) => {
     bodyComponent,
     replaceBodyHTMLString,
     setHeadComponents,
+    setHtmlAttributes,
+    setBodyAttributes,
     setPreBodyComponents,
     setPostBodyComponents,
     setBodyProps,
   })
 
   // If no one stepped up, we'll handle it.
-  if (!bodyHTML) {
-    bodyHTML = renderToString(bodyComponent)
+  if (!bodyHtml) {
+    bodyHtml = renderToString(bodyComponent)
   }
 
   apiRunner(`onRenderBody`, {
     setHeadComponents,
+    setHtmlAttributes,
+    setBodyAttributes,
     setPreBodyComponents,
     setPostBodyComponents,
     setBodyProps,
     pathname: locals.path,
+    bodyHtml,
   })
 
   // Add the chunk-manifest as a head component.
@@ -204,9 +220,11 @@ module.exports = (locals, callback) => {
     <Html
       {...bodyProps}
       headComponents={headComponents}
+      htmlAttributes={htmlAttributes}
+      bodyAttributes={bodyAttributes}
       preBodyComponents={preBodyComponents}
       postBodyComponents={postBodyComponents}
-      body={bodyHTML}
+      body={bodyHtml}
       path={locals.path}
     />
   )}`

diff --git a/packages/gatsby/src/commands/build.js b/packages/gatsby/src/commands/build.js
@@ -29,7 +29,8 @@ module.exports = async function build(program: BuildArgs) {
   // an equivalent static directory within public.
   copyStaticDirectory()
 
-  let activity = report.activityTimer(`Building CSS`)
+  let activity
+  activity = report.activityTimer(`Building CSS`)
   activity.start()
   await buildCSS(program).catch(err => {
     reportFailure(`Generating CSS failed`, err)

diff --git a/www/src/html.js b/www/src/html.js
@@ -23,7 +23,7 @@ export default class HTML extends React.Component {
     }
 
     return (
-      <html lang="en">
+      <html {...this.props.htmlAttributes}>
         <head>
           <link
             rel="preload"
@@ -74,7 +74,7 @@ export default class HTML extends React.Component {
           />
           {css}
         </head>
-        <body>
+        <body {...this.props.bodyAttributes}>
           <div
             id="___gatsby"
             dangerouslySetInnerHTML={{ __html: this.props.body }}

diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js
@@ -57,6 +57,7 @@ class DefaultLayout extends React.Component {
           <meta name="twitter:site" content="@gatsbyjs" />
           <meta name="og:type" content="website" />
           <meta name="og:site_name" content="GatsbyJS" />
+          <html lang="en" />
         </Helmet>
         <Navigation pathname={this.props.location.pathname} />
         <div