---
layout: default
---
{% unless site.dash.show_author == false %}
  {% include author.html %}
{% endunless %}
<div class="post">
  <h1 class="post-title">{{ page.title }}</h1>
  {% if site.plugins contains "jekyll/tagging" %}
  <div class="post-tags">
      {% for tag in page.tags %}
      <a class="tag" href="/tag/{{ tag }}/">{{ tag }}</a>
      {% endfor %}
  </div>
  {% endif %}
  <div class="post-date">Published on {{ page.date | date_to_string }}</div>
  {% if page.description != null %}
  <noscript>
    <div class="post-description">{{ page.description }}</div>
  </noscript>
  <div id="animated-post-description" class="post-description" style="display: none;"></div>
  {% endif %}
  {{ content }}
</div>

{% if site.dash.disqus.shortname %}
<div class="comments">
{% include disqus.html %}
</div>
{% endif %}

{% assign size = site.related_posts | size %}
{% if size != 0 %}
<div class="related">
  <h2>related posts</h2>
  <ul class="related-posts">
    {% for post in site.related_posts limit:3 %}
      <li>
        <h3>
          <a href="{{ post.url }}">
            {{ post.title }}
          </a>
        </h3>
      </li>
    {% endfor %}
  </ul>
</div>
{% endif %}
{% include tagcloud.html %}

{% assign animation_speed = site.dash.animation_speed | default: 50 %}
<script>
  let i = 0;
  const text = '{{ page.description }}';
  const speed = parseInt('{{ animation_speed }}');
  
  function typeWriter() {
    if (i < text.length) {
      document.getElementById('animated-post-description').innerHTML += text.charAt(i);
      i++;
      setTimeout(typeWriter, speed);
    }
  }

  document.getElementById('animated-post-description').style.display = 'initial';
  typeWriter();

  // Image modal
  var $imgs = [];
  $('img').each(function(idx) {
    var obj = {
      src: $(this).attr('src')
    }
    $imgs.push(obj);
    var elem = $(this);
    $(this).click(function() {
      $('.modal').magnificPopup('open', idx);
    });
  });

  $('.modal').magnificPopup({
    items: $imgs,
    type: 'image',
    closeOnContentClick: true,
    mainClass: 'mfp-img-mobile',
    image: {
      verticalFit: true
    }
    
  });
</script>