Add post metadata on blog landing page (#197)

- Add author name and profile photo
- Link author's name to authors profile page
- Add Read More button
- Add estimated time to read
- Truncate excerpt to 50 words

Author: Chaitanya-Shahare

_layouts/blog.html

@@ -2,14 +2,41 @@
 layout: default
 title: Blog
 ---
-<h3>Latest Posts</h3>
+
+<h2>Latest Posts</h2>
 
 <div>
   {% for post in site.posts %}
-    <div class="well">
-      <h3>{{ post.title }}</h3>
-      {{ post.excerpt }}
-      <p>Read more <a href="{{ post.url }}">here</a></p>
-    </div>
-  {% endfor %}
+  <div class="well">
+    <h3>{{ post.title }}</h3>
+    <p>
+      {% assign author = site.data.contributors | where: "name", post.author | first %}
+      {% if author %}
+      <a href="{{ author.name | replace: " ", "" | prepend: " /team/" }}">
+        <img
+          src="{% if author.photo %}{{ site.baseurl }}/images/team/{{ author.photo }}{% else %}{{ site.baseurl }}/images/team/defaultDP.png{% endif %}"
+          alt="{{ author.name }}" style="
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            /* vertical-align: middle; */
+	    margin: 0;
+	    margin-top: 4px;
+	    margin-bottom: 4px;
+          " />
+        {{ author.name }}
+      </a>
+      {% else %}
+      {{ post.author }}
+      {% endif %}
+      <span class="text-muted">
+        • {{ post.date | date: "%b %d, %Y" }} • {{ post.content | number_of_words | divided_by: 200 | ceil }} min read
+      </span>
+    </p>
+    <p>{{ post.excerpt | truncatewords: 50 }}</p>
+    <p>
+      <button class="btn btn-primary" onclick="window.location.href='{{ post.url }}'">Read More</button>
+    </p>
   </div>
+  {% endfor %}
+</div>

_layouts/post.html

@@ -18,13 +18,12 @@ <h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
         first %} {% assign author_link = author.name | replace: " ", "" |
         prepend: "/team/" %}
         <a href="{{ author_link }}" itemprop="url">
-          {% if author.photo %}
           <img
-            src="{{ site.baseurl }}/images/team/{{ author.photo }}"
+            src="{% if author.photo %}{{ site.baseurl }}/images/team/{{ author.photo }}{% else %}{{ site.baseurl }}/images/team/defaultDP.png{% endif %}"
             alt="{{ author_name }}"
             class="author-image"
+            style="margin: 0"
           />
-          {% endif %}
           <span itemprop="name">{{ author_name }}</span>
         </a>
         {% if forloop.last == false %} , {% endif %}

_posts/2023-05-10-accelerated-documentation-with-google-season-of-docs-2023.md

@@ -8,7 +8,7 @@ Automatic Differentiation applications (using Clad, e.g. in RooFit and
 Floating-Point Error Estimation), and Python-C++ Interoperability (Clang-Repl 
 (LLVM), CppInterOp, cppyy, Numba, etc.)."
 sitemap: false
-author: QuillPusher (Saqib)
+author: QuillPusher
 permalink: blogs/gsod23_quillpusher_experience_blog/
 date: 2023-05-10
 ---

css/main.scss

@@ -211,7 +211,7 @@ firstp {
   color: #fff; /* Custom Button text color */
 }
 // hover color for the custom button for Front Page, etc.
-.btn-primary:hover {
+.custom-btn:hover {
   background-color: #292929c7 !important; /* Custom Button hover color */
 }