45088187a7
Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1331 This lifts and copies code from the Yoga Playground component of the old website, to the new one, using a live workspace version of JS Yoga. This may eventually be used if the new website is fleshed out, but this also gives us real-world validation of the Yoga bindings in a web scenario, compared to the Node test runner. There is still some cleanup here needed, but we are able to bundle, typecheck, and render the playground now. The code here is mostly the same as before, but I removed some of the cruftier bits (e.g. URL shortener that goes to some private Heroku instance), and needed to do some tweaks for the new Yoga package, and TypeScript. This is currently using `yoga-layout/sync`, the asmjs bindings. But I had previously checked bundling against the wasm ones. Reviewed By: cortinico Differential Revision: D46884439 fbshipit-source-id: f53f0855c131cd2b81975bf05f71c43713600616
56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
/**
|
||
* 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 React from 'react';
|
||
import clsx from 'clsx';
|
||
import Link from '@docusaurus/Link';
|
||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||
import Layout from '@theme/Layout';
|
||
import HomepageFeatures from '@site/src/components/HomepageFeatures';
|
||
import BrowserOnly from '@docusaurus/BrowserOnly';
|
||
|
||
import styles from './index.module.css';
|
||
|
||
function HomepageHeader() {
|
||
const {siteConfig} = useDocusaurusContext();
|
||
return (
|
||
<header className={clsx('hero hero--primary', styles.heroBanner)}>
|
||
<div className="container">
|
||
<h1 className="hero__title">{siteConfig.title}</h1>
|
||
<p className="hero__subtitle">{siteConfig.tagline}</p>
|
||
<div className={styles.buttons}>
|
||
<Link
|
||
className="button button--secondary button--lg"
|
||
to="/docs/intro">
|
||
Docusaurus Tutorial - 5min ⏱️
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|
||
|
||
export default function Home(): JSX.Element {
|
||
const {siteConfig} = useDocusaurusContext();
|
||
return (
|
||
<Layout
|
||
title={`Hello from ${siteConfig.title}`}
|
||
description="Description will go into a meta tag in <head />">
|
||
<HomepageHeader />
|
||
<main>
|
||
<HomepageFeatures />
|
||
<BrowserOnly fallback={null}>
|
||
{() => {
|
||
const Playground = require('../components/Playground');
|
||
return <Playground />;
|
||
}}
|
||
</BrowserOnly>
|
||
</main>
|
||
</Layout>
|
||
);
|
||
}
|