Footer implementation

Summary: Footer Implementation

Reviewed By: emilsjolander

Differential Revision: D6998645

fbshipit-source-id: db637f2d9fe1cdbcaa8366e0cc03f2bf67e2543a

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 () => <svg viewBox="0 0 1133.9 1133.9">
+  <g>
+    <path d="M 498.3 3.7 c 153.6 88.9 307.3 177.7 461.1 266.2 c 7.6 4.4 10.3 9.1 10.3 17.8 c -0.3 179.1 -0.2 358.3 0 537.4 c 0 8.1 -2.4 12.8 -9.7 17.1 c -154.5 88.9 -308.8 178.1 -462.9 267.5 c -9 5.2 -15.5 5.3 -24.6 0.1 c -153.9 -89.2 -307.9 -178 -462.1 -266.8 C 3 838.8 0 833.9 0 825.1 c 0.3 -179.1 0.2 -358.3 0 -537.4 c 0 -8.6 2.6 -13.6 10.2 -18 C 164.4 180.9 318.4 92 472.4 3 C 477 -1.5 494.3 -0.7 498.3 3.7 Z M 48.8 555.3 c 0 79.9 0.2 159.9 -0.2 239.8 c -0.1 10 3 15.6 11.7 20.6 c 137.2 78.8 274.2 157.8 411 237.3 c 9.9 5.7 17 5.7 26.8 0.1 c 137.5 -79.8 275.2 -159.2 412.9 -238.5 c 7.4 -4.3 10.5 -8.9 10.5 -17.8 c -0.3 -160.2 -0.3 -320.5 0 -480.7 c 0 -8.8 -2.8 -13.6 -10.3 -18 C 772.1 218 633.1 137.8 494.2 57.4 c -6.5 -3.8 -11.5 -4.5 -18.5 -0.5 C 336.8 137.4 197.9 217.7 58.8 297.7 c -7.7 4.4 -10.2 9.2 -10.2 17.9 C 48.9 395.5 48.8 475.4 48.8 555.3 Z" />
+    <path d="M 184.4 555.9 c 0 -33.3 -1 -66.7 0.3 -100 c 1.9 -48 24.1 -86 64.7 -110.9 c 54.8 -33.6 110.7 -65.5 167 -96.6 c 45.7 -25.2 92.9 -24.7 138.6 1 c 54.4 30.6 108.7 61.5 162.2 93.7 c 44 26.5 67.3 66.8 68 118.4 c 0.9 63.2 0.9 126.5 0 189.7 c -0.7 50.6 -23.4 90.7 -66.6 116.9 c -55 33.4 -110.8 65.4 -167.1 96.5 c -43.4 24 -89 24.2 -132.3 0.5 c -57.5 -31.3 -114.2 -64 -170 -98.3 c -41 -25.1 -62.9 -63.7 -64.5 -112.2 C 183.5 621.9 184.3 588.9 184.4 555.9 Z M 232.9 556.3 c 0 29.5 0.5 59.1 -0.1 88.6 c -0.8 39.2 16.9 67.1 50.2 86.2 c 51.2 29.4 102.2 59.2 153.4 88.4 c 31.4 17.9 63.6 18.3 95 0.6 c 53.7 -30.3 107.1 -61.2 160.3 -92.5 c 29.7 -17.5 45 -44.5 45.3 -78.8 c 0.6 -61.7 0.5 -123.5 0 -185.2 c -0.3 -34.4 -15.3 -61.5 -44.9 -79 C 637.7 352.6 583 320.8 527.9 290 c -27.5 -15.4 -57.2 -16.1 -84.7 -0.7 c -56.9 31.6 -113.4 64 -169.1 97.6 c -26.4 15.9 -40.7 41.3 -41.1 72.9 C 232.6 491.9 232.9 524.1 232.9 556.3 Z" />
+    <path d="M 484.9 424.4 c 69.8 -2.8 133.2 57.8 132.6 132 C 617 630 558.5 688.7 484.9 689.1 c -75.1 0.4 -132.6 -63.6 -132.7 -132.7 C 352.1 485 413.4 421.5 484.9 424.4 Z M 401.3 556.7 c -3.4 37.2 30.5 83.6 83 84.1 c 46.6 0.4 84.8 -37.6 84.9 -84 c 0.1 -46.6 -37.2 -84.4 -84.2 -84.6 C 432.2 472.1 397.9 518.3 401.3 556.7 Z" />
+  </g>
+</svg>

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;
+}

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 (
+      <div className="Footer">
+        <Link to="/" className="logoOSS">
+          <FacebookOSSLogo />
+          Facebook Open Source
+        </Link>
+        <div className="SocialNetwork">
+          <a href="https://code.facebook.com/projects/">Open Source</a>
+          <a href="https://github.com/facebook/">Github</a>
+          <a href="https://twitter.com/fbOpenSource">Twitter</a>
+        </div>
+        <a href="https://github.com/facebook/yoga">
+          Contribute to this project on Github
+        </a>
+      </div>
+    );
+  }
+}

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) => (
   <div className={`Page ${props.className || ''}`}>
-    <Toolbar/>
+    <Toolbar />
     <div className={`PageContent ${props.withSpacing ? 'withSpacing' : ''}`}>
       {props.children}
     </div>
+    {props.shouldShowFooter && <Footer />}
   </div>
 );

