diff --git a/website/src/components/FacebookOSSLogo.js b/website/src/components/FacebookOSSLogo.js new file mode 100644 index 00000000..6a1f02bd --- /dev/null +++ b/website/src/components/FacebookOSSLogo.js @@ -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, {Component} from 'react'; + +export default () => + + + + + + diff --git a/website/src/components/Footer.css b/website/src/components/Footer.css new file mode 100644 index 00000000..2813bc65 --- /dev/null +++ b/website/src/components/Footer.css @@ -0,0 +1,43 @@ +/** + * 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. + */ + +.Footer { + display: flex; + padding: 10px 15px; + z-index: 4; + align-items: center; + justify-content: space-between; + background-color: white; + border-top: 1px solid #a6dacf; +} + +.Footer svg { + width: 30px; + height: 30px; +} + +.Footer svg path { + fill: #a6dacf; +} + +.Footer .logoOSS { + display: flex; + align-items: center; + text-decoration: none; +} + +.Footer a { + margin: 0 10px; +} + +.Footer .SocialNetwork { + display: flex; + align-items: center; + text-decoration: none; +} diff --git a/website/src/components/Footer.js b/website/src/components/Footer.js new file mode 100644 index 00000000..de69768c --- /dev/null +++ b/website/src/components/Footer.js @@ -0,0 +1,38 @@ +/** + * 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, {Component} from 'react'; +import Link from 'gatsby-link'; +import {Icon} from 'antd'; +import './Footer.css'; +import FacebookOSSLogo from './FacebookOSSLogo'; + +export default class Footer extends Component<{}> { + render() { + return ( +
+ + + Facebook Open Source + +
+ Open Source + Github + Twitter +
+ + Contribute to this project on Github + +
+ ); + } +} diff --git a/website/src/components/Page.js b/website/src/components/Page.js index 42361ec9..25eddfc7 100644 --- a/website/src/components/Page.js +++ b/website/src/components/Page.js @@ -12,6 +12,7 @@ import React from 'react'; import Toolbar from './Toolbar'; +import Footer from './Footer'; import './Page.css'; require('prismjs/themes/prism.css'); @@ -19,13 +20,15 @@ type Props = {| children: any, className?: string, withSpacing?: boolean, + shouldShowFooter?: boolean, |}; export default (props: Props) => (
- +
{props.children}
+ {props.shouldShowFooter &&
); diff --git a/website/src/pages/docs/index.js b/website/src/pages/docs/index.js index 6c54b2f4..842ea333 100644 --- a/website/src/pages/docs/index.js +++ b/website/src/pages/docs/index.js @@ -19,22 +19,23 @@ import './index.css'; const CATEGORY_TITLE = { 'getting-started': 'Getting Started', - 'properties': 'Properties', - 'examples': 'Examples', - 'contributing': 'Contributing', + properties: 'Properties', + examples: 'Examples', + contributing: 'Contributing', }; export default ({data}) => ( - +

Documentation

- Welcome to Yoga's documentation page. Below you will find helpfull - documentation on how to use yoga. As well as how to contribute to the - core library, documentation, and tests. We have also put together a set - of examples showing off common layouts and how to user Yoga to achieve them. + Welcome to Yoga's documentation page. Below you will find helpful + documentation on how to use yoga. As well as how to contribute to + the core library, documentation, and tests. We have also put + together a set of examples showing off common layouts and how to + user Yoga to achieve them.

@@ -48,15 +49,18 @@ export default ({data}) => ( ({node}) => node.fileAbsolutePath.indexOf(`/${category}/`) > -1, ) - .map(({node}) => ( - node.frontmatter.redirect - ? ( + .map( + ({node}) => + node.frontmatter.redirect ? ( + {node.frontmatter.title} - ) - : ( + + ) : ( + {node.frontmatter.title} - ) - ))} + + ), + )} ), )} diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 45875a52..e3a8d5be 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -21,31 +21,34 @@ import ReactNativeLogo from './logos/reactnative.png'; import LithoLogo from './logos/litho.png'; import ComponentKitLogo from './logos/componentkit.png'; import Link from 'gatsby-link'; +import Footer from '../components/Footer'; const HeroSection = () => (

INTRODUCING

-

Flexible Layouts
with Yoga

+

+ Flexible Layouts
with Yoga +

- Build flexible layouts on any platform with a highly optimized - layout engine designed with speed, size, and ease of use in mind. - Yoga is open source and ready for you to use today. + Build flexible layouts on any platform with a highly optimized layout + engine designed with speed, size, and ease of use in mind. Yoga is + open source and ready for you to use today.

-
-
-
-
+
+
+
+
@@ -66,26 +69,29 @@ const AboutSectionOne = () => (

Foundation of Many Open Source UI Frameworks

- There are a large number of open source UI Frameworks which rely on - Yoga to power their layout. Yoga enables these frameworks to perform - layout in a simple and intuitive way across all platforms. This allows - engineers across platforms to collaborate more easily. Yoga allows these - frameworks to calculate layouts off the main thread to help ensure - optimal UI performance. + There are a large number of open source UI Frameworks which rely on + Yoga to power their layout. Yoga enables these frameworks to perform + layout in a simple and intuitive way across all platforms. This allows + engineers across platforms to collaborate more easily. Yoga allows + these frameworks to calculate layouts off the main thread to help + ensure optimal UI performance.

@@ -97,53 +103,44 @@ const AboutSectionTwo = () => (

Why You May Consider Yoga

- +

PERFORMANCE

- Yoga was built to be fast and performance will always be one of Yoga's - primary goals. We believe that 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. + Yoga was built to be fast and performance will always be one of Yoga's + primary goals. We believe that 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.

CROSS PLATFORM

- Yoga is built with cross platform in mind. To ensure Yoga can be used - anywhere we have written is in portable C/C++ and tried to keep both - the dependencies and final binary size impact as low as possible. - This means you can use Yoga on iOS and Android, sharing knowledge and - potentially code between platforms. + Yoga is built with cross platform in mind. To ensure Yoga can be used + anywhere we have written is in portable C/C++ and tried to keep both + the dependencies and final binary size impact as low as possible. This + means you can use Yoga on iOS and Android, sharing knowledge and + potentially code between platforms.

EASY TO LEARN

- With Yoga we have focused on making it as easy as possible to pick up and - learn. With interactive documentation pages and a fully fledged layout editor - we believe that any engineering team can get up to speed in record time. If - you are using Yoga with any of the major UI frameworks we even provide generated - code from the layout editor. + With Yoga we have focused on making it as easy as possible to pick up + and learn. With interactive documentation pages and a fully fledged + layout editor we believe that any engineering team can get up to speed + in record time. If you are using Yoga with any of the major UI + frameworks we even provide generated code from the layout editor.

- ); -const Footer = () => ( -
- Docs - Playground - GitHub -
-); - export default () => ( - - - -
- -