Skip to content

Commit 671468c

Browse files
dennybritzdennybritz
committed
initial commit
0 parents  commit 671468c

19 files changed

+370
-0
lines changed

Diff for: ‎.eslintignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
**/bundle.js
2+
**/webpack.config.js

Diff for: ‎.eslintrc

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"parser": "babel-eslint",
3+
"env": {
4+
"browser": true,
5+
"es6": true,
6+
"jquery": true
7+
},
8+
"globals": {
9+
"analytics": true,
10+
"StripeCheckout": true
11+
},
12+
"ecmaFeatures": {
13+
"jsx": true
14+
},
15+
"extends": ["eslint:recommended"],
16+
"rules": {
17+
"array-bracket-spacing": [2, "never"],
18+
"arrow-spacing": 2,
19+
"block-spacing": [2, "always"],
20+
"eol-last": 2,
21+
"eqeqeq": 2,
22+
"indent": [2, 2],
23+
"jsx-quotes": [2, "prefer-double"],
24+
"max-len": [1, 120],
25+
"no-const-assign": 2,
26+
"no-dupe-keys": 2,
27+
"no-mixed-spaces-and-tabs": 2,
28+
"no-spaced-func": 2,
29+
"no-trailing-spaces": 2,
30+
"no-unused-vars": 0,
31+
"no-var": 2,
32+
"object-curly-spacing": [2, "always"],
33+
"prefer-arrow-callback": 2,
34+
"prefer-template": 2,
35+
"quotes": [2, "double", "avoid-escape"],
36+
"semi": [2, "always"],
37+
"space-before-blocks": 2,
38+
"space-infix-ops": 2,
39+
}
40+
}

Diff for: ‎.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules/
2+
bower_components/
3+
*.sublime-workspace
4+
5+
# Compiled bundles
6+
bundle.js

Diff for: ‎README.md

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
Sample page for neal-react.
2+
3+
# Open locally
4+
5+
6+
# Run with Docker
7+
8+
```bash
9+
docker run -p 3000:80 -it --rm -v "$PWD"/public:/usr/local/apache2/htdocs/ httpd:2.4
10+
```
11+
12+
# Develop
13+
14+
15+
# TODO
16+

Diff for: ‎css/main.scss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "../node_modules/neal-react/css/base";

Diff for: ‎js/app.jsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from "react";
2+
import SamplePage from "./sample-page.jsx";
3+
import ReactDOM from "react-dom";
4+
import { Router, IndexRoute, Route, Link, Redirect } from "react-router";
5+
import { App } from "neal-react";
6+
import createHashHistory from "history/lib/createHashHistory";
7+
import createBrowserHistory from "history/lib/createBrowserHistory";
8+
9+
let history = createBrowserHistory();
10+
if (window.location.protocol === "file:") {
11+
history = createHashHistory({ queryKey: false });
12+
}
13+
14+
class SampleApp extends React.Component {
15+
render() {
16+
return (
17+
<App googleAnalyticsKey="ABC" segmentKey="ABC" stripeKey="pk_test_6pRNASCoBOKtIshFeQd4XMUh" history={history}>
18+
{this.props.children}
19+
</App>
20+
);
21+
}
22+
}
23+
24+
ReactDOM.render((
25+
<Router history={history}>
26+
<Route path="/" component={SampleApp} history={history}>
27+
<IndexRoute name="home" component={SamplePage}/>
28+
<Route path="*" component={SamplePage}/>
29+
</Route>
30+
</Router>
31+
), document.getElementById("main"));

Diff for: ‎js/sample-page.jsx

