Add documentation page

_config.yml

@@ -9,9 +9,6 @@ github_username:  federico-terzi
 permalink: /blog/:title/
 highlighter: rouge
 
-collections:
-  portfolios:
-
 # Build settings
 markdown: kramdown
 theme: minima
@@ -19,7 +16,7 @@ plugins:
   - jekyll-feed
   - jekyll-sitemap
   - jekyll-seo-tag
-
+  
 social:
   name: Federico Terzi
   links:

_data/docs.yml

@@ -0,0 +1,6 @@
+- name: Installation
+  link: /install/
+  desc: This section will cover the installation process on Windows, macOS and Linux.
+- name: Basic Usage
+  link: /docs/basic-usage/
+  desc: In this section we will cover the basics of espanso to get you started immediately.

_layouts/default.html

@@ -66,6 +66,7 @@ If you want to see more interesting projects, visit my website: https://federico
     <script src="/assets/js/popper.min.js"></script>
     <script src="/assets/js/bootstrap.min.js"></script>
     <script async defer src="https://buttons.github.io/buttons.js"></script>
+    <script src="/assets/js/script.js"></script>
 
     {% if page.showParticles %}
     <script src="/assets/js/particles.min.js"></script>

_layouts/docs.html

@@ -0,0 +1,78 @@
+---
+layout: default
+hideTitle: true
+---
+<div class="row docs">
+    <div class="col-md-2 d-none d-md-block">
+    </div>
+    <div class="col-md-10">
+        <h2 class="mt-4 mb-4">{{page.title}}</h2>
+    </div>
+</div>
+<div class="row docs">
+    <div class="col-md-2 d-none d-md-block">
+        <ul class="nav flex-column text-right index" id="index">
+        </ul>
+    </div>
+    <div class="col-md-10" id="contentBox">
+        {{ content }}
+    </div>
+<script>
+
+function loadSections() {
+    var headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
+    var output = [];
+    for (var i = 0; i<headings.length; i++) {
+        var obj = {};
+        obj.element = headings[i];
+        obj.text = headings[i].innerText;
+        obj.id = headings[i].id;
+        if (headings[i].tagName === "H3") {
+            output.push(obj);
+        }
+    }
+    return output;
+}
+
+function loadIndex(sections) {
+    var index = document.getElementById("index");
+    for (var i = 0; i<sections.length; i++) {
+        var li = document.createElement("li");
+        var linkNode = document.createElement("a");
+        linkNode.classList.add("nav-link");
+        linkNode.appendChild(document.createTextNode(sections[i].text));
+        linkNode.href = "#"+sections[i].id;
+        li.appendChild(linkNode);
+        li.classList.add("nav-item");
+        index.appendChild(li);
+        sections[i].linkElement = li;
+    }
+}
+
+function updateIndexSelect() {
+    for (var i = 0; i<sections.length; i++) {
+        sections[i].linkElement.classList.remove("active");
+    }
+
+    for (var i = 0; i<sections.length; i++) {
+        if (isVisible(sections[i].element)) {
+            sections[i].linkElement.classList.add("active");
+            break;
+        }
+    }
+}
+
+var sections = loadSections();
+loadIndex(sections);
+
+// Scroll handler for index hightlight
+window.addEventListener("scroll", function() {
+    updateIndexSelect();
+});
+
+window.addEventListener("load", function() {
+    updateIndexSelect();
+});
+
+</script>
+</div>

_sass/_docs.scss

@@ -0,0 +1,47 @@
+.docs {
+    text-align: justify;
+
+    .index {
+        position: -webkit-sticky;
+        position: sticky;
+        top: 20px;
+
+        li {
+            margin-bottom: 5px;
+        }
+        a {
+            color: $blackColor;
+            border-right-style: solid;
+        }
+
+        .active {
+            a {
+                color: $mainColor;
+            }
+        }
+    }
+
+    h3, h4, h5 {
+        @media screen and (max-width: $screen-phone) {
+            text-align: center;
+        }
+    }
+
+    .card-body {
+        h3 {
+            margin: 0 0 15px 0;
+        }
+    }
+}
+
+.doc-col {
+    padding: 10px;
+
+    .card-link {
+        color: $blackColor;
+    }
+
+    .card:hover {
+        border-color: $mainColor;
+    }
+}

_sass/main.scss

