Merge pull request #15 from chrisfarnham/cwf/add-embed-post-and-replies

Cwf/add embed post and replies

README.md

@@ -33,6 +33,29 @@ Emfed sanitizes the HTML contents of toots using [DOMPurify][] to avoid maliciou
 [eftm]: https://atp.fm/115
 [DOMPurify]: https://github.com/cure53/DOMPurify
 
+Embed a Post and Its Replies
+----------------------------
+
+You can also embed an individual post, the replies to a post, or both.
+This mode lets you use Fediverse replies as a comment system for static sites, inspired by [a blog post from Carl Schwan][reply-post].
+
+Use this to embed a post along with its responses:
+
+    <a class="mastodon-thread"
+       href="https://mastodon.social/@Mastodon"
+       data-toot-id="112011697087209298"
+       >Thread from the Fediverse</a>
+
+By default, both the original post and the replies appear.
+You can customize this link with `data-` attributes:
+
+* `data-exclude-replies`: Set to `true` to exclude the replies.
+* `data-exclude-post`: Set to `true` to exclude the post, leaving just the replies. This may be more appropriate for the blog-comments use case [mentioned above][reply-post].
+
+This mode uses the same style of markup as the user feed, so you can use the same CSS to provide style for these embedded posts.
+
+[reply-post]: https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/
+
 Hacking
 -------
 
@@ -52,6 +75,7 @@ Alternatives
 Changelog
 ---------
 
+* v1.5.0: Add a mode to embed a single post and its replies.
 * v1.4.2: Switch to a more "normal" build process.
 * v1.4.1: Fix npm publication.
 * v1.4.0: Split into multiple submodules, which also lets you avoid automatic transformation.

index.html

@@ -63,6 +63,12 @@ <h1><a href="https://github.com/sampsyo/emfed">Emfed</a></h1>
       it yourself, however you like):</p>
 <pre>&lt;link rel="stylesheet" type="text/css"
     href="https://esm.sh/emfed@1/toots.css"></pre>
+
+    <p>Alternatively, you can embed a single post along with its replies:</p>
+<pre>&lt;a class="mastodon-thread"
+   href="https://mastodon.social/@Mastodon"
+   data-toot-id="112011697087209298"
+   >Single toot and its replies&lt;/a></pre>
     <p>One place you can see Emfed in action is at the
     <a href="https://beets.io">beets project</a>.
     The <a href="https://github.com/sampsyo/emfed">code</a> is
@@ -72,9 +78,9 @@ <h1><a href="https://github.com/sampsyo/emfed">Emfed</a></h1>
     </main>
     <aside>
       <a class="mastodon-feed"
-         href="https://mastodon.social/@Mastodon"
-         data-toot-limit="4"
-         data-toot-account-id="13179"
+        href="https://mastodon.social/@Mastodon"
+        data-toot-limit="4"
+        data-toot-account-id="13179"
          >@[email protected]</a>
     </aside>
     <script type="module" src="emfed.js"></script>

src/client.ts

@@ -61,3 +61,31 @@ export async function getToots(
 
   return await (await fetch(tootURL)).json();
 }
+
+
+export async function getPostAndReplyToots(
+  userURL: string,
+  id: string,
+  excludeReplies?: boolean,
+  excludePost?: boolean,
+): Promise<Toot[]> {
+  let toots: Array<Toot> = [];
+
+  if (excludePost === false) {
+    // fetch Toot
+    const tootURL = Object.assign(new URL(userURL), {
+      pathname: `/api/v1/statuses/${id}`
+    });
+    toots = [(await (await fetch(tootURL)).json())]
+  }
+
+  if (excludeReplies === false) {
+    // fetch replyToots
+    const replyTootURL = Object.assign(new URL(userURL), {
+      pathname: `/api/v1/statuses/${id}/context`
+    });
+
+    toots = [...toots, ...(await (await fetch(replyTootURL)).json())['descendants']];
+  }
+  return toots;
+}

src/core.ts

@@ -1,4 +1,4 @@
-import { Toot, getToots } from "./client.js";
+import { Toot, getToots, getPostAndReplyToots } from "./client.js";
 import DOMPurify from "dompurify";
 
 /**
@@ -137,9 +137,32 @@ export async function loadToots(element: Element) {
   }
 }
 
+export async function loadTootPostAndReplies(element: Element) {
+  const el = element as HTMLAnchorElement;
+  const toots = await getPostAndReplyToots(
+    el.href,
+    String(el.dataset.tootId),
+    el.dataset.excludeReplies === "true",
+    el.dataset.excludePost === "true",
+  );
+
+  // Construct the HTML content.
+  const replies = document.createElement("ol");
+  replies.classList.add("toots");
+  el.replaceWith(replies);
+  for (const toot of toots) {
+    const html = renderToot(toot);
+    replies.insertAdjacentHTML("beforeend", html);
+  }  
+}
+
+
 /**
  * Transform all links on the page marked with the `mastodon-feed` class.
  */
 export function loadAll() {
   document.querySelectorAll("a.mastodon-feed").forEach(loadToots);
+ /* inspired by https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/ */  
+ document.querySelectorAll("a.mastodon-thread").forEach(loadTootPostAndReplies)
+
 }