+207
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
import React from "react";
2+
import { Link } from "react-router";
3+
import {
4+
Code,
5+
CustomerQuote, CustomerQuotes,
6+
DropdownMenu, DropdownToggle,
7+
Footer, FooterAddress,
8+
Hero,
9+
HorizontalSplit,
10+
ImageList, ImageListItem,
11+
Navbar, NavItem,
12+
Page,
13+
PricingPlan, PricingTable,
14+
Section,
15+
SignupInline, SignupModal,
16+
Stripe,
17+
Team,
18+
TeamMember
19+
} from "neal-react";
20+
21+
let brandName = "SamplePage";
22+
let brand = <span>{brandName}</span>;
23+
24+
// Function to call when someone signs up
25+
let onSignup = ({ name: name, email: email, password: password }) => Stripe.StripeHandler.open({
26+
name: "Stripe Integration Included",
27+
description: "Like this? Donate $5 <3",
28+
panelLabel: "Donate {{amount}}",
29+
email: email,
30+
amount: 500
31+
});
32+
33+
let businessAddress = (
34+
<address>
35+
<strong>{brandName}</strong><br/>
36+
1355 Market Street, Suite 900<br/>
37+
San Francisco, CA 94103<br/>
38+
+1 (123) 456-7890
39+
</address>
40+
);
41+
42+
let pricingPlan1 = {
43+
name: "Starter",
44+
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
45+
price: "$99",
46+
features: {
47+
"Fully Integrated E-Commerce": true,
48+
"Sell 1 Product & Accept Donations": true,
49+
"Mobile Website and Store": false,
50+
"Custom Domain": false,
51+
"24/7 Customer Support": false
52+
},
53+
onClick: onSignup
54+
};
55+
56+
let pricingPlan2 = Object.assign({}, pricingPlan1, {
57+
price: "$499",
58+
name: "Startup",
59+
features: Object.assign({}, pricingPlan1.features, {
60+
"Mobile Website and Store": true
61+
})
62+
});
63+
64+
let pricingPlan3 = Object.assign({}, pricingPlan2, {
65+
price: "$999",
66+
name: "Enterprise",
67+
features: Object.assign({}, pricingPlan2.features, {
68+
"Custom Domain": true,
69+
"24/7 Customer Support": true
70+
})
71+
});
72+
73+
let sampleCode = `<Page>
74+
<Hero heading="Declarative Landing Pages for React.js"></Hero>
75+
<Section heading="Hello!">
76+
<HorizontalSplit padding="md"> { /* Content */} </HorizontalSplit>
77+
</Section>
78+
<Section>
79+
<Team>
80+
<TeamMember name="Link" title="Co-founder" imageUrl="img/link.jpg"> { /* Description */} </TeamMember>
81+
<TeamMember name="Yoshi" title="Co-founder" imageUrl="img/yoshi.jpg"> { /* Description */} </TeamMember>
82+
</Team>
83+
</Section>
84+
<Section>
85+
<PricingTable>
86+
<PricingPlan {... pricingPlan1} />
87+
<PricingPlan {... pricingPlan2} />
88+
<PricingPlan {... pricingPlan3} />
89+
</PricingTable>
90+
<SignupInline onSubmit={onSignupCallback}/>
91+
</Section>
92+
</Page>
93+
`;
94+
95+
96+
export default (props) => {
97+
return(
98+
<Page>
99+
100+
<Navbar brand={brand}>
101+
<NavItem><Link to="Home" className="nav-link">Home</Link></NavItem>
102+
<NavItem dropdown={true}>
103+
<DropdownToggle>Dropdown</DropdownToggle>
104+
<DropdownMenu>
105+
<Link to="Home" className="dropdown-item">Action</Link>
106+
<Link to="Home" className="dropdown-item">Another action</Link>
107+
</DropdownMenu>
108+
</NavItem>
109+
<NavItem><a href="https://github.com/dennybritz/" className="nav-link" target="_blank">Github</a></NavItem>
110+
<NavItem><Link to="Home" className="nav-link">Documentation</Link></NavItem>
111+
</Navbar>
112+
113+
<Hero backgroundImage="img/hero-bg-01.jpg"
114+
className="text-center">
115+
<h1 className="display-1"> Declarative Landing Pages for React.js </h1>
116+
<p className="lead">Build a beautiful landing page in less than an hour.
117+
No more redundant code. Easily extensible.</p>
118+
<p>
119+
<a className="btn btn-white">Learn More</a>
120+
&nbsp;
121+
<a className="btn btn-white">Get it on Github</a>
122+
</p>
123+
</Hero>
124+
125+
<Section heading="What it looks like...">
126+
<Code lang="jsx" block>{sampleCode}</Code>
127+
</Section>
128+
129+
<Section>
130+
<HorizontalSplit padding="md">
131+
<div>
132+
<p className="lead">Batteries Included</p>
133+
<p>Neal ships with a navbar, hero unit, footer, sections, horziontal split (this text), and all the other basic elements you need for a landing page. No more repetetive coding!</p>
134+
</div>
135+
<div>
136+
<p className="lead">Third-Party Integrations</p>
137+
<p>Neal includes integration components for <a>Google Analytics</a>, <a>Segment</a>, and <a>Stripe</a>. No more copying & pasting integration code, all you need is your API keys. We automatically track events when visitors navigate to different parts of your page, using the react-router library.</p>
138+
</div>
139+
<div>
140+
<p className="lead">Open-source. Used in production. </p>
141+
<p>I use Neal in production, so you can be sure it's maintained.
142+
</p>
143+
</div>
144+
</HorizontalSplit>
145+
</Section>
146+
147+
<Section heading="Inline and Modal Signup components" className="gray">
148+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
149+
<SignupInline onSubmit={onSignup}/>
150+
<SignupModal modalId="signup-modal" onSubmit={onSignup}/>
151+
<p>
152+
<a className="btn btn-primary btn-ghost" data-toggle="modal" data-target="#signup-modal">Show Signup modal</a>
153+
</p>
154+
</Section>
155+
156+
<Section heading="Pricing Table">
157+
<PricingTable>
158+
<PricingPlan {... pricingPlan1} />
159+
<PricingPlan {... pricingPlan2} />
160+
<PricingPlan {... pricingPlan3} />
161+
</PricingTable>
162+
</Section>
163+
164+
<Section heading="Customer Quotes">
165+
<CustomerQuotes>
166+
<CustomerQuote name="Denny" title="Co-founder" imageUrl="img/people/paulgraham.jpg">
167+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
168+
</CustomerQuote>
169+
<CustomerQuote name="Denny" title="Co-founder" imageUrl="img/people/elonmusk.jpg">
170+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
171+
</CustomerQuote>
172+
<CustomerQuote name="Denny" title="Co-founder" imageUrl="img/people/reidhoffman.jpg">
173+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
174+
</CustomerQuote>
175+
</CustomerQuotes>
176+
</Section>
177+
178+
<Section heading="Team">
179+
<Team>
180+
<TeamMember name="Denny Britz" title="Co-founder" imageUrl="img/people/paulgraham.jpg">
181+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
182+
</TeamMember>
183+
<TeamMember name="Denny Britz" title="Co-founder" imageUrl="img/people/elonmusk.jpg">
184+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
185+
</TeamMember>
186+
<TeamMember name="Denny Britz" title="Co-founder" imageUrl="img/people/reidhoffman.jpg">
187+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
188+
</TeamMember>
189+
</Team>
190+
</Section>
191+
192+
<Section heading="As seeen on...">
193+
<ImageList centered={false}>
194+
<ImageListItem src="img/press/cnn-logo.png" url="http://www.cnn.com"/>
195+
<ImageListItem src="img/press/forbes-logo.png" url="http://forbes.com/"/>
196+
<ImageListItem src="img/press/theverge-logo.png" url="http://www.theverge.com/"/>
197+
<ImageListItem src="img/press/techcrunch-logo.jpg" url="http://techcrunch.com/"/>
198+
<ImageListItem src="img/press/venturebeat-logo.jpg" url="http://venturebeat.com/"/>
199+
</ImageList>
200+
</Section>
201+
202+
<Footer brandName={brandName} facebookUrl="http://www.facebook.com" twitterUrl="http://www.twitter.com"
203+
emailUrl="mailto:[email protected]" address={businessAddress}>
204+
</Footer>
205+
</Page>
206+
);
207+
};

