Update installation instructions for Fedora

Issue: tiliado/nuvolaplayer#423
Signed-off-by: Jiří Janoušek <[email protected]>

templates/app_fedora.html

@@ -0,0 +1,6 @@
+{% extends "app.html" %}
+{% import "snippets.html" as snippets %}
+
+{% block tab_content %}
+  {{ snippets.fedora_install_app_with_gnome_software(app, distro_spec, "e.g., GNOME Shell") }}
+{% endblock %}

templates/nuvola_fedora.html

@@ -3,10 +3,9 @@
 
 {% block tab_content %}
 
-  {{ snippets.fedora_install_flatpak() }}
-  {{ snippets.fedora_install_xdg_desktop_portal() }}
+  {{ snippets.fedora_install_flatpak_with_gnome_software() }}
   {{ snippets.purge_old_nuvola() }}
-  {{ snippets.install_and_launch_nuvola() }}
+  {{ snippets.fedora_install_nuvola_service_with_gnome_software() }}
   {{ snippets.install_individual_apps(apps, distro_spec) }}
 
 {% endblock %}

templates/snippets.html

@@ -74,6 +74,21 @@ <h2>Install {{ nuvola.name }} Runtime</h2>
   </p>
 {% endmacro %}
 
+{% macro generic_launch_app(app, environments) %}
+  <h2>Launch {{ app.name }} </h2>
+  <ul>
+    <li>
+      You should be able to find {{ app.name }} in a list of installed applications. If not, you may have forgotten
+      to log out and log in and your desktop environment ({{ environments }}) has not find out yet
+      that a new application has been installed.
+    </li>
+    <li>
+      Alternatively, you can launch {{ app.name }} from a terminal:
+      <br/><code>flatpak run {{ app.uid }}</code>
+    </li>
+  </ul>
+{% endmacro %}
+
 {# ================================ UBUNTU =============================== #}
 
 {%  macro ubuntu_install_flatpak_with_gnome_software(ubuntu_version) %}
@@ -339,34 +354,133 @@ <h2>Install Desktop Portal service</h2>
 
 {# ================================ FEDORA =============================== #}
 
-{% macro fedora_install_flatpak() %}
-  <h2>Install Flatpak</h2>
+{% macro fedora_install_flatpak_with_gnome_software() %}
+  <h2>Install Flatpak and Friends</h2>
   <p>
-    Flatpak is a cross-distribution framework for distribution and running of
-    sandboxed applications. It is
-    <a href="https://apps.fedoraproject.org/packages/flatpak">available in the repository</a>
-    since <strong>Fedora 24</strong>.
+    <strong>Flatpak</strong> is a cross-distribution framework for distribution and running of
+    sandboxed applications.
+    <strong>XDG Desktop Portal</strong> provides {{ nuvola.name }} with desktop integration.
+  <strong>GNOME Software</strong> makes the browsing and installation of Flatpaks easier.
   </p>
-  <ul>
+  <p>
+    <strong>All packages come preinstalled in Fedora Workstation.</strong> In case you removed them,
+    run <code>dnf install flatpak xdg-desktop-portal-gtk xdg-desktop-portal gnome-software</code> as root/sudo.
+    Then restart your computer to add Flatpak paths alongside the system ones. Otherwise,
+    you may see strange errors. Unfortunately, just logging out and logging in is not enough.
+  </p>
+
+
+  <h2>Add Flathub and Nuvola Apps Repositories</h2>
+  <p>
+    The <strong>Flathub repository</strong> provides GNOME Platform runtime, which is used by Nuvola to share common
+    dependencies with other Flatpak apps to reduce disk & memory usage. The <strong>Nuvola Apps</strong> repository
+    contains <em>Nuvola Apps Service</em> and individual Nuvola web apps.
+  </p>
+  <ol>
     <li>
-      Run <code>dnf install flatpak</code> as root/sudo.
+      <a class="btn btn-primary" href="https://dl.flathub.org/repo/flathub.flatpakrepo">
+        <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>
+        Click to install Flathub repository with GNOME Software
+      </a>
     </li>
     <li>
-      Then restart your computer to add Flatpak paths alongside the system ones. Otherwise,
-      you may see strange errors. Unfortunately, just logging out and logging in is not enough.
+      <a class="btn btn-primary" href="https://dl.tiliado.eu/flatpak/nuvola.flatpakrepo">
+        <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>
+        Click to install Nuvola Apps repository with GNOME Software
+      </a>
     </li>
-  </ul>
+    <li>
+      <p>
+        Refresh GNOME Software package cache: Launch <em>GNOME Software</em> → switch to the <em>Updates</em> screen
+        → click the <em>Refresh</em> button in the top left corner.
+      </p>
+      <div class="gallery">
+        <div class="container-fluid text-center">
+          <div class="row">
+            <a href="/screenshots/nuvola/fedora_software_main_screen_click_updates.png" class="col-sm-6">
+              <img src="/screenshots/nuvola/fedora_software_main_screen_click_updates.thumb.png"
+                   class="img-thumbnail"
+                   alt="Launch GNOME Software and switch to the 'Updates' screen.">
+            </a>
+            <a href="/screenshots/nuvola/fedora_software_updates_click_refresh.png" class="col-sm-6">
+              <img src="/screenshots/nuvola/fedora_software_updates_click_refresh.thumb.png"
+                   class="img-thumbnail"
+                   alt="Click the 'Refresh' button.">
+            </a>
+          </div>
+        </div>
+      </div>
+    </li>
+  </ol>
+  <p>
+    Alternatively, launch a Linux terminal emulator,
+    type <code>flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo</code>,
+    <code>flatpak remote-add --if-not-exists nuvola https://dl.tiliado.eu/flatpak/nuvola.flatpakrepo</code>,
+    and <code>flatpak update</code>.
+  </p>
 {% endmacro %}
 
-{% macro fedora_install_xdg_desktop_portal() %}
-  <h2>Install Desktop Portal service</h2>
+{% macro fedora_install_nuvola_service_with_gnome_software() %}
+
+  {{ about_nuvola_service() }}
   <p>
-    XDG Desktop Portal provides
-    {{nuvola.name}}
-    with desktop integration. It is
-    <a href="https://apps.fedoraproject.org/packages/xdg-desktop-portal-gtk">available in the repository</a>.
+    In order to <strong>install Nuvola Apps Service with GNOME Software</strong>, launch <em>GNOME Software</em>,
+    search for <em>Nuvola Apps Service</em> and finally click the <em>Install</em> button.
   </p>
+  <div class="gallery">
+    <div class="container-fluid text-center">
+      <div class="row">
+          <a href="/screenshots/nuvola/fedora_software_search_for_nuvola_service.png" class="col-sm-6">
+          <img src="/screenshots/nuvola/fedora_software_search_for_nuvola_service.thumb.png" class="img-thumbnail"
+               alt="Launch Ubuntu Software and search for '{{ nuvola.name }}'.">
+        </a>
+        <a href="/screenshots/nuvola/fedora_software_install_nuvola_service.png" class="col-sm-6">
+          <img src="/screenshots/nuvola/fedora_software_install_nuvola_service.thumb.png" class="img-thumbnail"
+               alt="Click the 'Install' button.">
+        </a>
+      </div>
+    </div>
+  </div>
   <p>
-    Run <code>dnf install xdg-desktop-portal-gtk xdg-desktop-portal</code> as root/sudo.
+    Alternatively, launch <a href="https://help.ubuntu.com/community/UsingTheTerminal">a Linux terminal emulator</a>,
+    type <code>flatpak install nuvola {{ nuvola.uid }}</code> and press the Enter key to install this package.
   </p>
 {% endmacro %}
+
+{% macro fedora_install_app_with_gnome_software(app, distro_spec, environments) %}
+  <h2>Install {{ app.name }}</h2>
+  <ol>
+    <li>
+      <a href="/nuvola{{ distro_spec }}/">Install Flatpak and add {{ nuvola.name }} repository</a>.
+    </li>
+    <li>
+      <p>
+        In order to <strong>install {{ app.name }} with GNOME Software</strong>, launch <em>GNOME Software</em>,
+        search for <em>{{ app.name }}</em> and finally click the <em>Install</em> button.
+      </p>
+      <div class="gallery">
+        <div class="container-fluid text-center">
+          <div class="row">
+            <a href="/screenshots/nuvola/fedora_software_search_for_nuvola_app.png" class="col-sm-6">
+              <img src="/screenshots/nuvola/fedora_software_search_for_nuvola_app.thumb.png" class="img-thumbnail"
+                   alt="Launch Ubuntu Software and search for '{{ app.name }}'.">
+            </a>
+            <a href="/screenshots/nuvola/fedora_software_install_nuvola_app.png" class="col-sm-6">
+              <img src="/screenshots/nuvola/fedora_software_install_nuvola_app.thumb.png" class="img-thumbnail"
+                   alt="Click the 'Install' button.">
+            </a>
+          </div>
+        </div>
+      </div>
+      <p>
+        Alternatively, launch a Linux terminal emulator,
+        type <code>flatpak install nuvola {{ app.uid }}</code> and press the Enter key to install this package.
+      </p>
+    </li>
+    <li>
+      Then <strong>log out and log in back</strong> to let your desktop environment ({{ environments }}) find out that
+      a new application has been installed. Otherwise, you may see mismatched application icons and other funny bugs.
+    </li>
+  </ol>
+  {{ generic_launch_app(app, environments) }}
+{% endmacro %}