tanner/Notica
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Create pages for front end using generic name

Browse Source
This commit is contained in:
Tanner Collin 2016-12-22 16:26:56 -07:00
parent dd1e32ba0b
commit 8a6d3c0f11
9 changed files with 191 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
assets/css/style.css Normal file
View File

@ -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;
}

10
index.html
View File

@ -16,11 +16,13 @@
</script> </script>
<![endif]> <![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" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" integrity="sha256-2YQRJMXD7pIAPHiXr0s+vlRWA7GYJEK0ARns7k2sbHY=" crossorigin="anonymous" />
<link rel='stylesheet' id='js_composer_front-css' href='/assets/css/simplegrid.css' type='text/css' media='all' /> <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 rel='stylesheet' id='js_composer_front-css' href='/assets/css/font-awesome.min.css' type='text/css' media='all' /> <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> </head>
<body> <body>
<div id='root'> <div id='root'>

8
package.json
View File

@ -4,7 +4,7 @@
"description": "", "description": "",
"scripts": { "scripts": {
"dev": "node serverdev.js", "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", "start": "npm run build && node server.js",
"lint": "eslint src" "lint": "eslint src"
}, },
@ -20,9 +20,11 @@
"webpack-dev-server": "^1.8.2" "webpack-dev-server": "^1.8.2"
}, },
"dependencies": { "dependencies": {
"body-parser": "^1.15.2", "body-parser": "^1.15.2",
"freezer-js": "^0.6.0", "freezer-js": "^0.6.0",
"react": "^0.13.0", "react": "^0.13.0",
"react-router": "^0.13.3" "react-router": "^0.13.3",
"shortid": "^2.2.6",
"socket.io": "^1.7.2"
} }
} }

3
src/App.js
View File

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

6
src/routes.js
View File

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

12
src/ui/Error.js Normal file
View File

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

49
src/ui/Home.js
View File

@ -1,11 +1,56 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import Shortid from 'shortid';
export default class Home extends React.Component { export default class Home extends React.Component {
render(){ render(){
let id = Shortid.generate();
return ( return (
<div> <div className="container">
Hello world! <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> </div>
); );
} }

52
src/ui/NotifPage.js Normal file
View File

@ -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>
);
}
}

37
src/ui/Site.js Normal file
View File

@ -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>
);
}
}