Markdown redirect frontmatter

Reviewed By: danielbuechele

Differential Revision: D6987631

fbshipit-source-id: 8b3431fa885fb94d4a87119b5a5199db0b36b20c

website/contents/examples/flexible-text.md

@@ -1,7 +1,5 @@
 ---
-path: "examples/flexible-text"
+path: "/playground#eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiY2hpbGRyZW4iOlt7IndpZHRoIjoiNjAiLCJoZWlnaHQiOiI2MCIsIm1hcmdpbiI6eyJ0b3AiOiIyMCIsInJpZ2h0IjoiMjAiLCJib3R0b20iOiIyMCIsImxlZnQiOiIyMCJ9fSx7ImhlaWdodCI6IjYwIiwibWFyZ2luIjp7InRvcCI6IjIwIiwicmlnaHQiOiIyMCIsImJvdHRvbSI6IjIwIiwibGVmdCI6IjIwIn0sImZsZXhHcm93IjoiMSJ9LHsid2lkdGgiOiI0MCIsImhlaWdodCI6IjQwIiwibWFyZ2luIjp7InRvcCI6IjIwIiwicmlnaHQiOiIyMCIsImJvdHRvbSI6IjIwIiwibGVmdCI6IjIwIn19XX0="
 title: "Flexible Text"
-hasPlayground: false
+redirect: true
 ---
-
-## Flexible Text

website/contents/examples/floating-buttons.md

@@ -1,7 +1,5 @@
 ---
-path: "examples/floating-buttons"
+path: "/playground#eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiY2hpbGRyZW4iOlt7IndpZHRoIjoiMTAwJSIsImhlaWdodCI6IjEwMCUifSx7InBvc2l0aW9uIjp7InJpZ2h0IjoiMTAiLCJib3R0b20iOiIxMCJ9LCJwb3NpdGlvblR5cGUiOjF9XX0="
 title: "Floating Buttons"
-hasPlayground: false
+redirect: true
 ---
-
-## Floating Buttons

website/contents/examples/overlays.md

@@ -1,7 +1,5 @@
 ---
-path: "examples/overlays"
+path: "/playground#eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiY2hpbGRyZW4iOlt7fSx7fSx7IndpZHRoIjoiIiwiaGVpZ2h0IjoiIiwicG9zaXRpb24iOnsidG9wIjoiMCIsInJpZ2h0IjoiMCIsImJvdHRvbSI6IjAiLCJsZWZ0IjoiMCJ9LCJwb3NpdGlvblR5cGUiOjF9XX0="
 title: "Overlays"
-hasPlayground: false
+redirect: true
 ---
-
-## Overlays

website/contents/getting-started/component-kit.md

@@ -1,4 +1,5 @@
 ---
 path: "https://componentkit.org/docs/getting-started.html"
 title: "ComponentKit"
+redirect: true
 ---

website/contents/getting-started/litho.md

@@ -1,4 +1,5 @@
 ---
 path: "https://fblitho.com/docs/getting-started"
 title: "Litho"
+redirect: true
 ---

website/contents/getting-started/react-native.md

@@ -1,4 +1,5 @@
 ---
 path: "http://facebook.github.io/react-native/docs/getting-started.html"
 title: "React Native"
+redirect: true
 ---

website/contents/properties/align-items.md

@@ -4,8 +4,27 @@ title: "Align Items / Self"
 hasPlayground: true
 ---
 
-## Align Items / Self
+## Align Items
+
+Align items describes how to align children along the cross axis of their container.
+Align items is very similar to [Justify Content](justify-content) but instead of
+applying to the main axis, Align Items applies to the cross axis.
+
+**STRETCH (DEFAULT)** Stretch children of a container to match the height of the container's cross axis.
+
+**FLEX START** Align children of a container to the start of the container's cross axis.
+
+**FLEX END** Align children of a container to the end of the container's cross axis.
+
+**CENTER** Align children of a container in the center of the container's cross axis.
 
 <controls prop="alignItems"></controls>
 