website/src/pages/docs/index.js

@@ -19,22 +19,23 @@ import './index.css';
 
 const CATEGORY_TITLE = {
   'getting-started': 'Getting Started',
-  'properties': 'Properties',
+  properties: 'Properties',
-  'examples': 'Examples',
+  examples: 'Examples',
-  'contributing': 'Contributing',
+  contributing: 'Contributing',
 };
 
 export default ({data}) => (
-  <Page className="docs-landing">
+  <Page className="docs-landing" shouldShowFooter>
     <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 helpfull
+            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
+            documentation on how to use yoga. As well as how to contribute to
-          core library, documentation, and tests. We have also put together a set
+            the core library, documentation, and tests. We have also put
-          of examples showing off common layouts and how to user Yoga to achieve them.
+            together a set of examples showing off common layouts and how to
+            user Yoga to achieve them.
           </p>
         </Col>
       </Row>
@@ -48,15 +49,18 @@ export default ({data}) => (
                   ({node}) =>
                     node.fileAbsolutePath.indexOf(`/${category}/`) > -1,
                 )
-                .map(({node}) => (
+                .map(
-                    node.frontmatter.redirect
+                  ({node}) =>
-                    ? (<a key={node.id} href={node.frontmatter.path}>
+                    node.frontmatter.redirect ? (
+                      <a key={node.id} href={node.frontmatter.path}>
                         {node.frontmatter.title}
-                      </a>)
+                      </a>
-                    : (<Link key={node.id} to={node.frontmatter.path}>
+                    ) : (
+                      <Link key={node.id} to={node.frontmatter.path}>
                         {node.frontmatter.title}
-                      </Link>)
+                      </Link>
-                ))}
+                    ),
+                )}
             </Col>
           ),
         )}

website/src/pages/index.js

