<head>
  <title>{{site.title}} • {{page.title}}</title>
  <meta
    name="description"
    content="Learn how to use the best and latest web technologies to boost your productivity."
  />
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Open Graph data -->
  <meta property="og:title" content="{{ page.title }}" />
  <meta property="og:url" content="{{ page.url | absolute_url }}" />
  <meta property="og:description" content="{{ page.description }}" />

  {% if page.type == "post" %}
  <meta property="og:type" content="article" />
  <meta property="article:author" content="{{ site.author }}" />
  <meta property="article:published_time" content="{{page.date}}" />
  {% else %}
  <meta property="og:type" content="website" />
  {% endif %} {% if page.layout == 'home' %}
  <meta
    property="og:image"
    content="{{ '/assets/images/' | absolute_url }}ayo.png"
  />
  {% elsif page.image %}
  <meta
    property="og:image"
    content="{{ '/assets/images/' | absolute_url }}{{ page.image }}.jpg"
  />
  {% else %}
  <meta
    property="og:image"
    content="{{ '/assets/images/' | absolute_url }}ayo.png"
  />
  {% endif %}

  <meta property="og:site_name" content="{{site.title}}" />

  <!--meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
    <meta property="article:section" content="Article Section" />
    <meta property="article:tag" content="Article Tag" /-->

  <link rel="me" href="https://ayco.io" />
  <link rel="me" href="https://ayo.ayco.io" />
  <link rel="me" href="https://social.ayco.io/@ayo" />
  <link rel="me" href="https://mastodon.ph/@ayo" />
  <link rel="me" href="https://shrediverse.net/@ayo" />
  <link rel="me" href="https://stop.voring.me/@ayo" />
  <link rel="me" href="https://metapixl.com/@ayo" />

  <link rel="webmention" href="https://webmention.io/ayos.blog/webmention" />

  <link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}" />
  <link
    rel="alternate"
    type="application/rss+xml"
    title="{{ site.title | escape }}"
    href="{{ '/feed.xml' | relative_url }}"
  />
  <link
    rel="stylesheet"
    type="text/css"
    href="//fonts.googleapis.com/css?family=Lato"
  />
  <link rel="shortcut icon" type="image/png" href="/favicon.ico" />

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@900&display=swap"
    rel="stylesheet"
  />

  <script>
    const ignore = [
      "/",
      "/categories/",
      "/about/",
      "/technology/",
      "/personal/",
      "/projects/",
      "/talks/",
      "/productivity/",
      "/motivational/",
    ];
    const url = new URL(
      document.URL.replace("http://localhost:4000", "https://ayos.blog")
    );
    if (!ignore.includes(url.pathname)) {
      const mentions = getMentions(url.toString())
        .then((mentions) => {
          const replies = mentions.filter(
            (m) => m["wm-property"] === "in-reply-to"
          );
          if (replies.length) {
            // render to post header meta
            const repliesSection = document.querySelector(
              ".blog-post__replies"
            );
            document.getElementById(
              "page-replies"
            ).innerHTML = `• <a href="#replies">${replies.length} replies</a>`;

            // render to replies section
            const repliesTable = document.createElement("table");
            replies.forEach((reply) => {
              const row = document.createElement("tr");
              const cell = document.createElement("td");
              row.append(cell);
              const author = document.createElement("p");
              author.className = "author-wrapper";
              author.innerHTML = `<img class="reply-photo" src="${
                reply.author.photo
              }" /> <span class="reply-name">${
                reply.author.name
              }</span><a href="${reply.url}" class="reply-date">${new Date(
                reply.published
              ).toLocaleDateString()}</a><div class="clear-both"></div>`;
              const replyBlock = document.createElement("div");
              replyBlock.className = "reply-block";
              replyBlock.innerHTML = reply.content.html;
              replyBlock.insertBefore(author, replyBlock.firstChild);
              cell.appendChild(replyBlock);
              repliesTable.append(row);
            });

            repliesSection.innerHTML = "<h2 id='replies'>Web Mentions:</h2>";
            repliesSection.append(repliesTable);
          }

          const likes = mentions.filter((m) => m["wm-property"] === "like-of");
          if (likes.length)
            document.getElementById(
              "page-likes"
            ).innerHTML = `• ${likes.length} likes`;

          const reposts = mentions.filter(
            (m) => m["wm-property"] === "repost-of"
          );
          if (reposts.length)
            document.getElementById(
              "page-reposts"
            ).innerHTML = `• ${reposts.length} reposts`;
        })
        .catch((err) => console.log("err", err));
    }

    async function getMentions(url) {
      let mentions = [];
      let page = 0;
      let perPage = 100;

      while (true) {
        const results = await fetch(
          `https://webmention.io/api/mentions.jf2?target=${url}&per-page=${perPage}&page=${page}`
        ).then((r) => r.json());

        mentions = mentions.concat(results.children);

        if (results.children.length < perPage) {
          break;
        }

        page++;
      }

      return mentions.sort((a, b) =>
        (a.published || a["wm-received"]) < (b.published || b["wm-received"])
          ? -1
          : 1
      );
    }
  </script>
</head>