+## Align Self
+
+Align self has the same options and effect as Align Items but instead of
+affecting the children within a container, you can apply this property to
+a single child to change its alignment within its parent. `Align Self`
+overrides any option set by the parent with `Align Items`.
+
 <controls prop="alignSelf"></controls>

website/contents/properties/flex-direction.md

@@ -6,4 +6,21 @@ hasPlayground: true
 
 ## Flex Direction
 
+Flex direction controls the direction in which children of a node are laid out.
+This is also referred to as the main axis. The main axis is the direction in
+which children are laid out. The cross axis the the axis perpendicular to the
+main axis, or the axis which wrapping lines are laid out in.
+
+**ROW (DEFAULT)** Align children from left to right. If [wrapping](flex-wrap) is enabled then
+the next line will start under the first item on the left of the container.
+
+**COLUMN** Align children from top to bottom. If [wrapping](flex-wrap) is enabled then
+the next line will start to the left first item on the top of the container.
+
+**ROW REVERSE** Align children from right to left. If [wrapping](flex-wrap) is enabled then
+the next line will start under the first item on the right of the container.
+
+**COLUMN REVERSE** Align children from bottom to top. If [wrapping](flex-wrap) is enabled then
+the next line will start to the left first item on the bottom of the container.
+
 <controls prop="flexDirection"></controls>

website/contents/properties/flex.md

@@ -6,33 +6,27 @@ hasPlayground: true
 
 ## Flex Basis, Grow, and Shrink
 
-### Flex Grow
-
-Flex grow describes how any space within a container should be distributed
+**FLEX GROW** describes how any space within a container should be distributed
 among its children along the main axis. After laying out its children, a container will
 distribute any remaining space according to the flex grow values specified by its children.
 
-flex grow accepts any floating point value >= 0, with 0 being the default value.
+Flex grow accepts any floating point value >= 0, with 0 being the default value.
 A container will distribute any remaining space among its children weighted by the child’s flex grow value.
 
 <controls prop="flexGrow"></controls>
 
-### Flex Shrink
-
-Flex shrink describes how to shrink children along the main axis in the
+**FLEX SHRINK** describes how to shrink children along the main axis in the
 case that the total size of the children overflow the size of the container on the main axis.
 flex shrink is very similar to flex grow and can be thought of in the same way if
 any overflowing size is considered to be negative remaining space.
 These two properties also work well together by allowing children to grow and shrink as needed.
 
-flex shrink accepts any floating point value >= 0, with 1 being the default value.
+Flex shrink accepts any floating point value >= 0, with 1 being the default value.
 A container will shrink its children weighted by the child’s flex shrink value.
 
 <controls prop="flexShrink"></controls>
 
-### Flex Basis
-
-Flex basis is an axis-independent way of providing the default size of an item
+**FLEX BASIS** is an axis-independent way of providing the default size of an item
 along the main axis. Setting the flex basis of a child is similar to setting the Width of that
 child if its parent is a container with FlexDirection = row or setting the Height of a child
 if its parent is a container with FlexDirection = column. The flex basis of an item is the

website/contents/properties/justify-content.md

@@ -6,4 +6,23 @@ hasPlayground: true
 
 ## Justify Content
 
+Justify content describes how to align children within the main axis of their container.
+For example, you can use this property to center a child horizontally within a container
+with `flex direction` set to `Row` or vertically within a container with `flex direction`
+set to  `Column`.
+
+**FLEX START (DEFAULT)** Align children of a container to the start of the container's main axis.
+
+**FLEX END** Align children of a container to the end of the container's main axis.
+
+**CENTER** Align children of a container in the center of the container's main axis.
+
+**SPACE BETWEEN** Evenly space of children across the container's main axis, distrubuting
+remaining space between the children.
+
+**SPACE AROUND** Evenly space of children across the container's main axis, distrubuting
+remaining space around the children. Compared to `Space Between` using
+`Space Around` will result in space being distributed to the begining of
+the first child and end of the last child.
+
 <controls prop="justifyContent"></controls>

