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

config.toml

@@ -51,6 +51,9 @@ external_links_no_referrer = true
 # For example, `...` into `…`, `"quote"` into `“curly”` etc
 smart_punctuation = true
 
+[build]
+not_found = "404.md"
+
 [[taxonomies]]
 name = "categories"
 feed = true

content/footer/_index.md

@@ -48,12 +48,12 @@ extra:
 
 <h6><a target="_self" onclick="window.location.href='/about'">About</a></h6>
 
-<h6><a target="_self" onclick="window.location.href='/newsroom'">NewsRoom</a></h6>
-
-<h6><a target="_self" onclick="window.location.href='/people'">People</a></h6>
-
-<h6><a target="_self" onclick="window.location.href='/partners'">Partners</a></h6>
-
 <h6><a target="_self" onclick="window.location.href='/blog'">Blog</a></h6>
 
+<h6><a target="_self" onclick="window.location.href='/newsroom'">NewsRoom</a></h6>
+
+<h6><a target="_self" href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')">Newsletter</a></h6>
+
+
+
 {% end %}

content/newsroom/ai_workload_demo/index.md

@@ -0,0 +1,21 @@
+---
+id: ai_workload_demo
+title: 🍿 Watch the AI & ML Workloads Demo 
+image_caption: AI workload
+description: Scott and Mik hosted an engaging session on AI, ML, and large language models, highlighting decentralized server benefits and showcasing Llama. Dive-in to know more.
+date: 2024-06-20
+taxonomies:
+    people: [bernadette_amanda_caster]
+    tags: [technology,update,threefold_grid,community,news]
+    news-category: [foundation]
+extra:
+    imgPath: ai_workload_demo.png
+---
+
+On Tuesday, Scott and Mik hosted a fantastic discussion and demo on artificial intelligence, machine learning, and large language models. Scott first introduced these topics with definitions and examples, then explained the benefits of running such workloads on decentralized servers. Finally, he introduced/showcased Llama, an open source large language model developed by Meta AI, and demo'd how to deploy and interact with Llama on top of ThreeFold.
+
+<br/>
+
+- Watch the full session [here](https://youtu.be/RP3YF5Auds4)
+- AI & ML [documentation](https://manual.grid.tf/documentation/system_administrators/advanced/ai_ml_workloads.html) on TF Manual
+- [Llama](https://llama.meta.com/) | [Ollama](https://ollama.com/)

templates/404.html

@@ -0,0 +1,20 @@
+{% extends "_default/base.html" %}
+
+{% block content %}
+
+<main class="container mx-auto text-center">
+
+<div class="lg:pt-20 pt-8">
+    <div>
+        <img class="w-64 md:w-80 mx-auto" src="/images/404.png" alt="404_image">
+    </div>
+    <div class="max-w-5xl mx-auto">
+     <h3 class="text-2xl md:text-5xl font-semibold">You seem to have ended up on <span class="blue">a missing page!</span></h3>
+     <p class="font-normal">This could mean that you’ve entered the wrong URL or you’ve clicked on content which has moved locations or is no longer live. If you need assistance, click on the blue chat icon at the bottom of the screen to speak with real humans on our support team. Or go back to <a href="/">home</a>.</p>
+    </div>
+  
+</div>
+
+</main>
+
+{% endblock content %}

templates/partials/header.html

@@ -40,7 +40,7 @@
                             {{link_label}}
                         </a>
                         {% endif %}
-                      {% elif current == current_url %}
+                      {% elif current_url and current == current_url %}
                           <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal active hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                             {{link_label}}
                           </a>
@@ -83,7 +83,7 @@
                       </a>
                     </li>
         
-                    <li class="ml-4">
+                    {# <li class="ml-4">
                       <a
                         href="javascript:;"
                         onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
@@ -105,7 +105,7 @@
                           ></path>
                         </svg>
                       </a>
-                    </li>
+                    </li> #}
                   </ul>
                   <div class="rounded-full border-2 mt-1 border-gray-400">
                     <a href="https://www.manual.grid.tf/documentation/threefold_token/buy_sell_tft/tft_lobstr/tft_lobstr_short_guide.html" target="_blank" class="mt-2">

templates/people/single.html

@@ -1,58 +1,54 @@
-{% extends "_default/base.html" %}
+{% extends "_default/base.html" %} {% block content %} {% set page_path =
-{% block content %}
+term.path ~ 'index.md' | replace(from='-', to='_') | trim_start_matches(pat="/")
+%} {% set people = get_section(path="people/_index.md") %} {% set pages_str =
+people.pages | json_encode() | as_str %} {% if pages_str is
+containing(term.name) %} {% set page = get_page(path=page_path) %}
 
-{% set page_path = term.path ~ 'index.md' | replace(from='-', to='_') | trim_start_matches(pat="/") %}
+<div
-{% set people = get_section(path="people/_index.md") %}
+  class="container sm:pxi-0 lg:w-5/6 mx-auto min-h-screen overflow-x-hidden pt-24"
-{% set pages_str = people.pages | json_encode() | as_str %}
+>
-{% if pages_str is containing(term.name) %}
+  <div class="flex flex-row flex-wrap items-start mx-4 sm:mx-0">
-    {% set page = get_page(path=page_path) %}
+    <div class="w-full md:w-1/6 mx-auto sm:mx-0">
-
+      <img
-
+        src="{{page.extra.imgPath}}"
-<div class="container sm:pxi-0 lg:w-5/6 mx-auto min-h-screen overflow-x-hidden pt-24">
+        alt=""
-    <div class="flex flex-row flex-wrap items-start mx-4 sm:mx-0">
+        class="aspect-[14/13] w-full rounded-2xl object-cover g-image g-image--lazy g-image--loaded my-4 lg:my-0"
-        <div class="w-full md:w-1/6 mx-auto sm:mx-0">
+      />
-            <img src="{{page.extra.imgPath}}" alt="" class="aspect-[14/13] w-full rounded-2xl object-cover g-image g-image--lazy g-image--loaded my-4 lg:my-0">
+    </div>
-        </div>
+    <div class="w-full md:w-5/6 text-center md:text-left md:pl-8">
-        <div class="w-full md:w-5/6 text-center md:text-left md:pl-8">
+      <div class="flex flex-row items-center lg:justify-start justify-center">
-            <div class="flex flex-row items-center lg:justify-start justify-center">
+        <h2 class="pb-0 mb-0 mt-0 text-3xl font-normal tracking-wide my-1">
-                <h2 class="pb-0 mb-0 mt-0 text-3xl font-normal tracking-wide my-1">
+          {{page.title}}
-                    {{page.title}}
+        </h2>
-                </h2>
+        <div class="ml-4">{% include "partials/socialLinks.html" %}</div>
-                <div class="ml-4">
+      </div>
-                    {% include "partials/socialLinks.html" %}
+      <div class="text-gray-700 my-4">{{page.content | safe }}</div>
-                </div>
+      <div class="flex items-center">
-            </div>
+        <div class="flex justify-between items-center">
-            <div class="text-gray-700 my-4">
+          <ul class="list-none flex author-list m-0 py-2">
-                {{page.content | safe }}
+            {% for org in page.extra.organizations %}
-            </div>
+            <li>
-            <div class="flex items-center">
+              <a href="">
-                <div class="flex justify-between items-center">
+                <img src="" alt="" />
-                    <ul class="list-none flex author-list m-0 py-2">
+              </a>
-                        {% for org in page.extra.organizations %}
+            </li>
-                            <li>
-                                <a href="">
-                                    <img src="" alt="">
-                                </a>
-                            </li>
-                        {% endfor %}
-                    </ul>
-                </div>
-            </div>
-            {% if page.taxonomies.memberships %}
-            {% for tag in page.taxonomies.memberships %}
-                <a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 font-normal text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
-                    {{tag}}
-                </a>
             {% endfor %}
-            {% endif %}
+          </ul>
         </div>
+      </div>
+      {% if page.taxonomies.memberships %} {% for tag in
+      page.taxonomies.memberships %}
+      <a
+        href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}"
+        class="border-1 font-normal text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full"
+      >
+        {{tag}}
+      </a>
+      {% endfor %} {% endif %}
     </div>
-    <div class="my-8">
+  </div>
-        <hr/>
+  <div class="my-8">
-        <br/>
+    <hr />
-        <hr/>
+  </div>
-    </div>
 </div>
-{% endif %}
+{% endif %} {% endblock content %}
-
-{% endblock content %}

templates/shortcodes/grid_stats.html

@@ -5,7 +5,8 @@
             {{body | markdown | safe }}
             <div class="items my-10 block lg:flex lg:flex-wrap justify-center items-center animate-pulse">
                 <!-- capacity -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid.</span>
                     <img
                         class="mx-auto p-4"
                         src="images/V3-08.png"
@@ -16,7 +17,8 @@
                     <span class="block text-md mt-4 font-normal capitalize">capacity</span>
                 </div>
                 <!-- cores -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of CPU (central processing unit) cores available on the grid</span>
                     <img
                         class="mx-auto p-4"
                         src="images/V3-11.png"
@@ -27,7 +29,8 @@
                     <span class="block text-md mt-4 font-normal capitalize">cores</span>
                 </div>
                 <!-- Nodes -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of nodes on the grid.</span>
                     <img
                         class="mx-auto p-4"
                         src="images/V3-09.png"
@@ -38,7 +41,8 @@
                     <span class="block text-md mt-4 font-normal capitalize">nodes</span>
                 </div>
                 <!-- countries -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
                     <img
                         class="mx-auto p-4"
                         src="images/V3-10.png"
@@ -49,7 +53,8 @@
                     <span class="block text-md mt-4 font-normal capitalize">countries</span>
                 </div>
                  <!-- farms -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of farms on the grid.</span>
                     <img
                         class="mx-auto p-4"
                         src="images/farm.png"
@@ -103,6 +108,49 @@
       background-color:#5596f5 !important;
     }
 
+ 
+
+/* Tooltip container */
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  font-size: 14px;
+  visibility: hidden;
+  width: 250px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 10px;
+  border-radius: 4px;
+ 
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+  bottom: -50px;
+  right: -60px;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+@media (max-width: 480px) {
+    .tooltip .tooltiptext {
+        position: absolute;
+  z-index: 1;
+  bottom: -50px;
+  right: 0px !important;
+    }
+
+}
+
+
 </style>