Add tutorial for adding NewPipe to F-Droid client

Add new FAQ category: "install"

FAQ/install.html

@@ -0,0 +1,11 @@
+---
+layout: faq_list
+---
+
+{% include faq_list.html categories="install" name="Installation and Update" %}
+
+<div class="row">
+    <div class="col-md-8 col-md-offset-2">
+        {% include faq_improve_hint.html %}
+    </div>
+</div>

_faq/download-signing-keys.html

@@ -1,6 +1,7 @@
 ---
 categories:
 - download
+- install
 type: info
 title: "Upgrading NewPipe fails"
 ---

_tutorials/install-add-fdroid-repo.html

@@ -0,0 +1,70 @@
+---
+categories:
+- install
+type: tutorial
+title: "Add our F-Droid repository"
+---
+<section>
+
+    <p><span class="text-info">Team NewPipe's F-Droid repository allows for updates to NewPipe to be available faster than on the default F-Droid repository.</span>
+
+    You will need to add our repository to your F-Droid client. We will only show steps for adding to the official F-Droid app. There are two ways to add an F-Droid repository.
+    </p>
+    <hr class="separator">
+
+    <h3 id="qr-code">The first of these is by scanning QR code or clicking link.</h3>
+    <div class="row figure-wrapper">
+        <figure class="vertical">
+            <img src="/img/fdroid-repo-qrcode.svg" alt="NewPipe repository QR code" class="img-responsive" />
+            <figcaption>
+                <ol>
+                    <li>Scan the QR code or click <a href="https://archive.newpipe.net/fdroid/repo/?fingerprint=E2402C78F9B97C6C89E97DB914A2751FDA1D02FE2039CC0897A462BDB57E7501"> this link</a>.</li>
+                </ol>
+            </figcaption>
+        </figure>
+        <figure class="vertical figure-right">
+            <img src="/img/screenshots/shot_add_fdroid_repo.png" class="img-responsive screenshot" alt="F-Droid 'Add new repository' pop-up"/>
+            <figcaption>
+                <ol start="2">
+                    <li>After scanning, this menu will appear:</li>
+                    <li>Click <code>OK</code>. The NewPipe upstream repository will be added.</li>
+                    <li>Go to F-Droid's search and search for <code>NewPipe</code>. Click the listing for NewPipe.</li>
+                    <li>Scroll down to the versions tab. Expand both of the tabs for the highest numbers at the top. Press <code>INSTALL</code> on the one that says <code>Repository: NewPipe upstream repository</code>.</li>
+                </ol>
+            </figcaption>
+        </figure>
+    </div>
+    <!--<p class="text-center"><img src="/img/fdroid-repo-qrcode.svg" alt="NewPipe repository QR code"/></p>
+    <ol>
+        <li>Scan the QR code above or click <a href="https://archive.newpipe.net/fdroid/repo/?fingerprint=E2402C78F9B97C6C89E97DB914A2751FDA1D02FE2039CC0897A462BDB57E7501">this link</a>.</li>
+        <li>After scanning, this menu will appear: ![F-Droid "Add new repository" pop-up](ADD IMAGE)</li>
+        <li>Click <code>ADD</code>. The NewPipe upstream repository will be added.</li>
+        <li>Go to F-Droid's search and search for <code>newpipe</code>. Click the listing for NewPipe.</li>
+        <li>Scroll down to the versions tab. Expand both of the tabs for the highest numbers at the top. Press <code>INSTALL</code> on the one that says <code>Repository: NewPipe upstream repository</code>.</li>
+    </ol>-->
+
+    <hr class="separator">
+
+    <h3 id="manually">Or you can add NewPipe manually.</h3>
+    <ol>
+        <li>Open your F-Droid client.</li>
+        <li>Go to settings and click <code>Repositories</code>.</li>
+        <li>Click the <i class="fa fa-plus"></i> to add NewPipe's repository.</li>
+        <li>In the pop-up, after <code>https://</code> paste the following link: <a href="https://archive.newpipe.net/fdroid/repo/?fingerprint=E2402C78F9B97C6C89E97DB914A2751FDA1D02FE2039CC0897A462BDB57E7501">copy me!</a> You don't need to add to the fingerprint field as the link provided will automatically fill it.</li>
+        <li>Click <code>OK</code>. The repository will save and show it as unsigned until all repositories are refreshed. This is because the F-Droid app didn't compared the fingerprints yet. It will tell you if they do not match. If you want, you can also check it by hand:
+            <pre style="white-space: pre-line">E240 2C78 F9B9 7C6C 89E9 7DB9 14A2 751F DA1D 02FE 2039 CC08 97A4 62BD B57E 7501</pre></li>
+        <li>Go to F-Droid's search and search for <code>NewPipe</code> and click the listing for NewPipe.</li>
+        <li>Scroll down to the versions tab. Expand both of the tabs for the highest numbers at the top. Press <code>INSTALL</code> on the one that says <code>Repository: NewPipe upstream repository</code>.</li>
+    </ol>
+
+    <hr class="separator">
+
+    <div class="alert alert-success download-license-warning" role="alert">
+        <span class="fa fa-check" aria-hidden="true"></span> That's it! You've installed NewPipe from our F-Droid repository. You can now get updates in your F-Droid client.
+    </div>
+
+    <div class="alert alert-danger download-license-warning" role="alert">
+        <span class="fa fa-question" aria-hidden="true"></span> If you ran into difficulties, take a look at <a href="https://f-droid.org/en/tutorials/add-repo/">F-Droid's instructions</a>.
+    </div>
+
+</section>

css/faq.css

@@ -234,6 +234,13 @@ h3 > a > i.fa-chevron-left {
     height: 1.2em;
 }
 
+#tutorial section figure.vertical > img,
+#tutorial section figure.vertical > video {
+    margin-right: auto;
+    margin-left: auto;
+    max-height: calc(100vh - 64px);
+}
+
 @media (min-width: 768px) {
     #tutorial section figure {
         max-width: 200px;
@@ -286,6 +293,16 @@ h3 > a > i.fa-chevron-left {
     }
 }
 
+@media (min-width: 992px) {
+    #tutorial section figure.vertical.figure-right > img,
+    #tutorial section figure.vertical.figure-right > video {
+        order: 2;
+    }
+    #tutorial section figure.vertical.figure-right > figcaption {
+        order: 1;
+    }
+}
+
 #tutorial .text-success {
     color: #29a400;
 }
@@ -330,4 +347,4 @@ hr.separator {
     width: calc(100% + 300px);
     margin-bottom: 30px;
     margin-top: 30px;
-}
+}