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

static/js/custom.js

@@ -142,8 +142,10 @@ window.onload = function () {
     });
   });
 
-  document.getElementById("filter-btn").addEventListener('click', toggleFilter);
+  document.getElementById("filter-btn").addEventListener("click", toggleFilter);
-  document.getElementById("mobile-learn-btn").addEventListener('click', toggleMenu);
+  document
+    .getElementById("mobile-learn-btn")
+    .addEventListener("click", toggleMenu);
 };
 
 function openInNewTab(url) {
@@ -162,21 +164,12 @@ function readingTime() {
   }
 }
 
-const urls = [
-  "https://gridproxy.grid.tf/stats?status=up",
-  "https://gridproxy.dev.grid.tf/stats?status=up",
-  "https://gridproxy.test.grid.tf/stats?status=up",
-  "https://gridproxy.bknd1.ninja.tf/stats?status=standby", // will change to mainnet when release
-  "https://gridproxy.dev.grid.tf/stats?status=standby",
-  "https://gridproxy.test.grid.tf/stats?status=standby",
-];
-
 async function getStats() {
   try {
-    const stats = await Promise.all(
+    const stats = await fetch(
-      urls.map((url) => fetch(url).then((resp) => resp.json()))
+      "https://stats.grid.tf/api/stats-summary"
-    );
+    ).then((res) => res.json());
-    return mergeStatsData(stats);
+    return formatStatsData(stats);
   } catch (error) {
     throw new Error(
       `Failed to retrieve data from network statistics: ${error}`
@@ -184,62 +177,17 @@ async function getStats() {
   }
 }
 
-function mergeStatsData(stats) {
+function formatStatsData(stats) {
-  const res = stats[0];
+  let items = document.querySelector(".items");
-  for (let i = 1; i < stats.length; i++) {
+  items.classList.remove("animate-pulse");
-    res.nodes += stats[i].nodes;
+  document.getElementById("capacity").innerHTML = stats.capacity;
-    res.totalCru += stats[i].totalCru;
+  document.getElementById("nodes").innerHTML = stats.nodes;
-    res.totalHru += stats[i].totalHru;
+  document.getElementById("countries").innerHTML = stats.countries;
-    res.totalSru += stats[i].totalSru;
+  document.getElementById("cores").innerHTML = stats.cores
-    res.nodesDistribution = mergeNodeDistribution([
-      res.nodesDistribution,
-      stats[i].nodesDistribution,
-    ]);
-    res.countries = Object.keys(res.nodesDistribution).length;
-  }
-  let capacity = toTeraOrGiga(res.totalHru + res.totalSru);
-  document.getElementById("capacity").innerHTML = capacity;
-  document.getElementById("nodes").innerHTML = res.nodes;
-  document.getElementById("countries").innerHTML = res.countries;
-  document.getElementById("cores").innerHTML = res.totalCru
     .toString()
     .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
 
-function mergeNodeDistribution(stats) {
-  const keys = new Set(stats.map((obj) => Object.keys(obj)).flat());
-
-  return Array.from(keys).reduce((res, key) => {
-    res[key] = 0;
-    stats.forEach((country) => {
-      res[key] += country[key] ?? 0;
-    });
-    return res;
-  }, {});
-}
-
-function toTeraOrGiga(value) {
-  const giga = 1024 ** 3;
-
-  if (!value) return "0";
-
-  const val = +value;
-  if (val === 0 || isNaN(val)) return "0";
-
-  if (val < giga) return val.toString();
-
-  let gb = val / giga;
-
-  if (gb < 1024) return `${gb.toFixed(2)} GB`;
-
-  gb = gb / 1024;
-
-  if (gb < 1024) return `${gb.toFixed(2)} TB`;
-
-  gb = gb / 1024;
-  return `${gb.toFixed(2)} PB`;
-}
-
 readingTime();
 getStats();
 document.getElementById("year").innerHTML = new Date().getFullYear();

templates/partials/personCard.html

@@ -1,3 +1,4 @@
+{% if page.title != 'ThreeFold Community' %}
 <div class="flex flex-col px-0 sm:px-4 pb-2">
     <a href="{{page.permalink}}" class="border-0 text-gray-700 hover:!text-gray-700 font-normal text-left">
         {% set url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
@@ -23,4 +24,4 @@
         </div>
     </a>
 </div>
-
+{% endif %}

templates/partials/person_card.html

@@ -1,3 +1,4 @@
+{% if page.title != 'ThreeFold Community' %}
 <div class="flex flex-col px-0 sm:px-4 pb-2">
     <a href="{{page.permalink}}" class="border-0 text-gray-700 hover:!text-gray-700 font-normal text-left">
         {% set url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
@@ -23,4 +24,5 @@
         </div>
     </a>
 </div>
+{%endif%}
 

templates/shortcodes/grid_stats.html

@@ -3,9 +3,9 @@
     <div class="relative lg:max-w-6xl mx-auto">
         <div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
             {{body | markdown | safe }}
-            <div class="my-10 grid lg:grid-cols-4 lg:gap-8">
+            <div class="items my-10 grid lg:grid-cols-4 lg:gap-8 animate-pulse">
                 <!-- capacity -->
-                <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
                     <img
                         class="mx-auto p-4"
                         src="images/V3-08.png"
@@ -16,7 +16,7 @@
                     <span class="block text-lg mt-4 font-normal capitalize">capacity</span>
                 </div>
                 <!-- Nodes -->
-                <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
                     <img
                         class="mx-auto p-4"
                         src="images/V3-09.png"
@@ -27,7 +27,7 @@
                     <span class="block text-lg mt-4 font-normal capitalize">nodes</span>
                 </div>
                 <!-- countries -->
-                <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
                     <img
                         class="mx-auto p-4"
                         src="images/V3-10.png"
@@ -38,7 +38,7 @@
                     <span class="block text-lg mt-4 font-normal capitalize">countries</span>
                 </div>
                 <!-- cores -->
-                <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
                     <img
                         class="mx-auto p-4"
                         src="images/V3-11.png"