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

Adjust styling and home info and add info to notification page

Browse Source
This commit is contained in:
Tanner Collin 2016-12-24 15:20:28 -07:00
parent 4efaf30165
commit fd95bd10b7
5 changed files with 88 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
assets/css/style.css
View File

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

1
assets/img/logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

26
src/ui/Home.js
View File

@ -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 {
<div className="twelve columns">
<h4>Usage</h4>
<p>
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:
</p>
</div>
</div>
@ -31,24 +32,29 @@ export default class Home extends React.Component {
<div className="twelve columns">
<h4>Setup</h4>
<p>Curl is required to use Notica.</p>
<p>Add this line to your <code>.bashrc</code> file:</p>
<p>
Add this line to your <code className="smallcode">.bashrc</code> file:<br />
<code>
notica() &#123; curl --data "$@" https://notica.us/{id} &#125;
notica() &#123; curl --data "d:$@" https://notica.us/{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://notica.us/"+id}>https://notica.us/{id}</a></p>
<p>All done! Bookmark that link so you can find it later since it's unique to you.</p>
<p>
Source your <code className="smallcode">.bashrc</code> file to apply the changes:<br />
<code>$ source .bashrc</code>
</p>
<p>
All done! Now go to this link (bookmark it since it's yours): <br />
<Link to={'/' + id}>https://notica.us/{id}</Link>
</p>
<h4>One-Line Setup</h4>
<h4>Quick Setup</h4>
<p>
Run this command: <br />
<code>
$ echo 'notica() &#123; curl --data "$@" https://notica.us/{id} &#125;' >> ~/.bashrc && source ~/.bashrc
$ echo 'notica() &#123; curl --data "d:$@" https://notica.us/{id}; &#125;' >> ~/.bashrc && source ~/.bashrc
</code>
</p>
<p>Go to this link to receive your notifications (bookmark it since it's yours): <Link to={'/' + id}>https://notica.us/{id}</Link></p>
</div>
</div>
</div>

59
src/ui/NotifPage.js
View File

@ -56,29 +56,76 @@ export default class NotifPage extends React.Component {
<div className="twelve columns">
<h4>Notification Page</h4>
{ supported || <div className="error"><p>
Error: This browser does not support desktop notifications :(
<i className="fa fa-times" aria-hidden="true"></i> This browser does not support desktop notifications.
</p></div>}
{ !this.state.haveperm && supported && <div>
<p>
Please give this site permission to display notifications.
</p>
<br />
<a className="button" href="#" onClick={() => this.checkperm(Notification.permission)}>
Check Again
</a>
</p>
</div>}
{ !this.state.connected && supported && <div className="error">
<p>
Error: Unable to connect to the Notica server :(
</p>
<p>
<i className="fa fa-times" aria-hidden="true"></i> Unable to connect to the Notica server.
<br />
Attempting to reconnect...
</p>
</div>}
{ this.state.haveperm && this.state.connected && supported && <p>
This page is monitoring for notifications.
<i className="fa fa-check" aria-hidden="true"></i> This page is monitoring for notifications.
</p>}
</div>
</div>
<div className="row">
<div className="six columns">
<h4>Usage</h4>
<p>Here are some different ways to use Notica:</p>
<p>
Just run it from your terminal: <br />
<code>
$ notica
</code>
</p>
<p>
Add a custom message: <br />
<code>
$ notica Hello world!
</code>
</p>
<p>
Get an alert when a command finishes: <br />
<code>
$ sudo apt-get update; notica Done!
</code>
</p>
<p>
Get an alert when a command succeeds: <br />
<code>
$ make all && notica Success!
</code>
</p>
<p>
Get an alert when a command fails: <br />
<code>
$ make all || notica Failed!
</code>
</p>
</div>
<div className="six columns">
<h4>Tips</h4>
<p>Bookmark this page! It is unique to the function in your <code className="smallcode">.bashrc</code> file.
Notifications will be sent to all open pages with the same ID code in the URL.</p>
<p>
Use quotes on messages with special characters: <br />
<code>
$ notica "This is awesome :)"
</code>
</p>
</div>
</div>
</div>
);
}

5
src/ui/Site.js
View File

@ -26,11 +26,12 @@ export default class Site extends React.Component {
<div className="hero">
<div className="title">
<Link to={'/'}>
Notica
<img src="/assets/img/logo.svg" />
<span className="name">Notica</span>
</Link>
</div>
<div className="tagline">
Send a browser notification from your terminal. No installation. No registration.
Send browser notifications from your terminal. No installation. No registration.
</div>
</div>
{page}