Yoga Docs: Delete the Old website (#1612)
Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1612 Moving new website to `/website` before publishing, so that edit links point to the right eventual place in the GitHub repo. Reviewed By: joevilches Differential Revision: D54837808 fbshipit-source-id: 46de8a638ad9bce18558fd768ed8c080892b828e
This commit is contained in:
Nick Gerleman
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
d7faf2c101
commit
108c2f30a2
@@ -1,20 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* @flow
|
||||
* @format
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
const NotFoundPage = () => (
|
||||
<div>
|
||||
<h1>NOT FOUND</h1>
|
||||
<p>You just hit a route that doesn't exist... the sadness.</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default NotFoundPage;
|
||||
@@ -1,73 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.docs-landing .heading {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.docs-landing h1 {
|
||||
color: #444950;
|
||||
font-size: 48px;
|
||||
font-weight: 300;
|
||||
line-height: 110%;
|
||||
}
|
||||
|
||||
.docs-landing p {
|
||||
color: #444950;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 180%;
|
||||
}
|
||||
|
||||
.category {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.category h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.category a {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 250%;
|
||||
color: #606770;
|
||||
}
|
||||
|
||||
.category a:hover {
|
||||
color: #6BCEBB;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.docs-landing .heading {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.docs-landing h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.docs-landing p {
|
||||
line-height: 160%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.category {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.category a {
|
||||
line-height: 200%;
|
||||
}
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* @flow
|
||||
* @format
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Link from 'gatsby-link';
|
||||
import Page from '../../components/Page';
|
||||
import Padded from '../../components/Padded';
|
||||
import {Row, Col} from 'antd';
|
||||
import './index.css';
|
||||
|
||||
const CATEGORY_TITLE = {
|
||||
'getting-started': 'Getting Started',
|
||||
properties: 'Properties',
|
||||
examples: 'Examples',
|
||||
contributing: 'Contributing',
|
||||
};
|
||||
|
||||
export default ({data}) => (
|
||||
<Page className="docs-landing" shouldShowFooter title="Documentation">
|
||||
<Padded>
|
||||
<Row className="heading">
|
||||
<Col xl={16} lg={16} md={24} sm={24} xs={24}>
|
||||
<h1>Documentation</h1>
|
||||
<p>
|
||||
Welcome to Yoga's documentation page. Below you will find helpful
|
||||
documentation covering all the features of the library. Each page
|
||||
comes with an interactive playground for you to explore that
|
||||
feature. The examples section showcases some of the most common
|
||||
layouts and how to build them. This is a community project and
|
||||
contributions within documentation, code, and tests are more than
|
||||
welcome. The contributing section below covers how to get started.
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
{['getting-started', 'properties', 'examples', 'contributing'].map(
|
||||
category => (
|
||||
<Col lg={6} md={12} xs={24} key={category} className="category">
|
||||
<h2>{CATEGORY_TITLE[category]}</h2>
|
||||
{data.allMarkdownRemark.edges
|
||||
.filter(
|
||||
({node}) =>
|
||||
node.fileAbsolutePath.indexOf(`/${category}/`) > -1,
|
||||
)
|
||||
.map(({node}) =>
|
||||
node.frontmatter.redirect ? (
|
||||
<a key={node.id} href={node.frontmatter.path}>
|
||||
{node.frontmatter.title}
|
||||
</a>
|
||||
) : (
|
||||
<Link key={node.id} to={node.frontmatter.path}>
|
||||
{node.frontmatter.title}
|
||||
</Link>
|
||||
),
|
||||
)}
|
||||
</Col>
|
||||
),
|
||||
)}
|
||||
</Row>
|
||||
</Padded>
|
||||
</Page>
|
||||
);
|
||||
|
||||
export const query = graphql`
|
||||
query IndexQuery {
|
||||
allMarkdownRemark {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
frontmatter {
|
||||
title
|
||||
path
|
||||
redirect
|
||||
}
|
||||
fileAbsolutePath
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -1,222 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.landing-page .hero {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.landing-page .hero h3 {
|
||||
color: #BEC3C9;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 200%;
|
||||
}
|
||||
|
||||
.landing-page .hero h1 {
|
||||
color: #444950;
|
||||
font-size: 48px;
|
||||
font-weight: 300;
|
||||
line-height: 110%;
|
||||
}
|
||||
|
||||
.landing-page .hero p {
|
||||
color: #444950;
|
||||
line-height: 180%;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.landing-page .hero .button {
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
padding: 12px 30px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.landing-page .hero .blueprint {
|
||||
border-style: dashed;
|
||||
border-color: #444950;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.landing-page .hero .blueprint-container {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.landing-page .hero .blueprint-avatar {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 15px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.landing-page .hero .blueprint-title {
|
||||
position: absolute;
|
||||
left: 80px;
|
||||
top: 20px;
|
||||
height: 15px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.landing-page .hero .blueprint-subtitle {
|
||||
position: absolute;
|
||||
left: 80px;
|
||||
top: 40px;
|
||||
height: 15px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.landing-page .hero .blueprint-content {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
.landing-page hr {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #BEC3C9;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.landing-page .about-section {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.landing-page .about-section h1 {
|
||||
color: #444950;
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
.landing-page .about-section h3 {
|
||||
color: #6BCEBB;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.landing-page .about-section p {
|
||||
color: #444950;
|
||||
line-height: 180%;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.landing-page .logo-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.landing-page .logo-group .logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
.landing-page .logo-group img {
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.landing-page .logo-group .logo h3 {
|
||||
color: #606770;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
padding: 20px 15px;
|
||||
padding-left: 87px;
|
||||
z-index: 4;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
footer a {
|
||||
margin: 0 15px;
|
||||
color: #606770;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #6BCEBB;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.landing-page .hero {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.landing-page .hero h3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.landing-page .hero h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.landing-page .hero p {
|
||||
line-height: 160%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.landing-page .about-section {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.landing-page .about-section h1 {
|
||||
font-size: 24px;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
.landing-page .about-section h3 {
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.landing-page .about-section p {
|
||||
line-height: 160%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.landing-page .logo-group .logo {
|
||||
width: 33%;
|
||||
padding: 20px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.landing-page .logo-group img {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.landing-page .logo-group .logo h3 {
|
||||
font-size: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,198 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* @flow
|
||||
* @format
|
||||
*/
|
||||
|
||||
import {Button} from 'antd';
|
||||
import React from 'react';
|
||||
import Page from '../components/Page';
|
||||
import Padded from '../components/Padded';
|
||||
import Playground from '../components/Playground/src';
|
||||
import {Row, Col} from 'antd';
|
||||
import './index.css';
|
||||
import ReactNativeLogo from './logos/reactnative.png';
|
||||
import LithoLogo from './logos/litho.png';
|
||||
import ComponentKitLogo from './logos/componentkit.png';
|
||||
import ReactPDFLogo from './logos/reactpdf.png';
|
||||
import Link from 'gatsby-link';
|
||||
import Footer from '../components/Footer';
|
||||
|
||||
const playgroundInitialState = {
|
||||
width: 500,
|
||||
height: 500,
|
||||
alignItems: 1,
|
||||
padding: {
|
||||
top: '20',
|
||||
right: '20',
|
||||
bottom: '20',
|
||||
left: '20',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
width: 100,
|
||||
height: 100,
|
||||
minWidth: null,
|
||||
maxWidth: null,
|
||||
minHeight: null,
|
||||
maxHeight: null,
|
||||
},
|
||||
{
|
||||
width: 100,
|
||||
height: 100,
|
||||
margin: {
|
||||
right: '20',
|
||||
left: '20',
|
||||
},
|
||||
flexGrow: '1',
|
||||
minWidth: null,
|
||||
maxWidth: null,
|
||||
minHeight: null,
|
||||
maxHeight: null,
|
||||
},
|
||||
{
|
||||
width: 100,
|
||||
height: 100,
|
||||
minWidth: null,
|
||||
maxWidth: null,
|
||||
minHeight: null,
|
||||
maxHeight: null,
|
||||
},
|
||||
],
|
||||
minWidth: null,
|
||||
maxWidth: null,
|
||||
minHeight: null,
|
||||
maxHeight: null,
|
||||
};
|
||||
|
||||
const HeroSection = () => (
|
||||
<Padded>
|
||||
<Row className="hero">
|
||||
<Col md={12} sm={24} xs={24}>
|
||||
<h3>INTRODUCING</h3>
|
||||
<h1>
|
||||
Flexible Layouts <br /> with Yoga
|
||||
</h1>
|
||||
<p>
|
||||
Build flexible layouts on any platform with a highly optimized open
|
||||
source layout engine designed with speed, size, and ease of use in
|
||||
mind.
|
||||
</p>
|
||||
|
||||
<Link to="/docs">
|
||||
<Button type="primary" className="button">
|
||||
LEARN MORE
|
||||
</Button>
|
||||
</Link>
|
||||
</Col>
|
||||
<Col md={12} sm={0} xs={0}>
|
||||
<div className="blueprint blueprint-container">
|
||||
<div className="blueprint blueprint-avatar" />
|
||||
<div className="blueprint blueprint-title" />
|
||||
<div className="blueprint blueprint-subtitle" />
|
||||
<div className="blueprint blueprint-content" />
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Padded>
|
||||
);
|
||||
|
||||
const PlaygroundSection = () => (
|
||||
<Row>
|
||||
<Col lg={24} md={0} sm={0} xs={0}>
|
||||
<Playground
|
||||
selectedNodePath={[]}
|
||||
showGuides={true}
|
||||
height={601}
|
||||
layoutDefinition={playgroundInitialState}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
|
||||
const AboutSectionOne = () => (
|
||||
<Padded className="about-section">
|
||||
<Row>
|
||||
<Col xl={16} lg={16} md={24} sm={24} xs={24}>
|
||||
<h1>Open Source Adoption</h1>
|
||||
<p>
|
||||
Yoga already powers widely used open source frameworks. It enables
|
||||
these frameworks to offer a simple and intuitive layout API that
|
||||
allows for engineers to collaborate more easily across platforms. Yoga
|
||||
has unlocked exciting features such as calculating layouts off of the
|
||||
main thread to help ensure smooth UI performance.
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
<div className="logo-group">
|
||||
<a href="https://fblitho.com" target="_blank" className="logo">
|
||||
<img src={LithoLogo} />
|
||||
<h3>Litho</h3>
|
||||
</a>
|
||||
<a href="https://componentkit.org" target="_blank" className="logo">
|
||||
<img src={ComponentKitLogo} />
|
||||
<h3>ComponentKit</h3>
|
||||
</a>
|
||||
<a href="https://reactnative.dev" target="_blank" className="logo">
|
||||
<img src={ReactNativeLogo} />
|
||||
<h3>React Native</h3>
|
||||
</a>
|
||||
<a href="https://react-pdf.org/" target="_blank" className="logo">
|
||||
<img src={ReactPDFLogo} />
|
||||
<h3>React-PDF</h3>
|
||||
</a>
|
||||
</div>
|
||||
</Padded>
|
||||
);
|
||||
|
||||
const AboutSectionTwo = () => (
|
||||
<Padded className="about-section">
|
||||
<Row>
|
||||
<Col xl={16} lg={16} md={24} sm={24} xs={24}>
|
||||
<h1>Why You May Consider Yoga</h1>
|
||||
|
||||
<h3>PERFORMANCE</h3>
|
||||
<p>
|
||||
Yoga was built to be fast and performance will always be one of Yoga's
|
||||
primary goals. For a layout engine to be able to power any range of
|
||||
applications, it needs to be fast and never stand in the way of a
|
||||
fluid user experience.
|
||||
</p>
|
||||
|
||||
<h3>CROSS PLATFORM</h3>
|
||||
<p>
|
||||
Yoga is built with cross platform in mind. To ensure Yoga can be used
|
||||
anywhere, it was written in portable C/C++ and has a low number of
|
||||
dependencies and small binary size. This means Yoga can be used on iOS
|
||||
and Android, sharing knowledge, and potentially code, between
|
||||
platforms.
|
||||
</p>
|
||||
|
||||
<h3>EASY TO LEARN</h3>
|
||||
<p>
|
||||
Yoga is easy to pick up and learn. The interactive documentation pages
|
||||
and a fully fledged layout editor makes it easy to play and learn all
|
||||
the features. If used with any of the major UI frameworks the layout
|
||||
editor even provides code generation.
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</Padded>
|
||||
);
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<Page className="landing-page" title="A cross-platform layout engine">
|
||||
<HeroSection />
|
||||
<PlaygroundSection />
|
||||
<AboutSectionOne />
|
||||
<hr />
|
||||
<AboutSectionTwo />
|
||||
<Footer />
|
||||
</Page>
|
||||
</div>
|
||||
);
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
@@ -1,17 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
|
||||
<g>
|
||||
<circle fill="#303846" cx="100" cy="100" r="74"/>
|
||||
<g>
|
||||
<path fill="none" stroke="#97DCCF" stroke-width="5" stroke-miterlimit="10" d="M100.6,130.6c5.9-10.3,6.3-23.3,0-34.3
|
||||
c-6.3-11-17.9-17.1-29.7-17.1c-5.9,10.3-6.3,23.3,0,34.3C77.2,124.4,88.7,130.6,100.6,130.6z"/>
|
||||
<path fill="none" stroke="#97DCCF" stroke-width="5" stroke-miterlimit="10" d="M99.4,130.6c11.8,0,23.3-6.1,29.7-17.1
|
||||
c6.3-11,5.9-24,0-34.3c-11.8,0-23.3,6.1-29.7,17.1C93.1,107.3,93.5,120.3,99.4,130.6z"/>
|
||||
</g>
|
||||
<path fill="none" stroke="#97DCCF" stroke-width="5" stroke-miterlimit="10" d="M100,129.4c10.2-5.9,17.1-17,17.1-29.7
|
||||
c0-12.7-6.9-23.8-17.1-29.7c-10.2,5.9-17.1,17-17.1,29.7C82.9,112.4,89.8,123.5,100,129.4z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB |
@@ -1,28 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.playground-page {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.playground-page .error-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.playground-page .error-text {
|
||||
color: #444950;
|
||||
line-height: 180%;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* @flow
|
||||
* @format
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Page from '../../components/Page';
|
||||
import Playground from '../../components/Playground/src';
|
||||
import {Row, Col} from 'antd';
|
||||
import './index.css';
|
||||
|
||||
export default () => (
|
||||
<Page title="Playground">
|
||||
<Row className="playground-page">
|
||||
<Col lg={24} md={0} sm={0} xs={0}>
|
||||
<Playground height="100%" selectedNodePath={[]} persist />
|
||||
</Col>
|
||||
|
||||
<Col lg={0} xs={24} className="error-container">
|
||||
<p className="error-text">
|
||||
Sorry! The playground only works on larger displays currently.
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</Page>
|
||||
);
|
||||
Reference in New Issue
Block a user