diff --git a/docs/components/Footer/NavBar.js b/docs/components/Footer/NavBar.js index 01e44635f..67baca81f 100644 --- a/docs/components/Footer/NavBar.js +++ b/docs/components/Footer/NavBar.js @@ -7,36 +7,52 @@ import Spacer from "../Spacer"; const HeaderNavBar = () => ( - + - + - {"Getting started"} - - + + {"News"} + + {"Showcase"} - + {" | "} - + {"GitHub"} - - + + {"Twitter"} - - + + {"Chat"} - + ); diff --git a/docs/components/GettingStarted/index.js b/docs/components/GettingStarted/index.js index 53b4039e3..dd3bf57de 100644 --- a/docs/components/GettingStarted/index.js +++ b/docs/components/GettingStarted/index.js @@ -8,66 +8,70 @@ import Header from "../Header"; import Footer from "../Footer"; import BodyContainer from "../BodyContainer"; +const items = [ + { + title: "React", + href: + "https://github.com/phenomic/phenomic/blob/master/packages/preset-react-app/docs/getting-started/README.md", + img: "/assets/react.svg" + }, + { + title: "ReasonReact", + href: + "https://github.com/phenomic/phenomic/tree/master/examples/reason-react-app/", + img: "/assets/reason-react.svg" + }, + { + title: "PREACT", + href: "https://github.com/phenomic/phenomic/issues/1148", + img: "/assets/preact.svg", + todo: true + }, + { + title: "Next.js", + href: "https://github.com/phenomic/phenomic/issues/1149", + img: "/assets/Next.js.svg", + todo: true + }, + { + title: "Vue", + href: "https://github.com/phenomic/phenomic/issues/1145", + img: "/assets/vue.svg", + todo: true, + height: 96 + }, + { + title: "Angular", + href: "https://github.com/phenomic/phenomic/issues/1150", + img: "/assets/angular.svg", + todo: true + } +]; + +// const split = (arr, n, res = []) => { +// while (arr.length) res.push(arr.splice(0, n)); +// return res; +// } + const GettingStarted = () => (
{"Start by choosing your ecosystem"} - - - - - {"React"} - - - - - - {"ReasonReact"} - - - - - - {"PREACT"} - - - - - - {"Next.js"} - - - - - - {"Vue"} - - - - - - {"Angular"} - + {items.map((item, i) => ( + + + + + {item.title} + + ))} @@ -102,6 +106,9 @@ const styles = StyleSheet.create({ justifyContent: "center", alignItems: "center" }, + logoWrapper: { + width: "33%" + }, logo: { borderBottomWidth: 1, borderBottomColor: "#dfe7ed", @@ -109,8 +116,6 @@ const styles = StyleSheet.create({ flexGrow: 1, flexDirection: "column", paddingVertical: 48, - width: "33%", - // justifyContent: "center", alignItems: "center", color: "inherit", textDecorationStyle: "none" @@ -122,10 +127,7 @@ const styles = StyleSheet.create({ }, img: { flexGrow: 1, - flexDirection: "column", justifyContent: "center", - alignItems: "center", - height: 128, marginBottom: 24 }, todo: { diff --git a/docs/components/Header/NavBar.js b/docs/components/Header/NavBar.js index 5a6ee41c4..5ad85be20 100644 --- a/docs/components/Header/NavBar.js +++ b/docs/components/Header/NavBar.js @@ -8,45 +8,58 @@ import { version } from "../../../lerna.json"; const HeaderNavBar = () => ( - + - + - {"v" + version} - + - {"Getting started"} - - + + {"News"} - - + {"Showcase"} - + {" | "} - + {"GitHub"} - - + + {"Twitter"} - - + + {"Chat"} - + ); diff --git a/docs/components/Home/InputOutput.js b/docs/components/Home/InputOutput.js index 3147ddb3c..5f0dffff6 100644 --- a/docs/components/Home/InputOutput.js +++ b/docs/components/Home/InputOutput.js @@ -8,146 +8,144 @@ import Browser from "../Browser"; import Spacer from "../Spacer"; const InputOutput = () => ( - - - - - {"Choose your favorite technologies"} - - - - - - - - - - + + + + {"Choose your favorite technologies"} + + + + + - - - - - - + + + + + + + + + + + - - {"···"} - - + {"···"} + - - - + + + + {"→"} + + + + + {"Get a website"} + + + - {"→"} - - - - - {"Get a website"} + {"Fastest website ever"} - - - {"Fastest website ever"} - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + - - - - + + + + + + + + + + + + + + + + + + + + ); const styles = StyleSheet.create({ diff --git a/docs/components/Home/index.js b/docs/components/Home/index.js index 5c5fbe4eb..f15f208ef 100644 --- a/docs/components/Home/index.js +++ b/docs/components/Home/index.js @@ -7,6 +7,7 @@ import Footer from "../Footer"; import Flex from "../Flex"; import Spacer from "../Spacer"; import BodyContainer from "../BodyContainer"; +import Link from "../Link"; import FeatureBlock from "./FeatureBlock"; import InputOutput from "./InputOutput"; @@ -20,18 +21,17 @@ const Home = () => ( style={styles.top} /> - - - - {"Phenomic compiles your website to make it as fast as possible"} + + + + + + {"Phenomic compiles your website to make it as fast as possible"} + @@ -69,29 +69,17 @@ const Home = () => ( - - {"Get running in seconds"} + + + {"Get running in seconds"} + - - {"Developers experience matters"} + + + {"Developers experience matters"} + @@ -163,6 +151,12 @@ const styles = StyleSheet.create({ minWidth: 240, paddingTop: 10, paddingBottom: 10 + }, + subtitle: { + color: "#6B6B6B", + fontSize: 36, + textAlign: "center", + padding: 60 } }); diff --git a/docs/components/Link/index.web.js b/docs/components/Link/index.web.js index 648b68ac2..3f53436d4 100644 --- a/docs/components/Link/index.web.js +++ b/docs/components/Link/index.web.js @@ -5,8 +5,7 @@ import PropTypes from "prop-types"; // eslint-disable-next-line import { isActive, - handlePress, - handleKeyDown + handleEvent } from "@phenomic/plugin-renderer-react/lib/components/Link.js"; type PropsType = { @@ -19,20 +18,41 @@ const Link = ( { style, activeStyle, href, ...props }: PropsType, context: Object ) => ( - - - + ); Link.contextTypes = { router: PropTypes.object.isRequired }; +// @todo using TouchableOpacity make the external links unusable with keyboard +// https://github.com/necolas/react-native-web/issues/643 + +/* eslint-disable */ +Link.Block = ({ BlockComponent, blockProps, ...props }: PropsType) => ( + + + +); +Link.Block.defaultProps = { + BlockComponent: TouchableOpacity +}; + +Link.TouchableOpacity = (props: PropsType) => ( + + + +); +/* eslint-enable */ + export default Link; diff --git a/docs/components/News/NewsListItem.js b/docs/components/News/NewsListItem.js index bdb416399..bc283c39e 100644 --- a/docs/components/News/NewsListItem.js +++ b/docs/components/News/NewsListItem.js @@ -4,14 +4,14 @@ import { View, Text, StyleSheet } from "react-native-web"; import Link from "../Link"; const NewsListItem = props => ( - + {props.news.title} {new Date(props.news.date).toLocaleDateString()} - + ); const styles = StyleSheet.create({