Merge pull request #324 from threefoldfoundation/development

New blog post: Dunia Yetu

.github/workflows/tf_update_dev.yml

@@ -12,11 +12,11 @@ jobs:
       uses: appleboy/ssh-action@master
       with:
         host: www2.threefold.io
-        username: root
+        username: webuser
         key: ${{ secrets.TF_SECRET }}
-        port: 22
+        port: 34022
         script: |
-          cd /opt/www_threefold_io/
+          cd websites/www2/www_threefold_io/
           git log -1
           git fetch
           git reset --hard origin/development

content/blog/dunia_yetu/index.md

@@ -0,0 +1,55 @@
+---
+id: dunia_yetu
+title: "Dunia Yetu Formally Announced in Dar Es Salaam"
+image_caption: Dunia Yetu
+description: Dunia Yetu (Our World) is a collaborative and co-owned movement to redefine the digital landscape in Tanzania and East Africa, empower coders spur economic development, and build a self-reliant sovereign digital ecosystem for a better digital future. 
+date: 2024-01-26
+taxonomies:
+    people: [sam_taggart]
+    tags: [peer_to_peer,event,partnership]
+    categories: [foundation]
+extra:
+    imgPath: dunia_yetu.png
+---
+
+Last Friday, we were pleased to formally and publicly announce Dunia Yetu,  together with Dr. Nkundwe M. Mwasaga, the Director General of Tanzania’s ICT Commission, and Arthur Brock, co-founder of Holochain. The announcement was made in front of an audience of representatives from the Tanzanian Government and the tech community of Dar Es Salaam. 
+
+<br>
+
+Ideated in [November 2023](https://forum.threefold.io/t/introducing-dunia-yetu/4147) between ThreeFold and a group of developers and tech innovators from Dar Es Salaam, Dunia Yetu (Our World) is a collaborative and co-owned movement to redefine the digital landscape in Tanzania and East Africa, empower coders, spur economic development, and build a self-reliant sovereign digital ecosystem for a better digital future.
+
+<br>
+
+Dunia Yetu will introduce coding academies to empower startups and entrepreneurs in Dar Es Salaam and beyond to build the apps of the future – faster, more secure, more reliable, and build on top of local infrastructure deployed in Tanzania.
+
+<br>
+
+"We believe young people in this country have all the talent to build together their digital future and we want to empower them as much as we can," said Kristof.
+
+<br>
+
+Further, alongside the ICT Commission, we will create a network of distributed innovation hubs providing space for events, coding academy workshops and collaborative projects. These innovation hubs will host cutting-edge technology that can support a wide array of social interactions by building new apps for the community.
+
+<br>
+
+“We are building these centers, starting with six regions in Tanzania, to ensure that we can create an environment where talented young people even in the country’s rural areas can provide their innovation,” said Dr. Mwasaga of the ICT Commission.
+
+<br>
+
+Said Arthur Brock, co-founder of [Holochain](https://holochain.org), "We have been building our framework for decentralized applications for years to support new social applications across the globe, and we are delighted to share as much of our knowledge as we can to coders and developers of Tanzania who want to build a new digital future."
+
+<br>
+
+Some of the first Tanzanian community projects involved in Dunia Yetu include [Chatafisha](https://chatafisha.com/), led by Victor Muhagachi and David Machuche, which aims to regenerate marginalized communities through innovative technologies, and [Sarufi](https://sarufi.io/), led by Kalebu Gwalugano, which builds developer-centric conversational AI for African languages. Other initial support has come from Dar Es Salaam tech community leaders Melch Leonard, Justine Peterson, and Veronica Michael.
+
+<br>
+
+In fostering Dunia Yetu, we together aim to catalyze a wave of transformative innovation throughout East Africa, starting with Tanzania. This collaborative venture not only aligns with the visionary leadership of H.E. Dr. Samia Suluhu Hassan, President of Tanzania, but also signifies a powerful commitment from the ICT Commission, ThreeFold, Holochain, and the vibrant tech community of Dar Es Salaam and Tanzania at large.
+
+<br>
+
+As we embark on this journey, we invite stakeholders, partners, and enthusiasts to join hands with us in shaping a digital ecosystem that propels Tanzania and East Africa towards a brighter, tech-driven future. Together, let us chart new horizons and amplify the impact of Dunia Yetu across the realms of technology, entrepreneurship, and community development.
+
+<br>
+
+*If you are interested in staying informed about Dunia Yetu or would like to participate, we welcome you to [our community group](https://chat.whatsapp.com/DAedmvshxCD850WjJ3mUn8). Next steps to follow.*

start.sh

@@ -1,4 +1,3 @@
-
 set +ex
 # Check if tailwindcss is already installed
 if command -v tailwindcss &> /dev/null; then
@@ -25,10 +24,7 @@ else
     mv $ASSET /usr/local/bin/tailwindcss
     popd
 fi
-
-
-source env.sh
-
+source ./env.sh
 # initialized and configures tailwind if not configured
 if [ ! -f "tailwind.config.js" ]
 then
@@ -39,21 +35,14 @@ fi
 # compiles tailwind css & launches locally
 # rm -rf public static/css
 # ./tailwindcss -i css/index.css -o ./static/css/index.css --watch
-
 # zola serve &
-
 # compiles tailwind css for prod & builds project
 # ./tailwindcss -i css/index.css -o ./static/css/index.css --minify
 # zola build
-
 # # kills zola and tw bg processes on interrupt
 # trap 'kill $(jobs -p); exit 1' INT
 # wait
-
-
 rm -rf public static/css
 tailwindcss -i css/index.css -o ./static/css/index.css --minify
-
 zola build -o ~/Documents/web/$NAME/
-
 open ~/Documents/web/$NAME/index.html

static/js/custom.js

@@ -158,5 +158,85 @@ function readingTime() {
     times[i].innerText = `${time} minute read`;
   }
 }
+
+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.grid.tf/stats?status=standby",
+  "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(
+      urls.map((url) => fetch(url).then((resp) => resp.json()))
+    );
+    return mergeStatsData(stats);
+  } catch (error) {
+    throw new Error(
+      `Failed to retrieve data from network statistics: ${error}`
+    );
+  }
+}
+
+function mergeStatsData(stats) {
+  const res = stats[0];
+  for (let i = 1; i < stats.length; i++) {
+    res.nodes += stats[i].nodes;
+    res.totalCru += stats[i].totalCru;
+    res.totalHru += stats[i].totalHru;
+    res.totalSru += stats[i].totalSru;
+    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/shortcodes/grid_stats.html

@@ -1,70 +1,63 @@
 {% set styles = "background-image: url('images/V3.png');" %}
-{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
-{% if data %}
-{% set capacity = (data.totalHru + data.totalSru) / 1024 / 1024 / 1024 / 1024 / 1024 %}
-{% set nodes = data.nodes %}
-  {% set countries = data.countries %}
-  {% set cores = data.totalCru %}
-{% endif %}
-
-{% if data %}
 <section class="px-2 h-auto bg-center lg:py-28 p-12 bg-cover bg-no-repeat" style="{{styles}}">
     <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">
-                
-
                 <!-- capacity -->
-            <div class="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" width="150" alt="">
-                <div class="leading-none font-extrabold text-3xl">
-                    {{ capacity | round(precision=2) }}PB
+                <div class="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"
+                        width="150"
+                        alt=""
+                    >
+                    <div id="capacity" class="leading-none font-extrabold text-3xl"></div>
                     <span class="block text-lg mt-4 font-normal capitalize">capacity</span>
                 </div>
-            </div>
-                
-
                 <!-- Nodes -->
-            <div class="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" width="150" alt="">
-                <div class="leading-none font-extrabold text-3xl">
-                    {{ nodes }}
+                <div class="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"
+                        width="150"
+                        alt=""
+                    >
+                    <div id="nodes" class="leading-none font-extrabold text-3xl"></div>
                     <span class="block text-lg mt-4 font-normal capitalize">nodes</span>
                 </div>
-            </div>
-                
-                
-
                 <!-- countries -->
-            <div class="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" width="150" alt="">
-                <div class="leading-none font-extrabold text-3xl">
-                    {{ countries }}
+                <div class="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"
+                        width="150"
+                        alt=""
+                    >
+                    <div id="countries" class="leading-none font-extrabold text-3xl"></div>
                     <span class="block text-lg mt-4 font-normal capitalize">countries</span>
                 </div>
-            </div>
-
-              <!-- cores -->
-            <div class="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" width="150" alt="">
-                <div class="leading-none font-extrabold text-3xl">
-                {{ cores | num_format }}
-                <span class="block text-lg mt-4 font-normal capitalize">cores</span>
+                <!-- cores -->
+                <div class="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"
+                        width="150"
+                        alt=""
+                    >
+                    <div id="cores" class="leading-none font-extrabold text-3xl"></div>
+                    <span class="block text-lg mt-4 font-normal capitalize">cores</span>
                 </div>
             </div>
-
- 
-            </div>
-            
-
-            <button class="my-8"><a href="https://dashboard.grid.tf/explorer/statistics" target="_blank">Explore
-                    ThreeFold Grid Capacity</a></button>
+            <button class="my-8">
+                <a href="https://dashboard.grid.tf/explorer/statistics" target="_blank">
+                    Explore
+                    ThreeFold Grid Capacity
+                </a>
+            </button>
         </div>
     </div>
 </section>
-{% endif %}
 <style>
     dd {
         display: inline-block;
@@ -80,4 +73,4 @@
     .bg-pink {
         background-color: #ea1ff7;
     }
-</style>
+</style>