Commit 99dcc271 authored by Mari's avatar Mari
Browse files

Merge branch 'splash-redesign-nav' into 'main'

Redesign nav, add privacy and about pages for splash site

See merge request !481
parents 9a6f328e 53c9fd02
......@@ -2,14 +2,12 @@
pushd `pwd` # store current dir
cd `dirname "$0"` # cd to script path
cd ../.. # cd to project root
cd .. # cd to splash root
echo "--- re-building signalboost_splash docker image..."
docker build -f docker/signalboost_splash.dockerfile -t "signalboost_splash:latest" .
echo "--- pulling fresh docker image..."
docker-compose pull splash
echo "--- installing dependencies..."
docker-compose -f docker-compose-dev.yml \
run --entrypoint 'yarn install' \
splash
......
......@@ -16,6 +16,7 @@
"gatsby-transformer-sharp": "^2.3.1",
"prop-types": "^15.7.2",
"react": "^16.11.0",
"react-burger-menu": "^2.9.0",
"react-dom": "^16.11.0",
"react-helmet": "^5.2.1"
},
......
.nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.title {
margin-left: 15px;
}
.nav__link {
font-size: x-large;
color: #50fa7b;
padding: 10px;
margin: 5px;
border-radius: 10px;
font-weight: 700;
}
.active {
background-color: rgba(40, 42, 54, 0.8);
}
/* React-Burger-Menu styles */
/* Position and sizing of burger button */
.bm-burger-button {
position: fixed;
width: 34px;
height: 28px;
right: 20px;
top: 20px;
}
/* Color/shape of burger icon bars */
.bm-burger-bars {
background: #50fa7b;
border-radius: 5px;
}
/* Position and sizing of clickable cross button */
.bm-cross-button {
height: 28px;
width: 28px;
margin: 10px;
}
/* Color/shape of close button cross */
.bm-cross {
background: #bdc3c7;
}
/*
Sidebar wrapper styles
Note: Beware of modifying this element as it can break the animations - you should not need to touch it in most cases
*/
.bm-menu-wrap {
position: fixed;
height: 100%;
top: 0;
}
/* General sidebar styles */
.bm-menu {
background: #373a47;
padding: 2em 1em 0;
}
/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
fill: #373a47;
}
/* Wrapper for item list */
.bm-item-list {
color: #b8b7ad;
padding: 0.8em;
}
/* Styling of overlay */
.bm-overlay {
background: rgba(0, 0, 0, 0.3);
}
.nav__mobile {
display: none
}
@media only screen and (max-width: 600px) {
.nav__link {
font-size: 1.5em;
display: block;
}
.nav__desktop {
display: none;
}
.nav__mobile {
display: inline-block;
}
}
@media only screen and (min-width: 600px) {
.nav {
margin: 0 auto;
max-width: 960px;
}
}
@media only screen and (max-width: 768px) {
.title {
font-size: 25px;
}
}
\ No newline at end of file
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'gatsby'
import headerStyles from './header.module.css'
import { slide as Menu } from 'react-burger-menu'
import './header.css'
const Header = ({ siteTitle }) => (
<header>
<nav className={`container ${headerStyles.nav}`}>
<Link to="/">
<h1 className={headerStyles.title}>{siteTitle}</h1>
</Link>
<div>
<Link
to="/how-to"
className={headerStyles.nav__link}
activeClassName={headerStyles.active}
>
How-to
</Link>
<Link
to="/donate"
className={headerStyles.nav__link}
activeClassName={headerStyles.active}
>
Donate
</Link>
</div>
</nav>
</header>
class Header extends React.Component {
constructor(props) {
super(props)
this.state = {
menuOpen: true,
}
}
handleStateChange(state) {
this.setState({ menuOpen: state.isOpen })
}
render() {
return (
<header>
<nav className="nav">
<Link to="/">
<h1 className="title">{this.props.siteTitle}</h1>
</Link>
<div className="nav__desktop">
<NavItems />
</div>
<div className="nav__mobile">
<Menu
itemListElement="div"
pageWrapId={'container'}
isOpen={this.state.menuOpen}
onStateChange={state => this.handleStateChange(state)}
>
<NavItems />
</Menu>
</div>
</nav>
</header>
)
}
}
const NavItems = () => (
<React.Fragment>
<Link to="/about" className="nav__link" activeClassName="active">
About
</Link>
<Link to="/how-to" className="nav__link" activeClassName="active">
How-to
</Link>
<Link to="/donate" className="nav__link" activeClassName="active">
Donate
</Link>
<Link to="/privacy" className="nav__link" activeClassName="active">
Privacy
</Link>
</React.Fragment>
)
Header.propTypes = {
......
.nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.nav__link {
font-size: x-large;
color: #50fa7b;
padding: 10px;
margin: 5px;
border-radius: 10px;
font-weight: 700;
}
@media only screen and (max-width: 600px) {
.nav__link {
font-size: large;
}
}
.active {
background-color: rgba(40, 42, 54, 0.8);
}
@media only screen and (max-width: 768px) {
.title {
font-size: 25px;
}
}
\ No newline at end of file
import { Link } from 'gatsby'
import React from 'react'
import Layout from '../components/layout'
export default () => (
<Layout>
<h2>About Signalboost</h2>
<p>
Signalboost was born out of a need we saw in the movement space: to
empower people to quickly amplify their message to thousands of people and
directly engage those who want to get involved, in a secure and private
way.
</p>
<p>
In an industry that prioritizes aggressive growth and monetization, we
want to build something small, well-considered, and impactful for our
community.
</p>
<p>
As of November 2020, Signalboost is a fiscally sponsored project of the
nonprofit <a href="https://aspirationtech.org/">Aspiration Tech.</a> We
cover our operating costs via grants and{' '}
<Link to="/donate">donations from our community.</Link>
</p>
<h3>The technology</h3>
<p>
Signalboost is a message forwarding service that uses (but is not
affiliated with!) <a href="https://signal.org/">Signal Messenger</a> to
deliver messages. Our software enables Signalboost to programmatically
purchase a number and from then on out, admins can broadcast messages to
subscribers from that number or use it as a hotline.
</p>
<h3>Your privacy and safety</h3>
<p>
No app is perfect when it comes to your digital privacy, and we don't
purport to be.{' '}
</p>
<p>
We're a big fan of Signal's built-in{' '}
<a href="https://support.signal.org/hc/en-us/articles/360007320391-Is-it-private-Can-I-trust-it-">
security features
</a>{' '}
such as world-class encryption and disappearing messages (which we enable
by default).
</p>
<p>
One of the best reasons to use Signalboost is that admins and subscribers
don't have to reveal their phone numbers, and thus their identities.
</p>
<p>
However, in order to make that possible we store the lists of the admins
and subscribers. We have deeply considered what it means to be good
stewards of this data, and highly encourage you to understand these
tradeoffs by reading our <Link to="/privacy">Privacy Policy</Link>.
</p>
<h3>Limitations</h3>
<p>
Signalboost is a beta technology! We try our best to monitor uptime and
make message delivery go fast, but sometimes our infrastructure comes
under heavy load.
</p>
<h4>Subscriber limits</h4>
<p>
After your channel hits 500 subscribers, new users will be prevented from
subscribing until existing subscribers leave.{' '}
</p>
<p>
If you are in an urgent situation and would like to request a larger
channel you can do so by sending us a special request via Signal message
via our helpline <span className="purple">+1-947-800-5717</span>. We are
working hard to support channels over 500 subscribers, but that work
requires time and resources. You can help us get there by{' '}
<Link to="/donate">donating!</Link>
</p>
<h4>Message delivery delays</h4>
<p>
Your channel will also take longer to send broadcasts the bigger it grows:
~1-2 minutes on a channel with 250 subscribers vs. ~5-10 minutes on a
channel with 500 subscribers.
</p>
<h3>Contact</h3>
<p>
To learn about how to request a channel and use it, check out our{' '}
<Link to="/how-to">How-To Guide</Link>.
</p>
<p>
If you have further questions, you can write our helpline (on Signal):{' '}
<span className="purple">+1-947-800-5717</span> or send us an email at{' '}
<a href="mailto:signalboost@protonmail.com">signalboost@protonmail.com</a>{' '}
(or, if you prefer old-school:{' '}
<a href="mailto:signalboost@riseup.net">signalboost@riseup.net</a> +{' '}
<a href="http://keys.gnupg.net/pks/lookup?search=0xE726A156229F56F1&fingerprint=on&op=index">
PGP
</a>
).
</p>
<p>
Read our code of conduct{' '}
<a href="https://0xacab.org/team-friendo/signalboost/-/wikis/Team-Friendo-Values-and-CoC">
here.
</a>
</p>
<p>
Read our source code{' '}
<a href="https://0xacab.org/team-friendo/signalboost">here.</a>
</p>
</Layout>
)
......@@ -41,12 +41,8 @@ export default () => (
You will receive a welcome message from your new channel phone number as
soon as your channel is created.
</p>
<p>
You can write our helpline with questions or a request for a more in-depth
training, and we'll get back to you asap!
</p>
<h3 className="getting-started-header">
4. Send announcements to (up to 500) subscribers
4. Send announcements or receive hotline messages
</h3>
<p>
Now, any anyone who sends "HELLO" to your channel number will get
......@@ -54,47 +50,9 @@ export default () => (
</p>
<p>
You can publish your channel phone number on Instagram or keep it to a
close circle. Note: after your channel hits 500 subscribers, new users
will be prevented from subscribing until existing subscribers leave. Your
channel will also take longer to send broadcasts the bigger it grows: ~1-2
minutes on a channel with 250 subscribers vs. ~5-10 minutes on a channel
with 500 subscribers.
</p>
<p>
If you are in an urgent situation and would like to request a larger
channel you can do so by sending us a special request via Signal message
at 947-BOOSTIT (+1-947-800-5717). However, please note that large channels
put stress on our servers and team. We are working hard to make
Signalboost support channels over 500 subscribers, but that work requires
time and resources. You can help us get there by{' '}
<Link to="/donate">donating!</Link>
close circle.
</p>
<h2>Signalboost Guide</h2>
<p>
A Signalboost channel is a phone number that keeps track of admins and
subscribers. Any time an admin sends a message to the channel, it is
interpreted as a command or a broadcast. If admins send a broadcast, all
of the subscribers will see it, but Signalboost will route the broadcast
so that it appears as if coming from the channel phone number.
</p>
<p>
People have described Signalboost as "BCC, but for messaging," "secure SMS
blasts," and "Celly, but over Signal."{' '}
</p>
<h3>Commands & languages</h3>
<p>
A command is a word or phrase sent as a Signal message that Signalboost
will interpret as an instruction. Some commands can only be used by
admins. If you're unsure which command to use, the HELP command is a great
place to start.
</p>
<p>
Signalboost currently supports{' '}
<span className="purple">English, Spanish, French, and German</span>. To
switch to your language of choice, type the name of the language into the
channel. For example, if I want to switch my language to Spanish, I would
send "ESPAÑOL" to the channel.
</p>
<h3>Disappearing Messages</h3>
<p>
By default, messages on Signalboost channels disappear after 1 week.
......@@ -104,6 +62,14 @@ export default () => (
(usually to 1 day or 6 hours) if your broadcasts will contain sensitive
information.
</p>
<h3>Language support</h3>
<p>
Signalboost currently supports{' '}
<span className="purple">English, Spanish, French, and German</span>. To
switch to your language of choice, type the name of the language into the
channel. For example, if I want to switch my language to Spanish, I would
send "ESPAÑOL" to the channel.
</p>
<h2>Commands</h2>
<h3>How do I get people to join my channel?</h3>
<p>
......
......@@ -103,28 +103,6 @@ const IndexPage = () => (
Try it out &rarr;
</Link>
</div>
<h2>Questions?</h2>
<p>
Check out the <Link to="/faq">FAQ</Link> or{' '}
<Link to="/how-to">How-To Guide</Link>
</p>
<p>
Write our helpline (on Signal):{' '}
<span className="purple">+1-947-800-5717</span> or send us an email at{' '}
<a href="mailto:signalboost@protonmail.com">signalboost@protonmail.com</a>{' '}
(or, if you prefer old-school:{' '}
<a href="mailto:signalboost@riseup.net">signalboost@riseup.net</a> +{' '}
<a href="http://keys.gnupg.net/pks/lookup?search=0xE726A156229F56F1&fingerprint=on&op=index">
PGP
</a>
).
</p>
<p>
Read our code of conduct{' '}
<a href="https://0xacab.org/team-friendo/signalboost/-/wikis/Team-Friendo-Values-and-CoC">
here.
</a>
</p>
</Layout>
)
......
import React from 'react'
import Layout from '../components/layout'
export default () => (
<Layout>
<h2>Privacy Policy</h2>
<p>
We created Signalboost because we care about your privacy and want to keep
you safe. In a nutshell, our privacy policy is that we collect and retain
the least possible data in order to keep our service up and running. We
delete the data we keep as often as we can and do as much as we can to
preserve our users' rights in the face of law enforcement investigations.
We pledge to never sell our users' data for our own profit.
</p>
<p>
In order to send messages to the right people, Signalboost needs to store
a list of the phone numbers of admins and subscribers for each channel.
The maintainers of Signalboost retain and delete that information on our
servers according to the policies described below. We work hard to protect
your data as much as possible, but ultimately you are your own best
privacy defender.
</p>
<p>
The purpose of this policy is to provide as much transparency as we can to
empower you to make a well-informed decision on your own digital safety
needs.
</p>
<h3>Data we do not store</h3>
<p>Signalboost does *not* store the following data about our users: </p>
<ul>
<li>Contents of messages sent by users [1]</li>
<li> Individual usage statistics</li>
<li>Names of users </li>
<li>IP Addresses</li>
<li> Financial information about users </li>
<li>Data tying users to other services or accounts</li>
</ul>
<p>
[1] In order to relay encrypted messages from senders to recipients,
Signalboost momentarily decrypts the contents of messages from senders
then re-encrypts them to their intended recipients. This means the
contents of messages exist unencrypted or "cleartext" for a matter of
milliseconds on our servers, and then are permanently destroyed.
</p>
<h3>Data we do store</h3>
<p>
Signalboost *does* store (and tries to delete as often as possible) the
following data:
</p>
<h4>User metadata</h4>
<p>
We store lists of which phone numbers are subscribed to each Signalboost
channel so that when an admin sends a message to the channel, Signalboost
knows which subscribers to which it is supposed broadcast the message. We
also temporarily store the phone numbers of subscribers who send "hotline
messages" to the channel so that admins can respond to them without seeing
the sender's phone number. In detail, our database stores:
</p>
<ul>
<li>
{' '}
Lists of which phone numbers are admins or subscribers of which channel
(DELETED when user unsubscribes from the channel or when channel is
destroyed by admin, or when the channel is automatically destroyed due
to inactivity){' '}
</li>
<li>
Lists of which phone numbers have invited which other phone numbers to
join a channel (deleted once invite is accepted, declined, or 2 weeks
have passed -- whichever is shorter){' '}
</li>
<li>
{' '}
Lists of which phone numbers have sent an incoming "hotline message" to
which channels (used to route anonymous replies to hotline messages,
deleted 3 days after last hotline message from a given number is sent){' '}
</li>
<li>
{' '}
Lists of which phone numbers have mistakenly sent SMS numbers to a
channel instead of using signal. We do this to prevent users from
sending us thousands of SMS messages, which cost money to receive.
(DELETED after 4 weeks)
</li>
<li>
{' '}
Lists of the hashed/salted phone numbers of any users who have been
banned from a channel for abusive behavior. (Never deleted.){' '}
</li>
</ul>
<h3>Channel metadata </h3>
<p>
We store some descriptive information about channels that the channels
make publicly visible to their members. In detail, we store:{' '}
</p>
<ul>
<li>
{' '}
The name and public description of each channel (deleted when channel
destroyed)[2]{' '}
</li>
<li> Subscriber counts per channel (deleted when channel destroyed) </li>
<li>
The state of various feature toggles (such as whether vouching or
hotline messages are enabled, etc.){' '}
</li>
</ul>
<p>
[2] We plan to eliminate public names and descriptions of channels in a
future release, at which point, none of this data will be stored on our
servers.{' '}
</p>
<h3>Data deletion </h3>
<p>
We regularly delete[3] as much data as we can as often as possible and
afford users the ability to delete their own data whenever they want
without any assistance from us.{' '}
</p>
<p>In detail: </p>
<ul>