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
master
Tanner Collin 7 years ago
parent 4efaf30165
commit fd95bd10b7
5 changed files with 88 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      assets/css/style.css
  2. 1
      assets/img/logo.svg
  3. 26
      src/ui/Home.js
  4. 63
      src/ui/NotifPage.js
  5. 5
      src/ui/Site.js

14
assets/css/style.css
Unescape 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
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
Unescape 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>

63
src/ui/NotifPage.js
Unescape 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.
<br />
<a className="button" href="#" onClick={() => this.checkperm(Notification.permission)}>
Check Again
</a>
</p>
<a className="button" href="#" onClick={() => this.checkperm(Notification.permission)}>
Check Again
</a>
</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
Unescape 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}

Write Preview
Loading…
Cancel
Save