Create pages for front end using generic name

7 years ago · 8a6d3c0f11
parent dd1e32ba0b
commit 8a6d3c0f11
9 changed files with 191 additions and 13 deletions
--- a/assets/css/style.css
+++ b/assets/css/style.css
@ -0,0 +1,27 @@
+body {
+	margin: 0;
+}
+
+.hero {
+	background: #84DCCF;
+	text-align: center;
+	box-shadow: 0 0 7px #555;
+}
+
+.title {
+	padding-top: 2.5rem;
+}
+
+.tagline {
+	padding-bottom: 2.5rem;
+}
+
+.content {
+	margin: auto;
+	max-width: 800px;
+}
+
+.error {
+	color: #cc0000;
+	font-size: 2rem;
+}
--- a/index.html
+++ b/index.html
@ -16,11 +16,13 @@
 		</script>
 	<![endif]>

-	<meta name="viewport" content="initial-scale=1">
+	<meta name="viewport" content="width=device-width, initial-scale=1">

-	<link rel='stylesheet' id='js_composer_front-css'  href='/assets/css/normalize.css' type='text/css' media='all' />
-	<link rel='stylesheet' id='js_composer_front-css'  href='/assets/css/simplegrid.css' type='text/css' media='all' />
-	<link rel='stylesheet' id='js_composer_front-css'  href='/assets/css/font-awesome.min.css' type='text/css' media='all' />
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" integrity="sha256-2YQRJMXD7pIAPHiXr0s+vlRWA7GYJEK0ARns7k2sbHY=" crossorigin="anonymous" />
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
+	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
+
+	<link rel="stylesheet" href="/assets/css/style.css" type="text/css" media="all" />
  </head>
  <body>
    <div id='root'>
--- a/package.json
+++ b/package.json
@ -4,7 +4,7 @@
  "description": "",
  "scripts": {
    "dev": "node serverdev.js",
-	"build": "webpack --config ./webpack.production.config.js --progress --profile --colors",
+    "build": "webpack --config ./webpack.production.config.js --progress --profile --colors",
    "start": "npm run build && node server.js",
    "lint": "eslint src"
  },
@ -20,9 +20,11 @@
    "webpack-dev-server": "^1.8.2"
  },
  "dependencies": {
-	"body-parser": "^1.15.2",
+    "body-parser": "^1.15.2",
    "freezer-js": "^0.6.0",
    "react": "^0.13.0",
-    "react-router": "^0.13.3"
+    "react-router": "^0.13.3",
+    "shortid": "^2.2.6",
+    "socket.io": "^1.7.2"
  }
 }
--- a/src/App.js
+++ b/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 ){
--- a/src/routes.js
+++ b/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>
 );

--- a/src/ui/Error.js
+++ b/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>
+		);
+	}
+}
--- a/src/ui/Home.js
+++ b/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>
 		);
 	}
--- a/src/ui/NotifPage.js
+++ b/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>
+		);
+	}
+}
--- a/src/ui/Site.js
+++ b/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>
+		);
+	}
+}