fix applause-button counting and add reading time

_includes/post-meta.html

@@ -14,5 +14,11 @@
   {% assign date_format = site.date_format | default: "%d %b %Y" %}
 
   {{ categories | append: "&middot;&nbsp;" }}<time datetime="{{ page.date | date_to_xmlschema }}" class="time">{{ page.date | date: date_format }}</time>
+
+  <!-- https://jekyllrb.com/docs/variables/ -->
+  <!-- page.title contains "Samuel's blog" -->
+  {%- if page.layout == "post" -%}
+    {% include reading-time.html %}
+  {% endif %}
 
 </small>

_includes/post-related.html

@@ -8,7 +8,7 @@ <h1 class="no-print">Other posts:</h1>
       <article class="article  article--post  typeset">
 
         <h4><a href="{{ site.baseurl }}{{ page.url }}">{{ page.title }}</a></h4>
-        {% include post-meta.html %}
+
         {{ page.excerpt | markdownify | truncatewords: 30 }}
 
       </article>

_includes/reading-time.html

@@ -6,17 +6,23 @@
   2. may have to add the words "Reading Time". Currently it uses an icon from https://github.com/danklammer/bytesize-icons
 -->
 
-<span class="read-time" title="Estimated read time">
+<span class="read-time" title="Estimated read time" style="display: block;">
+  <!-- &middot; -->
+  <br>
   <svg id="i-clock" viewBox="0 0 32 32" width="20" height="20" fill="none" stroke="currentcolor" stroke-linecap="round" 
   stroke-linejoin="round" stroke-width="2"><circle cx="16" cy="16" r="14" /><path d="M16 8 L16 16 20 20" /></svg>
 
   {% assign words = content | number_of_words %}
   {% if words < 360 %}
-    1 min read.
+    1 min read
   {% else %}
-    {{ words | divided_by:180 }} mins read.
+    {{ words | divided_by:180 }} mins read
   {% endif %}
 </span>
 <style>
+    span {
+      font-size: inherit;
+      font-style: inherit;
+    }
     svg#i-clock {vertical-align: middle;}
 </style>

_includes/site-before-end.html

@@ -0,0 +1,3 @@
+{%- if page.layout == "post" or page.title == "Useful links" -%}
+  <applause-button multiclap="true" url="{{ page.url }}" color="#0072d6" style="line-height: 20px; width: 55px; height: 55px; left:2.5rem; bottom:2.5rem; position: fixed; display: block; background-color: rgb(255, 255, 255, 0.9); border-radius: 50%;"/>
+{% endif %}

_layouts/blog.html

@@ -24,6 +24,12 @@ <h1>{{ page.title }}</h1>
     </article>
 
     {% include post-list.html %}
+
+    <style>
+      .read-time {
+        display: none !important;
+      }
+    </style>
 
 
   </div>

_layouts/categories.html

@@ -22,6 +22,12 @@ <h1>{{ page.title }}</h1>
 
     {% include post-categories.html %}
 
+    <style>
+      .read-time {
+        display: none !important;
+      }
+    </style>
+
   </div>
 
   {% if page.aside == true %}{% include site-aside.html align="left" %}{% endif %}

_layouts/default.html

@@ -35,7 +35,9 @@
       <link rel="stylesheet" href="{{ "/assets/styles.css" | relative_url }}">
     {% endif %}
 
-    {% include applause-button.html %}
+    {%- if page.layout == "post" or page.title == "Useful links" -%}
+      {% include applause-button.html %}
+    {% endif %}
 
     <!-- {% if site.favicons or site.avatarurl %}{% include site-favicons.html %}{% endif %} -->
 
@@ -52,8 +54,8 @@
 
     {% if site.service_worker != false %}{% include site-sw.html %}{% endif %}
 
-    {% include site-before-end.html %}
     {% include topButton.html %}
+    {% include site-before-end.html %}
     {% include cookie-consent.html %}
   </body>
 

_layouts/post.html

@@ -18,7 +18,6 @@ <h1>{{ page.title }}</h1>
 
     {% include post-related.html %}
 
-    <applause-button multiclap="true" color="#2696ff" style="line-height:20px; width: 55px; height: 55px; left:2.5rem; bottom:2.5rem; position: fixed; display: block; background-color: rgb(255, 255, 255, 0.9); border-radius: 50%;"/>
   </article>
 
   {% if page.aside == true %}{% include site-aside.html %}{% endif %}