Port more content to website-next (facebook#1435)

Summary:
This builds upon facebook#1433 and starts porting over and fixing some of the code in website-next.

1. Create a hero similar to current https://yogalayout.com hero
2. Start moving from `antd` and harcoded colors to [Infima](https://infima.dev/docs/getting-started/introduction/) primitives provided by Docusaurus
3. Replaced some more stock docusaurus assets, links, and text with the ones for Yoga.

There is still a lot to do here (not the least, adding real content), but it's beginning to look like a website, and is already pretty snappy. Eventually I want to get SSR working correctly with Playground, which is still a little broken in the port.

Pull Request resolved: facebook#1435

Test Plan:
**Gatsby Original**
<img width="1795" alt="image" src="https://github.com/facebook/yoga/assets/835219/7670d53a-00a8-4146-a100-e4a05dd77488">

**New (light mode)**
<img width="800" alt="image" src="https://github.com/facebook/yoga/assets/835219/ebe11d15-5f6f-445f-bcc8-9ec51ecfac62">

**New (dark mode)**
<img width="800" alt="image" src="https://github.com/facebook/yoga/assets/835219/ca44a492-46df-410a-8303-baec3029ec49">

Reviewed By: yungsters

Differential Revision: D50523462

Pulled By: NickGerleman

fbshipit-source-id: 61b4610104f695a4e38a7d4bb6a0c2488bd6f89e

.github/workflows/validate-website-next.yml

@@ -17,10 +17,6 @@ on:
       - name: Setup
         uses: ./.github/actions/setup-js
 
-      - name: Build Yoga
-        run: yarn build
-        working-directory: javascript
-
       - name: Build Website
         run: yarn build
         working-directory: website-next

javascript/just.config.cjs

@@ -22,6 +22,7 @@ const {
 
 const {readFile, writeFile} = require('fs/promises');
 
+const chalk = require('chalk');
 const glob = require('glob');
 const path = require('path');
 const which = require('which');
@@ -132,10 +133,37 @@ function runBenchTask() {
   };
 }
 
+function findExecutable(name, failureMessage) {
+  const exec = which.sync(name, {nothrow: true});
+  if (exec) {
+    return exec;
+  }
+
+  logger.error(chalk.bold.red(failureMessage));
+  process.exit(1);
+}
+
+function tryFindExecutable(name, failureMessage) {
+  const exec = which.sync(name, {nothrow: true});
+  if (exec) {
+    return exec;
+  }
+
+  logger.warn(chalk.bold.yellow(failureMessage));
+  return exec;
+}
+
 function emcmakeGenerateTask() {
   return () => {
-    const emcmake = which.sync('emcmake');
-    const ninja = which.sync('ninja', {nothrow: true});
+    const ninja = tryFindExecutable(
+      'ninja',
+      'Warning: Install Ninja (e.g. "brew install ninja") for faster builds',
+    );
+    const emcmake = findExecutable(
+      'emcmake',
+      'Error: Please install the emscripten SDK: https://emscripten.org/docs/getting_started/',
+    );
+
     const args = [
       'cmake',
       '-S',
@@ -152,7 +180,10 @@ function emcmakeGenerateTask() {
 
 function cmakeBuildTask(opts) {
   return () => {
-    const cmake = which.sync('cmake');
+    const cmake = findExecutable(
+      'cmake',
+      'Error: Please install CMake (e.g. "brew install cmake")',
+    );
     const args = [
       '--build',
       'build',

package.json

@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "tsc": "yarn workspaces run tsc"
   },
   "workspaces": [
     "javascript",

website-next/docusaurus.config.cjs → website-next/docusaurus.config.js

@@ -7,11 +7,10 @@
 
 // @ts-check
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+import {themes as prismThemes} from 'prism-react-renderer';
 
 /** @type {import('@docusaurus/types').Config} */
-const config = {
+export default {
   title: 'Yoga',
   tagline:
     'Build flexible layouts on any platform with a highly optimized open source layout engine designed with speed, size, and ease of use in mind.',
@@ -63,20 +62,27 @@ const config = {
         items: [
           {
             type: 'docSidebar',
-            sidebarId: 'tutorialSidebar',
+            sidebarId: 'docsSidebar',
             position: 'left',
-            label: 'Tutorial',
+            label: 'Documentation',
           },
           {to: '/blog', label: 'Blog', position: 'left'},
           {
-            href: 'https://github.com/facebook/docusaurus',
+            href: 'https://github.com/facebook/yoga',
             label: 'GitHub',
             position: 'right',
           },
         ],
       },
       footer: {
         style: 'dark',
+        logo: {
+          alt: 'Meta Open Source',
+          src: 'img/meta_oss.svg',
+          href: 'https://opensource.fb.com',
+          width: 300,
+          height: 64,
+        },
         links: [
           {
             title: 'Docs',
@@ -117,10 +123,8 @@ const config = {
         copyright: `Copyright © ${new Date().getFullYear()} Meta Platforms, Inc.`,
       },
       prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
+        theme: prismThemes.github,
+        darkTheme: prismThemes.dracula,
       },
     }),
 };
-
-module.exports = config;

website-next/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
-    "start": "docusaurus start",
-    "build": "docusaurus build",
+    "start": "yarn workspace yoga-layout build && docusaurus start",
+    "build": "yarn workspace yoga-layout build && docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
@@ -17,34 +17,22 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@docusaurus/core": "2.4.1",
-    "@docusaurus/preset-classic": "2.4.1",
-    "@mdx-js/react": "^1.6.22",
-    "antd": "^3.6.5",
+    "@docusaurus/core": "3.0.0",
+    "@docusaurus/preset-classic": "3.0.0",
+    "@mdx-js/react": "^3.0.0",
     "clsx": "^1.2.1",
     "immutable": "^4.0.0",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-syntax-highlighter": "^8.0.0",
+    "prism-react-renderer": "^2.1.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "yoga-layout": "^2.0.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.4.1",
-    "@tsconfig/docusaurus": "^1.0.5"
-  },
-  "browserslist": {
-    "production": [
-      ">0.5%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "@docusaurus/module-type-aliases": "3.0.0",
+    "@docusaurus/tsconfig": "3.0.0",
+    "@docusaurus/types": "3.0.0"
   },
+  "browserslist": "> 0.5%, last 2 versions, Firefox ESR, not dead",
   "engines": {
     "node": ">=16.14"
   }

website-next/sidebars.cjs

@@ -21,7 +21,7 @@
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+  docsSidebar: [{type: 'autogenerated', dirName: '.'}],
 
   // But you can create a sidebar manually
   /*

website-next/src/components/HomepageFeatures/styles.module.css → website-next/src/components/Playground/EditValue.module.css

@@ -5,14 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
+.input {
   width: 100%;
 }
-
-.featureSvg {
-  height: 200px;
-  width: 200px;
-}

website-next/src/components/Playground/EditValue.tsx

@@ -10,7 +10,8 @@
 import React from 'react';
 import YogaEnumSelect from './YogaEnumSelect';
 import YogaPositionEditor from './YogaPositionEditor';
-import {Input} from 'antd';
+
+import styles from './EditValue.module.css';
 
 type Props<T> = {
   property: string;
@@ -20,6 +21,7 @@ type Props<T> = {
   placeholder?: string;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export default (props: Props<any>) => {
   if (YogaEnumSelect.availableProperties.indexOf(props.property) > -1) {
     // @ts-ignore
@@ -31,7 +33,8 @@ export default (props: Props<any>) => {
     return <YogaPositionEditor {...props} />;
   } else {
     return (
-      <Input
+      <input
+        className={styles.input}
         type="text"
         {...props}
         onChange={e => props.onChange(props.property, e.target.value)}