fixing landing page layout on server render

Summary:
On the first render the landing page was missing a CSS class. This ls probably related to https://github.com/gatsbyjs/gatsby/issues/5136
It is fixed by wrapping the page in a <div>

Reviewed By: priteshrnandgaonkar

Differential Revision: D8660801

fbshipit-source-id: dd1ac4145831f2556e2c7ceeaddb2a423447f833

website/package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "antd": "^3.2.0",
     "atob": "^2.0.3",
+    "btoa": "^1.2.1",
     "gatsby": "^1.9.158",
     "gatsby-link": "^1.6.34",
     "gatsby-plugin-antd": "^1.0.10",

website/src/components/Playground/index.js

@@ -19,6 +19,7 @@ import PositionRecord from './PositionRecord';
 import LayoutRecord from './LayoutRecord';
 import Sidebar from './Sidebar';
 import {Row, Col, Button} from 'antd';
+import btoa from 'btoa';
 import type {LayoutRecordT} from './LayoutRecord';
 import type {Yoga$Direction} from 'yoga-layout';
 import './index.css';

website/src/pages/index.js

@@ -183,12 +183,14 @@ const AboutSectionTwo = () => (
 );
 
 export default () => (
-  <Page className="landing-page" title="A cross-platform layout engine">
-    <HeroSection />
-    <PlaygroundSection />
-    <AboutSectionOne />
-    <hr />
-    <AboutSectionTwo />
-    <Footer />
-  </Page>
+  <div>
+    <Page className="landing-page" title="A cross-platform layout engine">
+      <HeroSection />
+      <PlaygroundSection />
+      <AboutSectionOne />
+      <hr />
+      <AboutSectionTwo />
+      <Footer />
+    </Page>
+  </div>
 );

website/yarn.lock

@@ -1578,6 +1578,10 @@ bser@^2.0.0:
   dependencies:
     node-int64 "^0.4.0"
 
+btoa@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/btoa/-/btoa-1.2.1.tgz#01a9909f8b2c93f6bf680ba26131eb30f7fa3d73"
+
 buffer-alloc-unsafe@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-0.1.1.tgz#ffe1f67551dd055737de253337bfe853dfab1a6a"