Commit 2d2cd3d8 authored by akwizgran's avatar akwizgran

Merge branch 'hugo' into 'master'

Convert project to hugo

See merge request !9
parents c8237554 942a2e18
/.idea
/html
/node_modules
/package-lock.json
\ No newline at end of file
/public
/resources
\ No newline at end of file
To generate HTML, install [markdown-styles](https://github.com/mixu/markdown-styles) and run `generate-md --layout briar-manual/layout/mixu-radar-briar --input briar-manual/content --output briar-manual-html`.
To generate HTML, install [hugo](https://gohugo.io) and run `hugo`.
baseURL = "https://briarproject.org/manual"
languageCode = "en-us"
title = "Briar User Manual"
theme = "briar-manual"
\ No newline at end of file
# Briar User Manual #
---
title: "Briar User Manual"
---
## What is Briar? ##
# What is Briar?
Briar is a messaging app designed for activists, journalists, and anyone else who needs a safe, easy and robust way to communicate. Unlike traditional messaging apps, Briar doesn't rely on a central server - messages are synchronized directly between the users' devices. If the internet's down, Briar can sync via Bluetooth or Wi-Fi, keeping the information flowing in a crisis. If the internet's up, Briar can sync via the Tor network, protecting users and their relationships from surveillance.
## Installation ##
# Installation
Briar is [available on Google Play](https://play.google.com/store/apps/details?id=org.briarproject.briar.android) for devices running Android.
......@@ -12,9 +14,9 @@ Briar is [available on Google Play](https://play.google.com/store/apps/details?i
If you have an Android device but you prefer not to use Google Play, the Briar website has instructions for installing the app via <a href="https://briarproject.org/fdroid.html">F-Droid</a> or <a href="https://briarproject.org/apk.html">direct download</a>.
## Creating an Account ##
# Creating an Account
<img src="assets/img/create-account.png" alt="Creating an account">
<img src="img/create-account.png" alt="Creating an account">
The first time you open Briar you'll be asked to create an account. You can choose any nickname and password. The password should be at least 8 characters long and hard to guess.
......@@ -24,9 +26,9 @@ Tap "Create Account". When your account has been created you'll be taken to the
<div style="clear:both"></div>
## Adding Contacts ##
# Adding Contacts
<img src="assets/img/add-contact-options-cropped.png" alt="Options for adding a contact">
<img src="img/add-contact-options-cropped.png" alt="Options for adding a contact">
To add a contact, tap the plus icon at the bottom right of the contact list.
......@@ -34,9 +36,9 @@ Choose one of the two options that appear.
<div style="clear:both"></div>
### Add contact at a distance
## Add contact at a distance
<img src="assets/img/add-contact-remotely.png" alt="Adding a contact at a distance">
<img src="img/add-contact-remotely.png" alt="Adding a contact at a distance">
Copy the <code>briar://</code> link and send it to the person you want to add.
You can also use the "Share" button to choose an app for sending the link.
......@@ -55,13 +57,13 @@ If Briar can't connect to your contact after 48 hours, the pending contact list
<div style="clear:both"></div>
<img src="assets/img/add-contact-pending-cropped.png" alt="Pending Contacts">
<img src="img/add-contact-pending-cropped.png" alt="Pending Contacts">
<div style="clear:both"></div>
### Add contact nearby
## Add contact nearby
<img src="assets/img/add-contact-1.png" alt="Adding a contact, step 1">
<img src="img/add-contact-1.png" alt="Adding a contact, step 1">
Another way to add a contact is to meet up with the person you want to add. Each of you will scan a QR code from the other person's screen. This ensures you're connecting to the right person, so nobody else can impersonate you or read your messages.
......@@ -69,7 +71,7 @@ Tap "Continue" when you're ready to start.
<div style="clear:both"></div>
<img src="assets/img/add-contact-2.png" alt="Adding a contact, step 2">
<img src="img/add-contact-2.png" alt="Adding a contact, step 2">
Line up your contact's QR code in the viewfinder. You may have to wait a few seconds for the camera to focus.
......@@ -77,15 +79,15 @@ When the camera has scanned the QR code you'll see the message "Waiting for cont
<div style="clear:both"></div>
<img src="assets/img/contact-list-with-contact-cropped.png" alt="The contact list showing a newly added contact">
<img src="img/contact-list-with-contact-cropped.png" alt="The contact list showing a newly added contact">
Your devices will exchange information, and after a few seconds you'll be added to each other's contact lists. Congratulations! You're ready to communicate securely.
<div style="clear:both"></div>
## Messaging ##
# Messaging ##
<img src="assets/img/manual_messaging-cropped.png" alt="A private messaging conversation">
<img src="img/manual_messaging-cropped.png" alt="A private messaging conversation">
To send a private message, tap a contact's name in the contact list.
......@@ -95,65 +97,65 @@ If your contact is offline, your message will be delivered next time you're both
<div style="clear:both"></div>
## Introducing Contacts ##
# Introducing Contacts ##
<img src="assets/img/introduction-1-cropped.png" alt="Starting an introduction">
<img src="img/introduction-1-cropped.png" alt="Starting an introduction">
You can introduce your contacts to each other through Briar. This allows them to become contacts without having to meet up. To start an introduction, tap a contact's name in the contact list and choose "Make Introduction" from the menu.
<div style="clear:both"></div>
<img src="assets/img/introduction-2-cropped.png" alt="Choosing the second contact">
<img src="img/introduction-2-cropped.png" alt="Choosing the second contact">
Next, choose the other contact you want to introduce.
<div style="clear:both"></div>
<img src="assets/img/introduction-3-cropped.png" alt="Adding a message to both contacts">
<img src="img/introduction-3-cropped.png" alt="Adding a message to both contacts">
Add an optional message to the contacts, then tap "Make Introduction".
<div style="clear:both"></div>
<img src="assets/img/introduction-5-cropped.png" alt="An introduction request">
<img src="img/introduction-5-cropped.png" alt="An introduction request">
Your contacts will see a message asking them whether they accept the introduction. If they both accept they'll be added to each other's contact lists and they'll be able to communicate securely.
<div style="clear:both"></div>
## Private Groups ##
# Private Groups ##
<img src="assets/img/nav-drawer-private-groups.png" alt="The main menu showing the private groups feature selected">
<img src="img/nav-drawer-private-groups.png" alt="The main menu showing the private groups feature selected">
You can use Briar for group chats with your contacts. To create a group, open the main menu and choose "Private Groups". The private group list will open. Tap the plus icon to create a new group.
<div style="clear:both"></div>
<img src="assets/img/create-private-group-1-cropped.png" alt="Creating a private group, step 1">
<img src="img/create-private-group-1-cropped.png" alt="Creating a private group, step 1">
Choose a name for your group, then tap "Create Group".
<div style="clear:both"></div>
<img src="assets/img/create-private-group-2-cropped.png" alt="Creating a private group, step 2">
<img src="img/create-private-group-2-cropped.png" alt="Creating a private group, step 2">
Next choose the contacts you'd like to invite to join the group. Press the checkmark icon when you're done.
<div style="clear:both"></div>
<img src="assets/img/create-private-group-3-cropped.png" alt="Creating a private group, step 3">
<img src="img/create-private-group-3-cropped.png" alt="Creating a private group, step 3">
Add an optional message to the chosen contacts, then tap "Send Invitation". The contacts will see a message inviting them to join.
<div style="clear:both"></div>
<img src="assets/img/create-private-group-4-cropped.png" alt="The private group list showing a newly created group">
<img src="img/create-private-group-4-cropped.png" alt="The private group list showing a newly created group">
The new group will be added to your private group list. This list shows all the groups you belong to.
<div style="clear:both"></div>
<img src="assets/img/private-group-2.png" alt="A conversation in a private group">
<img src="img/private-group-2.png" alt="A conversation in a private group">
Messages in private groups are organized into threads. Any member can reply to a message or start a new thread.
......@@ -161,9 +163,9 @@ The creator of the group is the only one who can invite new members. Any member
<div style="clear:both"></div>
## Forums ##
# Forums
<img src="assets/img/nav-drawer-forums.png" alt="The main menu showing the forums feature selected">
<img src="img/nav-drawer-forums.png" alt="The main menu showing the forums feature selected">
A forum is a public conversation. Unlike a private group, anyone who joins a forum can invite their own contacts.
......@@ -171,37 +173,37 @@ To create a forum, open the main menu and choose "Forums". The forum list will o
<div style="clear:both"></div>
<img src="assets/img/create-forum-1-cropped.png" alt="Creating a forum">
<img src="img/create-forum-1-cropped.png" alt="Creating a forum">
Choose a name for your forum, then tap "Create Forum".
<div style="clear:both"></div>
<img src="assets/img/create-forum-2-cropped.png" alt="The forum list showing a newly created forum">
<img src="img/create-forum-2-cropped.png" alt="The forum list showing a newly created forum">
The new forum will be added to your forum list. This list shows all the forums you belong to.
<div style="clear:both"></div>
<img src="assets/img/share-forum-1-cropped.png" alt="Sharing a forum, step 1">
<img src="img/share-forum-1-cropped.png" alt="Sharing a forum, step 1">
To share a forum with your contacts, tap the forum to open it, then tap the sharing icon.
<div style="clear:both"></div>
<img src="assets/img/share-forum-2-cropped.png" alt="Sharing a forum, step 2">
<img src="img/share-forum-2-cropped.png" alt="Sharing a forum, step 2">
Next choose the contacts you'd like to share the forum with. Press the checkmark icon when you're done.
<div style="clear:both"></div>
<img src="assets/img/share-forum-3-cropped.png" alt="Sharing a forum, step 3">
<img src="img/share-forum-3-cropped.png" alt="Sharing a forum, step 3">
Add an optional message to the chosen contacts, then tap "Share Forum". The contacts will see a message inviting them to join.
<div style="clear:both"></div>
<img src="assets/img/forum-1.png" alt="A conversation in a forum">
<img src="img/forum-1.png" alt="A conversation in a forum">
Messages in forums are organized into threads. Any member can reply to a message or start a new thread.
......@@ -209,11 +211,11 @@ Any member of a forum can invite new members, and any member including the creat
<div style="clear:both"></div>
## Blogs ##
# Blogs
<div style="clear:both"></div>
<img src="assets/img/nav-drawer-blogs.png" alt="The main menu showing the blogs feature selected">
<img src="img/nav-drawer-blogs.png" alt="The main menu showing the blogs feature selected">
Your Briar account has a built-in blog. You can use it to post news and updates about your life. Your blog is automatically shared with your contacts, and their blogs are shared with you.
......@@ -221,43 +223,43 @@ To read your contacts' blogs or write a post, open the main menu and choose "Blo
<div style="clear:both"></div>
<img src="assets/img/write-blog-post-1-cropped.png" alt="Writing a blog post, step 1">
<img src="img/write-blog-post-1-cropped.png" alt="Writing a blog post, step 1">
To write a post, tap the pen icon at the top of the blog feed.
<div style="clear:both"></div>
<img src="assets/img/write-blog-post-2-cropped.png" alt="Writing a blog post, step 2">
<img src="img/write-blog-post-2-cropped.png" alt="Writing a blog post, step 2">
Write your post and tap "Publish".
<div style="clear:both"></div>
<img src="assets/img/write-blog-post-3-cropped.png" alt="The blog feed showing a newly created post">
<img src="img/write-blog-post-3-cropped.png" alt="The blog feed showing a newly created post">
Your new post will appear in the blog feed.
<div style="clear:both"></div>
<img src="assets/img/reblog-1-cropped.png" alt="Reblogging a post, step 1">
<img src="img/reblog-1-cropped.png" alt="Reblogging a post, step 1">
To reblog a post, tap the reblog icon at the corner of the post.
<div style="clear:both"></div>
<img src="assets/img/reblog-2-cropped.png" alt="Reblogging a post, step 2">
<img src="img/reblog-2-cropped.png" alt="Reblogging a post, step 2">
Add an optional comment and tap "Reblog".
<div style="clear:both"></div>
<img src="assets/img/reblog-3-cropped.png" alt="Reblogging a post, step 3">
<img src="img/reblog-3-cropped.png" alt="Reblogging a post, step 3">
The reblogged post will appear in the blog feed with your comment attached.
<div style="clear:both"></div>
## RSS Feeds ##
# RSS Feeds
You can use Briar to read any blog or news site that publishes an RSS feed. The articles are downloaded via Tor to protect your privacy. You can reblog and comment on articles from RSS feeds, just like you can with blog posts.
......@@ -265,39 +267,39 @@ You can use Briar to read any blog or news site that publishes an RSS feed. The
<div style="clear:both"></div>
<img src="assets/img/import-rss-feed-1-cropped.png" alt="Importing an RSS feed, step 1">
<img src="img/import-rss-feed-1-cropped.png" alt="Importing an RSS feed, step 1">
To import an RSS feed, open the blog feed and choose "Import RSS Feed" from the menu.
<div style="clear:both"></div>
<img src="assets/img/import-rss-feed-2-cropped.png" alt="Importing an RSS feed, step 2">
<img src="img/import-rss-feed-2-cropped.png" alt="Importing an RSS feed, step 2">
Enter the URL of the RSS feed and tap "Import". The articles will be downloaded and added to the blog feed. This can take a few minutes.
<div style="clear:both"></div>
<img src="assets/img/import-rss-feed-3-cropped.png" alt="The blog feed showing a newly imported RSS article">
<img src="img/import-rss-feed-3-cropped.png" alt="The blog feed showing a newly imported RSS article">
When new articles are published, Briar will download them automatically. Imported articles are not shared with your contacts unless you choose to reblog them.
<div style="clear:both"></div>
<img src="assets/img/manage-rss-feeds-1-cropped.png" alt="Managing RSS feeds, step 1">
<img src="img/manage-rss-feeds-1-cropped.png" alt="Managing RSS feeds, step 1">
To manage your RSS feeds, open the blog feed and choose "Manage RSS Feeds" from the menu.
<div style="clear:both"></div>
<img src="assets/img/manage-rss-feeds-2-cropped.png" alt="Managing RSS feeds, step 2">
<img src="img/manage-rss-feeds-2-cropped.png" alt="Managing RSS feeds, step 2">
Tap the trash icon to remove a feed. The imported articles will be removed from the blog feed, except for any articles you've reblogged.
<div style="clear:both"></div>
## Deleting Contacts ##
# Deleting Contacts #
<img src="assets/img/delete-contact-cropped.png" alt="Deleting a contact">
<img src="img/delete-contact-cropped.png" alt="Deleting a contact">
To delete a contact, tap the contact's name in the contact list and choose "Delete contact" from the menu.
......@@ -305,20 +307,21 @@ To delete a contact, tap the contact's name in the contact list and choose "Dele
<div style="clear:both"></div>
## Settings ##
# Settings
<img src="assets/img/manual_dark_theme_settings-cropped.png" alt="The list of settings">
<img src="img/manual_dark_theme_settings-cropped.png" alt="The list of settings">
To find the settings, open the main menu and choose "Settings".
Here you can customize your Briar experience.
<div style="clear:both"></div>
### Theme ###
## Theme
<img src="assets/img/manual_dark_theme_nav_drawer-cropped.png" alt="The main menu in a dark theme">
<img src="img/manual_dark_theme_nav_drawer-cropped.png" alt="The main menu in a dark theme">
You can change the color scheme that Briar uses:
* **Light:** Briar will use light colors.
* **Dark:** Briar will use dark colors.
* **Automatic:** Briar will change its color scheme based on the time of day.
......@@ -326,9 +329,9 @@ You can change the color scheme that Briar uses:
<div style="clear:both"></div>
### Connect via Internet (Tor) ###
## Connect via Internet (Tor)
<img src="assets/img/manual_tor_settings-cropped.png" alt="The 'Networks' section of the settings screen">
<img src="img/manual_tor_settings-cropped.png" alt="The 'Networks' section of the settings screen">
> **Tip:** Briar uses Tor to connect to the internet. Tor is a network of computers run by volunteers around the world to help people access the internet privately and without censorship. "Bridges" are computers that can help you connect to Tor if your government or internet provider is blocking it.
......@@ -339,17 +342,17 @@ You can control how Briar connects to the internet:
* **Use Tor with bridges:** Briar will use bridges to connect to Tor.
* **Don't connect:** Briar won't connect to the internet at all.
### Use Mobile Data ###
## Use Mobile Data
You can control whether Briar uses mobile data. If you turn off mobile data, Briar will only use the internet when you're connected to Wi-Fi.
### Connect via Internet (Tor) Only When Charging ###
## Connect via Internet (Tor) Only When Charging
You can control whether Briar uses the internet while your device is running on battery. If you turn on this setting, Briar will only use the internet when your device is connected to power.
### Screen Lock ###
## Screen Lock
<img src="assets/img/manual_app_lock-cropped.png" alt="The 'Security' section of the settings screen">
<img src="img/manual_app_lock-cropped.png" alt="The 'Security' section of the settings screen">
> **Tip:** This feature is not available on Android version 4.
......@@ -357,19 +360,19 @@ To protect your privacy when other people are using your device, you can lock Br
Briar uses the same PIN, pattern or password that you normally use to unlock your device, so this setting will be disabled (grayed out) if you haven't chosen a PIN, pattern or password yet. You can use your device's Settings app to choose one.
<img src="assets/img/manual_app_lock_nav_drawer-cropped.png" alt="The main menu showing the 'Lock App' option">
<img src="img/manual_app_lock_nav_drawer-cropped.png" alt="The main menu showing the 'Lock App' option">
When the screen lock setting is activated, a "Lock App" option will be added to Briar's main menu. You can use this option to lock Briar without signing out.
<div style="clear:both"></div>
<img src="assets/img/manual_app_lock_keyguard.png" alt="Unlocking Briar">
<img src="img/manual_app_lock_keyguard.png" alt="Unlocking Briar">
When Briar is locked, you'll be asked for your PIN, pattern or password to unlock it.
<div style="clear:both"></div>
### Screen Lock Inactivity Timeout ###
## Screen Lock Inactivity Timeout
> **Tip:** This feature is not available on Android version 4.
......
......@@ -4,7 +4,7 @@ import os
from PIL import Image
IMAGE_PATH = "content/assets/img"
IMAGE_PATH = "static/img"
POSTFIX = '-cropped'
......
/* CSS Document */
body, html {
height:100%;
margin:0;
padding:0;
background-color:#fff;
font-size:1em;
font-family:Arial, Helvetica, sans-serif;
line-height:1.3em;
}
body#index a#briar_index_nav,
body#download a#briar_download_nav,
body#how a#briar_how_nav,
body#about a#briar_about_nav,
body#involved a#briar_involved_nav {color:#87C214;}
#briar_wrapper {
min-height:100%;
margin-bottom:-2em;
}
img {
margin:0;
display:inline;
padding:0;
border:none;
vertical-align:middle;
}
figure {
text-align:center;
margin:0 0 50px 0;
padding:0;
}
figcaption {
margin:10px 0 0 0;
font-weight:bold;
text-align:center;
}
@-ms-viewport{
zoom:1.0;
width:extend-to-zoom;
}
.clearboth {clear:both;}
#briar_header_container {
height:120px;
position:static;
width:100%;
top:0;
background-color:#2D3E50;
float:left;
}
#briar_header {
margin:20px auto 0 auto;
width:700px;
}
#briar_logo {
float:left;
width:20%;
}
.briar_logo {
border:3px solid #2D3E50;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
background-color:#fff;
padding:30px 20px 17px 20px;
margin-top:-40px;
width:100%;
max-width:111px;
height:auto;
max-height:147px;
}
#briar_nav {
font-weight:bold;
padding:0 0 0 0;
float:right;
margin:10px auto 10px auto;
vertical-align:bottom;
width:80%;
}
#briar_nav a:link {
text-decoration:none;
color:#fff;
}
#briar_nav a:visited {
text-decoration:none;
color:#fff;
}
#briar_nav a:hover {
text-decoration:none;
color:#87C214;
}
#briar_nav a:active {
text-decoration:none;
color:#fff;
}
#briar_nav label {display:none;}
#briar_nav ul {
clear:both;
display:block;
list-style-type:none;
font-size:0.9em;
padding:0 0 0 0;
margin:0;
text-align:right;
height:auto;
}
#briar_nav li {
list-style-type:none;
display:inline;
padding:0 0 0 20px;
text-transform:uppercase;
margin:0;
font-weight:bold;
white-space:nowrap;
}
#briar_nav a.current {color:#87C214;}
#briar_menu_toggle {display:none;}
#briar_signup_2 {display:none;}
#briar_signup_form {
height:30px;
padding-bottom:10px;
float:right;
text-align:right;
}
#briar_signup_form_2 {
height:auto;
padding-bottom:0;
float:left;
width:80%;
font-size:1.5em;
padding-top:10px;
padding-left:0;
}
#briar_signup_conf {
display:none;
float:right;
text-align:right;
color:#fff;
font-size:0.9em;
font-weight:bold;
padding-top:5px;
padding-bottom:15px;
}
#briar_signup_conf_2 {
display:none;
float:left;
color:#fff;
font-size:1.2em;
font-weight:bold;
padding-top:10px;
padding-left:15px;
}
#briar_signup_form input, textarea {
display:inline;
margin-right:10px;
width:10em;
font-size:0.7em;
background-color:#E2E1E1;
color:#565555;
padding:3px 5px;
border:0;
}
#briar_signup_form_2 input, textarea {
display:inline;
margin-right:10px;
width:10em;
font-size:0.7em;
background-color:#E2E1E1;
color:#565555;
padding:3px 5px;
border:0;
}
#briar_signup_form button {
width:auto;
background-color:#C1392B;
color:#fff;
border:0;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
text-transform:uppercase;
font-size:0.6em;
font-weight:normal;
padding:4px 7px;
}
#briar_signup_form_2 button {
width:auto;
background-color:#C1392B;
color:#fff;
border:0;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
text-transform:uppercase;
font-size:0.6em;
font-weight:normal;
padding:4px 7px;
}
#briar_container {
margin:0 auto;
padding:175px 0 3em 0;
width:700px;
background:#fff;
height:auto;
}
#briar_content {
margin:20px 0 0 0;
font-size:0.9em;
line-height:1.4em;
}
#briar_content ul {}
#briar_content li {margin:0 0 10px 0;}
#briar_content h1 {
margin:23px 20px 0 0;
font-size:3.5em;
line-height:1.1em;
font-weight:normal;
}
#briar_content h2 {
margin:23px 20px 0 0;
font-size:2.5em;
line-height:1.1em;
font-weight:normal;
}