From 38827133fa5278116b8523eb785b7400c2e27b7f Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 29 Sep 2022 18:20:12 +0200
Subject: [PATCH] Add ETA time

---
 static/js/custom.js              | 13 ++++++
 templates/_default/base.html     |  1 -
 templates/blogPage.html          | 69 +++++++++++----------------
 templates/partials/postCard.html | 80 ++++++++++++++++++--------------
 4 files changed, 85 insertions(+), 78 deletions(-)

diff --git a/static/js/custom.js b/static/js/custom.js
index 4b1064d48..e7fc72867 100644
--- a/static/js/custom.js
+++ b/static/js/custom.js
@@ -4,6 +4,19 @@ var hamburgerShown = false;
 let width = screen.width;
 var isMobile = width < 1024;
 
+function readingTime() {
+    let articles = document.querySelectorAll(".article");
+    let times = document.querySelectorAll(".time");
+    const wpm = 225;
+    let words;
+    for (var i = 0; i < articles.length; i++) {
+        words = articles[i].innerText.trim().split(/\s+/).length;
+        let time = Math.ceil(words / wpm);
+        times[i].innerText = `${time} minute read`
+    }
+}
+readingTime()
+
 function toggleMenu(button) {
     if (displayedMenu === button.id.split("-")[0]) {
         button.className = button.className.replace(" text-gray-800 bg-stone-200 sm:bg-transparent", " text-gray-900");
diff --git a/templates/_default/base.html b/templates/_default/base.html
index 6d789147e..ac65b6023 100644
--- a/templates/_default/base.html
+++ b/templates/_default/base.html
@@ -36,7 +36,6 @@
     for (var i = 0, linksLength = links.length; i < linksLength; i++) {
         if (!internal_hosts.includes(links[i].hostname)) {
             links[i].target = '_blank';
-            console.log(links[i])
         }
     }
   </script>
diff --git a/templates/blogPage.html b/templates/blogPage.html
index f7ce34890..a3bab94cb 100644
--- a/templates/blogPage.html
+++ b/templates/blogPage.html
@@ -2,48 +2,32 @@
 {% block content %}
 
 {% if page.taxonomies.people %}
-    {% set people = get_section(path="people/_index.md") %}           
-    {% set pages_str = people.pages | json_encode() | as_str %}
-    {% if pages_str is containing(page.taxonomies.people[0]) %}
-        {% set author_path = 'people/' ~ page.taxonomies.people[0] ~ '/index.md' %}
-        {% set author = get_page(path=author_path) %}
-    {% endif %}
+{% set people = get_section(path="people/_index.md") %}
+{% set pages_str = people.pages | json_encode() | as_str %}
+{% if pages_str is containing(page.taxonomies.people[0]) %}
+{% set author_path = 'people/' ~ page.taxonomies.people[0] ~ '/index.md' %}
+{% set author = get_page(path=author_path) %}
+{% endif %}
 {% endif %}
 
 <!-- Default page template for blog posts and basic informative markdown files -->
 
 {% set split = page.content | split(pat="threefold.io") %}
-{% if split | length < 2 %}
-    {% set content = page.content %}
-{% else %}
-    {% set content = "" %}
-    {% for part in split %}
-        {% if part is starting_with("/blog") %}
-            {% set split_part = part | split(pat='/">') %}
-            {% set link = split_part[0] %}
-            {% set link = link | replace(from="/blog/post", to="/blog") %}
-            {% set link = link | replace(from="_", to="-") %}
-            {% set rest_part = split_part | slice(start=1) | join(sep='/">') %}
-            {% set part = link ~ '/">' ~ rest_part %}
-        {% endif %}
-        {% if loop.first %}
-            {% set_global content = part%}
-        {% else %}
-            {% set_global content = content ~ "threefold.io" ~ part%}
-        {% endif %}
-    {% endfor %}
-{% endif %}
-
-
-<main>
+{% if split | length < 2 %} {% set content=page.content %} {% else %} {% set content="" %} {% for part in split %} {% if
+  part is starting_with("/blog") %} {% set split_part=part | split(pat='/">' ) %} {% set link=split_part[0] %} {% set
+  link=link | replace(from="/blog/post" , to="/blog" ) %} {% set link=link | replace(from="_" , to="-" ) %} {% set
+  rest_part=split_part | slice(start=1) | join(sep='/">' ) %} {% set part=link ~ '/">' ~ rest_part %} {% endif %} {% if
+  loop.first %} {% set_global content=part%} {% else %} {% set_global content=content ~ "threefold.io" ~ part%} {% endif
+  %} {% endfor %} {% endif %} <main>
 
   <div class="container mx-auto mt-10">
 
     <div>
-      <article id="article" class="article lg:w-4/6 mx-auto">
+      <article class="article lg:w-4/6 mx-auto">
         <h1 class="lg:text-5xl font-medium leading-none mt-0  text-gray-700">
           {{ page.title }}
         </h1>
+
         <h4 class="text-2xl text-gray-600 leading-8">
           {{ page.description }}
         </h4>
@@ -52,9 +36,10 @@
             <div class="flex justify-between items-center">
               <ul class="list-none flex author-list m-0">
                 <li class="author-list-item">
-                {% if author %}
-                {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
-                <img src="{{author_img}}" alt="{{author.title}}" class="
+                  {% if author %}
+                  {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') |
+                  replace(from='index.md', to=author.extra.imgPath)) %}
+                  <img src="{{author_img}}" alt="{{author.title}}" class="
                         h-8
                         w-8
                         sm:h-10
@@ -69,22 +54,22 @@
             </div>
 
             <div class="pl-3 flex flex-col text-xs leading-none uppercase">
-                {% if author %}
+              {% if author %}
               <a href="{{author.permalink}}" class="text-gray-700 text-xs">{{ author.title }}</a>
-            {% endif %}
+              {% endif %}
               <p class="text-gray-700 text-xs">
-                <time datetime="{{ page.date }}"> {{ page.date | date(format="%B %e, %Y", timezone="America/Chicago") }}</time>
+                <time datetime="{{ page.date }}"> {{ page.date | date(format="%B %e, %Y", timezone="America/Chicago")
+                  }}</time>
               </p>
             </div>
 
           </div>
           <div class="my-2 sharethis-inline-share-buttons"></div>
         </section>
-        {% set img_url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
+        {% set img_url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md',
+        to=page.extra.imgPath)) %}
         <img class="mb-8 mx-auto" src={{img_url}} alt="{{page.title ~ 'Picture'}}">
-        <div id="article">{{ content | safe }}</div>
-
-
+        <div>{{ content | safe }}</div>
         <section class="post-tags container relative py-10">
           {% for tag in page.taxonomies.tags %}
           {% set fullpath = "/tags/" ~ tag | replace(from='_', to='-' ) %}
@@ -109,6 +94,6 @@
 
 
   </div>
-</main>
+  </main>
 
-{% endblock content %}
\ No newline at end of file
+  {% endblock content %}
\ No newline at end of file
diff --git a/templates/partials/postCard.html b/templates/partials/postCard.html
index 0da63c7b9..b9defaab2 100644
--- a/templates/partials/postCard.html
+++ b/templates/partials/postCard.html
@@ -1,17 +1,19 @@
 {% if post.date %}
 {% if post.taxonomies.people %}
-    {% set people = get_section(path="people/_index.md") %}           
-    {% set pages_str = people.pages | json_encode() | as_str %}
-    {% if pages_str is containing(post.taxonomies.people[0]) %}
-        {% set author_path = 'people/' ~ post.taxonomies.people[0] ~ '/index.md' %}
-        {% set author = get_page(path=author_path) %}
-    {% endif %}
+{% set people = get_section(path="people/_index.md") %}
+{% set pages_str = people.pages | json_encode() | as_str %}
+{% if pages_str is containing(post.taxonomies.people[0]) %}
+{% set author_path = 'people/' ~ post.taxonomies.people[0] ~ '/index.md' %}
+{% set author = get_page(path=author_path) %}
+{% set content = get_page(path=author_path) %}
+{% endif %}
 {% endif %}
 
 <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
   <div class="flex-1 border-b">
     <a href="{{ post.permalink }}" class="block">
-    {% set img_url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md', to=post.extra.imgPath)) %}
+      {% set img_url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md',
+      to=post.extra.imgPath)) %}
       <div class="flex-shrink-0">
         <img class="h-48 w-full mx-auto object-cover" src={{img_url}} alt="{{post.title ~ ' Picture'}}" />
       </div>
