Merge branch '3.10.0' of https://github.com/threefoldfoundation/www_threefold_io into 3.10.0

.github/workflows/action.yml

@@ -1,17 +0,0 @@
-# On every push this script is executed
-on: push
-name: Build and deploy GH Pages
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/development'
-    steps:
-      - name: checkout
-        uses: actions/checkout@v2
-      - name: build_and_deploy
-        uses: shalzz/zola-deploy-action@v0.14.1
-        env:
-          # Target branch
-          PAGES_BRANCH: gh-pages
-          # Provide personal access token
-          TOKEN: ${{ secrets.TOKEN }}

.github/workflows/tf_update.yml

@@ -1,26 +0,0 @@
-name: Threefold_io
-on: 
-  push:
-    branch: [ development ]
-
-jobs:
-  job_one:
-    name: Deploy
-    runs-on: ubuntu-latest
-    steps:
-    - name: pushing latest change on www2.threefold.io
-      uses: appleboy/ssh-action@master
-      with:
-        host: www2.threefold.io
-        username: root
-        key: ${{ secrets.TF_SECRET }}
-        port: 22
-        script: |
-          cd /opt/www_threefold_io/
-          git log -1
-          git restore config.toml
-          git restore static/css/index.css
-          git pull
-          sed -i "s/https:\/\/threefoldfoundation.github.io\/www_threefold_io/https:\/\/www2.threefold.io/g" config.toml
-          ./build.sh
-          

.github/workflows/update_www3.yml

@@ -12,13 +12,13 @@ jobs:
       uses: appleboy/ssh-action@master
       with:
         host: www3.threefold.io
-        username: root
+        username: webuser
         key: ${{ secrets.TF_SECRET }}
-        port: 22
+        port: 34022
         script: |
-          cd /opt/www3/www_threefold_io/
+          cd websites/www3/www_threefold_io/
           git log -1
           git restore .
           git pull
           sed -i "s/https:\/\/www.threefold.io/https:\/\/www3.threefold.io/g" config.toml
-          ./build.sh
+          bash build.sh

config.toml

@@ -1,6 +1,6 @@
 # The URL the site will be built for
 base_url = "https://www3.threefold.io"
-# Change this to your own URL! Please note this variable **must** be uncommented.
+# Change this to your own URL! Please note this variable **must** be uncommented .
 
 title = "ThreeFold"
 description="Our global digital backbone"
@@ -39,7 +39,7 @@ render_emoji = false
 
 # Whether external links are to be opened in a new tab
 # If this is true, a `rel="noopener"` will always automatically be added for security reasons
-# external_links_target_blank = false
+external_links_target_blank = false
 
 # Whether to set rel="nofollow" for all external links
 external_links_no_follow = true

content/about/index.md

@@ -74,7 +74,9 @@ We empower self-sovereignty and autonomy.
 
 <!-- section 3 -->
 
