From 3ec41b656ff7393240859d59edd1d7555b2c57dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emil=20Sj=C3=B6lander?= Date: Wed, 14 Feb 2018 08:42:49 -0800 Subject: [PATCH] Markdown redirect frontmatter Reviewed By: danielbuechele Differential Revision: D6987631 fbshipit-source-id: 8b3431fa885fb94d4a87119b5a5199db0b36b20c --- website/contents/examples/flexible-text.md | 6 +-- website/contents/examples/floating-buttons.md | 6 +-- website/contents/examples/overlays.md | 6 +-- .../contents/getting-started/component-kit.md | 1 + website/contents/getting-started/litho.md | 1 + .../contents/getting-started/react-native.md | 1 + website/contents/properties/align-items.md | 21 ++++++++++- website/contents/properties/flex-direction.md | 17 +++++++++ website/contents/properties/flex.md | 16 +++----- .../contents/properties/justify-content.md | 19 ++++++++++ .../properties/margins-paddings-borders.md | 12 ++---- website/gatsby-config.js | 2 +- website/gatsby-node.js | 17 +++++---- website/src/components/DocsSidebar.css | 3 +- website/src/components/Toolbar.css | 6 +-- website/src/components/Toolbar.js | 10 ++++- website/src/pages/docs/index.css | 10 ++--- website/src/pages/docs/index.js | 3 +- website/src/pages/index.css | 37 +++++++++++-------- website/src/pages/index.js | 26 +++++++------ website/src/pages/playground.js | 21 ----------- website/src/pages/playground/index.css | 19 ++++++++++ website/src/pages/playground/index.js | 31 ++++++++++++++++ website/src/templates/index.css | 26 +++++++++---- 24 files changed, 207 insertions(+), 110 deletions(-) delete mode 100644 website/src/pages/playground.js create mode 100644 website/src/pages/playground/index.css create mode 100644 website/src/pages/playground/index.js diff --git a/website/contents/examples/flexible-text.md b/website/contents/examples/flexible-text.md index 656880ec..dc33e242 100644 --- a/website/contents/examples/flexible-text.md +++ b/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 diff --git a/website/contents/examples/floating-buttons.md b/website/contents/examples/floating-buttons.md index 0fc92abe..c8edd035 100644 --- a/website/contents/examples/floating-buttons.md +++ b/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 diff --git a/website/contents/examples/overlays.md b/website/contents/examples/overlays.md index df438795..f6c5de04 100644 --- a/website/contents/examples/overlays.md +++ b/website/contents/examples/overlays.md @@ -1,7 +1,5 @@ --- -path: "examples/overlays" +path: "/playground#eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiY2hpbGRyZW4iOlt7fSx7fSx7IndpZHRoIjoiIiwiaGVpZ2h0IjoiIiwicG9zaXRpb24iOnsidG9wIjoiMCIsInJpZ2h0IjoiMCIsImJvdHRvbSI6IjAiLCJsZWZ0IjoiMCJ9LCJwb3NpdGlvblR5cGUiOjF9XX0=" title: "Overlays" -hasPlayground: false +redirect: true --- - -## Overlays diff --git a/website/contents/getting-started/component-kit.md b/website/contents/getting-started/component-kit.md index e998a9f8..2cca0a04 100644 --- a/website/contents/getting-started/component-kit.md +++ b/website/contents/getting-started/component-kit.md @@ -1,4 +1,5 @@ --- path: "https://componentkit.org/docs/getting-started.html" title: "ComponentKit" +redirect: true --- diff --git a/website/contents/getting-started/litho.md b/website/contents/getting-started/litho.md index f70f5dcd..3f037874 100644 --- a/website/contents/getting-started/litho.md +++ b/website/contents/getting-started/litho.md @@ -1,4 +1,5 @@ --- path: "https://fblitho.com/docs/getting-started" title: "Litho" +redirect: true --- diff --git a/website/contents/getting-started/react-native.md b/website/contents/getting-started/react-native.md index 8de1d4c2..7b028bec 100644 --- a/website/contents/getting-started/react-native.md +++ b/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 --- diff --git a/website/contents/properties/align-items.md b/website/contents/properties/align-items.md index 2c0fb80a..8209d22f 100644 --- a/website/contents/properties/align-items.md +++ b/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. +## 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`. + diff --git a/website/contents/properties/flex-direction.md b/website/contents/properties/flex-direction.md index 2a97d147..d1dad62c 100644 --- a/website/contents/properties/flex-direction.md +++ b/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. + diff --git a/website/contents/properties/flex.md b/website/contents/properties/flex.md index db7a78e9..a63a331c 100644 --- a/website/contents/properties/flex.md +++ b/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. -### 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. -### 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 diff --git a/website/contents/properties/justify-content.md b/website/contents/properties/justify-content.md index a0995b04..8457c8cd 100644 --- a/website/contents/properties/justify-content.md +++ b/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. + diff --git a/website/contents/properties/margins-paddings-borders.md b/website/contents/properties/margins-paddings-borders.md index a5f1fea0..d0c484af 100644 --- a/website/contents/properties/margins-paddings-borders.md +++ b/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. -### 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. -### 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. diff --git a/website/gatsby-config.js b/website/gatsby-config.js index 5f5d2992..921592d5 100644 --- a/website/gatsby-config.js +++ b/website/gatsby-config.js @@ -23,7 +23,7 @@ module.exports = { resolve: `gatsby-plugin-less`, options: { theme: { - 'primary-color': '#95DDCF', + 'primary-color': '#6BCEBB', }, }, }, diff --git a/website/gatsby-node.js b/website/gatsby-node.js index 7883945d..e8800920 100644 --- a/website/gatsby-node.js +++ b/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, + }); + } }); }); }; diff --git a/website/src/components/DocsSidebar.css b/website/src/components/DocsSidebar.css index 3e4d487b..7e2a8228 100644 --- a/website/src/components/DocsSidebar.css +++ b/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; } diff --git a/website/src/components/Toolbar.css b/website/src/components/Toolbar.css index 8774061d..e9afaf5d 100644 --- a/website/src/components/Toolbar.css +++ b/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 { diff --git a/website/src/components/Toolbar.js b/website/src/components/Toolbar.js index 054669ca..f46ce586 100644 --- a/website/src/components/Toolbar.js +++ b/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 { Documentation - Playground + + + + Playground + + + GitHub {this.props.onShowCode && ( diff --git a/website/src/pages/docs/index.css b/website/src/pages/docs/index.css index ec6dde46..a94522f8 100644 --- a/website/src/pages/docs/index.css +++ b/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; } \ No newline at end of file diff --git a/website/src/pages/docs/index.js b/website/src/pages/docs/index.js index ae912bd0..6c54b2f4 100644 --- a/website/src/pages/docs/index.js +++ b/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 ? ( {node.frontmatter.title} ) @@ -74,6 +74,7 @@ export const query = graphql` frontmatter { title path + redirect } fileAbsolutePath } diff --git a/website/src/pages/index.css b/website/src/pages/index.css index 0775f73a..ad33fe7d 100644 --- a/website/src/pages/index.css +++ b/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; } diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 62118be2..45875a52 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -34,9 +34,11 @@ const HeroSection = () => ( Yoga is open source and ready for you to use today.

- + + +
@@ -62,7 +64,7 @@ const AboutSectionOne = () => ( -

Foundation of Many Open Source UI Frameworks

+

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 @@ -73,20 +75,20 @@ const AboutSectionOne = () => (

- - + ); diff --git a/website/src/pages/playground.js b/website/src/pages/playground.js deleted file mode 100644 index 0574724a..00000000 --- a/website/src/pages/playground.js +++ /dev/null @@ -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 () => ( - - - -); diff --git a/website/src/pages/playground/index.css b/website/src/pages/playground/index.css new file mode 100644 index 00000000..8914b2bc --- /dev/null +++ b/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; +} diff --git a/website/src/pages/playground/index.js b/website/src/pages/playground/index.js new file mode 100644 index 00000000..38a184cf --- /dev/null +++ b/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 () => ( + + + + + + + +

Sorry! The playground only works on larger displays currently.

+ + + +); diff --git a/website/src/templates/index.css b/website/src/templates/index.css index 4d5dbada..5d54afe1 100644 --- a/website/src/templates/index.css +++ b/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; }