Skip to content
This repository has been archived by the owner on Sep 7, 2020. It is now read-only.

Commit

Permalink
Website: add (and fix) links to and on Getting Started page
Browse files Browse the repository at this point in the history
  • Loading branch information
@MoOx
MoOx committed Sep 16, 2017
1 parent 2f37211 commit 75ce7c9
Show file tree
Hide file tree
Showing 7 changed files with 303 additions and 260 deletions.
40 changes: 28 additions & 12 deletions docs/components/Footer/NavBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,36 +7,52 @@ import Spacer from "../Spacer";
const HeaderNavBar = () => (
<View style={styles.header}>
<View style={styles.row}>
<Link href="/" style={styles.text}>
<Link.TouchableOpacity href="/" style={styles.text}>
<img src="/assets/phenomic-logo-baseline.svg" height="48" />
</Link>
</Link.TouchableOpacity>
<Spacer small />
</View>
<View style={styles.nav}>
<Link
<Link.TouchableOpacity
href="/docs/getting-started"
style={styles.link}
activeStyle={styles.linkActive}
>
<Text style={styles.linkText}>{"Getting started"}</Text>
</Link>
<Link
</Link.TouchableOpacity>
<Link.TouchableOpacity
href="/news"
style={styles.link}
activeStyle={styles.linkActive}
>
<Text style={styles.linkText}>{"News"}</Text>
</Link.TouchableOpacity>
<Link.TouchableOpacity
href="/showcase"
style={styles.link}
activeStyle={styles.linkActive}
>
<Text style={[styles.linkText, styles.linkBold]}>{"Showcase"}</Text>
</Link>
</Link.TouchableOpacity>
<Text>{" | "}</Text>
<Link href="https://github.com/phenomic/phenomic" style={styles.link}>
<Link.TouchableOpacity
href="https://github.com/phenomic/phenomic"
style={styles.link}
>
<Text style={styles.linkText}>{"GitHub"}</Text>
</Link>
<Link href="https://twitter.com/Phenomic_app" style={styles.link}>
</Link.TouchableOpacity>
<Link.TouchableOpacity
href="https://twitter.com/Phenomic_app"
style={styles.link}
>
<Text style={styles.linkText}>{"Twitter"}</Text>
</Link>
<Link href="https://gitter.im/MoOx/phenomic" style={styles.link}>
</Link.TouchableOpacity>
<Link.TouchableOpacity
href="https://gitter.im/MoOx/phenomic"
style={styles.link}
>
<Text style={styles.linkText}>{"Chat"}</Text>
</Link>
</Link.TouchableOpacity>
</View>
</View>
);
Expand Down
120 changes: 61 additions & 59 deletions docs/components/GettingStarted/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => (
<Flex>
<Header title={"Getting started with Phenomic"} />
<BodyContainer style={styles.page}>
<View style={styles.row}>{"Start by choosing your ecosystem"}</View>
<View style={styles.logos}>
<Link
style={styles.logo}
href="https://github.com/phenomic/phenomic/blob/master/packages/preset-react-app/docs/getting-started/README.md"
>
<View style={styles.img}>
<img src="/assets/react.svg" height="128" />
</View>
<Text style={styles.logoTitle}>{"React"}</Text>
</Link>
<Link
style={styles.logo}
href="https://github.com/phenomic/phenomic/tree/master/examples/reason-react-app/"
>
<View style={styles.img}>
<img src="/assets/reason-react.svg" height="128" />
</View>
<Text style={styles.logoTitle}>{"ReasonReact"}</Text>
</Link>
<Link
style={styles.logo}
href="https://github.com/phenomic/phenomic/issues/1148"
>
<View style={[styles.img, styles.todo]}>
<img src="/assets/preact.svg" height="128" />
</View>
<Text style={styles.logoTitle}>{"PREACT"}</Text>
</Link>
<Link
style={styles.logo}
href="https://github.com/phenomic/phenomic/issues/1149"
>
<View style={[styles.img, styles.todo]}>
<img src="/assets/Next.js.svg" height="128" />
</View>
<Text style={styles.logoTitle}>{"Next.js"}</Text>
</Link>
<Link
style={styles.logo}
href="https://github.com/phenomic/phenomic/issues/1145"
>
<View style={[styles.img, styles.todo]}>
<img src="/assets/vue.svg" height="96" />
</View>
<Text style={styles.logoTitle}>{"Vue"}</Text>
</Link>
<Link
style={styles.logo}
href="https://github.com/phenomic/phenomic/issues/1150"
>
<View style={[styles.img, styles.todo]}>
<img src="/assets/angular.svg" height="128" />
</View>
<Text style={styles.logoTitle}>{"Angular"}</Text>
</Link>
{items.map((item, i) => (
<Link.Block
key={i}
blockProps={{ style: styles.logoWrapper }}
style={[styles.logo, item.todo && styles.todo]}
href={item.href}
>
<View style={styles.img}>
<img src={item.img} height={item.height || 128} />
</View>
<Text style={styles.logoTitle}>{item.title}</Text>
</Link.Block>
))}
</View>
<View style={styles.row}>
<Text style={styles.notice}>
Expand Down Expand Up @@ -102,15 +106,16 @@ const styles = StyleSheet.create({
justifyContent: "center",
alignItems: "center"
},
logoWrapper: {
width: "33%"
},
logo: {
borderBottomWidth: 1,
borderBottomColor: "#dfe7ed",
borderBottomStyle: "solid",
flexGrow: 1,
flexDirection: "column",
paddingVertical: 48,
width: "33%",
// justifyContent: "center",
alignItems: "center",
color: "inherit",
textDecorationStyle: "none"
Expand All @@ -122,10 +127,7 @@ const styles = StyleSheet.create({
},
img: {
flexGrow: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: 128,
marginBottom: 24
},
todo: {
Expand Down
45 changes: 29 additions & 16 deletions docs/components/Header/NavBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,45 +8,58 @@ import { version } from "../../../lerna.json";
const HeaderNavBar = () => (
<View style={styles.header}>
<View style={styles.logo}>
<Link href="/" style={styles.text}>
<Link.TouchableOpacity href="/" style={styles.text}>
<img src="/assets/phenomic-logo-baseline.svg" height="48" />
</Link>
</Link.TouchableOpacity>
<Spacer small />
<Link
<Link.TouchableOpacity
href="https://github.com/phenomic/phenomic/releases"
style={styles.version}
>
{"v" + version}
</Link>
</Link.TouchableOpacity>
</View>
<View style={styles.nav}>
<Link
<Link.TouchableOpacity
href="/docs/getting-started"
style={styles.link}
activeStyle={styles.linkActive}
>
<Text style={styles.linkText}>{"Getting started"}</Text>
</Link>
<Link href="/news" style={styles.link} activeStyle={styles.linkActive}>
</Link.TouchableOpacity>
<Link.TouchableOpacity
href="/news"
style={styles.link}
activeStyle={styles.linkActive}
>
<Text style={[styles.linkText]}>{"News"}</Text>
</Link>
<Link
</Link.TouchableOpacity>
<Link.TouchableOpacity
href="/showcase"
style={styles.link}
activeStyle={styles.linkActive}
>
<Text style={[styles.linkText, styles.linkBold]}>{"Showcase"}</Text>
</Link>
</Link.TouchableOpacity>
<Text style={styles.pipe}>{" | "}</Text>
<Link href="https://github.com/phenomic/phenomic" style={styles.link}>
<Link.TouchableOpacity
href="https://github.com/phenomic/phenomic"
style={styles.link}
>
<Text style={styles.linkText}>{"GitHub"}</Text>
</Link>
<Link href="https://twitter.com/Phenomic_app" style={styles.link}>
</Link.TouchableOpacity>
<Link.TouchableOpacity
href="https://twitter.com/Phenomic_app"
style={styles.link}
>
<Text style={styles.linkText}>{"Twitter"}</Text>
</Link>
<Link href="https://gitter.im/MoOx/phenomic" style={styles.link}>
</Link.TouchableOpacity>
<Link.TouchableOpacity
href="https://gitter.im/MoOx/phenomic"
style={styles.link}
>
<Text style={styles.linkText}>{"Chat"}</Text>
</Link>
</Link.TouchableOpacity>
</View>
</View>
);
Expand Down
Loading

0 comments on commit 75ce7c9

Please sign in to comment.