feat: Add ActivityPub support for comments

CHANGELOG.md

@@ -18,6 +18,8 @@
 
 ### Feature(s)
 
+- Add ActivityPub support for comments (now you can choose between `activitypub` and `giscus`)
+
 - Provide a `title` for the navigation icons to improve accessibility
 
 - Add two new types of links (`external` and `internal`) with different icons at the end of the link

components/BlogFooter.vue

@@ -4,7 +4,10 @@
     <h2>Comments</h2>
     <p>
       If you have any questions or comments about this post, please feel free to
-      leave a comment below.
+      leave a comment <span v-if="frontmatter.comments === 'giscus'">below</span
+      ><span v-if="frontmatter.comments === 'activitypub'"
+        >on <a :href="frontmatter.posts">this post</a></span
+      >.
     </p>
 
     <noscript
@@ -14,7 +17,10 @@
         JavaScript.</small
       ></noscript
     >
-    <div id="giscusContainer"></div>
+    <MastodonComments
+      v-if="frontmatter.comments === 'activitypub'"
+    ></MastodonComments>
+    <Giscus v-if="frontmatter.comments === 'giscus'"></Giscus>
     <br />
     <hr />
     <p class="dialog-buttons" v-if="frontmatter.prev || frontmatter.next">
@@ -40,31 +46,10 @@
 
 <script setup lang="ts">
 import { useData } from "vitepress";
-import { onMounted } from "vue";
+import Giscus from "./GiscusComments.vue";
+import MastodonComments from "./MastodonComments.vue";
 
-const { theme, frontmatter } = useData();
-
-onMounted(() => {
-  // Load GitHub Comments script dynamically
-  const script = document.createElement("script");
-  script.src = "https://giscus.app/client.js";
-  script.async = true;
-  script.setAttribute("data-repo", theme.value.blog.data.repo);
-  script.setAttribute("data-repo-id", theme.value.blog.data.repoid);
-  script.setAttribute("data-category", "Blog Comments");
-  script.setAttribute("data-category-id", theme.value.blog.data.categoryid);
-  script.setAttribute("data-mapping", "title");
-  script.setAttribute("data-strict", "0");
-  script.setAttribute("data-reactions-enabled", "1");
-  script.setAttribute("data-emit-metadata", "0");
-  script.setAttribute("data-input-position", "bottom");
-  script.setAttribute("data-theme", "preferred_color_scheme");
-  script.setAttribute("data-lang", "en");
-  script.setAttribute("crossorigin", "anonymous");
-
-  // Append the script to the document
-  document.getElementById("giscusContainer")?.appendChild(script);
-});
+const { frontmatter } = useData();
 </script>
 
 <style lang="scss">

components/GiscusComments.vue

@@ -0,0 +1,30 @@
+<template>
+     <div id="giscusContainer"></div>
+</template>
+
+<script setup lang="ts">
+import { useData } from "vitepress";
+import { onMounted } from "vue";
+
+const { theme } = useData();
+
+onMounted(() => {
+  const script = document.createElement("script");
+  script.src = "https://giscus.app/client.js";
+  script.async = true;
+  script.setAttribute("data-repo", theme.value.blog.data.repo);
+  script.setAttribute("data-repo-id", theme.value.blog.data.repoid);
+  script.setAttribute("data-category", "Blog Comments");
+  script.setAttribute("data-category-id", theme.value.blog.data.categoryid);
+  script.setAttribute("data-mapping", "title");
+  script.setAttribute("data-strict", "0");
+  script.setAttribute("data-reactions-enabled", "1");
+  script.setAttribute("data-emit-metadata", "0");
+  script.setAttribute("data-input-position", "bottom");
+  script.setAttribute("data-theme", "preferred_color_scheme");
+  script.setAttribute("data-lang", "en");
+  script.setAttribute("crossorigin", "anonymous");
+
+  document.getElementById("giscusContainer")?.appendChild(script);
+});
+</script>

components/MastodonComments.vue

@@ -0,0 +1,123 @@
+<template>
+  <oom-comments cache="20" :src="frontmatter.post">
+    No comments found.
+  </oom-comments>
+</template>
+
+<script setup type="module">
+import { useData } from "vitepress";
+import Comments from "@oom/mastodon-comments/src/comments.js";
+
+const { frontmatter } = useData();
+
+customElements.define("oom-comments", Comments);
+</script>
+
+<style lang="scss">
+oom-comments {
+  display: block;
+  padding: 2em;
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    margin: 32px 0;
+  }
+
+  article {
+    max-width: 600px;
+  }
+
+  ul ul {
+    margin-left: 64px;
+  }
+
+  .comment-avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 6px;
+    float: left;
+    margin-right: 14px;
+
+    &:hover {
+      transform: rotate(10deg) scale(1.1);
+    }
+  }
+
+  .comment-user {
+    color: var(--color-text);
+    text-decoration: none;
+    display: block;
+    position: relative;
+
+    .comment-author {
+      position: absolute;
+      left: 35px;
+      top: 35px;
+      background: var(--background-color);
+      border-radius: 50%;
+      width: 20px;
+      height: 20px;
+      color: var(--color-accent);
+    }
+
+    &:hover {
+      .comment-username {
+        text-decoration: underline;
+      }
+    }
+
+    .comment-username {
+      margin-right: 0.5em;
+    }
+
+    .comment-useraddress {
+      color: var(--color-text-secondary);
+      font-size: small;
+      font-style: normal;
+    }
+
+    .comment-time {
+      font-size: small;
+    }
+
+    .comment-address {
+      color: currentColor;
+      text-decoration: none;
+      display: block;
+      margin-top: 0.25em;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    .comment-body {
+      margin-top: 0.5em;
+      margin-left: 64px;
+      line-height: 1.5;
+
+      p {
+        margin: 0.5em 0;
+      }
+    }
+
+    .comment-counts {
+      display: flex;
+      column-gap: 1em;
+      font-size: small;
+
+      > span {
+        display: flex;
+        align-items: center;
+        column-gap: 0.3em;
+        color: var(--color-text-secondary);
+      }
+    }
+  }
+}
+</style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aplos",
-  "version": "1.4.0-2",
+  "version": "1.4.0-3",
   "type": "module",
   "description": "A sleek, contemporary, and purposefully designed VitePress theme",
   "main": "index.ts",
@@ -16,6 +16,7 @@
   "license": "MIT",
   "dependencies": {
     "@csstools/normalize.css": "^12.1.1",
+    "@oom/mastodon-comments": "^0.2.2",
     "inter-ui": "^4.0.2",
     "non.geist": "^1.0.2",
     "sass": "^1.74.1"