comment.html

<article id="comment{% unless include.r %}{{ index | prepend: '-' }}{% else %}{{ include.index | prepend: '-' }}{% endunless %}" class="js-comment comment {% if include.name == site.author.name %}admin{% endif %} {% unless include.replying_to == 0 %}child{% endunless %}">
    <div class="comment-avatar">
      {% if include.avatar %}
        <img src="{{ include.avatar }}" alt="">
        <!-- <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ include.avatar }}" alt="" class="lazyload blur-up"> -->
      {% elsif include.email %}
        <img src="https://www.gravatar.com/avatar/{{ include.email }}?d=mm&s=60" alt="">
        <!-- <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="https://www.gravatar.com/avatar/{{ include.email }}?d=mm&s=60 1x, https://www.gravatar.com/avatar/{{ include.email }}?d=mm&s=120 2x" alt="" class="lazyload blur-up"> -->
      {% else %}
        <img src="/assets/images/avatar-60.png" alt="">
        <!-- <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="https://www.gravatar.com/avatar/{{ include.email }}?d=mm&s=60 1x, /assets/images/avatar-120.png 2x" alt="" class="lazyload blur-up"> -->
      {% endif %}
    </div>
    <h3 class="comment-author-name">
      {% unless include.url == blank %}
        <a rel="external nofollow" href="{{ include.url }}">{{ include.name }}</a>
      {% else %}
        {{ include.name }}
      {% endunless %}
    </h3>
    <div class="comment-timestamp">
      {% if include.date %}
        {% if include.index %}<a href="#comment{% if r %}{{ index | prepend: '-' }}{% else %}{{ include.index | prepend: '-' }}{% endif %}" title="Permalink to this comment">{% endif %}
        <time datetime="{{ include.date | date_to_xmlschema }}">{{ include.date | date: '%B %d, %Y - %H:%M' }}</time>
        {% if include.index %}</a>{% endif %}
      {% endif %}
    </div>
    <div class="comment-content">
      {{ include.message | markdownify }}
    </div>
    {% unless include.replying_to != 0 or page.comments_locked == true %}
      <div class="comment-reply">
        <a rel="nofollow" href="#comment-{{ include.index }}" onclick="return addComment.moveForm('comment-{{ include.index }}', '{{ include.index }}', 'respond', '{{ page.slug }}')"><img class="icon icon--reply" width="16px" height="16px" src="/assets/icons/reply.svg"/> Reply to {{ include.name }}</a>
      </div>
    {% endunless %}
    <!-- <h1>Index: {{ include.index }}</h1> -->
  </article>
  
  {% capture i %}{{ include.index }}{% endcapture %}
  <!-- {% assign replies = site.data.comments[page.slug] | where_exp: 'item', 'item.replying_to == i' %}   -->
  {% assign replies = (site.data.comments[page.slug] | where_exp: 'item', 'item.replying_to == i' | sort: 'date') %} 
  {% for reply in replies %}
    {% assign index       = forloop.index | prepend: '-' | prepend: include.index %}
    {% assign r           = reply.replying_to %}
    {% assign replying_to = r | to_integer %}
    {% assign avatar      = reply.avatar %}
    {% assign email       = reply.email %}
    {% assign name        = reply.name %}
    {% assign url         = reply.url %}
    {% assign date        = reply.date %}
    {% assign message     = reply.message %}
    {% include comment.html index=index replying_to=replying_to avatar=avatar email=email name=name url=url date=date message=message %}
  {% endfor %}