From 7c4319181bc86442019321cbf9246dd284d654fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20B=C3=BCchele?= <danielbuechele@fb.com>
Date: Tue, 3 Jul 2018 10:05:28 -0700
Subject: [PATCH] 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                       |  1 +
 website/src/components/Playground/index.js |  1 +
 website/src/pages/index.js                 | 18 ++++++++++--------
 website/yarn.lock                          |  4 ++++
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/website/package.json b/website/package.json
index e112591c..33ba8cd0 100644
--- a/website/package.json
+++ b/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",
diff --git a/website/src/components/Playground/index.js b/website/src/components/Playground/index.js
index 26e1734e..ec8c4cf8 100644
--- a/website/src/components/Playground/index.js
+++ b/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';
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 334bcaa5..c8b6287a 100644
--- a/website/src/pages/index.js
+++ b/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>
 );
diff --git a/website/yarn.lock b/website/yarn.lock
index 68a93f6c..4f7f2c84 100644
--- a/website/yarn.lock
+++ b/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"