ybbond

My site. The main domain
Log | Files | Refs | README | LICENSE | CC-LICENSE

commit be4238d90d07a58b676f51c848276bcb0ae4bdd1
parent b8aa0474278144d63de3cea62a170082f306d213
Author: Yohanes Bandung <hi@ybbond.dev>
Date:   Thu,  4 Jun 2020 00:20:24 +0700

feature: webmentions implementation part 1

Diffstat:
Massets/styles.scss | 46++++++++++++++++++++++++++++++++++++++++++++--
Adata/webmentions/home.json | 175+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Adata/webmentions/posts--2020-05-about-goatcounter.json | 21+++++++++++++++++++++
Adata/webmentions/posts--2020-05-remove-specific-files-from-old-git-commit.json | 96+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Adata/webmentions/reports--2020-05-19.json | 57+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Adata/webmentions/reports--2020-05-20.json | 72++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Mlayouts/_default/single.html | 5++++-
Alayouts/partials/post/webmentions-handler.html | 96+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Alayouts/partials/svgs/mastodon.svg | 5+++++
Alayouts/partials/svgs/twitter.svg | 2++
Awebmention.js | 70++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

11 files changed, 642 insertions(+), 3 deletions(-)

diff --git a/assets/styles.scss b/assets/styles.scss
@@ -94,7 +94,7 @@ a {
   &#active {
     cursor: default;
   }
