Files
yoga/website
Nick Gerleman 53872e2521 Update Gradle Setup (#1215)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1215

This updates:
1. The Gradle Wrapper and Gradle Version
2. AGP Version
3. Android SDK and NDK Versions
4. Java Version (to support newer AGP)
5. Required CMake Version

Versions are loosely aligned to RN. CMake 3.18.1 is the latest provided by the NDK but the Android build itself creates warnings on CMake < 3.19, so we add the "+" to prefer something newer if available (but we set an old required version to CMake policy will keep compatible).

This also removes the "yogacore" project, which packages libyoga.so without the jni bindings. Afaik it was never published, and we don't rely on it ourselves.

Reviewed By: cortinico

Differential Revision: D42406551

fbshipit-source-id: 5e127dffde69352269ecbddadbc2bdd82f7d50fa
2023-01-16 04:16:07 -08:00
..
2023-01-16 04:16:07 -08:00
2021-01-04 21:06:15 -08:00
2019-08-01 04:15:25 -07:00
2018-02-13 06:16:12 -08:00

Yoga documentation and playground

This site uses gatsby.js as static site generator. Which transforms all markdown and react code to static HTML and JS files.

Development

yarn install
yarn develop

Structure

Documentation pages are generated from the Markdown files in contents/. The files are organized in 4 sections/folders (getting-started, properties, examples, contributing) which are dynamically listed on the docs overview page. The Markdown files can have some header files containing metadata.

---
path: "docs/flexDirection"
title: "Flex Direction"
hasPlayground: true
editableProperties: ['flexDirection']
---

The path can be any URL this page should be available at. The title is used as the page's HTML-title and when referencing the file from the documentation overview. There are two kinds of templates for a page: with and without playground. hasPlayground selects the corresponding template (src/templates/{with|without}Playground.js). When using hasPlayground: true, editableProperties can list all Yoga properties which are editable in the playground.

Design

We are using antd for various UI elements. See their documentation for the components available. gatsby-config.js can be used to overwrite LESS-variables from antd.

For styling react components we create a CSS-file with the same name next to each component and import it in the component. E.g. there is index.js and index.css. In the react-component we import the stylesheet: import './index.css'.

Build

To generate the static files run:

yarn build

The output will be in public/ and can be published on GitHub pages.