Create pages for front end using generic name

src/App.js

@@ -7,8 +7,9 @@ class App extends React.Component {
 		this.publishRouter( context.router );
 	}
 	render() {
+		let params = this.context.router.getCurrentParams();
 		return (
-			<RouteHandler />
+			<RouteHandler {...params} />
 		);
 	}
 	publishRouter( router ){

src/routes.js

@@ -2,11 +2,11 @@
 import React from 'react';
 import Router, {Route, NotFoundRoute, DefaultRoute} from 'react-router';
 import App from './App';
-import Home from './ui/Home';
+import Site from './ui/Site';
 
 var routes = (
-	<Route name="app" path="/" handler={ App } >
-		<DefaultRoute name="home" handler={ Home } />
+	<Route name="app" path="/*" handler={ App } >
+		<DefaultRoute name="site" handler={ Site } />
 	</Route>
 );
 

src/ui/Error.js

@@ -0,0 +1,12 @@
+'use strict';
+import React from 'react';
+
+export default class Error extends React.Component {
+	render(){
+		return (
+			<div>
+				Error page.
+			</div>
+		);
+	}
+}

src/ui/Home.js

@@ -1,11 +1,56 @@
 'use strict';
 import React from 'react';
+import Shortid from 'shortid';
 
 export default class Home extends React.Component {
 	render(){
+		let id = Shortid.generate();
+
 		return (
-			<div>
-				Hello world!
+			<div className="container">
+				<div className="row">
+					<div className="twelve columns">
+						<h4>Usage</h4>
+						<p>
+							Notify is a Bash function / alias that will send a notification to a tab in your browser when it's ran:
+						</p>
+					</div>
+				</div>
+				<div className="row">
+					<div className="five columns">
+						<p><code>$ make all; notify Code is done compiling!</code></p>
+						<p>
+							This will wait until the first command completes before running Notify. That way you can go do other things while your long task runs.
+						</p>
+					</div>
+					<div className="six columns">
+						<p><img className="u-max-full-width" src="http://i.imgur.com/TNb5kRQ.gif" /></p>
+					</div>
+				</div>
+				<div className="row">
+					<div className="twelve columns">
+						<h4>Setup</h4>
+						<p>Curl is required to use Notify.</p>
+						<p>Add this line to your <code>.bashrc</code> file:</p>
+						<p>
+							<code>
+								notify() &#123; curl --data "$@" https://notify.com/{id} &#125;
+							</code>
+						</p>
+						<p>Source your <code>.bashrc</code> file to apply the changes:</p>
+						<p><code>$ source .bashrc</code></p>
+						<p>Now, open this link in a new tab:</p>
+						<p><a target="_blank" href={"https://notify.com/"+id}>https://notify.com/{id}</a></p>
+						<p>All done! Bookmark that link so you can find it later since it's unique to you.</p>
+
+						<h4>One-Line Setup</h4>
+						<p>
+							<code>
+								$ echo 'notify() &#123; curl --data "$@" https://notify.com/{id} &#125;' >> ~/.bashrc && source ~/.bashrc
+							</code>
+						</p>
+					</div>
+				</div>
 			</div>
 		);
 	}

src/ui/NotifPage.js

@@ -0,0 +1,52 @@
+'use strict';
+import React from 'react';
+
+export default class NotifPage extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			haveperm: false
+		}
+	}
+
+	checkperm(permission) {
+		if (permission === 'granted') {
+			this.setState({haveperm: true});
+		}
+	}
+
+	render(){
+		let supported = ("Notification" in window);
+
+		if (supported) {
+			Notification.requestPermission(permission => {
+				this.checkperm(permission);
+			}.bind(this));
+		}
+
+		return (
+			<div className="container">
+				<div className="row">
+					<div className="twelve columns">
+						<h4>Notification Page</h4>
+						{ supported || <div className="error"><p>
+							Error: This browser does not support desktop notifications :(
+						</p></div>}
+						{ !this.state.haveperm && supported && <div>
+							<p>
+								Please give this site permission to display notifications.
+							</p>
+							<a className="button" href="#" onClick={() => this.checkperm(Notification.permission)}>
+								Check Again
+							</a>
+						</div>}
+						{ this.state.haveperm && supported && <p>
+							This page is now monitoring for notifications.
+						</p>}
+					</div>
+				</div>
+			</div>
+		);
+	}
+}

src/ui/Site.js

@@ -0,0 +1,37 @@
+'use strict';
+import React from 'react';
+import Home from './Home';
+import NotifPage from './NotifPage';
+import Error from './Error';
+import Shortid from 'shortid';
+
+export default class Site extends React.Component {
+	render(){
+		let urlid = this.props.splat;
+		let page = null;
+
+		if (urlid == '') {
+			page = <Home />;
+		}
+		else if (Shortid.isValid(urlid)) {
+			page = <NotifPage urlid={urlid} />;
+		}
+		else {
+			page = <Error />;
+		}
+
+		return (
+			<div>
+				<div className="hero">
+					<div className="title">
+						<h1>Notify</h1>
+					</div>
+					<div className="tagline">
+						Send a browser notification from your terminal. No installation.
+					</div>
+				</div>
+				{page}
+			</div>
+		);
+	}
+}