diff --git a/assets/css/style.css b/assets/css/style.css index a281835..5d62183 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -17,9 +17,18 @@ body { color: black; text-decoration: none; } +.title .name { + vertical-align: middle; +} +.title img { + padding-right: 0.5rem; + vertical-align: middle; + width: 5rem; +} .tagline { padding-bottom: 2.5rem; + font-size: 1.75rem; } .content { @@ -29,9 +38,12 @@ body { .error { color: #cc0000; - font-size: 2rem; } code { white-space: normal; } + +.smallcode { + padding: 0; +} diff --git a/assets/img/logo.svg b/assets/img/logo.svg new file mode 100644 index 0000000..798a5cc --- /dev/null +++ b/assets/img/logo.svg @@ -0,0 +1 @@ + diff --git a/src/ui/Home.js b/src/ui/Home.js index e96d3cc..76623bb 100644 --- a/src/ui/Home.js +++ b/src/ui/Home.js @@ -1,6 +1,7 @@ 'use strict'; import React from 'react'; import Shortid from 'shortid'; +import { Router, Route, Link } from 'react-router'; export default class Home extends React.Component { render(){ @@ -12,7 +13,7 @@ export default class Home extends React.Component {

Usage

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

@@ -31,24 +32,29 @@ export default class Home extends React.Component {

Setup

Curl is required to use Notica.

-

Add this line to your .bashrc file:

+ Add this line to your .bashrc file:
- notica() { curl --data "$@" https://notica.us/{id} } + notica() { curl --data "d:$@" https://notica.us/{id}; }

-

Source your .bashrc file to apply the changes:

-

$ source .bashrc

-

Now, open this link in a new tab:

-

https://notica.us/{id}

-

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

+

+ Source your .bashrc file to apply the changes:
+ $ source .bashrc +

+

+ All done! Now go to this link (bookmark it since it's yours):
+ https://notica.us/{id} +

-

One-Line Setup

+

Quick Setup

+ Run this command:
- $ echo 'notica() { curl --data "$@" https://notica.us/{id} }' >> ~/.bashrc && source ~/.bashrc + $ echo 'notica() { curl --data "d:$@" https://notica.us/{id}; }' >> ~/.bashrc && source ~/.bashrc

+

Go to this link to receive your notifications (bookmark it since it's yours): https://notica.us/{id}

diff --git a/src/ui/NotifPage.js b/src/ui/NotifPage.js index 50bb253..60a7e2b 100644 --- a/src/ui/NotifPage.js +++ b/src/ui/NotifPage.js @@ -56,29 +56,76 @@ export default class NotifPage extends React.Component {

Notification Page

{ supported ||

- Error: This browser does not support desktop notifications :( + 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.checkperm(Notification.permission)}> - Check Again -
} { !this.state.connected && supported &&

- Error: Unable to connect to the Notica server :( -

-

+ Unable to connect to the Notica server. +
Attempting to reconnect...

} { this.state.haveperm && this.state.connected && supported &&

- This page is monitoring for notifications. + This page is monitoring for notifications.

}
+
+
+

Usage

+

Here are some different ways to use Notica:

+

+ Just run it from your terminal:
+ + $ notica + +

+

+ Add a custom message:
+ + $ notica Hello world! + +

+

+ Get an alert when a command finishes:
+ + $ sudo apt-get update; notica Done! + +

+

+ Get an alert when a command succeeds:
+ + $ make all && notica Success! + +

+

+ Get an alert when a command fails:
+ + $ make all || notica Failed! + +

+
+
+

Tips

+

Bookmark this page! It is unique to the function in your .bashrc file. + Notifications will be sent to all open pages with the same ID code in the URL.

+

+ Use quotes on messages with special characters:
+ + $ notica "This is awesome :)" + +

+
+
); } diff --git a/src/ui/Site.js b/src/ui/Site.js index 880e34a..743eb34 100644 --- a/src/ui/Site.js +++ b/src/ui/Site.js @@ -26,11 +26,12 @@ export default class Site extends React.Component {
- Notica + + Notica
- Send a browser notification from your terminal. No installation. No registration. + Send browser notifications from your terminal. No installation. No registration.
{page}