website/contents/properties/margins-paddings-borders.md

@@ -6,27 +6,21 @@ hasPlayground: true
 
 ## Margins, Paddings, and Borders
 
-### Margin
-
-Margin effect the spacing around the outside of a node. A node with margin
+**MARGIN** effects the spacing around the outside of a node. A node with margin
 will offset itself from the bounds of its parent but also offset the
 location of any siblings. The margin of a node contributes to the total size
 of its parent if the parent is auto sized.
 
 <controls prop="margin"></controls>
 
-### Padding
-
-Padding affect the size of the node it is applied to. Padding in Yoga acts as if
+**PADDING** affects the size of the node it is applied to. Padding in Yoga acts as if
 `box-sizing: border-box;` was set. That is padding will not add to the total size
 of an element if it has an explicit size set. For auto sized nodes padding will increase
 the size of the node as well as offset the location of any children.
 
 <controls prop="padding"></controls>
 
-### Border
-
-Border in Yoga acts exactly like padding and only exists as a seperate property so
+**BORDER** in Yoga acts exactly like padding and only exists as a seperate property so
 that higher level frameworks get a hint as to how thick to draw a border. Yoga however
 does not do any drawing so just uses this information during layout where border
 acts exactly like padding.

website/gatsby-config.js

@@ -23,7 +23,7 @@ module.exports = {
       resolve: `gatsby-plugin-less`,
       options: {
         theme: {
-          'primary-color': '#95DDCF',
+          'primary-color': '#6BCEBB',
         },
       },
     },

website/gatsby-node.js

@@ -26,6 +26,7 @@ exports.createPages = ({boundActionCreators, graphql}) => {
               path
               hasPlayground
               initialPlayground
+              redirect
             }
             html
           }
@@ -38,13 +39,15 @@ exports.createPages = ({boundActionCreators, graphql}) => {
     }
 
     result.data.allMarkdownRemark.edges.forEach(({node}) => {
-      createPage({
-        path: node.frontmatter.path,
-        component: node.frontmatter.hasPlayground
-          ? withPlayground
-          : withoutPlayground,
-        context: node,
-      });
+      if (!node.frontmatter.redirect) {
+        createPage({
+          path: node.frontmatter.path,
+          component: node.frontmatter.hasPlayground
+            ? withPlayground
+            : withoutPlayground,
+          context: node,
+        });
+      }
     });
   });
 };

website/src/components/DocsSidebar.css

@@ -10,7 +10,8 @@
  .DocsSidebar {
   height: 100%;
   width: 450px;
-  padding: 20px;
+  padding: 36px;
+  padding-top: 0px;
   border-right: 1px solid #dddfe2;
   overflow: auto;
 }

website/src/components/Toolbar.css

