From a53a959d6948f54e047d8302927bc4a8d4ae8b81 Mon Sep 17 00:00:00 2001
From: Gabriel Cozma <me@gabs.eu.org>
Date: Sat, 4 May 2024 13:08:17 +0300
Subject: [PATCH] feat: Add ActivityPub support for comments

---
 CHANGELOG.md                    |   2 +
 components/BlogFooter.vue       |  37 +++-------
 components/GiscusComments.vue   |  30 ++++++++
 components/MastodonComments.vue | 123 ++++++++++++++++++++++++++++++++
 package.json                    |   3 +-
 pnpm-lock.yaml                  |   8 +++
 6 files changed, 176 insertions(+), 27 deletions(-)
 create mode 100644 components/GiscusComments.vue
 create mode 100644 components/MastodonComments.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1f1e908..b36e920 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/components/BlogFooter.vue b/components/BlogFooter.vue
index 864fbba..b577e84 100644
--- a/components/BlogFooter.vue
+++ b/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">
diff --git a/components/GiscusComments.vue b/components/GiscusComments.vue
new file mode 100644
index 0000000..8a90664
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/components/MastodonComments.vue b/components/MastodonComments.vue
new file mode 100644
index 0000000..0f79a5d
--- /dev/null
+++ b/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>
diff --git a/package.json b/package.json
index a7613db..3bc2687 100644
--- a/package.json
+++ b/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"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b79b90f..8601c93 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@csstools/normalize.css':
         specifier: ^12.1.1
         version: 12.1.1
+      '@oom/mastodon-comments':
+        specifier: ^0.2.2
+        version: 0.2.2
       inter-ui:
         specifier: ^4.0.2
         version: 4.0.2
@@ -26,6 +29,9 @@ packages:
   '@csstools/normalize.css@12.1.1':
     resolution: {integrity: sha512-YAYeJ+Xqh7fUou1d1j9XHl44BmsuThiTr4iNrgCQ3J27IbhXsxXDGZ1cXv8Qvs99d4rBbLiSKy3+WZiet32PcQ==}
 
+  '@oom/mastodon-comments@0.2.2':
+    resolution: {integrity: sha512-OxVglTylzcisUZ8ibx6R3196C0qpqM0vPD6jJ5FfKb0WLM7pePDG/2dVMpmhRdJE2cqnA8nqEAa3Y2E3SXwYCw==}
+
   anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
@@ -110,6 +116,8 @@ snapshots:
 
   '@csstools/normalize.css@12.1.1': {}
 
+  '@oom/mastodon-comments@0.2.2': {}
+
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0