Diff for: ‎package.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "neal-sample",
3+
"version": "0.1.0",
4+
"description": "A sample page built with neal-react",
5+
"main": "js/app.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"lint": "./node_modules/.bin/eslint --ext js,jsx ."
9+
},
10+
"author": "Denny Britz",
11+
"license": "ISC",
12+
"dependencies": {
13+
"history": "^1.12.4",
14+
"react": "^0.14.0",
15+
"react-dom": "^0.14.0",
16+
"react-router": "^1.0.0-rc3"
17+
},
18+
"devDependencies": {
19+
"babel-core": "^5.8.29",
20+
"babel-eslint": "^4.1.3",
21+
"babel-loader": "^5.3.2",
22+
"css-loader": "^0.21.0",
23+
"eslint": "^1.7.3",
24+
"node-sass": "^3.4.0",
25+
"sass-loader": "^3.0.0",
26+
"style-loader": "^0.13.0",
27+
"webpack": "^1.12.2"
28+
}
29+
}

Diff for: ‎public/img/hero-bg-01.jpg

1.29 MB
Loading

Diff for: ‎public/img/people/elonmusk.jpg

25.3 KB
Loading

Diff for: ‎public/img/people/paulgraham.jpg

54.8 KB
Loading

Diff for: ‎public/img/people/reidhoffman.jpg

268 KB
Loading

Diff for: ‎public/img/press/cnn-logo.png

60.1 KB
Loading

Diff for: ‎public/img/press/forbes-logo.png

89.3 KB
Loading

Diff for: ‎public/img/press/techcrunch-logo.jpg

21.5 KB
Loading

Diff for: ‎public/img/press/theverge-logo.png

223 KB
Loading

Diff for: ‎public/img/press/venturebeat-logo.jpg

31.5 KB
Loading

Diff for: ‎public/index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
6+
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<title>Hello!</title>
10+
</head>
11+
<body>
12+
<main id="main"/>
13+
</body>
14+
<script src="/js/bundle.js"></script>
15+
</html>

Diff for: ‎webpack.config.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
module.exports = {
2+
entry: ["./js/app.jsx", "./css/main.scss"],
3+
output: {
4+
path: __dirname,
5+
filename: "public/js/bundle.js"
6+
},
7+
module: {
8+
loaders: [
9+
{
10+
test: /\.jsx?|\.js$/,
11+
exclude: /(node_modules|bower_components)/,
12+
loader: "babel",
13+
query: {
14+
optional: ["es7.classProperties"]
15+
}
16+
},
17+
{
18+
test: /\.scss$/,
19+
loader: "style!css!sass"
20+
}
21+
]
22+
}
23+
};

0 commit comments

Comments
 (0)