diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..736091d --- /dev/null +++ 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; +} diff --git a/index.html b/index.html index a84ac6a..9e52846 100644 --- a/index.html +++ b/index.html @@ -16,11 +16,13 @@ - + - - - + + + + +
diff --git a/package.json b/package.json index 5d842a6..d6b9b57 100644 --- 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" } } diff --git a/src/App.js b/src/App.js index aea7047..c793b37 100644 --- 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 ( - + ); } publishRouter( router ){ diff --git a/src/routes.js b/src/routes.js index 671b4d5..c6c4c63 100644 --- 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 = ( - - + + ); diff --git a/src/ui/Error.js b/src/ui/Error.js new file mode 100644 index 0000000..a981a6c --- /dev/null +++ b/src/ui/Error.js @@ -0,0 +1,12 @@ +'use strict'; +import React from 'react'; + +export default class Error extends React.Component { + render(){ + return ( +
+ Error page. +
+ ); + } +} diff --git a/src/ui/Home.js b/src/ui/Home.js index 5407a2f..acaa942 100644 --- 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 ( -
- Hello world! +
+
+
+

Usage

+

+ Notify is a Bash function / alias that will send a notification to a tab in your browser when it's ran: +

+
+
+
+
+

$ make all; notify Code is done compiling!

+

+ This will wait until the first command completes before running Notify. That way you can go do other things while your long task runs. +

+
+
+

+
+
+
+
+

Setup

+

Curl is required to use Notify.

+

Add this line to your .bashrc file:

+

+ + notify() { curl --data "$@" https://notify.com/{id} } + +

+

Source your .bashrc file to apply the changes:

+

$ source .bashrc

+

Now, open this link in a new tab:

+

https://notify.com/{id}

+

All done! Bookmark that link so you can find it later since it's unique to you.

+ +

One-Line Setup

+

+ + $ echo 'notify() { curl --data "$@" https://notify.com/{id} }' >> ~/.bashrc && source ~/.bashrc + +

+
+
); } diff --git a/src/ui/NotifPage.js b/src/ui/NotifPage.js new file mode 100644 index 0000000..f606dba --- /dev/null +++ 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 ( +
+
+
+

Notification Page

+ { supported ||

+ Error: This browser does not support desktop notifications :( +

} + { !this.state.haveperm && supported &&
+

+ Please give this site permission to display notifications. +

+ this.checkperm(Notification.permission)}> + Check Again + +
} + { this.state.haveperm && supported &&

+ This page is now monitoring for notifications. +

} +
+
+
+ ); + } +} diff --git a/src/ui/Site.js b/src/ui/Site.js new file mode 100644 index 0000000..42c0bb1 --- /dev/null +++ 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 = ; + } + else if (Shortid.isValid(urlid)) { + page = ; + } + else { + page = ; + } + + return ( +
+
+
+

Notify

+
+
+ Send a browser notification from your terminal. No installation. +
+
+ {page} +
+ ); + } +}