index.html

---
layout: default
title: Blog
---
<div class="well">
  <div class="list-group">
    {% for post in paginator.posts %}
    {% comment%}
    vyom: 210628
    upwork project: https://www.upwork.com/ab/f/contracts/27412710
    removed the use of Bootstrap class by adding 1 to its name to make sure full width content can be displayed
    {% endcomment %}
    <div class="list-group-item1">
      <div class="row-content vyom-blog-archive-post-container">
        {% comment %}
        vyom: 210623
        upwork job: https://www.upwork.com/jobs/Renovate-static-blog-HTML-and-CSS_%7E01065076083bfce051
        created grid for featured image
        {% endcomment %}

        {% comment %}
        featured image container
        {% endcomment%}
        <div class="vyom-featured-image-container">
          <a href="{{ post.url | prepend: site.baseurl }}">
            <img alt="{{ post.title }} featured image"
              src="{% if post.featured_image %}{% if post.featured_image contains 'https://' %}{{ post.featured_image }}{% else %}{{ site.baseurl }}{{ post.featured_image }}{% endif %}{% else %}{% if site.featured_image contains 'https://' %}{{ site.featured_image }}{% else %}{{ site.baseurl }}{{ site.featured_image }}{% endif %}{% endif %}">
          </a>
        </div>
        {% comment %}
        Post excerpt container
        {% endcomment%}
        <div class="vyom-blog-excerpt-container">
          {% comment %}
          removing date from grid
          <div class="least-content">{{ post.date | date_to_string }}</div>
          {% endcomment %}
          <div class="vyom-list-item-meta-container">
            <h4 class="list-group-item-heading vyom-list-item-heading"><a
                href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h4>
            <p class="vyom-list-item-date">{{ post.date | date_to_string }}</p>
          </div>

          {% comment %}
          vyom: 210623
          upwork project: https://www.upwork.com/jobs/Renovate-static-blog-HTML-and-CSS_%7E01065076083bfce051
          Truncate preview text on will with `
          <!--more-->` tag else truncate to 1000 words
          Thanks to:
          - https://stackoverflow.com/a/4 6996146/1598006
          - https://jonnylangefeld.com/blog/how-to-add-a-read-more-button-that-doesnt-suck-to-your-jekyll-blog
          {% endcomment %}
          <div class="vyom-blog-excerpt">
            {% if post.content contains '
            <!--more-->' %}
            <p class="list-group-item-text">{{ post.content | split:'
              <!--more-->' | first }} ... <span class="vyom-read-more-button"><a
                  href="{{ post.url | prepend: site.baseurl }}">Read More</a></span>
            </p>
            <div>
            </div>
            {% else %}
            <p class="list-group-item-text">{{ post.content | strip_html | strip_newlines | truncate: 500 }} <span
                class="vyom-read-more-button"><a href="{{ post.url | prepend: site.baseurl }}">Read More</a></span></p>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-separator"></div>
    {% endfor %}
  </div>


  <!-- Pagination links -->
  {% if paginator.total_pages > 1 %}
  <ul class="pager">
    {% if paginator.previous_page %}
    <li class="previous">
      <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo;</a>
    </li>
    {% else %}
    <li class="previous disabled"><span aria-hidden="true">&laquo;</span></li>
    {% endif %}

    <li><a href="/">First</a></li>

    {% for page in (1..paginator.total_pages) %}
    {% if page == paginator.page %}
    <li class="active">
      <a>{{ page }}<span class="sr-only">(current)</span></a>
    </li>
    {% elsif page == 1 %}
    <li><a href="/">{{ page }}</a></li>
    {% else %}
    <li>
      <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page
        }}</a>
    </li>
    {% endif %}
    {% endfor %}

    <li><a href="/page{{ paginator.total_pages }}/">Last</a></li>

    {% if paginator.next_page %}
    <li class="next">
      <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">&raquo;</a>
    </li>
    {% else %}
    <li class="next disabled"><span>&raquo;</span></li>
    {% endif %}
  </ul>
  {% endif %}
</div><!-- end #home -->