website/_layouts/home.html

---
layout: default
---

<div class="home">
  {%- if page.title -%}
    <h1 class="page-heading">{{ page.title }}</h1>
  {%- endif -%}

  {{ content }}

  {% if site.pinpost %}
    <section id="pinned-section">
      <h3>Pinned Posts:</h3>
      {%- include pinpost.html -%}
    </section>
  {% endif %}

  {%- if site.posts.size > 0 -%}
    <h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>

    <!-- Pagination links -->
    {% for post in paginator.posts %}
    <div class="home-post">
      <h2><a href="{{ post.url | relative_url }}" class="post-link">{{ post.title }}</a></h2>
      <p class="post-meta">
        <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}" itemprop="datePublished">
            <img src="{{ 'assets/main/icons/calendar.svg' | relative_url }}" style="width: 1.5em; height: 1.5em">
            {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
            <span title="{{ post.date }}"> {{ post.date | date: date_format }}</span>
        </time>

        <span class="reading-minutes" style="margin-left: 1.25em">
            <img src="{{ 'assets/main/icons/time-clock.svg' | relative_url }}" style="width: 1.5em; height: 1.5em;"> <span class="no-of-mins">{{ post.content | number_of_words }}</span> minutes
        </span>

        {%- if post.categories -%}
        <span class="home-post-category" style="margin-left: 1.25em">
          <img src="{{ 'assets/main/icons/categories.svg' | relative_url }}" style="width: 1.5em; height: 1.5em;">
          {{ post.categories }}  
        </span>
        {%- endif -%}

        {%- if post.updatedOn -%}
        <span class="dt-updated" style="margin-left: 1.25em">
          <img src="{{ 'assets/main/icons/update.svg' | relative_url }}" style="width: 1.5em; height: 1.5em;">
          {{ post.updatedOn }}
        </span>
        {%- endif -%}
        
      </p>
    </div>
    {% endfor %}
    <script>
        function convert_to_wpm(number_of_words = document.querySelectorAll(".no-of-mins")) {
          number_of_words.forEach((num) => {
              const wpm = 225 /* avg wpm for an adult */
              num.textContent = Math.round((Number(num.textContent) / wpm) + 1);
              return;
          })
        }

        convert_to_wpm();
    </script>

    <!-- Pagination links -->
    <div class="pagination">
      {% if paginator.previous_page %}
        <a href="{{ paginator.previous_page_path | relative_url }}" class="previous">Previous</a>
      {% else %}
        <span class="previous disabled">Previous</span>
      {% endif %}
      <span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
      {% if paginator.next_page %}
        <a href="{{ paginator.next_page_path | relative_url }}" class="next">Next</a>
      {% else %}
        <span class="next disabled">Next</span>
      {% endif %}
    </div>
      
    <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
  {%- endif -%}

</div>