Skip to content

Commit 31ba4b4

Browse files
seveibarseveibar
committed
progress towards new landing page
1 parent a99c343 commit 31ba4b4

6 files changed

Lines changed: 150 additions & 7 deletions

File tree

‎.prettierrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"semi": false
3+
}

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@
6363
"babel-loader": "^8.0.5",
6464
"babel-preset-react-app": "^7.0.0",
6565
"gh-pages": "^2.0.1",
66+
"react-github-btn": "^1.1.1",
6667
"react-scripts": "^2.1.8"
68+
},
69+
"prettier": {
70+
"semi": false
6771
}
6872
}

‎src/LandingPage/index.js‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
// @flow
2+
3+
import React from "react"
4+
import Button from "@material-ui/core/Button"
5+
import { styled } from "@material-ui/core/styles"
6+
import * as colors from "@material-ui/core/colors"
7+
import Grid from "@material-ui/core/Grid"
8+
import Markdown from "react-markdown"
9+
import GitHubButton from "react-github-btn"
10+
11+
const RootContainer = styled("div")({
12+
display: "flex",
13+
flexDirection: "column",
14+
alignItems: "center"
15+
})
16+
const ContentContainer = styled("div")({
17+
width: "100%",
18+
boxSizing: "border-box",
19+
display: "flex",
20+
flexDirection: "column",
21+
maxWidth: 1200
22+
})
23+
const Header = styled("div")({
24+
width: "100%",
25+
display: "flex",
26+
justifyContent: "center",
27+
backgroundColor: colors.blue[600],
28+
padding: 8,
29+
boxSizing: "border-box"
30+
})
31+
const HeaderButton = styled(Button)({
32+
color: "white",
33+
margin: 8,
34+
padding: 16,
35+
paddingLeft: 24,
36+
paddingRight: 24
37+
})
38+
const Hero = styled("div")({
39+
display: "flex",
40+
justifyContent: "center",
41+
width: "100%",
42+
backgroundColor: colors.blue[500],
43+
padding: 16,
44+
color: "white",
45+
boxSizing: "border-box"
46+
})
47+
const HeroMain = styled("div")({
48+
fontSize: 48,
49+
fontWeight: "bold",
50+
paddingTop: 64,
51+
textShadow: "0px 1px 5px rgba(0,0,0,0.3)"
52+
})
53+
const HeroSub = styled("div")({
54+
paddingTop: 32,
55+
lineHeight: 1.5,
56+
fontSize: 24,
57+
textShadow: "0px 1px 3px rgba(0,0,0,0.2)"
58+
})
59+
const HeroButtons = styled("div")({
60+
paddingTop: 32,
61+
paddingBottom: 48
62+
})
63+
const Section = styled("div")({
64+
display: "flex",
65+
padding: 16
66+
})
67+
const SectionHeader = styled("div")({
68+
display: "flex",
69+
fontSize: 32,
70+
color: colors.grey[800]
71+
})
72+
73+
const LandingPage = () => {
74+
return (
75+
<RootContainer>
76+
<Header id="about">
77+
<ContentContainer style={{ flexDirection: "row", flexGrow: 1 }}>
78+
<HeaderButton href="#">About</HeaderButton>
79+
<HeaderButton href="basic-usage">Basic Usage</HeaderButton>
80+
<HeaderButton href="props">Props</HeaderButton>
81+
<HeaderButton href="./demo">Demo Playground</HeaderButton>
82+
</ContentContainer>
83+
</Header>
84+
<Hero>
85+
<ContentContainer>
86+
<HeroMain>React Image Annotate</HeroMain>
87+
<HeroSub>
88+
Powerful React component for image annotations with bounding boxes,
89+
tagging, classification, multiple images and polygon segmentation.
90+
</HeroSub>
91+
<HeroButtons>
92+
<GitHubButton
93+
href="https://github.com/waoai/react-image-annotate"
94+
data-size="large"
95+
data-show-count="true"
96+
aria-label="Star waoai/react-image-annotate on GitHub"
97+
>
98+
Star
99+
</GitHubButton>
100+
</HeroButtons>
101+
</ContentContainer>
102+
</Hero>
103+
<ContentContainer>
104+
<Section id="basic-usage">
105+
<SectionHeader>Basic Usage</SectionHeader>
106+
</Section>
107+
<Section id="props">
108+
<SectionHeader>Props</SectionHeader>
109+
</Section>
110+
</ContentContainer>
111+
</RootContainer>
112+
)
113+
}
114+
115+
export default LandingPage

