{% extends "home.html" %}

{% block opengraph %}
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@tiagopeixoto" />
    <meta name="twitter:creator" content="@tiagopeixoto" />
    <meta property="og:url" content="https://skewed.de/tiago/blog" />
    {% if posts | length > 1 %}
    <meta property="og:title" content="Tiago Peixoto's blog" />
    <meta property="og:description" content="Network science, inference, and other things."/>
    {% else %}
    <meta property="og:title" content="{{posts[0].title}}" />
    <meta property="og:description" content="Tiago Peixoto's blog: network science, inference, and other things."/>
    {% endif %}
    <meta property="og:image" content="https://skewed.de/static/tiago/z-bob.png" />
{% endblock %}

{% block head %}
    {{ super() }}
    <script data-isso="//comments.skewed.de/"
            data-isso-id="/tiago/blog/{{posts[0].name}}"
            data-isso-reply-to-self="false"
            data-isso-max-comments-top="100"
            data-isso-max-comments-nested="5"
            data-isso-reveal-on-click="5"
            data-isso-avatar="false"
            data-isso-gravatar="true"
            data-isso-vote="false"
            data-isso-feed="false"
            data-isso-lang="en"
            src="//comments.skewed.de/js/embed.min.js"></script>

{% endblock %}
    
{% block content %}
      
<h1><a href="/tiago/blog" style="color: inherit;">News and views</a></h1>
<div class="blog">
{% for p in posts[:1] %}
<h2> <a style="color: inherit; text-decorations: none" href="/tiago/blog/{{p.name}}">{{ p.title }}</a> </h2>
<small> Published on {{ p.date.strftime('%A, %d %B, %Y') }} </small><br/>
<small><small> Tags:
  {% for t in p.tags %}
  <a href="/tiago/blog?tags={{t}}">{{ t }}</a>{% if t != p.tags[-1] %}, {% endif %}
  {% endfor %}
</small></small>
<br/><br/>

{{ p.html|safe }}

<h3><a href="/tiago/blog/{{p.name}}#isso-thread">Comments</a></h3>
<section id="isso-thread" data-isso-id="/tiago/blog/{{p.name}}" data-title="{{p.title}}" ></section>

{% set host = 'social.skewed.de' %}
{% set username = 'tiago' %}
{% set id = p.m_id %}

<p>You can also use your Mastodon account to comment on this post by replying to this <a class="link" href="https://{{ host }}/@{{ username }}/{{ id }}">thread</a>. To see the existing comments, press the button below.</p>
  <!-- <p><button id="replyButton" href="https://{{ host }}/@{{ username }}/{{ id }}">Reply</button></p> -->
  <!-- <dialog id="toot-reply" class="mastodon" data-component="dialog"> -->
  <!--   <h3>Reply to {{ username }}'s post</h3> -->
  <!--   <p> -->
  <!--     With an account on the Fediverse or Mastodon, you can respond to this post. -->
  <!--     Since Mastodon is decentralized, you can use your existing account hosted by another Mastodon server or compatible platform if you don't have an account on this one. -->
  <!--   </p> -->
  <!--   <p>Copy and paste this URL into the search field of your favourite Fediverse app or the web interface of your Mastodon server.</p> -->
  <!--   <div class="copypaste"> -->
  <!--     <input type="text" readonly="" value="https://{{ host }}/@{{ username }}/{{ id }}"> -->
  <!--     <button class="button" id="copyButton">Copy</button> -->
  <!--     <button class="button" id="cancelButton">Close</button> -->
  <!--   </div> -->
  <!-- </dialog> -->
  <p id="mastodon-comments-list"><button id="load-comment">Load mastodon comments</button></p>
  <noscript><p>You need JavaScript to view the comments.</p></noscript>
  <script type="text/javascript" src="/static/purify/purify.min.js"></script>
  <script type="text/javascript">
    // const dialog = document.querySelector('dialog');

    // document.getElementById('replyButton').addEventListener('click', () => {
    //   dialog.showModal();
    // });

    // document.getElementById('copyButton').addEventListener('click', () => {
    //   navigator.clipboard.writeText('https://{{ host }}/@{{ username }}/{{ id }}');
    // });

    // document.getElementById('cancelButton').addEventListener('click', () => {
    //   dialog.close();
    // });

    // dialog.addEventListener('keydown', e => {
    //   if (e.key === 'Escape') dialog.close();
    // });

    function escapeHtml(unsafe) {
      return unsafe
           .replace(/&/g, "&amp;")
           .replace(/</g, "&lt;")
           .replace(/>/g, "&gt;")
           .replace(/"/g, "&quot;")
           .replace(/'/g, "&#039;");
   }

    document.getElementById("load-comment").addEventListener("click", function() {
      document.getElementById("load-comment").innerHTML = "Loading";
      fetch('https://{{ host }}/api/v1/statuses/{{ id }}/context')
        .then(function(response) {
          return response.json();
        })
        .then(function(data) {
          if(data['descendants'] &&
             Array.isArray(data['descendants']) && 
            data['descendants'].length > 0) {
              document.getElementById('mastodon-comments-list').innerHTML = "";
              data['descendants'].forEach(function(reply) {
                reply.account.display_name = escapeHtml(reply.account.display_name);
                reply.account.emojis.forEach(emoji => {
                  reply.account.display_name = reply.account.display_name.replace(`:${emoji.shortcode}:`,
                    `<img src="${escapeHtml(emoji.static_url)}" alt="Emoji ${emoji.shortcode}" height="20" width="20" />`);
                });
                mastodonComment =
                  `<div class="mastodon-comment">
                     <div class="avatar">
                       <img src="${escapeHtml(reply.account.avatar_static)}" height=60 width=60 alt="">
                     </div>
                     <div class="c_content">
                       <div class="author">
                         <a href="${reply.account.url}" rel="nofollow">
                           <span>${reply.account.display_name}</span>
                           <span class="disabled">${escapeHtml(reply.account.acct)}</span>
                         </a>
                         <a class="date" href="${reply.uri}" rel="nofollow">
                           ${reply.created_at.substr(0, 10)}
                         </a>
                       </div>
                       <div class="mastodon-comment-content">${reply.content}</div> 
                     </div>
                   </div>`;
                document.getElementById('mastodon-comments-list').appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true}));
              });
          } else {
            document.getElementById('mastodon-comments-list').innerHTML = "<p>Not mastodon comments found</p>";
          }
        });
      });
  </script>

{% endfor %}

{% if posts | length > 1 %}
<h3>Older posts</h3>
{% endif %}
{% for p in posts[1:] %}
<h2> <a style="color: inherit; text-decorations: none" href="/tiago/blog/{{p.name}}">{{ p.title }}</a> </h2>
<small> Published on {{ p.date.strftime('%A, %d %B, %Y') }} </small>
<br/>
{% endfor %}

</div>

{% endblock %}

{% block right_sidebar %}
<h3>All posts</h3>
{% for p in all_posts %}
<h2> <a style="color: inherit; text-decorations: none" href="/tiago/blog/{{p.name}}">{{ p.title }}</a> </h2>
<small> Published on {{ p.date.strftime('%A, %d %B, %Y') }} </small>
<br/>
{% endfor %}
{% endblock %}