Show comments from Mastodon and Bluesky

_includes/social-comments.html

@@ -0,0 +1,15 @@
+<oom-comments
+  {% if include.comments.mastodon %}
+  mastodon={{ include.comments.mastodon }}
+  {% endif %}
+  {% if include.comments.bluesky %}
+  bluesky={{ include.comments.bluesky }}>
+  {% endif %}
+  No comments found.
+</oom-comments>
+
+<script type="module">
+  import Comments from "/assets/js/vendor/oom-comments.js";
+
+  customElements.define("oom-comments", Comments);
+</script>

_layouts/post.html

@@ -7,5 +7,25 @@
     <h1 class="title">{{ page.title }}</h1>
     {% include_cached authors.html authors=page.author %}
     {{ content }}
+
+    {% if page.comments.enabled %}
+      <h2>Comments</h2>
+      {% if page.comments.mastodon or page.comments.bluesky %}
+        <p> Reply on
+        {% if page.comments.mastodon %}
+          <a href="{{ page.comments.mastodon }}">Mastodon</a>
+        {% endif %}
+        {% if page.comments.bluesky %}
+          or <a href="{{ page.comments.bluesky }}">Bluesky</a>
+        {% endif %}
+        .</p>
+        {% include social-comments.html comments=page.comments %}
+      {% else %}
+      <p>
+        Oops! The reply links for this post haven't been set up yet. Please try
+        to reload this page in a few minutes if you want to reply.
+      </p>
+      {% endif %}
+    {% endif %}
   </div>
 </div>

_sass/_app.scss

@@ -23,6 +23,9 @@
 @use "components/navbar";
 @use "components/header";
 
+/* Vendor */
+@use "vendor/oom-comments";
+
 /* Documentations
  *
  * NOTE:

_sass/vendor/_oom-comments.scss

@@ -0,0 +1,91 @@
+oom-comments {
+  display: block;
+}
+oom-comments ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+oom-comments li {
+  margin: 32px 0;
+}
+oom-comments article {
+  max-width: 600px;
+}
+oom-comments ul ul {
+  margin-left: 64px;
+}
+oom-comments .comment-avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 6px;
+  float: left;
+  margin-right: 14px;
+  box-shadow: 0 0 1px #0009;
+}
+oom-comments .comment-user {
+  color: currentColor;
+  text-decoration: none;
+  display: block;
+  position: relative;
+}
+oom-comments .comment-author {
+  position: absolute;
+  left: 35px;
+  top: 35px;
+  background: white;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  color: gray;
+}
+oom-comments .comment-user:hover .comment-username {
+  text-decoration: underline;
+}
+oom-comments .comment-username {
+  margin-right: 0.5em;
+}
+oom-comments .comment-useraddress {
+  color: gray;
+  font-size: small;
+  font-style: normal;
+}
+oom-comments .comment-time {
+  font-size: small;
+  display: flex;
+  align-items: center;
+  column-gap: 0.4em;
+}
+oom-comments .comment-time svg {
+  width: 1em;
+  height: 1em;
+  fill: gray;
+}
+oom-comments .comment-address {
+  color: currentColor;
+  text-decoration: none;
+  display: block;
+  margin-top: 0.25em;
+}
+oom-comments .comment-address:hover {
+  text-decoration: underline;
+}
+oom-comments .comment-body {
+  margin-top: 0.5em;
+  margin-left: 64px;
+  line-height: 1.5;
+}
+oom-comments .comment-body p {
+  margin: 0.5em 0;
+}
+oom-comments .comment-counts {
+  display: flex;
+  column-gap: 1em;
+  font-size: small;
+}
+oom-comments .comment-counts > span {
+  display: flex;
+  align-items: center;
+  column-gap: 0.3em;
+  color: gray;
+}