-  &:hover, &#active {
+  &:hover:not(.wm-avatar), &#active {
     @include themify($themes) {
       background-color: themed('color-background-hover');
       color: themed('color-red');
@@ -373,7 +373,8 @@ time {
 
 .footnotes {
   hr {
-    margin-bottom: 0.2em;
+    margin-top: 3rem;
+    margin-bottom: 0.2rem;
   }
   &__text {
     margin: 0;
@@ -387,3 +388,44 @@ time {
     content: ']';
   }
 }
+
+.wm-hr {
+  margin-top: 3rem;
+  margin-bottom: 0.2rem;
+}
+.wm-title {
+  margin: 0 0 1rem;
+}
+.wm-subtitle {
+  margin: 1rem 0 0.3rem;
+  font-size: 0.8rem;
+}
+
+.wm-avatar-list {
+  display: flex;
+  align-items: center;
+}
+a.wm-avatar {
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.6rem;
+  margin-right: 0.4rem;
+}
+img.wm-avatar {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 1rem;
+}
+
+.wm-reply {
+  margin-bottom: 1rem;
+  padding-left: 1rem;
+}
+.wm-reply-head {
+  display: flex;
+  align-items: center;
+}
+.wm-reply-content {
+  margin-top: 0.4rem;
+  font-size: 0.9rem;
+}
diff --git a/data/webmentions/home.json b/data/webmentions/home.json
@@ -0,0 +1,174 @@
+[
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "jimboy eat world",
+      "photo": "https://webmention.io/avatar/pbs.twimg.com/3cf15b2ace5bfa4c2581ba0c9ce967052ce29ebec4c15863bbdd5131fabf401d.jpg",
+      "url": "https://twitter.com/wayanjimmy"
+    },
+    "url": "https://twitter.com/wayanjimmy/status/1256524923641556992",
+    "published": "2020-05-02T10:04:21+00:00",
+    "wm-received": "2020-05-03T20:09:15Z",
+    "wm-id": 791294,
+    "wm-source": "https://brid-gy.appspot.com/comment/twitter/bandungpenting/1256514355358625792/1256524923641556992",
+    "wm-target": "https://ybbond.dev/",
+    "content": {
+      "html": "Send love to rss feed\n<a class=\"u-mention\" href=\"https://twitter.com/bandungpenting\"></a>\n<a class=\"u-mention\" href=\"https://ybbond.dev/\"></a>",
+      "text": "Send love to rss feed"
+    },
+    "in-reply-to": "https://ybbond.dev/",
+    "wm-property": "in-reply-to",
+    "wm-private": false
+  },
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "Juang Wiantoro 🐊",
+      "photo": "https://webmention.io/avatar/pbs.twimg.com/8ba188375503cd671a4e9d3d8d8fe9177cfb526d260466eccf9ab813c0270174.jpg",
+      "url": "https://twitter.com/broerjuang"
+    },
+    "url": "https://twitter.com/broerjuang/status/1256547736964325382",
+    "published": "2020-05-02T11:35:00+00:00",
+    "wm-received": "2020-05-03T20:09:16Z",
+    "wm-id": 791295,
+    "wm-source": "https://brid-gy.appspot.com/comment/twitter/bandungpenting/1256514355358625792/1256547736964325382",
+    "wm-target": "https://ybbond.dev/",
+    "content": {
+      "html": "Woa awesome theme! Btw love the direction you're going 🚀\n<a class=\"u-mention\" href=\"https://twitter.com/bandungpenting\"></a>\n<a class=\"u-mention\" href=\"https://ybbond.dev/\"></a>",
+      "text": "Woa awesome theme! Btw love the direction you're going 🚀"
+    },
+    "in-reply-to": "https://ybbond.dev/",
+    "wm-property": "in-reply-to",
+    "wm-private": false
+  },
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "Yohanes Bandung | YBBond",
+      "photo": "https://webmention.io/avatar/pbs.twimg.com/9917d8cd6f06e07fe912490052ae3e5a96709a6f7d3b29dd393ab82bcd7c23ba.jpg",
+      "url": "https://twitter.com/bandungpenting"
+    },
+    "url": "https://twitter.com/bandungpenting/status/1256957808945356813",
+    "published": "2020-05-03T14:44:29+00:00",
+    "wm-received": "2020-05-03T20:09:20Z",
+    "wm-id": 791296,
+    "wm-source": "https://brid-gy.appspot.com/comment/twitter/bandungpenting/1256514355358625792/1256957808945356813",
+    "wm-target": "https://ybbond.dev/",
+    "content": {
+      "html": "thanks Ju!\nwhich direction did you mean?\nif you mean creating a site then discovering new stuffs both technical and philosophical, I'm on it ðŸĪŠ\n<a class=\"u-mention\" href=\"https://twitter.com/broerjuang\"></a>",
+      "text": "thanks Ju!\nwhich direction did you mean?\nif you mean creating a site then discovering new stuffs both technical and philosophical, I'm on it ðŸĪŠ"
+    },
+    "in-reply-to": "https://ybbond.dev/",
+    "wm-property": "in-reply-to",
+    "wm-private": false
+  },
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "Yohanes Bandung | YBBond",
+      "photo": "https://webmention.io/avatar/pbs.twimg.com/9917d8cd6f06e07fe912490052ae3e5a96709a6f7d3b29dd393ab82bcd7c23ba.jpg",
+      "url": "https://twitter.com/bandungpenting"
+    },
+    "url": "https://twitter.com/bandungpenting/status/1256532901979582467",
+    "published": "2020-05-02T10:36:03+00:00",
+    "wm-received": "2020-05-03T20:09:21Z",
+    "wm-id": 791297,
+    "wm-source": "https://brid-gy.appspot.com/comment/twitter/bandungpenting/1256514355358625792/1256532901979582467",
+    "wm-target": "https://ybbond.dev/",
+    "content": {
+      "html": "ikr 💓\n<a class=\"u-mention\" href=\"https://twitter.com/wayanjimmy\"></a>",
+      "text": "ikr 💓"
+    },
+    "in-reply-to": "https://ybbond.dev/",
+    "wm-property": "in-reply-to",
+    "wm-private": false
+  },
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "Juang Wiantoro 🐊",
+      "photo": "https://webmention.io/avatar/pbs.twimg.com/8ba188375503cd671a4e9d3d8d8fe9177cfb526d260466eccf9ab813c0270174.jpg",
+      "url": "https://twitter.com/broerjuang"
+    },
+    "url": "https://twitter.com/broerjuang/status/1257016149511819264",
+    "published": "2020-05-03T18:36:18+00:00",
+    "wm-received": "2020-05-03T20:09:25Z",
+    "wm-id": 791298,
+    "wm-source": "https://brid-gy.appspot.com/comment/twitter/bandungpenting/1256514355358625792/1257016149511819264",
+    "wm-target": "https://ybbond.dev/",
+    "content": {
+      "html": "every direction! :D\n<a class=\"u-mention\" href=\"https://twitter.com/bandungpenting\"></a>\n<a class=\"u-mention\" href=\"https://ybbond.dev/\"></a>",
+      "text": "every direction! :D"
+    },
+    "in-reply-to": "https://ybbond.dev/",
+    "wm-property": "in-reply-to",
+    "wm-private": false
+  },
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "Yohanes Bandung | YBBond",
+      "photo": "https://webmention.io/avatar/pbs.twimg.com/9917d8cd6f06e07fe912490052ae3e5a96709a6f7d3b29dd393ab82bcd7c23ba.jpg",
+      "url": "https://twitter.com/bandungpenting"
+    },
+    "url": "https://twitter.com/bandungpenting/status/1257249396028248065",
+    "published": "2020-05-04T10:03:09+00:00",
+    "wm-received": "2020-05-04T10:52:39Z",
+    "wm-id": 792305,
+    "wm-source": "https://brid-gy.appspot.com/comment/twitter/bandungpenting/1256514355358625792/1257249396028248065",
+    "wm-target": "https://ybbond.dev/",
+    "content": {
+      "html": "thanks ðŸĨ°\n<a class=\"u-mention\" href=\"https://twitter.com/broerjuang\"></a>",
+      "text": "thanks ðŸĨ°"
+    },
+    "in-reply-to": "https://ybbond.dev/",
+    "wm-property": "in-reply-to",
+    "wm-private": false
+  },
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "Yohanes Bandung",
+      "photo": "https://webmention.io/avatar/cf.mastohost.com/faac94884f2da7e21d290b74444291e1415f6cb597aa528ee1fd0585e0c15119.jpg",
+      "url": "https://indieweb.social/@ybbond"
+    },
+    "url": "https://indieweb.social/@ybbond/104109630419658183",
+    "published": "2020-05-04T10:08:09",
+    "wm-received": "2020-05-04T10:56:17Z",
+    "wm-id": 792307,
+    "wm-source": "https://brid-gy.appspot.com/comment/mastodon/@ybbond@indieweb.social/104109628234436467/104109630419658183",
+    "wm-target": "https://ybbond.dev/",
+    "content": {
+      "html": "<p>the guide, of course, is this one <a href=\"https://indiewebify.me/\"><span>https://</span><span>indiewebify.me/</span><span></span></a></p>\n<a href=\"https://indiewebify.me/\">IndieWebify.Me - a guide to getting you on the IndieWeb</a>",
+      "text": "the guide, of course, is this one https://indiewebify.me/\nIndieWebify.Me - a guide to getting you on the IndieWeb"
+    },
+    "in-reply-to": "https://ybbond.dev/",
+    "wm-property": "in-reply-to",
+    "wm-private": false
+  },
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "Tim Chambers",
+      "photo": "https://webmention.io/avatar/cf.mastohost.com/3d127181897047f67fe519d631f377c20bc9b3de25abaa7136d7554001d018de.png",
+      "url": "https://indieweb.social/@tchambers"
+    },
+    "url": "https://indieweb.social/@ybbond/104109628234436467#reblogged-by-2",
+    "published": null,
+    "wm-received": "2020-05-06T03:02:56Z",
+    "wm-id": 792967,
+    "wm-source": "https://brid-gy.appspot.com/repost/mastodon/@ybbond@indieweb.social/104109628234436467/2",
+    "wm-target": "https://ybbond.dev/",
+    "repost-of": "https://ybbond.dev/",
+    "wm-property": "repost-of",
+    "wm-private": false
+  }
+]+
\ No newline at end of file
diff --git a/data/webmentions/posts--2020-05-about-goatcounter.json b/data/webmentions/posts--2020-05-about-goatcounter.json
@@ -0,0 +1,20 @@
+[
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "happydude",
+      "photo": "https://webmention.io/avatar/indieweb.social/a971b399b2b2c66daa292ea79888a77f2f15a8d33c7f9cf611428be3f8283405.png",
+      "url": "https://indieweb.social/@happydude"
+    },
+    "url": "https://indieweb.social/@ybbond/104216953461884291#favorited-by-71219",
+    "published": null,
+    "wm-received": "2020-05-29T19:43:26Z",
+    "wm-id": 803571,
+    "wm-source": "https://brid-gy.appspot.com/like/mastodon/@ybbond@indieweb.social/104216953461884291/71219",
+    "wm-target": "https://ybbond.dev/posts/2020-05-about-goatcounter/",
+    "like-of": "https://ybbond.dev/posts/2020-05-about-goatcounter/",
+    "wm-property": "like-of",
+    "wm-private": false
+  }
+]+
\ No newline at end of file
diff --git a/data/webmentions/posts--2020-05-remove-specific-files-from-old-git-commit.json b/data/webmentions/posts--2020-05-remove-specific-files-from-old-git-commit.json
@@ -0,0 +1,95 @@
+[
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "Juang Wiantoro 🐊",
+      "photo": "https://webmention.io/avatar/pbs.twimg.com/8ba188375503cd671a4e9d3d8d8fe9177cfb526d260466eccf9ab813c0270174.jpg",
+      "url": "https://twitter.com/broerjuang"
+    },
+    "url": "https://twitter.com/ybbond_/status/1261627903055237123#favorited-by-40011472",
+    "published": null,
+    "wm-received": "2020-05-16T17:39:36Z",
+    "wm-id": 797112,
+    "wm-source": "https://brid-gy.appspot.com/like/twitter/ybbond_/1261627903055237123/40011472",
+    "wm-target": "https://ybbond.dev/posts/2020-05-remove-specific-files-from-old-git-commit/",
+    "like-of": "https://ybbond.dev/posts/2020-05-remove-specific-files-from-old-git-commit/",
+    "wm-property": "like-of",
+    "wm-private": false
+  },
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "aji lantang mardhika",
+      "photo": "https://webmention.io/avatar/pbs.twimg.com/a92726e563e1c688e03a05786c9f1d76b39f8c2a5db52bf0ebeb7a3a7220ec2a.png",
+      "url": "https://twitter.com/gielantang"
+    },
+    "url": "https://twitter.com/ybbond_/status/1261627903055237123#favorited-by-109550271",
+    "published": null,
+    "wm-received": "2020-05-16T17:39:37Z",
+    "wm-id": 797113,
+    "wm-source": "https://brid-gy.appspot.com/like/twitter/ybbond_/1261627903055237123/109550271",
+    "wm-target": "https://ybbond.dev/posts/2020-05-remove-specific-files-from-old-git-commit/",
+    "like-of": "https://ybbond.dev/posts/2020-05-remove-specific-files-from-old-git-commit/",
+    "wm-property": "like-of",
+    "wm-private": false
+  },
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "Gema Anggada ✌ïļŽ",
+      "photo": "https://webmention.io/avatar/pbs.twimg.com/37281c4bd268bfe06abfa65433108d1a22abadef735dd75a6e34fcc4e011de39.jpg",
+      "url": "https://twitter.com/heygema"
+    },
+    "url": "https://twitter.com/ybbond_/status/1261627903055237123#favorited-by-309514240",
+    "published": null,
+    "wm-received": "2020-05-16T17:39:40Z",
+    "wm-id": 797114,
+    "wm-source": "https://brid-gy.appspot.com/like/twitter/ybbond_/1261627903055237123/309514240",
+    "wm-target": "https://ybbond.dev/posts/2020-05-remove-specific-files-from-old-git-commit/",
+    "like-of": "https://ybbond.dev/posts/2020-05-remove-specific-files-from-old-git-commit/",
+    "wm-property": "like-of",
+    "wm-private": false
+  },
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "Gema Anggada ✌ïļŽ",
+      "photo": "https://webmention.io/avatar/pbs.twimg.com/37281c4bd268bfe06abfa65433108d1a22abadef735dd75a6e34fcc4e011de39.jpg",
+      "url": "https://twitter.com/heygema"
+    },
+    "url": "https://twitter.com/heygema/status/1261634157450457089",
+    "published": "2020-05-16T12:26:37+00:00",
+    "wm-received": "2020-05-16T17:39:41Z",
+    "wm-id": 797115,
+    "wm-source": "https://brid-gy.appspot.com/repost/twitter/ybbond_/1261627903055237123/1261634157450457089",
+    "wm-target": "https://ybbond.dev/posts/2020-05-remove-specific-files-from-old-git-commit/",
+    "content": {
+      "text": "My first post that is \"techy tutorial\" and not life or app related ðŸ‘Ļ‍ðŸ’ŧ\n\nybbond.dev/posts/2020-05-â€Ķ"
+    },
+    "repost-of": "https://ybbond.dev/posts/2020-05-remove-specific-files-from-old-git-commit/",
+    "wm-property": "repost-of",
+    "wm-private": false
+  },
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "Darcien",
+      "photo": "https://webmention.io/avatar/pbs.twimg.com/7dc27036504760a3290c16f3b6f645d7303db81bb2791c1249eead57d878e229.jpg",
+      "url": "https://twitter.com/darcien_"
+    },
+    "url": "https://twitter.com/ybbond_/status/1261627903055237123#favorited-by-115009099",
+    "published": null,
+    "wm-received": "2020-05-20T16:01:53Z",
+    "wm-id": 798894,
+    "wm-source": "https://brid-gy.appspot.com/like/twitter/ybbond_/1261627903055237123/115009099",
+    "wm-target": "https://ybbond.dev/posts/2020-05-remove-specific-files-from-old-git-commit/",
+    "like-of": "https://ybbond.dev/posts/2020-05-remove-specific-files-from-old-git-commit/",
+    "wm-property": "like-of",
+    "wm-private": false
+  }
+]+
\ No newline at end of file
diff --git a/data/webmentions/reports--2020-05-19.json b/data/webmentions/reports--2020-05-19.json
@@ -0,0 +1,56 @@
+[
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "Tim Chambers",
+      "photo": "https://webmention.io/avatar/cf.mastohost.com/3d127181897047f67fe519d631f377c20bc9b3de25abaa7136d7554001d018de.png",
+      "url": "https://indieweb.social/@tchambers"
+    },
+    "url": "https://indieweb.social/@ybbond/104199690155089427#reblogged-by-2",
+    "published": null,
+    "wm-received": "2020-05-20T15:45:53Z",
+    "wm-id": 798871,
+    "wm-source": "https://brid-gy.appspot.com/repost/mastodon/@ybbond@indieweb.social/104199690155089427/2",
+    "wm-target": "https://ybbond.dev/reports/2020-05-19/",
+    "repost-of": "https://ybbond.dev/reports/2020-05-19/",
+    "wm-property": "repost-of",
+    "wm-private": false
+  },
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "Casey Rollins ðŸ”ĩ :verified:",
+      "photo": "https://webmention.io/avatar/cf.mastohost.com/534ceddf1b3f2668836dc58b15d16f11a417a0a606268c7c6265657c3cea4c4b.png",
+      "url": "https://gameliberty.club/@realcaseyrollins"
+    },
+    "url": "https://indieweb.social/@ybbond/104199690155089427#favorited-by-51680",
+    "published": null,
+    "wm-received": "2020-05-20T20:22:31Z",
+    "wm-id": 799284,
+    "wm-source": "https://brid-gy.appspot.com/like/mastodon/@ybbond@indieweb.social/104199690155089427/51680",
+    "wm-target": "https://ybbond.dev/reports/2020-05-19/",
+    "like-of": "https://ybbond.dev/reports/2020-05-19/",
+    "wm-property": "like-of",
+    "wm-private": false
+  },
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "Casey Rollins ðŸ”ĩ :verified:",
+      "photo": "https://webmention.io/avatar/cf.mastohost.com/534ceddf1b3f2668836dc58b15d16f11a417a0a606268c7c6265657c3cea4c4b.png",
+      "url": "https://gameliberty.club/@realcaseyrollins"
+    },
+    "url": "https://indieweb.social/@ybbond/104199690155089427#reblogged-by-51680",
+    "published": null,
+    "wm-received": "2020-05-20T20:22:31Z",
+    "wm-id": 799285,
+    "wm-source": "https://brid-gy.appspot.com/repost/mastodon/@ybbond@indieweb.social/104199690155089427/51680",
+    "wm-target": "https://ybbond.dev/reports/2020-05-19/",
+    "repost-of": "https://ybbond.dev/reports/2020-05-19/",
+    "wm-property": "repost-of",
+    "wm-private": false
+  }
+]+
\ No newline at end of file
diff --git a/data/webmentions/reports--2020-05-20.json b/data/webmentions/reports--2020-05-20.json
@@ -0,0 +1,71 @@
+[
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "Darcien",
+      "photo": "https://webmention.io/avatar/pbs.twimg.com/7dc27036504760a3290c16f3b6f645d7303db81bb2791c1249eead57d878e229.jpg",
+      "url": "https://twitter.com/darcien_"
+    },
+    "url": "https://twitter.com/darcien_/status/1263033521574080513",
+    "published": "2020-05-20T09:07:12+00:00",
+    "wm-received": "2020-05-20T09:41:55Z",
+    "wm-id": 798701,
+    "wm-source": "https://brid-gy.appspot.com/comment/twitter/ybbond_/1263017467099508737/1263033521574080513",
+    "wm-target": "https://ybbond.dev/reports/2020-05-20/",
+    "photo": [
+      "https://pbs.twimg.com/media/EYcxP5FUcAYZvix.png",
+      "https://pbs.twimg.com/media/EYcxTXjUwAA9a90.png"
+    ],
+    "content": {
+      "html": "Hmm, what about using plain old wget? Something like \"wget -p --timestamping &lt;URL&gt;\". If you want something with more details, maybe Apache Bench could work. For automation, I think Marionette from Firefox could work, but probably that's overkill 😂\n<a class=\"u-mention\" href=\"https://twitter.com/ybbond_\"></a>\n<a class=\"u-mention\" href=\"https://ybbond.dev/\"></a>",
+      "text": "Hmm, what about using plain old wget? Something like \"wget -p --timestamping <URL>\". If you want something with more details, maybe Apache Bench could work. For automation, I think Marionette from Firefox could work, but probably that's overkill 😂"
+    },
+    "in-reply-to": "https://ybbond.dev/reports/2020-05-20/",
+    "wm-property": "in-reply-to",
+    "wm-private": false
+  },
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "SolidRecommendations",
+      "photo": "https://webmention.io/avatar/pbs.twimg.com/2f64f54f54c790e705cdb73d802c170bdf161049fed1957792efab1ebcd6ece3.png",
+      "url": "https://twitter.com/SolidRecs"
+    },
+    "url": "https://twitter.com/SolidRecs/status/1263167728703148032",
+    "published": "2020-05-20T18:00:29+00:00",
+    "wm-received": "2020-05-20T18:41:32Z",
+    "wm-id": 799139,
+    "wm-source": "https://brid-gy.appspot.com/repost/twitter/ybbond_/1263017467099508737/1263167728703148032",
+    "wm-target": "https://ybbond.dev/reports/2020-05-20/",
+    "content": {
+      "text": "I make my site's reports manually. Each post consists of screenshots of devtools' network tab.\n\nI haven't find a good way to automate this,"
+    },
+    "repost-of": "https://ybbond.dev/reports/2020-05-20/",
+    "wm-property": "repost-of",
+    "wm-private": false
+  },
+  {
+    "type": "entry",
+    "author": {
+      "type": "card",
+      "name": "Yohanes Bandung Bondowoso | YBBond",
+      "photo": "https://webmention.io/avatar/pbs.twimg.com/9917d8cd6f06e07fe912490052ae3e5a96709a6f7d3b29dd393ab82bcd7c23ba.jpg",
+      "url": "https://twitter.com/ybbond_"
+    },
+    "url": "https://twitter.com/ybbond_/status/1263262903664164865",
+    "published": "2020-05-21T00:18:41+00:00",
+    "wm-received": "2020-05-21T00:55:22Z",
+    "wm-id": 799543,
+    "wm-source": "https://brid-gy.appspot.com/comment/twitter/ybbond_/1263017467099508737/1263262903664164865",
+    "wm-target": "https://ybbond.dev/reports/2020-05-20/",
+    "content": {
+      "html": "I didn't know wget has those flags. This is good suggestion and can be scripted!\n\nThanks! ðŸĨ°\n<a class=\"u-mention\" href=\"https://twitter.com/darcien_\"></a>",
+      "text": "I didn't know wget has those flags. This is good suggestion and can be scripted!\n\nThanks! ðŸĨ°"
+    },
+    "in-reply-to": "https://ybbond.dev/reports/2020-05-20/",
+    "wm-property": "in-reply-to",
+    "wm-private": false
+  }
+]+
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -22,11 +22,14 @@
         {{ partial "components/content.html" .Content }}
       </div>
       {{- if ne .Type "page" }}
