Commit 4a8d1f22 authored by Peter Serwylo's avatar Peter Serwylo

Add an initial version of the add-repo tutorials.

Still needs to have:
 * Actual screenshots for the process of adding repos.
 * i18n of strings in this template (using _data/strings.json)
 * Eventually a menu entry, but perhaps starting with a link from /docs.
parent 92536f16
---
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
......@@ -129,7 +129,7 @@ body {
border-bottom: 1px solid #ccc;
}
@import "sidebar-donate"
@import "sidebar-donate";
}
/**
......@@ -454,3 +454,102 @@ img {
}
}
}
/**
* Tutorials
*/
.tutorial {
h2 {
color: #0066cc;
}
h3 {
padding-bottom: 14px;
margin-bottom: 0;
}
h4 {
/*font-family: HelveticaNeue-Medium, serif;*/
font-size: 12px;
color: #757575;
letter-spacing: 0.13px;
text-transform: uppercase;
margin-bottom: 8px;
}
.option-summaries {
@include reset-ul;
margin-bottom: 124px;
display: flex;
flex-wrap: wrap;
font-size: 13px;
.option-summary {
box-sizing: border-box;
padding: 0 21px;
width: 24%;
@include media-query($tablet) {
width: 50%;
}
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');
}
.computer .img {
background-image: url('../../assets/tutorials/add-repo/computer.svg');
}
.qrcode .img {
background-image: url('../../assets/tutorials/add-repo/qrcode.svg');
}
.offline .img {
background-image: url('../../assets/tutorials/add-repo/offline.svg');
}
}
.steps {
@include reset-ul;
display: flex;
flex-wrap: wrap;
.step {
max-width: 33%;
@include media-query($tablet) {
max-width: 50%;
}
@include media-query($phone) {
max-width: 100%;
}
padding: 21px;
img {
width: 200px;
max-width: 200px;
height: 356px;
}
}
}
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg5078"
version="1.1"
viewBox="0 0 39.529564 30.720857"
height="30.720858mm"
width="39.529564mm">
<defs
id="defs5072" />
<metadata
id="metadata5075">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(52.913185,-5.2401778)"
id="layer1">
<g
transform="matrix(0.7596396,0,0,0.7596396,-23.638484,-47.730171)"
id="g3755">
<rect
style="opacity:1;fill:#4b4b4b;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.52879536;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect3745"
width="11.953497"
height="20.45796"
x="-1.0866814"
y="87.081467"
rx="1.7102227"
ry="1.3410892" />
<g
id="g3753"
style="fill:#ffffff">
<rect
ry="0"
rx="0"
y="91.286453"
x="0.56696463"
height="11.953496"
width="8.6462049"
id="rect3747"
style="opacity:0.97000002;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.96499997;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
rx="0.2808162"
ry="0.29362458"
y="88.718414"
x="3.1898775"
height="0.96975201"
width="3.4003789"
id="rect3749"
style="opacity:0.97000002;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.87428671;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="0.87722391"
cy="104.95014"
cx="4.8900671"
id="circle3751"
style="opacity:0.97000002;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.8307656;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</g>
<path
id="rect5032"
d="m -47.732219,7.2401778 h 16.437072 c 0.721828,0 1.302939,0.53641 1.302939,1.202713 v 11.2253202 0 h -19.042951 v 0 -11.2253202 c 0,-0.666303 0.58111,-1.202713 1.30294,-1.202713 z"
style="opacity:1;fill:#4b4b4b;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.05833328;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="opacity:1;fill:#4b4b4b;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.71754497;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -50.204469,26.283131 h 21.582017 c 0.721828,0 0.780685,-0.26799 0.668174,-0.55287 l -2.03793,-5.160015 v 0 h -19.042951 v 0 l -1.83748,5.160015 c -0.10275,0.28854 -0.0537,0.55287 0.66817,0.55287 z"
id="path5035" />
<path
id="rect5037"
d="m -41.359157,24.330281 h 3.698412 l 0.345418,1.05782 h -4.389249 z"
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.05833328;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="9.1277666"
x="-47.114159"
height="8.6528511"
width="15.200954"
id="rect5050"
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.05833328;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg5078"
version="1.1"
viewBox="0 0 29.427818 32.371742"
height="32.371742mm"
width="29.427818mm">
<defs
id="defs5072">
<filter
id="filter4997"
style="color-interpolation-filters:sRGB">
<feFlood
id="feFlood4987"
result="flood"
flood-color="rgb(10,145,206)"
flood-opacity="1" />
<feComposite
id="feComposite4989"
result="composite1"
operator="in"
in2="SourceGraphic"
in="flood" />
<feGaussianBlur
id="feGaussianBlur4991"
result="blur"
stdDeviation="0.2"
in="composite1" />
<feOffset
id="feOffset4993"
result="offset"
dy="0"
dx="0" />
<feComposite
id="feComposite4995"
result="fbSourceGraphic"
operator="atop"
in2="offset"
in="offset" />
<feColorMatrix
id="feColorMatrix4999"
values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
in="fbSourceGraphic"
result="fbSourceGraphicAlpha" />
<feFlood
in="fbSourceGraphic"
result="flood"
flood-color="rgb(0,0,0)"
flood-opacity="1"
id="feFlood5001" />
<feComposite
result="composite1"
operator="in"
in="flood"
id="feComposite5003"
in2="fbSourceGraphic" />
<feGaussianBlur
result="blur"
stdDeviation="0.2"
in="composite1"
id="feGaussianBlur5005" />
<feOffset
result="offset"
dy="0"
dx="0"
id="feOffset5007" />
<feComposite
result="composite2"
operator="atop"
in="offset"
id="feComposite5009"
in2="offset" />
</filter>
</defs>
<metadata
id="metadata5075">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(60.7108,29.24788)"
id="layer1">
<g
id="g3791"
transform="matrix(0.7596396,0,0,0.7596396,-57.885314,-80.567346)">
<rect
ry="1.3410892"
rx="1.7102227"
y="87.081467"
x="-1.0866814"
height="20.45796"
width="11.953497"
id="rect3781"
style="opacity:1;fill:#4b4b4b;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.52879536;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<g
style="fill:#ffffff"
id="g3789">
<rect
style="opacity:0.97000002;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.96499997;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect3783"
width="8.6462049"
height="11.953496"
x="0.56696463"
y="91.286453"
rx="0"
ry="0" />
<rect
style="opacity:0.97000002;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.87428671;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect3785"
width="3.4003789"
height="0.96975201"
x="3.1898775"
y="88.718414"
ry="0.29362458"
rx="0.2808162" />
<circle
style="opacity:0.97000002;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.8307656;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="circle3787"
cx="4.8900671"
cy="104.95014"
r="0.87722391" />
</g>
</g>
<g
transform="matrix(0.7596396,0,0,0.7596396,-41.537845,-80.567346)"
id="g3803">
<rect
style="opacity:1;fill:#4b4b4b;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.52879536;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect3793"
width="11.953497"
height="20.45796"
x="-1.0866814"
y="87.081467"
rx="1.7102227"
ry="1.3410892" />
<g
id="g3801"
style="fill:#ffffff">
<rect
ry="0"
rx="0"
y="91.286453"
x="0.56696463"
height="11.953496"
width="8.6462049"
id="rect3795"
style="opacity:0.97000002;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.96499997;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
rx="0.2808162"
ry="0.29362458"
y="88.718414"
x="3.1898775"
height="0.96975201"
width="3.4003789"
id="rect3797"
style="opacity:0.97000002;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.87428671;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="0.87722391"
cy="104.95014"
cx="4.8900671"
id="circle3799"
style="opacity:0.97000002;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.8307656;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</g>
<path
id="path3805"
d="m -50.28992,-27.24788 -0.748273,0.748273 0.87023,0.870749 a 8.9296875,8.9296875 0 0 0 -1.65468,1.075386 l 5.649785,6.851261 1.748729,-2.181778 1.641761,1.641761 0.748276,-0.749826 z m 4.160986,0.634587 a 8.9296875,8.9296875 0 0 0 -1.99316,0.236678 l 4.942335,4.940266 2.594158,-3.236495 a 8.9296875,8.9296875 0 0 0 -5.543333,-1.940449 z"
style="opacity:1;fill:#4b4b4b;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.96499997;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg5078"
version="1.1"
viewBox="0 0 15.953497 24.45796"
height="24.45796mm"
width="15.953497mm">
<defs
id="defs5072" />
<metadata
id="metadata5075">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(108.51841,10.806361)"
id="layer1">
<g
id="g3717"
transform="translate(-105.43173,-95.887828)">
<rect
style="opacity:0.42000002;fill:#4b4b4b;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.52879536;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect21"
width="11.953497"
height="20.45796"
x="-1.0866814"
y="87.081467"
rx="1.7102227"
ry="1.3410892" />
<g
id="g3708"
style="fill:#ffffff">
<rect
ry="0"
rx="0"
y="91.286453"
x="0.56696463"
height="11.953496"
width="8.6462049"
id="rect23"
style="opacity:0.97000002;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.96499997;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
rx="0.2808162"
ry="0.29362458"
y="88.718414"
x="3.1898775"
height="0.96975201"
width="3.4003789"
id="rect25"
style="opacity:0.97000002;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.87428671;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<circle
r="0.87722391"
cy="104.95014"
cx="4.8900671"
id="path27"
style="opacity:0.97000002;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.8307656;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</g>
<g
id="g3729"
transform="translate(-105.43173,-95.887828)">
<rect
ry="1.3410892"
rx="1.7102227"
y="87.081467"
x="-1.0866814"
height="20.45796"
width="11.953497"
id="rect3719"
style="opacity:1;fill:#4b4b4b;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.52879536;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<g
style="fill:#ffffff"
id="g3727">
<rect
style="opacity:0.97000002;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.96499997;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect3721"
width="8.6462049"
height="11.953496"
x="0.56696463"
y="91.286453"
rx="0"
ry="0" />
<rect
style="opacity:0.97000002;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.87428671;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect3723"
width="3.4003789"
height="0.96975201"
x="3.1898775"
y="88.718414"
ry="0.29362458"
rx="0.2808162" />
<circle
style="opacity:0.97000002;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.8307656;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="circle3725"
cx="4.8900671"
cy="104.95014"
r="0.87722391" />
</g>
</g>
</g>
</svg>
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment