Download section & new installation FAQs

FAQ/index.html

@@ -3,6 +3,8 @@
 extraCSS:
   - "faq.css"
   - "faq_home.css"
+extraJS:
+  - "faq.js"
 bodyID: faq
 bodyPage: "False"
 navBrandLink: "FAQ/"

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>

README.md

@@ -149,3 +149,25 @@ Writing short FAQs is quite easy and there are only few things to consider.
 2. To separate parts of your article with a thin line, use `<hr/>` tags. 
 3. To insert images, use the `<img/>` tag inside of a `<figure>` tag. Additionally, each image needs a caption (`<figcaption>`).
 4. Please keep your sentences as shorts as possible. This makes it easier to follow you and your instructions.
+
+#### Usage of Website API
+We have an API which provides data for running the website to not require visitors contacting other servers when visiting our website.
+You can find its source code [on GitHub](https://github.com/TeamNewPipe/web-api) and the served data [here](https://newpipe.schabi.org/api/data.json).
+If you want to use the API for other purposes than running or developing our website, please host it yourself.
+
+To use API data, you need to add the `data-newpipe-api` attribute to an HTML tag containing the JSON identifier of the value you want to access:
+
+``` HTML
+<p>NewPipe has <span data-newpipe-api="stats.stargazers>10k</span> stars on GitHub.</p>"
+```
+
+By default, the inner HTML of tags which have the `data-newpipe-api` attribute will be replaced with the requested value. Nevertheless, you should put a value there to provide a fallback for the rare case, that our API failed to generate correct data. 
+It is also possible to not replace the HTML, but store the API data in a referred attribute by adding the `ata-newpipe-api-attribute` attribute:
+
+``` HTML
+<a data-newpipe-api="flavors.fdroid.stable.apk" data-newpipe-api-attribute="href">download NewPipe</a>
+```
+will result in something like
+``` HTML
+<a href="https://f-droid.org/repo/org.schabi.newpipe_953.apk">download NewPipe</a>
+```

_faq/download-signing-keys.html

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

_includes/faq_list.html

@@ -2,7 +2,7 @@
 {%- if include.categories -%}
     {%- assign categories = include.categories -%}
 {%- else -%}
-    {%- assign categories = "download, player, bugs" | split: ", " -%}
+    {%- assign categories = "download, player, bugs, install" | split: ", " -%}
 {%- endif -%}
 
 {% comment %}DEFAULT VALUES WHEN NO TYPE/COLLECTION WAS PASSED{% endcomment %}
@@ -54,13 +54,14 @@ <h3>{{ include.name }}</h3>
                         {%- if item.type == "tutorial" %}
         <a href="{{ item.url }}">
                         {%- endif %}
-            <article class="col-md-8 col-md-offset-2 tile">
+            <article class="col-md-8 col-md-offset-2 tile" id="{{ item.relative_path | split: "/" | last | replace: ".html", "" }}">
                 <header class="tile-head">
-                    <span class="{{ item.type }}">
+                    <span class="tile-type {{ item.type }}">
                         <i class="fa fa-
                         {%- if item.type == "info" -%}info-circle{%- else if item.type == "tutorial" -%}graduation-cap{%- endif -%}"></i>
                     </span>
-                    {{ item.title }}
+                    <div class="tile-title">{{ item.title }}</div>
+                    <span class="tile-anchor" title="Copy link to this {% if item.type == "info" %}FAQ entry{% else %}tutorial{% endif %}"><i class="fa fa-link fa-flip-horizontal"></i></span>
                 </header>
                 {%- if item.type != "tutorial" -%}
                 <div class="tile-body">
@@ -79,11 +80,5 @@ <h3>{{ include.name }}</h3>
 </div>
 
 <script>
-    $(".faq-tiles .tile > .tile-head").click(function () {
-        $(this).parent().hasClass("active") ? $(this).parent().find(".tile-body").slideUp() : $(this).parent().find(".tile-body").slideDown();
-        $(this).parent().toggleClass("active");
-    });
-    $(function () {
-        $('[data-toggle="tooltip"]').tooltip()
-    })
+    clickListener();
 </script>

_includes/head.html

@@ -3,6 +3,7 @@
 # Following parameters are allowed:
 # title    The text to print in between <title></title>.
 # extraCSS Additional CSS files from /css/ can be added to the <head>. style.css and print.css are always included.
+# extraJS  Additional JS files from /js/ can be added to <head>.
 # bodyID   HTML id attribute for the <body> tag.
 # page     Optional <div id="page"> tag to allow easy use of CSS flex boxes or other styles.
            Must be closed via the footer include. Default: False
@@ -89,6 +90,11 @@
     <script src="/js/respond.min.js"></script>
     <![endif]-->
 
+    <!-- custom scripts -->
+    {% for script in include.extraJS -%}
+    <script src="{{ site.baseurl }}/js/{{ script }}"></script>
+    {% endfor %}
+
     <!-- FontAwesome -->
     <link rel="stylesheet" href="{{ site.baseurl }}/font-awesome/css/font-awesome.min.css">
 

_includes/release_data.html

@@ -0,0 +1,19 @@
+{{
+# We cannot use a data file for two reasons:
+# 1. We'd need to escape every single '>' in the changelog
+# 2. We cannot use Liquid tags to generate the post URL and therefore would be required to put in an absolute URL
+#
+# releaseChangelog  should contain the release highlights of the latest NewPipe release
+# releasePostUrl    should contain the URL to the corresponding blog post. If there is no blog post for this release,
+#                   leave the inner of the capture group empty. When accessing this field, ensure to check if
+#                   releasePostUrl is empty: releasePostUrl != empty
+}}
+{%- capture releaseChangelog -%}
+<ul>
+    <li>Fixed YouTube decryption function regex.</li>
+</ul>
+{%- endcapture -%}
+
+{%- capture releasePostUrl -%}
+{% post_url 2020-07-28-newpipe-0.19.8-released %}
+{%- endcapture -%}

_layouts/default.html

@@ -4,6 +4,12 @@
 {%- endcapture -%}
 {%- assign newCSS = CSS | split: "#" -%}
 
+{%- capture JS -%}
+{%- for layJS in layout.extraJS -%}{{ layJS }}{% if forloop.last == false %}#{% endif %}{%- endfor -%}
+{%- for pageJS in page.extraJS -%}{{ pageJS }}{% if forloop.last == false %}#{% endif %}{%- endfor -%}
+{%- endcapture -%}
+{%- assign newJS = JS | split: "#" -%}
+
 {%- if layout.bodyID -%}{%- if layout.bodyID != "" -%}{%- if layout.bodyID != NIL -%}
 {%- assign bID = layout.bodyID -%}{% endif %}{% endif %}
 {%- else -%}
@@ -27,9 +33,10 @@
 {%- assign hNavSearch = page.navSearch | default: layout.navSearch -%}
 
 {%- include head.html
-           extraCSS = newCSS
-           bodyID   = bID
-           page     = bPage %}
+            extraCSS = newCSS
+            extraJS  = newJS
+            bodyID   = bID
+            page     = bPage %}
 {% include nav.html
            brand     = hNavBrand
            brandLink = hNavBrandLink

_layouts/faq_list.html

@@ -2,6 +2,8 @@
 layout: default
 extraCSS:
   - "faq.css"
+extraJS:
+  - "faq.js"
 bodyID: faq
 bodyPage: "False"
 navBrandLink: "FAQ/"

_tutorials/install-add-fdroid-repo.html

@@ -0,0 +1,74 @@
+---
+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-info download-license-warning" role="alert">
+        <span class="fa fa-info-circle" aria-hidden="true"></span> Related blog post: <a href="{% post_url 2020-05-30-f-droid-repo %}">Team NewPipe publishes own F-Droid repository</a>
+    </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

@@ -102,7 +102,7 @@ h3 > a > i.fa-chevron-left {
     text-align: left;
     color: #CD201F;
     font-size: 16px;
-    padding: 0 15px 0 0;
+    padding: 0;
     cursor: pointer;
     display: flex;
     font-weight: bold;
@@ -113,18 +113,32 @@ h3 > a > i.fa-chevron-left {
     background: #d0cdcd;
 }
 
-.tiles-container.faq-tiles .tile > .tile-head > span {
+.tiles-container.faq-tiles .tile > .tile-head > .tile-type,
+.tiles-container.faq-tiles .tile > .tile-head > span:first-child {
     padding: 7px 15px;
     margin-right: 15px;
     border-right: 1px solid #BBB;
     display: flex;
     align-items: center;
 }
 
-.tiles-container.faq-tiles .tile > .tile-head > span.tutorial {
+.tiles-container.faq-tiles .tile > .tile-head > .tile-type.tutorial {
     padding: 7px 12px 7px 11px;
 }
 
+.tiles-container.faq-tiles .tile > .tile-head > .tile-title {
+    flex-grow: 1;
+}
+
+.tiles-container.faq-tiles .tile > .tile-head > .tile-anchor {
+    padding-left: 15px;
+    padding-right: 15px;
+    margin-left: 15px;
+    border-left: 1px solid #BBB;
+    display: flex;
+    align-items: center;
+}
+
 .tiles-container.faq-tiles .tile > .tile-head > strong {
     padding: 7px 15px;
     width: calc(100% - 45px);
@@ -220,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;
@@ -272,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;
 }
@@ -316,4 +347,4 @@ hr.separator {
     width: calc(100% + 300px);
     margin-bottom: 30px;
     margin-top: 30px;
-}
+}