DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Markdown redirect frontmatter

Browse Source 
Reviewed By: danielbuechele

Differential Revision: D6987631

fbshipit-source-id: 8b3431fa885fb94d4a87119b5a5199db0b36b20c
This commit is contained in:
Emil Sjölander
2018-02-14 08:42:49 -08:00
committed by Facebook Github Bot
parent 740ef6cd9e
commit 3ec41b656f
24 changed files with 207 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
website/src/components/DocsSidebar.css
View File

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

6
website/src/components/Toolbar.css
View File

@@ -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 {

10
website/src/components/Toolbar.js
View File

@@ -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 && (

10
website/src/pages/docs/index.css
View File

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

3
website/src/pages/docs/index.js
View File

@@ -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
}

37
website/src/pages/index.css
View File

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

26
website/src/pages/index.js
View File

@@ -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>
);

21
website/src/pages/playground.js
View File

@@ -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>
);

19
website/src/pages/playground/index.css Normal file
View File

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

31
website/src/pages/playground/index.js Normal file
View File

@@ -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>
);

26
website/src/templates/index.css
View File

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