@@ -6,4 +6,5 @@
 @import '_syntax';
 @import '_install';
 @import '_donate';
-@import '_footer';
+@import '_footer';
+@import '_docs';

assets/js/script.js

@@ -0,0 +1,16 @@
+function isVisible(element) {
+    var coordinates = element.getBoundingClientRect();
+
+    if (
+    coordinates.right > window.innerWidth ||
+    coordinates.bottom > window.innerHeight
+    ) {
+    return false;
+    }
+
+    if (coordinates.top < 0 || coordinates.left < 0) {
+    return false;
+    }
+
+    return true;
+}

docs.html

@@ -3,4 +3,24 @@ title: Documentation
 layout: default
 showParticles: True
 ---
-TODO
+{% for item in site.data.docs %}
+    {% assign remainder = forloop.index0 | modulo: 4 %}
+    {% if remainder == 0 %}
+        {% if forloop.index0 != 0 %}
+            </div>
+        {% endif %}
+
+        <div class="row">
+    {% endif %}
+    <div class="doc-col col-md-3">
+        <a href="{{item.link}}" class="card-link">
+            <div class="card docs">
+                <div class="card-body">
+                    <h3 class="card-title">{{item.name}}</h5>
+                    <p class="card-text">{{item.desc}}</p>
+                </div>
+            </div>
+        </a>
+    </div>
+{% endfor %}
+</div>

docs/basic-usage.md

@@ -0,0 +1,7 @@
+---
+title: Basic Usage
+layout: docs
+---
+In this section we will cover the basics of espanso to get you started immediately.
+
+TODO

install/linux.md

@@ -1,6 +1,6 @@
 ---
 title: Install on Linux
-layout: default
+layout: docs
 ---
 The linux installation depends on the distro you are using. 
 Espanso has been tested in the following distros, but you shouldn't 
@@ -9,7 +9,7 @@ have many problems making it work on others.
 * [Ubuntu/Debian](#installing-on-ubuntu--debian)
 * [Manjaro/Arch](#installing-on-manjaro--arch)
 
-#### Installing on Ubuntu / Debian
+### Installing on Ubuntu / Debian
 
 Espanso depends upon the `X11 Record Extension`, the `xdo library` and the `xclip` command, 
 so you will need to install those first with the following commands:
@@ -38,7 +38,7 @@ espanso start
 
 If you now type `:espanso` in any text field, you should see "Hi there!" appear! 
 
-#### Installing on Manjaro / Arch
+### Installing on Manjaro / Arch
 
 Espanso depends upon the `X11 Record Extension`, the `xdo library` and the `xclip` command, 
 so you will need to install those first with the following commands:

install/mac.md

@@ -1,11 +1,11 @@
 ---
 title: Install on macOS
-layout: default
+layout: docs
 ---
 The easiest way to install espanso on macOS is by using the [Homebrew](https://brew.sh/)
 package manager, but you can also do it manually.
 
-#### Using Homebrew
+### Using Homebrew
 
 The first thing to do is to add the official espanso *tap* to Homebrew with
 the following command:
@@ -28,7 +28,7 @@ espanso --version
 
 At this point, you have to [Enable Accessibility](#enabling-accessibility) to use espanso.
 
-#### Enabling Accessibility
+### Enabling Accessibility
 
 Because espanso uses the macOS [Accessibility API](https://developer.apple.com/library/archive/documentation/Accessibility/Conceptual/AccessibilityMacOSX/)
 to work, you need to authorize it using the following procedure:

install/win.md

@@ -1,15 +1,18 @@
 ---
 title: Install on Windows
-layout: default
+layout: docs
 ---
-The installation on Windows is straightforward, download the installer by
+The easiest way to install espanso on Windows is by using the official installer.
-clicking on the button below and follow the instructions.
 
-<div class="text-center">
+### Using the Installer
+
+Download the installer by clicking on the button below and follow the instructions.
+
+<div class="">
 <a class="btn btn-lg mybtn" href="https://github.com/federico-terzi/espanso/releases/latest/download/espanso-win-installer.exe" role="button">Download the Installer</a>
 </div>
 
-#### Problems you may experience
+### Problems you may experience
 
 Because espanso is not digitally signed, you may experience a warning from
 Windows Smartscreen. In this case, just click on "More info" (1) and then