Yoga Docs: Rename website-next to website (#1613)

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

So that GitHub links to edit a page point to the right place.

This will fail in OSS build until I switch the directory used by Vercel instance, but I am waiting to do that until ready to land, since that would cause other in progress changes to fail when exported.

Reviewed By: joevilches

Differential Revision: D54837857

fbshipit-source-id: 9bec90232dbe3ec8638568685671185d597fcf2d

website/src/pages/index.module.css

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.heroBanner {
+  justify-content: center;
+ }
+
+.heroRow {
+  align-items: center;
+  justify-content: center;
+}
+
+.heroLogo {
+  width: 200px;
+  height: 200px;
+ }
+
+@media (max-width: 996px) {
+  .heroLogo {
+    display: none;
+  }
+
+  .playgroundSection :global(.playground-editor) {
+    display: none;
+  }
+}
+
+.bg {
+  background-color: var(--yg-color-playground-background);
+}

website/src/pages/index.tsx

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import Layout from '@theme/Layout';
+
+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</h1>
+          <p className="hero__subtitle">
+            A portable layout engine targeting web standards
+          </p>
+
+          <Link
+            className="button button--primary button--lg"
+            to="/docs/about-yoga">
+            Learn more
+          </Link>
+        </div>
+        <div className="col col--2">
+          <YogaLogo className={styles.heroLogo} />
+        </div>
+      </div>
+    </header>
+  );
+}
+
+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={clsx('container', styles.playgroundSection)}>
+      <Playground height="600px" code={playgroundCode} autoFocus={true} />
+    </main>
+  );
+}
+
+export default function Home(): JSX.Element {
+  return (
+    <Layout>
+      <HeroSection />
+      <PlaygroundSection />
+    </Layout>
+  );
+}

website/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.

website/src/pages/playground.module.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.playgroundContainer {
+  display: flex;
+  flex: 1;
+}

website/src/pages/playground.tsx

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import Layout from '@theme/Layout';
+import {useLocation} from '@docusaurus/router';
+import lzString from 'lz-string';
+
+import Playground from '../components/Playground';
+
+import clsx from 'clsx';
+import styles from './playground.module.css';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+
+const defaultCode = `
+<Layout config={{useWebDefaults: false}}>
+  <Node style={{width: 350, height: 350, padding: 20}}>
+    <Node style={{flex: 1}} />
+  </Node>
+</Layout>
+`.trim();
+
+export default function PlaygroundPage(): JSX.Element {
+  const code = useCodeFromQueryParam();
+
+  return (
+    // @ts-ignore missing prop for `wrapperClassName`
+    <Layout wrapperClassName={clsx('container', styles.bg)} title="Playground">
+      <Playground
+        height="max(80vh, 600px)"
+        code={code}
+        autoFocus={true}
+        key={String(useIsBrowser())}
+      />
+    </Layout>
+  );
+}
+
+function useCodeFromQueryParam(): string {
+  const location = useLocation();
+
+  // We don't know the query param ahead of time when doing SSR, so just render
+  // blank to avoid the appearance of code changing.
+  if (!useIsBrowser()) {
+    return '';
+  }
+
+  const params = new URLSearchParams(location.search);
+  const codeParam = params.get('code');
+  return codeParam
+    ? lzString.decompressFromEncodedURIComponent(codeParam)
+    : defaultCode;
+}