Commit 2cc7a684 authored by Peter Serwylo's avatar Peter Serwylo

Added tutorials for swap/repomaker/adding repos.

Follows the designs provided by @crwinfrey in #112.

They are implemented as a collection called "tutorials". Any time a
new tutorial is added to the _tutorials directory then it will
automatically get put into the list of available tutorials and also will
be added to the paginator at the bottom of each tutorial.

Fixes #112.

Fixes repomaker#182.
parent 4a8d1f22
......@@ -6,6 +6,7 @@ group :jekyll_plugins do
gem "jekyll-polyglot"
gem "jekyll-feed"
gem "jekyll-redirect-from"
gem "jekyll-paginate-v2", "<= 1.7.3"
gem 'jekyll-fdroid', :git => 'https://gitlab.com/fdroid/jekyll-fdroid.git', :branch => 'master'
gem 'git'
end
......@@ -75,6 +75,7 @@ DEPENDENCIES
jekyll
jekyll-fdroid!
jekyll-feed
jekyll-paginate-v2 (<= 1.7.3)
jekyll-polyglot
jekyll-redirect-from
......
......@@ -10,8 +10,12 @@ url: "http://localhost:4000" # the base hostname & protocol for your site
include:
- "_pages"
- "_tutorials"
- ".htaccess"
collections:
tutorials:
output: true
permalink: /tutorials/:title/
docs:
output: true
permalink: /docs/:title/
......
......@@ -5,6 +5,8 @@
external : true
- key : documentation
url : /docs/
- key : tutorials
url : /tutorials/
- key : news
url : /news/
- key : repomaker
......
......@@ -3,6 +3,7 @@
"browse": "Browse",
"forum": "Forum",
"documentation": "Docs",
"tutorials": "Tutorials",
"news": "News",
"repomaker": "Repomaker",
"issues": "Issues",
......@@ -63,5 +64,104 @@
"news": {
"heading": "News"
}
},
"tutorials": {
"misc": {
"step_x": "Step [number]",
"step_x_description": "Step [number]: [description]",
"option_x_description": "Option [number]: [description]"
},
"add_repo": {
"intro": "You can add a repo to F-Droid by scanning the repo's QR code from another device or by opening a repo link on your phone. Begin by downloading and installing the F-Droid app on your Android phone.",
"open_repo_link": {
"short_summary": "Open the Repo Link",
"title": "Open the Repo Link on Your Phone",
"description": "Someone has sent you a link to their repo via email, Facebook, Twitter or text. You want to add these apps to your F-Droid app. You can easily add a repo to F-Droid on your Android phone by opening its link.",
"steps": {
"step_1": "Download and install the F-Droid app on your Android.",
"step_2": "Click on the link and open it in a web browser on your phone.",
"step_3": "When you have the link open, tap the 'Add to F-Droid' button.",
"step_4": "Tap the 'I have F-Droid button. The F-Droid app will open.",
"step_5": "The 'Add new repository' view will be shown with the repository address prefilled. Tap 'Ok' to add it.",
"step_6": "Your new repo will be added. To see a list of your repos, open 'Settings'. Select 'Repositories'.",
"step_7": "Tap on a repo to see its contents.",
"step_8": "Select the apps you'd like to have and install them on your phone."
}
},
"scan_qr_code": {
"short_summary": "Scan QR Code",
"title": "Scan a QR Code from Another Device",
"description": "If someone near you has a repo you want, you can scan the repo QR code from their phone. Or, if a QR code for a repo is displayed on a website, scan it on your phone to add it.",
"steps": {
"step_1": "Once the QR code for the repo is displayed, scan the QR code using a QR scanner app.",
"step_2": "Tap the link. If given the option, open the link using F-Droid. Then follow prompts. If this works, you are done! If not, proceed to the next step.",
"step_3": "If you do not get the option to open the link with F-Droid, close the QR scanner app and open the F-Droid app.",
"step_4": "Within F-Droid, tap 'Settings'. Under 'My Apps' select 'Repositories'.",
"step_5": "On the Repositories screen, tap the '+' icon in the top corner.",
"step_6": "The repo address will be auto-populated. Tap 'Enable'. Note: The repo will be saved in F-Droid Repositories, but no apps will be installed until you manually choose and install."
},
"related_tutorial": "You may also be interested in: <a href=\"../swap/\">How to Send and Receive Apps Offline</a>"
},
"no_internet": "No internet? No problem. Learn <a href=\"../swap/\">How to Send and Receive Apps Offline.</a>"
},
"swap": {
"intro": "No internet? No problem. Download apps from people near you.",
"all_devices_need_fdroid": "All devices need F-Droid downloaded and installed before beginning. All devices should follow the steps below.",
"step_1": "Open F-Droid. Tap 'Nearby' from the menu at the bottom of your screen.",
"step_2": "Tap on 'Find people near me'. The app will automatically begin searching.",
"step_3": "Once people nearby are found, both you and the contact must select each other.",
"step_4": "Once connected, choose the apps you wish to share with your contact.",
"step_5": "Tap the '—>' button.",
"step_6": "One person will be prompted to confirm the request to connect.",
"step_7": "Tap the 'Install' button next to the apps you want to install.",
"step_8": "Tap 'Install' once more. Then, follow the Android prompts to complete the installation process.",
"step_9": "Once installs are complete, your apps are available in your Android app gallery and in your F-Droid app under installed apps.",
"step_10": "To access your installed apps, open F-Droid settings and select 'Manage installed apps' under 'My Apps.'",
"related_tutorial": "You may also be interested in: <a href=\"../create-repo/\">How to Create a Repo</a>"
},
"create_repo": {
"related_tutorial": "You may also be interested in: <a href='../add-repo/'>How to Add a Repo to F-Droid</a>",
"intro": "Can't find what you're looking for? Why not create your own customized collection of apps and files using Repomaker. Download the Repomaker web app on your computer to get started.",
"download_and_install": {
"title": "Download and Install Repomaker to Start Creating",
"steps": {
"step_1": "Download and install the Repomaker web app to your desktop computer.",
"step_2": "Launch the Repomaker web app. Login or Signup to begin.",
"step_3": "Create a new repo and name it accordingly.",
"step_4": "Choose to add apps from the gallery and available repositories, or upload your own files. Click the 'Add from Gallery' button to choose from readily available content.",
"step_5": "Click the 'Add' button next to the items you wish to add. When you're finished, click the 'back' arrow to return to your repo.",
"step_6": "Your apps will be displayed in your repo content view."
}
},
"customize_repo": {
"title": "Customize Your Repo",
"description": "You are able to edit the app and file summaries to make it understandable for your target audience. You can edit the language making it country specific. Then share the repo seamlessly to attendees prior to conferences and trainings.",
"steps": {
"step_1": "Click on an item to open its details.",
"step_2": "Click 'Edit'.",
"step_3": "Customize the content to fit your target audience. Note: The changes you make will be made to your repo only. They will not update for the original source. Please use respect when customizing the information for content that is not yours.",
"step_4": "All of your changes are auto-saved."
}
},
"share_repo": {
"title": "Customize Your Repo",
"steps": {
"step_1": "With the repo you wish to share open, click 'Share' in the menu. Note: You need to set up a place to store your repo before sharing. Instructions for how to do this are in Step 2.",
"step_2": "You will be prompted to set up storage in order to publish your repo and before sharing. If you do not see this page, continue to Step 4.",
"step_3": "Choose the storage option that best fits your needs. Once you have storage, you're ready to share! Return to 'Share'.",
"step_4": "Choose to copy the link and send it directly to people through email or text, or share your repo on Facebook or Twitter. When people open the link to your repo, they will need to add it to an Android device to access the apps in the repo. See <a href='../add-repo/'>How to Add a Repo to F-Droid</a> for more information.",
"step_5": "The 'View Repo' option allows you to see what you've just published or shared."
}
},
"update_repo": {
"title": "Update Your Repo",
"steps": {
"step_1": "If you add apps from the gallery, they are automatically updated when the source adds new versions. For files that you uploaded, you can drag and drop updated versions in the repo view.",
"step_2": "Alternatively, you can open a single item to add a new version. Select edit.",
"step_3": "Scroll down to versions. Then, add a new version under the 'Version History' section.",
"step_4": "Then, add a new version under the 'Version History' section."
}
}
}
}
}
<div class="tutorial-paginator">
<div class="previous">
{% if page.previous.url %}
<a href="{{ page.previous.url | prepend: site.baseurl | replace: '//', '/' }}">
<div class="label">Previous</div>
<div class="description">{{page.previous.title}}</div>
</a>
{% endif %}
</div>
<div class="next">
{% if page.next.url %}
<a href="{{ page.next.url | prepend: site.baseurl | replace: '//', '/' }}">
<div class="label">Next</div>
<div class="description">{{page.next.title}}</div>
</a>
{% endif %}
</div>
</div>
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
<div class="site-wrapper">
{% include header.html %}
<div class="main-content">
<div class="article-area">
{{ content }}
</div>
</div>
{% include footer.html %}
</div>
</body>
</html>
......@@ -17,7 +17,7 @@
{% include header.html %}
<div class="main-content">
<div class="main-content with-sidebar">
{% if site.active_lang == "ar" or site.active_lang == "fa" or site.active_lang == "he" %}
<div class="article-area" dir="auto">
......
---
layout: default-no-sidebar
---
<article class="tutorial">
<header class="tutorial-header">
<h2 class="tutorial-title">{{ page.title }}</h2>
</header>
<div class="tutorial-content">
{{ content }}
</div>
{% include tutorial-paginator.html %}
</article>
---
layout: page
permalink: '/tutorials'
title: " "
pagination:
enabled: true
collection: tutorials
per_page: 10000
permalink: '/:num/'
title: ':title'
---
<h2>{{ site.data.strings.navigation.tutorials }}</h2>
<ul>
{% for tutorial in paginator.posts %}
<li>
<a href="{{ tutorial.url }}">{{ tutorial.title }}</a>: {{ tutorial.excerpt | strip_html }}
</li>
{% endfor %}
</ul>
<!-- For now don't paginate, just leave all tutorials on this page.
If it becomes a problem with too many tutorials in the future then
it can be changed in the future -->
\ No newline at end of file
---
layout: page
permalink: /tutorial/add-repo
---
<div class="tutorial">
<h2>How to Add a Repo to F-Droid</h2>
<p>
Someone has sent you a link to their repo via email, facebook, twitter, or text.
You want to add these apps to your F-Droid app.
Download and install the F-Droid app on your Android phone before beginning.
Choose the option that suits your scenario.
</p>
<ul class="option-summaries">
<li class="option-summary phone">
<div class="img"></div>
<h4>Option 1</h4>
<p>Open the link on your phone.</p>
</li>
<li class="option-summary computer">
<div class="img"></div>
<h4>Option 2</h4>
<p>Open the link on your computer. Scan to add to your phone.</p>
</li>
<li class="option-summary qrcode">
<div class="img"></div>
<h4>Option 3</h4>
<p>Scan a repo QR code from another device.</p>
</li>
<li class="option-summary offline">
<div class="img"></div>
<h4>Option 4</h4>
<p>Send or receive repo content offline.</p>
</li>
</ul>
<div class="options">
<h3>Option 1: Open the Repo Link on Your Phone</h3>
<p>
A repo link is a web link that displays the contents of a repo in a web browser and provides the info you need to add a repo to the F-Droid app.
You can easily add a repo to F-Droid on your Android phone by opening its link on the mobile device.
</p>
<ul class="steps">
<li class="step">
<div class="img">
<img />
</div>
<h4>Step 1</h4>
<p>Download and install the F-Droid app on your Android.</p>
</li>
<li class="step">
<div class="img">
<img />
</div>
<h4>Step 2</h4>
<p>Click on the link and open it in a web browser on your phone.</p>
</li>
<li class="step">
<div class="img">
<img />
</div>
<h4>Step 3</h4>
<p>When you have the link open, tap the 'Add to F-Droid' button.</p>
</li>
<li class="step">
<div class="img">
<img />
</div>
<h4>Step 4</h4>
<p>Tap the 'I have F-Droid button. The F-Droid app will open.</p>
</li>
<li class="step">
<div class="img">
<img />
</div>
<h4>Step 5</h4>
<p>
The 'Add new repository' view will be shown with the repository address prefilled.
Tap 'Ok' to add it.
</p>
</li>
<li class="step">
<div class="img">
<img />
</div>
<h4>Step 6</h4>
<p>
Your new repo will be added.
To see a list of your repos, open 'Settings'.
Select 'Repositories'.
</p>
</li>
<li class="step">
<div class="img">
<img />
</div>
<h4>Step 7</h4>
<p>Tap on a repo to see its contents.</p>
</li>
<li class="step">
<div class="img">
<img />
</div>
<h4>Step 8</h4>
<p>Select the apps you'd like to have and install them on your phone..</p>
</li>
</ul>
</div>
</div>
\ No newline at end of file
......@@ -92,6 +92,7 @@ body {
display: flex;
@extend %shadow;
&.with-sidebar {
.article-area, .sidebar {
flex-basis: auto;
width: 0px;
......@@ -119,6 +120,7 @@ body {
padding-top: $spacing-unit * 2;
}
}
}
}
.sidebar-widget {
......@@ -477,78 +479,132 @@ img {
margin-bottom: 8px;
}
.option-summaries {
.tutorial-overview {
@include reset-ul;
& > li {
padding: 10px 0 10px 50px;
background: no-repeat left center;
&.link {
background-image: url('../../assets/tutorials/add-repo/icons/ic_link.svg');
}
&.qr {
background-image: url('../../assets/tutorials/add-repo/icons/ic_qr.svg');
}
&.no-internet {
background-image: url('../../assets/tutorials/add-repo/icons/ic_no_internet.svg');
}
}
}
.steps {
@include reset-ul;
margin-bottom: 124px;
display: flex;
flex-wrap: wrap;
font-size: 13px;
.option-summary {
.step {
box-sizing: border-box;
padding: 0 21px;
width: 24%;
max-width: 24%;
@include media-query($tablet) {
width: 50%;
max-width: 32%;
}
@include media-query($phone) {
max-width: 100%;
}
img {
width: 200px;
height: auto;
max-width: 100%;
&:not(.irregular) {
box-shadow: #aaa 0 2px 5px;
}
}
padding: 21px;
h4 {
margin: 1em 0 0.5em 0;
}
p {
margin: 0;
}
.img {
width: 100%;
height: 100px;
background: no-repeat center center;
background-size: contain;
margin-bottom: 21px;
}
}
.phone .img {
background-image: url('../../assets/tutorials/add-repo/phone.svg');
/* Allow an individual ".step" or entire collections of ".steps" to be tagged as ".medium" or ".large". */
.steps .step.medium, .steps.medium .step {
max-width: 33%;
img {
width: 350px;
height: auto;
max-width: 100%;
}
.computer .img {
background-image: url('../../assets/tutorials/add-repo/computer.svg');
@include media-query($tablet) {
max-width: 49%;
}
}
.steps .step.large, .steps.large .step {
max-width: 49%;
.qrcode .img {
background-image: url('../../assets/tutorials/add-repo/qrcode.svg');
img {
width: 460px;
height: auto;
max-width: 100%;
}
.offline .img {
background-image: url('../../assets/tutorials/add-repo/offline.svg');
@include media-query($tablet) {
max-width: 100%;
}
}
.steps {
@include reset-ul;
.tutorial-paginator {
margin: - $spacing-unit / 2;
margin-top: $spacing-unit / 2;
padding: $spacing-unit / 2;
display: flex;
flex-wrap: wrap;
.step {
justify-content: space-between;
background-color: #f9f9f9;
max-width: 33%;
.next a {
text-align: right;
padding-right: 32px;
background: url('../../assets/tutorials/icons/ic_right.svg') no-repeat right 5px;
}
@include media-query($tablet) {
max-width: 50%;
.previous a {
padding-left: 32px;
background: url('../../assets/tutorials/icons/ic_left.svg') no-repeat left 5px;
}
@include media-query($phone) {
max-width: 100%;
a {
display: block;
color: black;
&:hover {
text-decoration: none;
}
}
padding: 21px;
img {
width: 200px;
max-width: 200px;
height: 356px;
.label {
font-size: 1.3em;
}
.description {
}
}
}
......
---
layout: tutorial
title: How to Add a Repo to F-Droid
---
<!-- Don't have an empty line until after the first <p>, as Jekyll is
looking for "\n\n" to decide what constitutes the "excerpt" for a post. -->
{% assign misc_strings = site.data.strings.tutorials.misc %}
{% assign strings = site.data.strings.tutorials.add_repo %}
<p>
{{ strings.intro }}
</p>
<ul class="tutorial-overview">
<li class="link">
{{ strings.open_repo_link.short_summary }}
</li>
<li class="qr">
{{ strings.scan_qr_code.short_summary }}
</li>
<li class="no-internet">
{{ strings.no_internet }}
</li>
</ul>
<div class="options">
<h3>{{ misc_strings.option_x_description | replace: '[number]', '1' | replace: '[description]', strings.open_repo_link.title }}</h3>
<p>
{{ strings.open_repo_link.description }}
</p>
<ul class="steps">
<li class="step">
<div class="img">
<img src="../../../assets/tutorials/add-repo/screenshots/tut01.1-01@2x.png" />
</div>
<h4>{{ misc_strings.step_x | replace: '[number]', '1' }}</h4>
<p>{{ strings.open_repo_link.steps.step_1 }}</p>
</li>
<li class="step">
<div class="img">
<img src="../../../assets/tutorials/add-repo/screenshots/tut01.1-02@2x.png" />
</div>
<h4>{{ misc_strings.step_x | replace: '[number]', '2' }}</h4>
<p>{{ strings.open_repo_link.steps.step_2 }}</p>
</li>
<li class="step">
<div class="img">
<img src="../../../assets/tutorials/add-repo/screenshots/tut01.1-03@2x.png" />
<h4>{{ misc_strings.step_x | replace: '[number]', '3' }}</h4>
<p>{{ strings.open_repo_link.steps.step_3 }}</p>
</li>
<li class="step">
<div class="img">
<img src="../../../assets/tutorials/add-repo/screenshots/tut01.1-04@2x.png" />
</div>
<h4>{{ misc_strings.step_x | replace: '[number]', '4' }}</h4>
<p>{{ strings.open_repo_link.steps.step_4 }}</p>
</li>
<li class="step">
<div class="img">
<img src="../../../assets/tutorials/add-repo/screenshots/tut01.1-05@2x.png" />
</div>
<h4>{{ misc_strings.step_x | replace: '[number]', '5' }}</h4>
<p>{{ strings.open_repo_link.steps.step_5 }}</p>
</li>
<li class="step">
<div class="img">
<img src="../../../assets/tutorials/add-repo/screenshots/tut01.1-06@2x.png" />
</div>
<h4>{{ misc_strings.step_x | replace: '[number]', '6' }}</h4>
<p>{{ strings.open_repo_link.steps.step_6 }}</p>
</li>
<li class="step">
<div class="img">
<img src="../../../assets/tutorials/add-repo/screenshots/tut01.1-07@2x.png" />
</div>
<h4>{{ misc_strings.step_x | replace: '[number]', '7' }}</h4>
<p>{{ strings.open_repo_link.steps.step_7 }}</p>
</li>
<li class="step">
<div class="img">
<img src="../../../assets/tutorials/add-repo/screenshots/tut01.1-08@2x.png" />
</div>
<h4>{{ misc_strings.step_x | replace: '[number]', '8' }}</h4>
<p>{{ strings.open_repo_link.steps.step_8 }}</p>
</li>
</ul>
</div>
<div class="options">
<h3>{{ misc_strings.option_x_description | replace: '[number]', '2' | replace: '[description]', strings.scan_qr_code.title }}</h3>
<p>
{{ strings.scan_qr_code.description }}
</p>
<ul class="steps">
<li class="step">
<div class="img">
<img src="../../../assets/tutorials/add-repo/screenshots/tut01.2-01@2x.png" />
</div>
<h4>{{ misc_strings.step_x | replace: '[number]', '1' }}</h4>
<p>{{ strings.scan_qr_code.steps.step_1 }}</p>
</li>
<li class="step">
<div class="img">
<img src="../../../assets/tutorials/add-repo/screenshots/tut01.2-02@2x.png" />
</div>
<h4>{{ misc_strings.step_x | replace: '[number]', '2' }}</h4>
<p>{{ strings.scan_qr_code.steps.step_2 }}</p>
</li>
<li class="step">
<div class="img">
<img src="../../../assets/tutorials/add-repo/screenshots/tut01.2-03@2x.png" />
</div>
<h4>{{ misc_strings.step_x | replace: '[number]', '3' }}</h4>
<p>{{ strings.scan_qr_code.steps.step_3 }}</p>
</li>
<li class="step">
<div class="img">
<img src="../../../assets/tutorials/add-repo/screenshots/tut01.2-04@2x.png" />
</div>
<h4>{{ misc_strings.step_x | replace: '[number]', '4' }}</h4>
<p>{{ strings.scan_qr_code.steps.step_4 }}</p>
</li>
<li class="step">
<div class="img">
<img src="../../../assets/tutorials/add-repo/screenshots/tut01.2-05@2x.png" />
</div>
<h4>{{ misc_strings.step_x | replace: '[number]', '5' }}</h4>
<p>{{ strings.scan_qr_code.steps.step_5 }}</p>
</li>
<li class="step">
<div class="img">
<img src="../../../assets/tutorials/add-repo/screenshots/tut01.2-06@2x.png" />
</div>
<h4>{{ misc_strings.step_x | replace: '[number]', '6' }}</h4>
<p>{{ strings.scan_qr_code.steps.step_6 }}</p>
</li>
</ul>
</div>
<div class="related-tutorials">
{{ strings.related_tutorial }}
</div>
---
layout: tutorial
title: How to Create a Repo
---
<!-- Don't have an empty line until after the first <p>, as Jekyll is
looking for "\n\n" to decide what constitutes the "excerpt" for a post. -->
{% assign misc_strings = site.data.strings.tutorials.misc %}
{% assign strings = site.data.strings.tutorials.create_repo %}
<p>
{{ strings.intro }}
</p>
<div class="options">
<h3>{{ misc_strings.step_x_description | replace: '[number]', '1' | replace: '[description]', strings.download_and_install.title }}</h3>
<ul class="steps large">
<li class="step">
<div class="img">
<img class="irregular" src="../../../assets/tutorials/create-repo/screenshots/tut03.01-01@2x.png" />
</div>