@@ -21,17 +21,20 @@ 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 = () => (
   <Padded>
     <Row className="hero">
       <Col md={12} sm={24} xs={24}>
         <h3>INTRODUCING</h3>
-        <h1>Flexible Layouts <br/> with Yoga</h1>
+        <h1>
+          Flexible Layouts <br /> with Yoga
+        </h1>
         <p>
-        Build flexible layouts on any platform with a highly optimized
+          Build flexible layouts on any platform with a highly optimized layout
-        layout engine designed with speed, size, and ease of use in mind.
+          engine designed with speed, size, and ease of use in mind. Yoga is
-        Yoga is open source and ready for you to use today.
+          open source and ready for you to use today.
         </p>
 
         <Link to="/docs">
@@ -42,10 +45,10 @@ const HeroSection = () => (
       </Col>
       <Col md={12} sm={0} xs={0}>
         <div className="blueprint blueprint-container">
-          <div className="blueprint blueprint-avatar"/>
+          <div className="blueprint blueprint-avatar" />
-          <div className="blueprint blueprint-title"/>
+          <div className="blueprint blueprint-title" />
-          <div className="blueprint blueprint-subtitle"/>
+          <div className="blueprint blueprint-subtitle" />
-          <div className="blueprint blueprint-content"/>
+          <div className="blueprint blueprint-content" />
         </div>
       </Col>
     </Row>
@@ -69,23 +72,26 @@ const AboutSectionOne = () => (
           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
+          engineers across platforms to collaborate more easily. Yoga allows
-        frameworks to calculate layouts off the main thread to help ensure
+          these frameworks to calculate layouts off the main thread to help
-        optimal UI performance.
+          ensure optimal UI performance.
         </p>
       </Col>
     </Row>
     <div className="logo-group">
       <a href="https://fblitho.com" target="_blank" className="logo">
-        <img src={LithoLogo}/>
+        <img src={LithoLogo} />
         <h3>Litho</h3>
       </a>
       <a href="https://componentkit.org" target="_blank" className="logo">
-        <img src={ComponentKitLogo}/>
+        <img src={ComponentKitLogo} />
         <h3>ComponentKit</h3>
       </a>
-      <a href="http://facebook.github.io/react-native/" target="_blank" className="logo">
+      <a
-        <img src={ReactNativeLogo}/>
+        href="http://facebook.github.io/react-native/"
+        target="_blank"
+        className="logo">
+        <img src={ReactNativeLogo} />
         <h3>React Native</h3>
       </a>
     </div>
@@ -102,48 +108,39 @@ const AboutSectionTwo = () => (
         <p>
           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
+          any range of applications it needs to be fast and never stand in the
-        of a fluid user experience.
+          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 we have written is in portable C/C++ and tried to keep both
-        the dependencies and final binary size impact as low as possible.
+          the dependencies and final binary size impact as low as possible. This
-        This means you can use Yoga on iOS and Android, sharing knowledge and
+          means you can use Yoga on iOS and Android, sharing knowledge and
           potentially code between platforms.
         </p>
 
         <h3>EASY TO LEARN</h3>
         <p>
-        With Yoga we have focused on making it as easy as possible to pick up and
+          With Yoga we have focused on making it as easy as possible to pick up
-        learn. With interactive documentation pages and a fully fledged layout editor 
+          and learn. With interactive documentation pages and a fully fledged
-        we believe that any engineering team can get up to speed in record time. If 
+          layout editor we believe that any engineering team can get up to speed
-        you are using Yoga with any of the major UI frameworks we even provide generated
+          in record time. If you are using Yoga with any of the major UI
-        code from the layout editor.
+          frameworks we even provide generated code from the layout editor.
         </p>
-
       </Col>
     </Row>
   </Padded>
 );
 
-const Footer = () => (
-  <footer className="Footer">
-  <Link to="/docs">Docs</Link>
-  <Link to="/playground">Playground</Link>
-  <a href="https://github.com/facebook/yoga">GitHub</a>
-  </footer>
-);
-
 export default () => (
   <Page className="landing-page">
-    <HeroSection/>
+    <HeroSection />
-    <PlaygroundSection/>
+    <PlaygroundSection />
-    <AboutSectionOne/>
+    <AboutSectionOne />
-    <hr/>
+    <hr />
-    <AboutSectionTwo/>
+    <AboutSectionTwo />
-    <Footer/>
+    <Footer />
   </Page>
 );

website/src/templates/withoutPlayground.js

@@ -19,11 +19,14 @@ import './index.css';
 
 export default ({pathContext}) => {
   return (
-    <Page className="doc-block no-playground">
+    <Page className="doc-block no-playground" shouldShowFooter>
       <Padded>
         <Row>
           <Col xl={16} lg={16} md={24} sm={24} xs={24}>
-            <div className="markdown" dangerouslySetInnerHTML={{__html: pathContext.html}} />
+            <div
+              className="markdown"
+              dangerouslySetInnerHTML={{__html: pathContext.html}}
+            />
           </Col>
         </Row>
         <Link to="/docs" className="overview">