@@ -16,8 +16,7 @@
 }
 
 .Toolbar .selected {
-  color: #8FD0C6;
-  text-decoration: underline;
+  color: #6BCEBB;
 }
 
 .Toolbar .logo {
@@ -29,10 +28,11 @@
 .Toolbar a {
   margin: 0 15px;
   color: #606770;
+  font-weight: 700;
 }
 
 .Toolbar a:hover {
-  color: #8FD0C6;
+  color: #6BCEBB;
 }
 
 .Toolbar .ToolbarToggle {

website/src/components/Toolbar.js

@@ -12,7 +12,7 @@
 
 import React, {Component} from 'react';
 import Link from 'gatsby-link';
-import {Icon} from 'antd';
+import {Icon, Row, Col} from 'antd';
 import './Toolbar.css';
 
 type Props = {
@@ -32,7 +32,13 @@ export default class Toolbar extends Component<Props> {
         </Link>
         
         <Link to="/docs" activeClassName="selected">Documentation</Link>
-        <Link to="/playground" activeClassName="selected">Playground</Link>
+
+        <Row>
+          <Col xl={24} lg={0} md={0} sm={0} xs={0}>
+            <Link to="/playground" activeClassName="selected">Playground</Link>
+          </Col>
+        </Row>
+
         <a href="https://github.com/facebook/yoga">GitHub</a>
 
         {this.props.onShowCode && (

website/src/pages/docs/index.css

@@ -13,17 +13,17 @@
 }
 
 .docs-landing h1 {
-  color: #1C1E21;
+  color: #444950;
   font-size: 48px;
   font-weight: 300;
   line-height: 110%;
 }
 
 .docs-landing p {
-  color: #1C1E21;
+  color: #444950;
   font-size: 16px;
-  font-weight: 300;
-  line-height: 200%;
+  font-weight: 400;
+  line-height: 180%;
 }
 
 .category {
@@ -45,6 +45,6 @@
 }
 
 .category a:hover {
-  color: #8FD0C6;
+  color: #6BCEBB;
   text-decoration: underline;
 }

website/src/pages/docs/index.js

@@ -49,7 +49,7 @@ export default ({data}) => (
                     node.fileAbsolutePath.indexOf(`/${category}/`) > -1,
                 )
                 .map(({node}) => (
-                    node.frontmatter.path.startsWith('http')
+                    node.frontmatter.redirect
                     ? (<a key={node.id} href={node.frontmatter.path}>
                         {node.frontmatter.title}
                       </a>)
@@ -74,6 +74,7 @@ export const query = graphql`
           frontmatter {
             title
             path
+            redirect
           }
           fileAbsolutePath
         }

website/src/pages/index.css

@@ -16,23 +16,24 @@
 
 .landing-page .hero h3 {
   color: #BEC3C9;
-  font-size: 14px;
-  font-weight: 600;
+  font-size: 16px;
+  font-weight: 700;
   line-height: 200%;
 }
 
 .landing-page .hero h1 {
-  color: #1C1E21;
+  color: #444950;
   font-size: 48px;
   font-weight: 300;
   line-height: 110%;
 }
 
 .landing-page .hero p {
-  color: #1C1E21;
-  line-height: 200%;
+  color: #444950;
+  line-height: 180%;
   font-size: 18px;
-  font-weight: 300;
+  font-weight: 400;
+  margin-bottom: 1.5em;
 }
 
 .landing-page .hero .button {
@@ -45,7 +46,7 @@
 
 .landing-page .hero .blueprint {
 	border-style: dashed;
-    border-color: #1C1E21;
+    border-color: #444950;
     border-width: 1px;
 }
 
@@ -91,7 +92,7 @@
 .landing-page hr {
 	width: 100%;
 	height: 1px;
-	background-color: #8FD0C6;
+	background-color: #BEC3C9;
   border-width: 0px;
 }
 
@@ -101,27 +102,30 @@
 }
 
 .landing-page .about-section h1 {
-  color: #1C1E21;
+  color: #444950;
   font-size: 32px;
   font-weight: 400;
   line-height: 120%;
 }
 
 .landing-page .about-section h3 {
-  color: #1C1E21;
+  color: #6BCEBB;
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 700;
   margin-top: 50px;
 }
 
 .landing-page .about-section p {
-  color: #1C1E21;
-  line-height: 200%;
+  color: #444950;
+  line-height: 180%;
   font-size: 16px;
-  font-weight: 300;
+  font-weight: 400;
 }
 
 .landing-page .logo-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
   margin-top: 50px;
 }
 
@@ -129,6 +133,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin-right: 100px;
 }
 
 .landing-page .logo-group img {
@@ -136,7 +141,7 @@
 }
 
 .landing-page .logo-group .logo h3 {
-  color: #BEC3C9;
+  color: #606770;
   font-size: 14px;
   font-weight: 600;
   margin-top: 20px;
@@ -157,5 +162,5 @@ footer a {
 }
 
 footer a:hover {
-  color: #8FD0C6;
+  color: #6BCEBB;
 }

website/src/pages/index.js

@@ -34,9 +34,11 @@ const HeroSection = () => (
         Yoga is open source and ready for you to use today.
         </p>
 
-        <Button type="primary" className="button">
-        GET STARTED
-        </Button>
+        <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">
@@ -62,7 +64,7 @@ const AboutSectionOne = () => (
   <Padded className="about-section">
     <Row>
       <Col xl={16} lg={16} md={24} sm={24} xs={24}>
-        <h1>Foundation of Many Open Source UI Frameworks</h1>
+        <h1>Foundation of Many Open Source&nbsp;UI Frameworks</h1>
         <p>
         There are a large number of open source UI Frameworks which rely on
         Yoga to power their layout. Yoga enables these frameworks to perform
@@ -73,20 +75,20 @@ const AboutSectionOne = () => (
         </p>
       </Col>
     </Row>
-    <Row type="flex" justify="space-around" className="logo-group">
-      <Col lg={8} md={8} sm={12} xs={12} className="logo">
+    <div className="logo-group">
+      <a href="https://fblitho.com" target="_blank" className="logo">
         <img src={LithoLogo}/>
         <h3>Litho</h3>
-      </Col>
-      <Col lg={8} md={8} sm={12} xs={12} className="logo">
+      </a>
+      <a href="https://componentkit.org" target="_blank" className="logo">
         <img src={ComponentKitLogo}/>
         <h3>ComponentKit</h3>
-      </Col>
-      <Col lg={8} md={8} sm={24} xs={24} className="logo">
+      </a>
+      <a href="http://facebook.github.io/react-native/" target="_blank" className="logo">
         <img src={ReactNativeLogo}/>
         <h3>React Native</h3>
-      </Col>
-    </Row>
+      </a>
+    </div>
   </Padded>
 );
 

website/src/pages/playground.js

@@ -1,21 +0,0 @@
-/**
- * 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>
-    <Playground height="100%" selectedNodePath={[]} persist />
-  </Page>
-);

website/src/pages/playground/index.css

@@ -0,0 +1,19 @@
+.playground {
+  display: flex;
+  flex: 1;
+}
+
+.playground .error-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.playground .error-text {
+  color: #444950;
+  line-height: 180%;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: center;
+}

website/src/pages/playground/index.js

@@ -0,0 +1,31 @@
+/**
+ * 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';
+import {Row, Col} from 'antd';
+import './index.css';
+
+export default () => (
+  <Page>
+	<Row className="playground">
+	  <Col xl={24} lg={0} md={0} sm={0} xs={0}>
+	    <Playground height="100%" selectedNodePath={[]} persist />
+	  </Col>
+
+  	  <Col xl={0} xs={24} className="error-container">
+	    <p className="error-text">Sorry! The playground only works on larger displays currently.</p>
+	  </Col>
+	</Row>
+  </Page>
+);

website/src/templates/index.css

@@ -22,36 +22,46 @@
 .doc-block .overview {
   font-size: 12px;
   font-weight: 600;
+  padding-bottom: 30px;
 }
 
 .doc-block h1 {
-  color: #1C1E21;
+  color: #444950;
   font-size: 48px;
   font-weight: 300;
   line-height: 110%;
 }
 
 .doc-block h2 {
-  color: #1C1E21;
-  font-size: 28px;
+  color: #444950;
+  font-size: 32px;
   font-weight: 400;
   line-height: 120%;
+  margin-top: 30px;
 }
 
 .doc-block h3 {
-  color: #1C1E21;
+  color: #444950;
   font-size: 16px;
   font-weight: 700;
-  line-height: 200%;
+  line-height: 180%;
 }
 
-.doc-block p, .doc-block li {
-  color: #1C1E21;
-  line-height: 180%;
+.doc-block p {
+  color: #444950;
+  line-height: 160%;
   font-size: 14px;
   font-weight: 400;
 }
 
+.doc-block li {
+  color: #444950;
+  line-height: 150%;
+  font-size: 14px;
+  font-weight: 400;
+  margin-bottom: 8px;
+}
+
 .doc-block .prop {
   margin-bottom: 20px;
 }