@@ -25,39 +27,47 @@
           {{ post.description }}
         </p>
         {% endif %}
+        <div class="article hidden">{{ post.content | safe }}</div>
+
+        <div class="w-full post-card-meta py-3">
+          <div class="avatars">
+            <div class="flex">
+              <div class="flex">
+                <ul class="list-none flex author-list mr-2 pl-0">
+                  {% if author %}
+                  {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') |
+                  replace(from='index.md', to=author.extra.imgPath)) %}
+                  <li class="author-list-item"><img alt="{{author.title}}" src="{{author_img}}"
+                      class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"></li>
+                  {% endif %}
+                </ul>
+              </div>
+              <div class="flex flex-col text-left leading-none uppercase">
+                {% if author %}
+                <p class="text-gray-700 text-xs">{{ author.title }}</p>
+                {% endif %}
+                <p class="text-gray-700 text-xs">
+                  <time datetime="{{post.date}}">
+                    {{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
+                  </time>
+                </p>
+                <p class="flex justify-between lowercase my-2 items-center text-gray-700 text-xs"><span id="time"
+                    class="time"></span>
+                </p>
+              </div>
+              <br />
+            </div>
+          </div>
+        </div>
     </a>
   </div>
-  <div class="w-full post-card-meta py-3">
-    <div class="avatars">
-      <div class="flex items-center">
-        <div class="flex justify-between items-center">
-          <ul class="list-none flex author-list mr-2">
-            {% if author %}
-                {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
-                <li class="author-list-item"><img alt="{{author.title}}" src="{{author_img}}"
-                    class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"></li>
-            {% endif %}
-          </ul>
-        </div>
-        <div class="flex flex-col text-left leading-none uppercase">
-            {% if author %}
-          <p class="text-gray-700 text-xs">{{ author.title }}</p>
-          {% endif %}
-          <p class="text-gray-700 text-xs">
-          <time datetime="{{post.date}}">
-            {{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
-            </time>
-        </p>
-    </div>
-</div>
-</div>
-</div>
+
 </div>
 </div>
 
 <style>
-    .border-b {
-        border-bottom-width: 1px !important;
-    }
+  .border-b {
+    border-bottom-width: 1px !important;
+  }
 </style>
 {% endif %}
\ No newline at end of file