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>
<![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'>

4
package.json
View File

@ -23,6 +23,8 @@
"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"
}
}

3
src/App.js
View File

@ -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 ){

6
src/routes.js
View File

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

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

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