website v2 skeleton
Summary: Sets up a skeleton for the new yoga website using gatsby static site generator allow-large-files Reviewed By: emilsjolander Differential Revision: D6952326 fbshipit-source-id: 7579bc80bec21552689da5b78f3d960910ff13bb
This commit is contained in:
Daniel Büchele
committed by
Facebook Github Bot
Facebook Github Bot
parent
b08bd572ef
commit
e43bb9da19
22
website/src/pages/404.js
Normal file
22
website/src/pages/404.js
Normal file
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* Copyright (c) 2014-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @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;
|
||||
93
website/src/pages/docs/index.js
Normal file
93
website/src/pages/docs/index.js
Normal file
@@ -0,0 +1,93 @@
|
||||
/**
|
||||
* Copyright (c) 2014-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @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';
|
||||
|
||||
export default () => (
|
||||
<Page>
|
||||
<Padded>
|
||||
<h1>Documentation</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis
|
||||
urna in lacus rutrum vehicula. Curabitur vitae dictum ante, sollicitudin
|
||||
sollicitudin tortor. Morbi a vehicula justo. Proin luctus tellus vitae
|
||||
nulla bibendum gravida. Duis varius cursus erat ut tempus. Fusce ex
|
||||
arcu, accumsan et ultricies at, fermentum sit amet lectus. Donec a neque
|
||||
nec leo pharetra fermentum.
|
||||
</p>
|
||||
<Row>
|
||||
<Col md={6} sm={12} xs={24}>
|
||||
<h2>Getting Started</h2>
|
||||
<Link to="">Litho</Link>
|
||||
<br />
|
||||
<Link to="">ComponentKit</Link>
|
||||
<br />
|
||||
<Link to="">React Native</Link>
|
||||
<br />
|
||||
<Link to="">Addin Yoga to a project</Link>
|
||||
</Col>
|
||||
<Col md={6} sm={12} xs={24}>
|
||||
<h2>Properties</h2>
|
||||
<Link to="">Width and height</Link>
|
||||
<br />
|
||||
<Link to="">Max/min width and height</Link>
|
||||
<br />
|
||||
<Link to="docs/flexDirection">Flex direction</Link>
|
||||
<br />
|
||||
<Link to="">Justify content</Link>
|
||||
<br />
|
||||
<Link to="">Align items/self</Link>
|
||||
<br />
|
||||
<Link to="">Flex basis, grow and shrink</Link>
|
||||
<br />
|
||||
<Link to="">Margins, paddings, and borders</Link>
|
||||
<br />
|
||||
<Link to="">Flex wrap</Link>
|
||||
<br />
|
||||
<Link to="">Align content</Link>
|
||||
<br />
|
||||
<Link to="">Absolute layout</Link>
|
||||
<br />
|
||||
<Link to="">Aspect ratio</Link>
|
||||
<br />
|
||||
<Link to="">Layout direction</Link>
|
||||
</Col>
|
||||
<Col md={6} sm={12} xs={24}>
|
||||
<h2>Examples</h2>
|
||||
<Link to="">Overlays</Link>
|
||||
<br />
|
||||
<Link to="">Floating buttons</Link>
|
||||
<br />
|
||||
<Link to="">Flexible text</Link>
|
||||
</Col>
|
||||
<Col md={6} sm={12} xs={24}>
|
||||
<h2>Contributing</h2>
|
||||
<Link to="">Check out the code</Link>
|
||||
<br />
|
||||
<Link to="">Running the test suite</Link>
|
||||
<br />
|
||||
<Link to="">Making a change</Link>
|
||||
<br />
|
||||
<Link to="">Adding a test</Link>
|
||||
<br />
|
||||
<Link to="">Adding documentation</Link>
|
||||
<br />
|
||||
<Link to="">Opening a pull request</Link>
|
||||
</Col>
|
||||
</Row>
|
||||
</Padded>
|
||||
</Page>
|
||||
);
|
||||
12
website/src/pages/index.css
Normal file
12
website/src/pages/index.css
Normal file
@@ -0,0 +1,12 @@
|
||||
.IndexPageSection {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.IndexPageSection h1 {
|
||||
line-height: 130%;
|
||||
}
|
||||
|
||||
.IndexPageSection .button-spacing {
|
||||
margin-right: 10px;
|
||||
}
|
||||
71
website/src/pages/index.js
Normal file
71
website/src/pages/index.js
Normal file
@@ -0,0 +1,71 @@
|
||||
/**
|
||||
* Copyright (c) 2014-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @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';
|
||||
import {Row, Col} from 'antd';
|
||||
import './index.css';
|
||||
|
||||
export default () => (
|
||||
<Page>
|
||||
<Padded className="IndexPageSection">
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<h1>Flexible Layouts with Yoga</h1>
|
||||
<p>
|
||||
Build flexible layouts on any platform with a highly optimized
|
||||
layout engine designed with speed, size, and ease of use in mind.
|
||||
</p>
|
||||
<Button type="primary" className="button-spacing">
|
||||
Get started
|
||||
</Button>
|
||||
<Button type="primary" ghost>
|
||||
Try it out
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={12} />
|
||||
</Row>
|
||||
</Padded>
|
||||
<Playground selectedNodePath={[]} showGuides={false} height={501} />
|
||||
<Padded className="IndexPageSection">
|
||||
<Row>
|
||||
<Col span={12} />
|
||||
<Col span={12}>
|
||||
<h1>Integrated Into The Most Optimized Mobile Frameworks</h1>
|
||||
<p>
|
||||
Facebook makes use of Yoga to power most of their UI Frameworks.
|
||||
This ensured layout can be performed quickly and fluidly off of the
|
||||
main thread to ensure optimal performance. As an added benefit
|
||||
engineers familiar with one framework can get started quickly with
|
||||
another thanks to the shared layout engine.
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</Padded>
|
||||
<Padded className="IndexPageSection">
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<h1>Proven In Productions</h1>
|
||||
<p>
|
||||
Yoga powers some of the largest apps in the world, including many of
|
||||
Facebook's products. This should help convince you that Yoga is
|
||||
ready to handle the scale of almost any app out there.
|
||||
</p>
|
||||
</Col>
|
||||
<Col span={12} />
|
||||
</Row>
|
||||
</Padded>
|
||||
</Page>
|
||||
);
|
||||
21
website/src/pages/playground.js
Normal file
21
website/src/pages/playground.js
Normal file
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* Copyright (c) 2014-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @flow
|
||||
* @format
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Page from '../components/Page';
|
||||
import Playground from '../components/Playground';
|
||||
|
||||
export default () => (
|
||||
<Page title="Playground">
|
||||
<Playground height="100%" />
|
||||
</Page>
|
||||
);
|
||||
Reference in New Issue
Block a user