Replace Playground with JSX Editor (#1500)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1500

Inspired by the frequent usage of Expo snacks to run RN, to repro Yoga issues, this replaces the Playground port with a new ground up Playground UI. This UI right now is pretty simple, with a JSX editor which creates a Yoga tree, which is then rendered using the WebAssembly variant of Yoga.

There are a lot of ways we can continue to improve this, but this merges the foundation. Subjectively, I find this more useful as a tool to play with Yoga behavior than the GUI.

This also replaces some of the bits of the homepage, and adds a playground entrypoint (though it's pretty identical to the one I've been testing on the home page).

Reviewed By: yungsters

Differential Revision: D51963201

fbshipit-source-id: 1265cb1784151b685686e189d47ecd42cbacdf8f

website-next/src/pages/index.tsx

@@ -5,83 +5,77 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {Suspense} from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import Layout from '@theme/Layout';
-import BrowserOnly from '@docusaurus/BrowserOnly';
 
 import styles from './index.module.css';
 
+import YogaLogo from '../../static/img/logo.svg';
+import Playground from '../components/Playground';
+
 function HeroSection() {
   return (
     <header className={clsx('hero', styles.heroBanner)}>
       <div className={clsx('row', 'container', styles.heroRow)}>
         <div className="col col--6">
-          <h1 className="hero__title">Yoga Layout</h1>
+          <h1 className="hero__title">Yoga</h1>
           <p className="hero__subtitle">
-            A portable and perfomant layout engine targeting web standards
+            A portable layout engine targeting web standards
           </p>
 
           <Link className="button button--primary button--lg" to="/docs/intro">
             Learn more
           </Link>
         </div>
-        <div className={clsx(['col col--6', styles.blueprintColumn])}>
-          <div className={clsx([styles.blueprint, styles.blueprintContainer])}>
-            <div className={styles.blueprintHeader}>
-              <div
-                className={clsx([styles.blueprint, styles.blueprintAvatar])}
-              />
-              <div
-                className={clsx([styles.blueprint, styles.blueprintTitle])}
-              />
-              <div
-                className={clsx([styles.blueprint, styles.blueprintSubtitle])}
-              />
-            </div>
-            <div
-              className={clsx([styles.blueprint, styles.blueprintContent])}
-            />
-          </div>
+        <div className="col col--2">
+          <YogaLogo className={styles.heroLogo} />
         </div>
       </div>
     </header>
   );
 }
 
-const LazyPlayground = React.lazy(
-  () => import('../components/Playground/Playground'),
-);
-
-// Docusaurus SSR does not correctly support top-level await
-// 1. https://github.com/facebook/docusaurus/issues/7238
-// 2. https://github.com/facebook/docusaurus/issues/9468
-function BrowserOnlyPlayground() {
-  return (
-    <BrowserOnly fallback={null}>
-      {() => (
-        <Suspense fallback={null}>
-          <LazyPlayground className={styles.playground} />
-        </Suspense>
-      )}
-    </BrowserOnly>
-  );
-}
+const playgroundCode = `
+<Layout config={{useWebDefaults: false}}>
+  <Node style={{ width: 250, height: 475, padding: 10 }}>
+    <Node style={{ flex: 1, rowGap: 10}}>
+      <Node style={{ height: 60 }} />
+      <Node style={{ flex: 1, marginInline: 10 }} />
+      <Node style={{ flex: 2, marginInline: 10 }} />
+      <Node
+        style={{
+          position: "absolute",
+          width: "100%",
+          bottom: 0,
+          height: 64,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-around",
+        }}
+      >
+        <Node style={{ height: 40, width: 40 }} />
+        <Node style={{ height: 40, width: 40 }} />
+        <Node style={{ height: 40, width: 40 }} />
+        <Node style={{ height: 40, width: 40 }} />
+      </Node>
+    </Node>
+  </Node>
+</Layout>
+`.trim();
 
 function PlaygroundSection() {
   return (
     <main className={styles.playgroundSection}>
-      <div className="container">
-        <BrowserOnlyPlayground />
-      </div>
+      <Playground height="600px" code={playgroundCode} autoFocus={true} />
     </main>
   );
 }
 
 export default function Home(): JSX.Element {
   return (
-    <Layout title="Yoga Layout | A cross-platform layout engine">
+    <Layout>
       <HeroSection />
       <PlaygroundSection />
     </Layout>