233 lines
8.2 KiB
HTML
233 lines
8.2 KiB
HTML
<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 webMentionsSection = document.querySelector(
|
|
".blog-post__web-mentions"
|
|
);
|
|
const likes = mentions
|
|
.filter((m) => m.author.name !== "Ayo Ayco")
|
|
.filter((m) => m["wm-property"] === "like-of");
|
|
const reposts = mentions
|
|
.filter((m) => m.author.name !== "Ayo Ayco")
|
|
.filter((m) => m["wm-property"] === "repost-of");
|
|
const replies = mentions.filter(
|
|
(m) => m["wm-property"] === "in-reply-to"
|
|
);
|
|
|
|
if (likes.length) {
|
|
// render on meta header
|
|
document.getElementById(
|
|
"page-likes"
|
|
).innerHTML = `• 👍 ${likes.length}`;
|
|
|
|
// render on webmentions section
|
|
const clearLikes = document.createElement("div");
|
|
clearLikes.style.clear = "both";
|
|
const likesWrapper = document.createElement("div");
|
|
likesWrapper.append(clearLikes);
|
|
const likesHeader = document.createElement("h2");
|
|
likesHeader.innerHTML = `👍 ${likes.length} Likes`;
|
|
likesWrapper.append(likesHeader);
|
|
const likesAvatars = document.createElement("div");
|
|
likesAvatars.className = "avatar-block";
|
|
likes.forEach((like) => {
|
|
const image = document.createElement("img");
|
|
image.src = like.author.photo;
|
|
image.alt = `Avatar for ${like.author.name}`;
|
|
likesAvatars.append(image);
|
|
});
|
|
likesWrapper.append(likesAvatars);
|
|
|
|
webMentionsSection.append(likesWrapper);
|
|
}
|
|
|
|
if (reposts.length) {
|
|
// render on meta header
|
|
document.getElementById(
|
|
"page-reposts"
|
|
).innerHTML = `• 🔁 ${reposts.length}`;
|
|
|
|
// render on webmentions section
|
|
const repostsWrapper = document.createElement("div");
|
|
const clearReposts = document.createElement("div");
|
|
clearReposts.style.clear = "both";
|
|
repostsWrapper.append(clearReposts);
|
|
const repostsHeader = document.createElement("h2");
|
|
repostsHeader.innerHTML = `🔁 ${reposts.length} Reposts`;
|
|
repostsWrapper.append(repostsHeader);
|
|
|
|
const repostsAvatars = document.createElement("div");
|
|
repostsAvatars.className = "avatar-block";
|
|
reposts.forEach((repost) => {
|
|
const image = document.createElement("img");
|
|
image.src = repost.author.photo;
|
|
image.alt = `Avatar for ${repost.author.name}`;
|
|
repostsAvatars.append(image);
|
|
});
|
|
repostsWrapper.append(repostsAvatars);
|
|
|
|
webMentionsSection.append(repostsWrapper);
|
|
}
|
|
|
|
if (replies.length) {
|
|
// render on meta header
|
|
document.getElementById(
|
|
"page-replies"
|
|
).innerHTML = `• 💬 ${replies.length}`;
|
|
|
|
// render on webmentions section
|
|
const repliesWrapper = document.createElement("div");
|
|
const clearReplies = document.createElement("div");
|
|
clearReplies.style.clear = "both";
|
|
repliesWrapper.append(clearReplies);
|
|
const repliesHeader = document.createElement("h2");
|
|
repliesHeader.innerHTML = `💬 ${replies.length} Replies`;
|
|
repliesWrapper.append(repliesHeader);
|
|
|
|
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 alt="Avatar for ${
|
|
reply.author.name
|
|
}" 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 card = document.createElement("div");
|
|
card.className = "reply-card";
|
|
card.innerHTML = reply.content.html;
|
|
card.insertBefore(author, card.firstChild);
|
|
cell.appendChild(card);
|
|
repliesTable.append(row);
|
|
});
|
|
repliesWrapper.append(repliesTable);
|
|
webMentionsSection.append(repliesWrapper);
|
|
}
|
|
})
|
|
.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>
|