-{% row(style="center margin" bgPath="checkerboard1.jpg") %}
+<div class="bgtest">
+
+{% row(style="center margin") %}
 
 ![Image](KDS.png#mx-auto)
 
@@ -87,6 +89,7 @@ We empower self-sovereignty and autonomy.
 
 {% end %}
 
+</div>
 
 <!-- section 4-->
 
@@ -118,7 +121,9 @@ Equality, diversity, and inclusion are key to our vision of an Internet for ever
 
 <!-- section 5 -->
 
-{% row(style="center margin" bgPath="checkerboard2.jpg") %}
+<div class="bgtest2">
+
+{% row(style="center margin") %}
 
 ## Our Community is United by
 ### **Passion and Purpose**
@@ -130,6 +135,7 @@ Our mission is to realize the vision of a decentralized, self-sovereign digital
 
 {% end %}
 
+</div>
 
 <!-- section 6 -->
 
@@ -138,4 +144,24 @@ Our mission is to realize the vision of a decentralized, self-sovereign digital
 ### <i>**"Never doubt that a small group of thoughtful, committed citizens <br> can change the world; indeed, it's the only thing that ever has."**</i> 
 ### - Margaret Mead
 
-{% end %}
+{% end %}
+
+<style>
+
+.bgtest{
+
+  background-image: url("checkerboard.png");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.bgtest2{
+
+  background-image: url("checker4.png");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  
+  </style>

content/build/index.md

@@ -1,5 +1,5 @@
 ---
-title: "Buildnew"
+title: "Build"
 template: "page.html"
 insert_anchor_links: "left"
 ---

content/expand/index.md

@@ -1,5 +1,5 @@
 ---
-title: "Farmnew"
+title: "Expand"
 template: "page.html"
 insert_anchor_links: "left"
 ---

content/home/index.md

@@ -181,8 +181,11 @@ Join a group of people around the globe who believe the world needs ThreeFold an
 
 <!-- section 5 -->
 
+<div class="bgtest">
 
-{% row(style="center margin" bgPath="checkerboard1.jpg") %}
+{% row(style="center margin") %}
+
+<!-- bgPath="checkerboard1.jpg" -->
 
 <br>
 
@@ -195,6 +198,20 @@ We're open-source and decentralized, so we use a token called $TFT to fuel the m
 <button>[Dive into the Token](/token)</button>
 <button>[Buy $TFT](https://manual.grid.tf/getstarted/TF_Token/tft_toc.html)</button>
 
+</div>
+
+{% end %}
+
+<style>
+
+.bgtest{
+
+  background-image: url("home/checker4.png");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
 
 
-{% end %}
+}
+  
+  </style>

css/index.css

@@ -82,7 +82,7 @@ img[src*="#absolute"] {
 }
 
 h1 {
-  line-height: 4rem;
+  line-height: 3rem;
 }
 
 .nav p > a {

static/js/custom.js

@@ -1,123 +1,151 @@
-
 var displayedMenu = "";
 var hamburgerShown = false;
 let width = screen.width;
 var isMobile = width < 1024;
 
 function readingTime() {
-    let articles = document.querySelectorAll(".article");
+  let articles = document.querySelectorAll(".article");
-    let times = document.querySelectorAll(".time");
+  let times = document.querySelectorAll(".time");
-    const wpm = 225;
+  const wpm = 225;
-    let words;
+  let words;
-    for (var i = 0; i < articles.length; i++) {
+  for (var i = 0; i < articles.length; i++) {
-        words = articles[i].innerText.trim().split(/\s+/).length;
+    words = articles[i].innerText.trim().split(/\s+/).length;
-        let time = Math.ceil(words / wpm);
+    let time = Math.ceil(words / wpm);
-        times[i].innerText = `${time} minute read`
+    times[i].innerText = `${time} minute read`;
-    }
+  }
 }
-readingTime()
+readingTime();
 
 function toggleMenu(button) {
-    if (displayedMenu === button.id.split("-")[0]) {
+  if (displayedMenu === button.id.split("-")[0]) {
-        button.className = button.className.replace(" text-gray-800 bg-stone-200 sm:bg-transparent", " text-gray-900");
+    button.className = button.className.replace(
-        hideMenu(button.id.split("-")[0]);
+      " text-gray-800 bg-stone-200 sm:bg-transparent",
-        button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90")
+      " text-gray-900"
-        displayedMenu = "";
+    );
-    } else {
+    hideMenu(button.id.split("-")[0]);
-        showMenu(button.id.split("-")[0]);
+    button.lastElementChild.className = button.lastElementChild.className.replace(
-        button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0")
+      "rotate-0",
-        button.className = button.className.replace(" text-gray-900", " text-gray-800 bg-stone-200 sm:bg-transparent");
+      "-rotate-90"
-        displayedMenu = button.id.split("-")[0]
+    );
-    }
+    displayedMenu = "";
+  } else {
+    showMenu(button.id.split("-")[0]);
+    button.lastElementChild.className = button.lastElementChild.className.replace(
+      "-rotate-90",
+      "rotate-0"
+    );
+    button.className = button.className.replace(
+      " text-gray-900",
+      " text-gray-800 bg-stone-200 sm:bg-transparent"
+    );
+    displayedMenu = button.id.split("-")[0];
+  }
 }
 
 function handleClick(button) {
-    if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") {
+  if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") {
-        toggleHamburger()
+    toggleHamburger();
-    }
+  }
-    if (button.id.indexOf("menu") !== -1) {
+  if (button.id.indexOf("menu") !== -1) {
-        toggleMenu(button)
+    toggleMenu(button);
-    }
+  }
 }
 
 function toggleHamburger() {
-    if (hamburgerShown) {
+  if (hamburgerShown) {
-        hideHamburger();
+    hideHamburger();
-        hamburgerShown = false;
+    hamburgerShown = false;
-    } else {
+  } else {
-        showHamburger();
+    showHamburger();
-        hamburgerShown = true;
+    hamburgerShown = true;
-    }
+  }
 }
 
 function showMenu(menuName) {
-    var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
+  var menuId = menuName + (isMobile ? "-mobile-menu" : "-menu");
-    var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
+  var menuBtnId = menuName + (isMobile ? "-mobile-menu" : "-menu");
-    var menuElement = document.getElementById(menuId)
+  var menuElement = document.getElementById(menuId);
-    menuElement.className = menuElement.className.replace(" hidden", "");
+  menuElement.className = menuElement.className.replace(" hidden", "");
-    let children = document.querySelectorAll('.nav_menu')
+  let children = document.querySelectorAll(".nav_menu");
-    for (let i = 0; i < children.length; i++) {
+  for (let i = 0; i < children.length; i++) {
-        if (menuElement !== children[i]) {
+    if (menuElement !== children[i]) {
-            let btnId = `${children[i].id}-btn`;
+      let btnId = `${children[i].id}-btn`;
-            let btn = document.getElementById(btnId);
+      let btn = document.getElementById(btnId);
-            if (btn && !children[i].classList.contains('hidden')) {
+      if (btn && !children[i].classList.contains("hidden")) {
-                children[i].classList.add('hidden')
+        children[i].classList.add("hidden");
-                btn.lastElementChild.classList.replace("rotate-0", "-rotate-90")
+        btn.lastElementChild.classList.replace("rotate-0", "-rotate-90");
-            }
+      }
-        }
     }
-    setTimeout(function () {
+  }
-        menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0");
+  setTimeout(function () {
-    }, 10);
+    menuElement.className = menuElement.className.replace(
+      "duration-200 ease-in opacity-0 -translate-y-1",
+      "duration-150 ease-out opacity-1 -translate-y-0"
+    );
+  }, 10);
 }
 
 function hideMenu(menuName) {
-    var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
+  var menuId = menuName + (isMobile ? "-mobile-menu" : "-menu");
-    var menuElement = document.getElementById(menuId)
+  var menuElement = document.getElementById(menuId);
-    menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
+  menuElement.className = menuElement.className.replace(
-    setTimeout(function () {
+    "duration-150 ease-out opacity-1 -translate-y-0",
-        menuElement.className = menuElement.className + " hidden"
+    "duration-200 ease-in opacity-0 -translate-y-1"
-    }, 300);
+  );
+  setTimeout(function () {
+    menuElement.className = menuElement.className + " hidden";
+  }, 300);
 }
 
 function showHamburger() {
-    document.getElementById('header-container').className = "overflow-hidden";
+  document.getElementById("header-container").className = "overflow-hidden";
-    document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
+  document.getElementById("hamburger").className =
-    document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
+    "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
-    document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
+  document.getElementById("hamburger-btn").className =
+    "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
+  document.getElementById("close-hamburger-btn").className =
+    "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
 }
 
 function hideHamburger() {
-    document.getElementById('header-container').className = "";
+  document.getElementById("header-container").className = "";
-    document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
+  document.getElementById("hamburger").className =
-    document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
+    "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
-    document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
+  document.getElementById("hamburger-btn").className =
-    if (displayedMenu !== "") {
+    "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
-        hideMenu(displayedMenu);
+  document.getElementById("close-hamburger-btn").className =
-    }
+    "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
+  if (displayedMenu !== "") {
+    hideMenu(displayedMenu);
+  }
 }
 function toggleFilter() {
-    var filterMenu = document.getElementById("filter-menu")
+  var filterMenu = document.getElementById("filter-menu");
-    if (filterMenu.className.includes("hidden")) {
+  if (filterMenu.className.includes("hidden")) {
-        filterMenu.className = filterMenu.className.replace("hidden", " ")
+    filterMenu.className = filterMenu.className.replace("hidden", " ");
-    } else {
+  } else {
-        filterMenu.className = filterMenu.className + " hidden"
+    filterMenu.className = filterMenu.className + " hidden";
-    }
+  }
 }
 window.onload = function () {
-    let elements = document.getElementsByTagName("button");
+  let elements = document.getElementsByTagName("button");
-    let buttons = [...elements]
+  let buttons = [...elements];
 
-    buttons.forEach((button) => {
+  buttons.forEach((button) => {
-        button.addEventListener('click', function () {
+    button.addEventListener("click", function () {
-            handleClick(button)
+      handleClick(button);
-        });
+    });
-    })
+  });
-
+  if (document.getElementById("filter-btn")) {
-    document.getElementById("filter-btn").addEventListener('click', toggleFilter);
+    document
-    document.getElementById("mobile-learn-btn").addEventListener('click', toggleMenu);
+      .getElementById("filter-btn")
-}
+      .addEventListener("click", toggleFilter);
+    document
+      .getElementById("mobile-learn-btn")
+      .addEventListener("click", toggleMenu);
+  }
+};
 
 function openInNewTab(url) {
-    window.open(url, '_blank').focus()
+  window.open(url, "_blank").focus();
-}
+}

templates/partials/header.html

@@ -126,26 +126,7 @@
             </div>
         </div>
         </div>
-{% for header_item in header_items %}
-{% if not loop.first %}
-    {% set header_arr = header_item | split(pat="</li>") %}
-    {% set header_label = header_arr[0] %}
-    {% set header_menu = header_arr[1] %}
-    {% set menu_id = header_label ~ "-menu" | slugify %}
 
-<nav>
-    <div id="{{menu_id}}" class="nav_menu mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
-        <div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
-            <div id="menu" class="mx-8 lg:mx-10 xl:mx-10 px-6 sm:p-6 md:p-8">
-                {{header_menu | safe }}
-            </div>
-        </div>            
-        </div>
-    </nav>
-
-
-{% endif %}
-{% endfor %}
 
     
         <!--
@@ -161,7 +142,7 @@
     <div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
         <div>
             <div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
-                <div class="pb-6 sm:px-12 md:px-16 mt-6 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
+                <div class="pb-6 sm:px-12 md:px-16 mt-2 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
 
                     <nav class="flex flex-col justify-around pb-12">
                     {% for header_item in header_items %}
@@ -172,12 +153,17 @@
                             {% if '<a' in header_label %}
                                 {% set link_label = header_label | striptags %}
                                 {% set link_path = header_label | split(pat="%22") | safe%}
+                                {% set current = get_url(path=link_path[1]) ~ "/" %}
                                 {% if header_label is containing("http") %}
                                     {% if header_label is not containing("threefold") %}
                                     <a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                                         {{link_label}}
                                     </a>
                                     {% endif %}
+                                {% elif current == current_url %}
+                                    <a href="{{ get_url(path=link_path[1])}}" class="active text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                      {{link_label}}
+                                  </a>
                                 {% else %}
                                 <a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                                     {{link_label}}