Complete Redesign of the Installation Page

docs/index.md

@@ -1,5 +1,5 @@
 ---
-template: home.html
+template: home/home.html
 title: Xournal++
 ---
 {newline}

docs/installation/index.md

@@ -1,11 +1,9 @@
-# Please choose your OS
-
-Xournal++ is a free and open source program and is available on most of the desktop OSes. Please choose the operating system that you are using and follow the appropriate guide. If you are having trouble with your guide, you may want to visit the [Github page](https://github.com/xournalpp/xournalpp#Installing) or [report an issue](https://github.com/xournalpp/xournalpp.github.io/issues).
-
-<ul id="osContainer" class="downloadsContainer">
-<li><a class="xournalppButton" href="windows">Windows</a></li>
-<li><a class="xournalppButton" href="macos">MacOS</a></li>
-<li><a class="xournalppButton" href="linux">Linux</a></li>
-</ul>
-
-
+---
+template: installation/installation.html
+title: Installation
+hide:
+  - navigation
+  - toc
+---
+
+{{newline}}

docs/installation/linux.md

@@ -1,83 +1,9 @@
-# Linux installation
-
-## General information
-
-Xournal++ is a free and open source program and can be easily compiled from source, although for user convenience it is also distributed via precompiled binary. In case you want to compile xournalpp on your own you should follow the guide on the [github page](https://github.com/xournalpp/xournalpp/blob/master/readme/LinuxBuild.md). If you decide to do otherwise, then this guide is dedicated to that process.
-
-## Options for all/most distros
-
-The following options are available on most major Linux distros.
-
-<ul id="linuxDownloadsContainer" class="downloadsContainer">
-<li><a class="xournalppButton downloadButton" href="{{downloads.linux.appimage}}">AppImage</a></li>
-<li><a class="xournalppButton linkButton" href="{{downloads.linux.flatpak}}">FlatPak</a></li>
-<li><a class="xournalppButton linkButton" href="{{downloads.linux.snap}}">Snap Package</a></li>
-<li><a class="xournalppButton linkButton" href="{{downloads.allVersions}}">Other versions</a></li>
-<li><a class="xournalppButton linkButton" href="{{downloads.nightly}}">Nightly (latest unstable, including nightly AppImage)</a></li>
-<li><a class="xournalppButton linkButton" href="#options-for-specific-distros-potentially-preferable">Or use distro specific method</a></li>
-</ul>
-
-## Options for specific distros (potentially preferable)
-
-On _specific Linux distros_ you have the following extra options:
-
-### Ubuntu and derivatives
-
-* Install the latest *unstable* nightly release from the following ppa
-
-        sudo add-apt-repository ppa:andreasbutti/xournalpp-master
-        sudo apt update
-        sudo apt install xournalpp
-
-    which you can easily upgrade via `sudo apt update && sudo apt upgrade`
-
-* Install the latest *stable* release from the following *unofficial* ppa
-
-        sudo add-apt-repository ppa:apandada1/xournalpp-stable
-        sudo apt update
-        sudo apt install xournalpp
-
-* Or:
-<ul id="ubuntuContainer" class="downloadsContainer">
-<li><a class="xournalppButton linkButton" href="{{downloads.linux.ubuntuStable}}">Download stable</a></li>
-<li><a class="xournalppButton linkButton" href="{{downloads.nightly}}">Download nightly (latest unstable) version</a></li>
-<li><a class="xournalppButton linkButton" href="{{downloads.allVersions}}">Other versions</a></li>
-</ul>
-
-### Debian Buster
-
-<ul id="debianContainer" class="downloadsContainer">
-<li><a class="xournalppButton linkButton" href="{{downloads.linux.debianStable}}">Download stable</a></li>
-<li><a class="xournalppButton linkButton" href="{{downloads.nightly}}">Download nightly (latest unstable) version</a></li>
-<li><a class="xournalppButton linkButton" href="{{downloads.allVersions}}">Other versions</a></li>
-</ul>
-
-### Fedora
-
-Install the latest stable release via
-
-    dnf install xournalpp
-
-### openSuse
-
-Install the latest stable release via
-
-    zypper in xournalpp
-
-### Solus
-
-Install the latest stable release via
-
-    sudo eopkg it xournalpp
-
-### Arch
-
-Install the latest stable release from the _community_ repository via
-
-    pacman -S xournalpp 
-
-### NixOS/Nix
-
-Install the latest stable release via
-
-    nix-env -iA nixpkgs.xournalpp
+---
+template: installation/linux.html
+title: Linux Installation
+hide:
+  - navigation
+  - toc
+---
+
+{{newline}}

docs/installation/macos.md

@@ -1,21 +1,9 @@
-# MacOS installation
-
-## General information
-
-Xournal++ is a free and open source program and can be easily compiled from source, although for user convenience it is also distributed via precompiled binary. In case you want to compile xournalpp on your own you should follow the guide on the [github page](https://github.com/xournalpp/xournalpp/blob/master/readme/MacBuild.md). If you decide to do otherwise, then this guide is dedicated to that process.
-
-## Downloading the program
-
-<ul id="macosDownloadsContainer" class="downloadsContainer">
-<li><a class="xournalppButton downloadButton" href="{{downloads.macos.stable}}">Stable (Recommended)</a></li>
-<li><a class="xournalppButton linkButton" href="{{downloads.nightly}}">Nightly (latest unstable)</a></li>
-<li><a class="xournalppButton linkButton" href="{{downloads.allVersions}}">Other versions</a></li>
-</ul>
-
-In case of downloading a different version than the stable one, remember to download the `macos` version.
-
-## Installing program
-
-> After installation, it would be nice if you could improve this guide
-
-Just download the archive and run the unzipped executable.
+---
+template: installation/macos.html
+title: MacOS Installation
+hide:
+  - navigation
+  - toc
+---
+
+{{newline}}

docs/installation/windows.md

@@ -1,25 +1,9 @@
-# Windows installation 
-
-## General information
-
-Xournal++ is a free and open source program and can be easily compiled from source, although for user convenience it is also distributed via precompiled binary (in .exe form). In case you want to compile xournalpp on your own you should follow the guide on the [github page](https://github.com/xournalpp/xournalpp/blob/master/readme/WindowsBuild.md). If you decide to do otherwise, then this guide is dedicated to that process.
-
-## Downloading the program
-
-<ul id="windowsDownloadsContainer" class="downloadsContainer">
-<li><a class="xournalppButton downloadButton" href="{{downloads.windows.stable}}">Stable (Recommended)</a></li>
-<li><a class="xournalppButton linkButton" href="{{downloads.nightly}}">Nightly (latest unstable)</a></li>
-<li><a class="xournalppButton linkButton" href="{{downloads.allVersions}}">Other versions</a></li>
-</ul>
-
-In case of downloading a different version than the stable one, remember to download the `windows` version.
-
-## Installing the program
-
-Installing Xournalpp is really easy: 
-
-1. Unzip archive which should be named something like `xournalpp-{version}-windows.zip`. 
-2. Run the installation executable (`xournalpp-{version}-windows.exe`).
-3. Follow the installation steps.
-4. Success !
-
+---
+template: installation/windows.html
+title: Windows Installation
+hide:
+  - navigation
+  - toc
+---
+
+{{newline}}

mkdocs.yml

@@ -31,7 +31,7 @@ nav:
 #Theme config
 theme: 
   name: material
-  custom_dir: docs/overrides
+  custom_dir: overrides
   favicon: img/favicon.ico
   logo: img/favicon.ico
   icon:
@@ -51,23 +51,9 @@ extra_css:
 #Enable macros
 plugins:
   - search
-  - macros    
+  - macros   
 
 extra:
-  downloads:
-    default: "https://github.com/xournalpp/xournalpp/releases"
-    allVersions: "https://github.com/xournalpp/xournalpp/tags"
-    nightly: "https://github.com/xournalpp/xournalpp/releases/tag/nightly"
-    windows:
-      stable: "https://github.com/xournalpp/xournalpp/releases/download/1.1.0/xournalpp-1.1.0-windows.zip"
-    macos:
-      stable: "https://github.com/xournalpp/xournalpp/releases/download/1.1.0/xournalpp-1.1.0-macos.zip"
-    linux:
-      flatpak: "https://flathub.org/apps/details/com.github.xournalpp.xournalpp"
-      appimage: "https://github.com/xournalpp/xournalpp/releases/download/1.1.0/xournalpp-1.1.0-x86_64.AppImage"
-      snap: "https://snapcraft.io/xournalpp"
-      debianStable: "https://github.com/xournalpp/xournalpp/releases/tag/1.1.0"
-      ubuntuStable: "https://github.com/xournalpp/xournalpp/releases/tag/1.1.0"
   version:
     latest_stable: "1.1.0"
     latest_unstable: "1.1.0+dev"
@@ -76,5 +62,6 @@ extra:
 markdown_extensions:
   - pymdownx.highlight
   - pymdownx.superfences
+  - pymdownx.tabbed
   - toc:
       permalink: true

overrides/home/feature-showcase-content.md

@@ -0,0 +1,105 @@
+{% set feature_list = 
+    [
+        ({
+        "title": "Handwrite your notes",
+        "description_list":
+            [
+                "Support for pressure-sensitive stylus and drawing tablets (Wacom, Huion, XP-Pen, etc.)",
+                "Robust and customizable pen, highlighter and eraser tools, allowing you to write how you want to write"
+            ], 
+        "documentation_link": "#",
+        "demonstration_video_link": "#", 
+        "image_filename": "Handwritten.png"
+        }),
+
+        ({
+        "title": "Keep your work organized",
+        "description_list":
+            [
+                "Use layers to make complex notes that are still pleasant to work with",
+                "Keep track of the notes by using page previews"
+            ], 
+        "documentation_link": "#",
+        "demonstration_video_link": "#", 
+        "image_filename": "Layers.gif"
+        }),
+
+        ({
+        "title": "Enhance and accelerate your note-taking",
+        "description_list":
+            [
+                "Add images and create various shapes, from circles to splines to axis",
+                "Snap objects to rectangular grid or degrees of rotation"
+            ], 
+        "documentation_link": "#",
+        "demonstration_video_link": "#",
+        "image_filename": "Create Shape.png"
+        }),
+
+        ({
+        "title": "Get scientific",
+        "description_list":
+            [
+                "Create anything from differential equations to electrical circuits or the structural formula of molecules using our built-in LaTeX editor"
+            ],
+        "documentation_link": "#",
+        "demonstration_video_link": "#",
+        "image_filename": "Latex.png"
+        }),
+
+        ({
+        "title": "Your notes, your way",
+        "description_list":
+            [
+                "Customize your toolbar to create a new layout, tailor-made for you",
+                "Use a plugin or create your own via the Lua programming language"
+
+            ],
+        "documentation_link": "#",
+        "demonstration_video_link": "#",
+        "image_filename": "Customize Toolbars.png"
+        }),
+
+        ({
+        "title": "Explain every stroke",
+        "description_list":
+            [
+                "Record audio while you write and insert the recording to any object in your note",
+                "Listen to the recorded audio with the 'play object' tool"
+
+            ],
+        "documentation_link": "#",
+        "demonstration_video_link": "#", 
+        "image_filename": "Audio Note.png"
+        }),
+    ] 
+%}
+
+{% macro feature_showcase(feature_showcase_properties, chirality) -%}
+    <div class="feature feature-{{chirality}}">
+        <div class="feature-text">
+            <h2>{{ feature_showcase_properties["title"] }}</h2>
+            <div class="feature-description-container">
+            {% for description in feature_showcase_properties["description_list"] %}
+                <div class="feature-description">
+                    <p class="bullet-point">|</p><p>{{description}}</p>
+                </div>
+            {% endfor %}
+            </div>
+            <div class="feature-link">
+                <a href= {{ feature_showcase_properties['documentation_link'] }} class="documentation-link">Learn more</a>
+                <a href= {{ feature_showcase_properties['demonstration_video_link'] }} class="video-link">Watch demonstration video</a>
+            </div>
+        </div>
+        <img src= "/img/{{ feature_showcase_properties['image_filename'] }}">
+	</div>
+{%- endmacro %}
+
+{% for feature_showcase_properties in feature_list %}
+    {% if loop.index%2 == 0 %}
+        {{ feature_showcase(feature_showcase_properties, "left") }}
+    {% else %}
+        {{ feature_showcase(feature_showcase_properties, "right") }}
+    {% endif %}
+{% endfor %}
+

docs/overrides/home.css → overrides/home/home.css

@@ -47,7 +47,7 @@
 }
 
 .title {
-	margin-bottom: 40px;
+	margin-bottom: 30px;
 }
 
 .title h1 {
@@ -64,7 +64,7 @@
 .Xournal p {
 	font-weight: medium;
 	font-size: 24px;
-	margin-bottom: 20px;
+	margin-bottom: 50px;
 }
 
 .Xournal .Xournal-link {

docs/overrides/home.html → overrides/home/home.html

@@ -2,11 +2,13 @@
 {% block tabs %}
 {{ super() }}
 
+{% block extrahead %}
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="home.css">
-<link rel="stylesheet" href="home_responsive.css">
+<link rel="stylesheet" href="{{base_url}}/home/home.css">
+<link rel="stylesheet" href="{{base_url}}/home/home_responsive.css">
+{% endblock %}
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
 
 <style>
@@ -27,7 +29,7 @@ <h2>Available on MacOS, Windows, and Linux</h2>
 	</div>
 
 	<div class="feature-list">
-		{% include 'feature-showcase-content.md' %}
+		{% include 'home/feature-showcase-content.md' %}
 	</div>
 	<div class="download-hyperlink bottom-button">
 		<a href="{{ 'installation/' | url }}">Get it now</a>