‎src/index.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
// @flow
22

33
import React from "react"
4-
import Annotator from "./Annotator"
4+
import ReactDOM from "react-dom"
55
import Theme from "./Theme"
6+
import DemoSite from "./DemoSite"
7+
import LandingPage from "./LandingPage"
8+
import "./site.css"
69

7-
export default (props: any) => {
8-
return (
9-
<Theme>
10-
<Annotator {...props} />
11-
</Theme>
12-
)
10+
const Site = () => {
11+
const path = window.location.pathname.split("/").slice(-1)[0]
12+
return <Theme>{path === "demo" ? <DemoSite /> : <LandingPage />}</Theme>
1313
}
14+
15+
ReactDOM.render(<Site />, document.getElementById("root"))

‎src/site.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
html,
2+
body {
3+
padding: 0;
4+
margin: 0;
5+
}

‎yarn.lock‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1247,6 +1247,8 @@
12471247
version "4.5.1"
12481248
resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.5.1.tgz#6963bad139e938702ece85ca43067688018f04f8"
12491249
integrity sha512-YZ/BgJbXX4a0gOuKWb30mBaHaoXRqPanlePam83JQPZ/y4kl+3aW0Wv9tlR70hB5EGAkEJGW5m4ktJwMgxQAeA==
1250+
dependencies:
1251+
"@babel/runtime" "^7.4.4"
12501252

12511253
"@material-ui/styles@^4.6.0":
12521254
version "4.6.0"
@@ -6053,6 +6055,11 @@ gh-pages@^2.0.1:
60536055
graceful-fs "^4.1.11"
60546056
rimraf "^2.6.2"
60556057

6058+
github-buttons@^2.3.0:
6059+
version "2.6.0"
6060+
resolved "https://registry.yarnpkg.com/github-buttons/-/github-buttons-2.6.0.tgz#fa3e031451cee7ba05c3254fa67c73fe783104dc"
6061+
integrity sha512-PPGGL+l9fVc6J6ZtPNRMeVr94+NgFhZTHHz5/nNDGnt7DFeD+QRHKrEBlXNAxupw+gVLfQCUcM+l5SQ2KlqLzA==
6062+
60566063
glob-base@^0.3.0:
60576064
version "0.3.0"
60586065
resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -10782,6 +10789,13 @@ react-full-screen@^0.2.4:
1078210789
"@types/react" "*"
1078310790
fscreen "^1.0.1"
1078410791

10792+
react-github-btn@^1.1.1:
10793+
version "1.1.1"
10794+
resolved "https://registry.yarnpkg.com/react-github-btn/-/react-github-btn-1.1.1.tgz#d08f6da1683a7994c54163af240d88ba5efa7057"
10795+
integrity sha512-haORkaENCh9DD953dle49aI/WWAxGauaA2xjbBgmPPvPY0KMvRslswl6TBTiZ8u6pRhLN4k+mXfaKWYnS/o7BQ==
10796+
dependencies:
10797+
github-buttons "^2.3.0"
10798+
1078510799
react-helmet-async@^1.0.2:
1078610800
version "1.0.2"
1078710801
resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.2.tgz#bb55dd8268f7b15aac69c6b22e2f950abda8cc44"

0 commit comments

Comments
 (0)