-        <hr class="content__hr">
+        <hr class="wm-hr">
+        {{ partial "post/webmentions-handler.html" . }}
       {{- else }}
         <br>
         <br>
       {{- end }}
+
+
       <p {{ if eq .Type "page" }}class="hcard" hidden=""{{ end }}>
         <a class="u-url link-white" href={{ .Permalink }}>Published</a> on
         <time title="{{ .Date.Format "Monday, 02 January 2006 on 15:04:05" }} GMT+7" class="dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05" }}+07:00">
diff --git a/layouts/partials/post/webmentions-handler.html b/layouts/partials/post/webmentions-handler.html
@@ -0,0 +1,95 @@
+{{ with index $.Site.Data.webmentions (replace (trim .RelPermalink "/") "/" "--") }}
+  {{- with where . "wm-property" "in" (slice "like-of" "repost-of" "bookmark-of" "rsvp" "in-reply-to" "mention-of") }}
+    <p class="wm-title">
+      Webmentions <a
+        href="https://indieweb.org/Webmention"
+      >?</a>:
+    </p>
+  {{- end }}
+
+  {{ with where . "wm-property" "in" (slice "repost-of" "bookmark-of" "rsvp") -}}
+    <p class="wm-subtitle">Reposted/Boosted by:</p>
+    <div class="wm-avatar-container">
+      {{- range . }}
+        <div class="wm-avatar-list">
+          {{ $like := . }}
+          <a
+            href="{{ $like.author.url }}"
+            title="Photo of {{ $like.author.name }}"
+            class="wm-avatar"
+          >
+            <img
+              src="{{ $like.author.photo }}"
+              alt="Photo of {{ $like.author.name }}"
+              class="wm-avatar"
+            />
+          </a>
+        </div>
+      {{- end }}
+    </div>
+  {{ end -}}
+
+  {{ with where . "wm-property" "in" (slice "like-of") -}}
+    <p class="wm-subtitle">Liked by:</p>
+    {{- range . }}
+      {{ $like := . }}
+      <a
+        href="{{ $like.author.url }}"
+        title="Photo of {{ $like.author.name }}"
+        class="wm-avatar"
+      >
+        <img
+          src="{{ $like.author.photo }}"
+          alt="Photo of {{ $like.author.name }}"
+          class="wm-avatar"
+        />
+      </a>
+    {{- end }}
+  {{ end -}}
+
+  {{ with where . "wm-property" "in" (slice "in-reply-to" "mention-of") }}
+    <div>
+      <p class="wm-subtitle">Replies:</p>
+        {{ range . }}
+          {{ $reply := . }}
+          <div class="wm-reply">
+            <div class="wm-reply-head">
+              <a
+                href="{{ $reply.author.url }}"
+                title="Photo of {{ $reply.author.name }}"
+                class="wm-avatar"
+              >
+                <img
+                  src="{{ $reply.author.photo }}"
+                  alt="Photo of {{ $reply.author.name }}"
+                  class="wm-avatar"
+                />
+              </a>
+              <a
+                href="{{ $reply.author.url }}"
+                title="Profile of {{ $reply.author.name }}"
+                class="wm-author no-outline"
+              >
+                <span class="">{{ $reply.author.name }}</span>
+              </a>
+                &nbsp;on&nbsp;
+              <a href="{{ $reply.url }}" class="no-outline">
+                {{ substr (index $reply "wm-received") 0 10 }}
+              </a>
+            </div>
+            <div class="wm-reply-content">
+              {{ if $reply.content.html }}
+                {{ safeHTML $reply.content.html }}
+              {{ else }}
+                {{ $reply.content.text }}
+              {{ end }}
+            </div>
+          </div>
+        {{ end }}
+    </div>
+  {{ end }}
+
+  {{- with where . "wm-property" "in" (slice "like-of" "repost-of" "bookmark-of" "rsvp" "in-reply-to" "mention-of") -}}
+    <hr class="wm-hr">
+  {{- end -}}
+{{ end }}+
\ No newline at end of file
diff --git a/layouts/partials/svgs/mastodon.svg b/layouts/partials/svgs/mastodon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width={{ .width }} height={{ .height }} viewBox="0 0 216.4144 232.00976">
+  <path fill="#01589B" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"/>
+  <path fill="#fff" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"/>
+</svg>+
\ No newline at end of file
diff --git a/layouts/partials/svgs/twitter.svg b/layouts/partials/svgs/twitter.svg
@@ -0,0 +1 @@
+<svg id="Logo_FIXED" data-name="Logo — FIXED" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><style>.cls-1{fill:none;}.cls-2{fill:#1da1f2;}</style></defs><title>Twitter_Logo_Blue</title><rect class="cls-1" width="400" height="400"/><path class="cls-2" d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"/></svg>+
\ No newline at end of file
diff --git a/webmention.js b/webmention.js
@@ -0,0 +1,69 @@
+const fs = require("fs");
+const https = require("https");
+
+fetchWebmentions().then(webmentions => {
+  webmentions.forEach(webmention => {
+    const slug = webmention["wm-target"]
+      .replace("https://ybbond.dev/", "")
+      .replace(/\/$/, "")
+      .replace("/", "--");
+
+    const filename = `${__dirname}/data/webmentions/${slug !== '' ? slug : 'home'}.json`;
+
+    if (!fs.existsSync(filename)) {
+      fs.writeFileSync(filename, JSON.stringify([webmention], null, 2));
+
+      return;
+    }
+
+    const entries = JSON.parse(fs.readFileSync(filename))
+      .filter(wm => wm["wm-id"] !== webmention["wm-id"])
+      .concat([webmention]);
+
+    entries.sort((a, b) => a["wm-id"] - b["wm-id"]);
+
+    fs.writeFileSync(filename, JSON.stringify(entries, null, 2));
+  });
+});
+
+function fetchWebmentions() {
+  const token = process.env.WEBMENTIONS_TOKEN;
+
+  const since = new Date();
+  since.setDate(since.getDate() - 3);
+
+  const url =
+    "https://webmention.io/api/mentions.jf2" +
+    "?domain=ybbond.dev" +
+    `&token=${token}` +
+    `&since=${since.toISOString()}` +
+    "&per-page=999";
+
+  return new Promise((resolve, reject) => {
+    https
+      .get(url, res => {
+        let body = "";
+
+        res.on("data", chunk => {
+          body += chunk;
+        });
+
+        res.on("end", () => {
+          try {
+            resolve(JSON.parse(body));
+          } catch (error) {
+            reject(error);
+          }
+        });
+      })
+      .on("error", error => {
+        reject(error);
+      });
+  }).then(response => {
+    if (!("children" in response)) {
+      throw new Error("Invalid webmention.io response.");
+    }
+
+    return response.children;
+  });
+}+
\ No newline at end of file