From 3db8758b1bb7b6cfefedaa648b4846d4a4b13b5a Mon Sep 17 00:00:00 2001 From: chrisfarnham Date: Sat, 23 Mar 2024 10:54:34 -0400 Subject: [PATCH 1/5] adding embed post and replies features --- README.md | 24 ++++++++++++++++++++++++ index.html | 22 ++++++++++++++++++---- src/client.ts | 28 ++++++++++++++++++++++++++++ src/core.ts | 25 ++++++++++++++++++++++++- 4 files changed, 94 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f2102e5..ee4a828 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,30 @@ Emfed sanitizes the HTML contents of toots using [DOMPurify][] to avoid maliciou [eftm]: https://atp.fm/115 [DOMPurify]: https://github.com/cure53/DOMPurify +Embedding single posts and replies +---------------------------------- + +You can also embed individual posts and its replies. There are options to exclude the post itself and just show replies. Or +exclude the replies and show the just the post. + +This functionality was added to support embedding comments on static sites and was inspired by +inspired by Carl Schwan's post here: https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/ + +To embed a single post and its responses put a special link where you want it to appear: + + Post and replies from the Fediverse + +You can customize this link with `data-` attributes: + +* `data-exclude-replies`: "true" or "false" according to whether or not you'd like to exclude replies. The default behavior is that replies are included. +* `data-exclude-post`:"true" or "false" according to whether or not you'd like to exclude the post itself. The default behavior is that the is included. Excluding the post supports behavior described in Carl Schwan's post mentioned above to add comments to a static web page. + +Note that `mastodon-post-and-replies` style links and behavior employ the exact styling mechanisms as the standard feed so all CSS +stylings and links work the same. + Hacking ------- diff --git a/index.html b/index.html index 47dd096..85963f1 100644 --- a/index.html +++ b/index.html @@ -51,7 +51,7 @@

Emfed

in-browser way to embed Mastodon feeds into webpages. - To make a feed like the one on this page, you use simple markup like + To make a feed like the one on the top, right of this page, you use simple markup like this:

<a class="mastodon-feed"
    href="https://mastodon.social/@Mastodon"
@@ -63,6 +63,14 @@ 
Emfed

       it yourself, however you like):

 
<link rel="stylesheet" type="text/css"
     href="https://esm.sh/emfed@1/toots.css">

+    
+    
To make embed a post and reply like the right of thie page you can use simple markup like this:

+    
+      <a class="mastodon-post-and-replies"
+        href="https://mastodon.social/@Mastodon"
+        data-toot-id="112011697087209298"
+        >Replies to my toot</a>
+    

     
One place you can see Emfed in action is at the
     beets project.
     The code is
@@ -71,11 +79,17 @@ 
Emfed

       README.

     
     
     
   
diff --git a/src/client.ts b/src/client.ts
index 48fa5f5..1e68fba 100644
--- a/src/client.ts
+++ b/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 {
+  let toots: Array = [];
+
+  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;
+}
diff --git a/src/core.ts b/src/core.ts
index 82f3e71..5127b8c 100644
--- a/src/core.ts
+++ b/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-post-and-replies").forEach(loadTootPostAndReplies)
+
 }

From 3d760e4745f446340d1a48293ec2b3fc63b3e31a Mon Sep 17 00:00:00 2001
From: Adrian Sampson 
Date: Sun, 24 Mar 2024 19:12:29 -0400
Subject: [PATCH 2/5] Refine docs for single-post mode (#15)

---
 README.md | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index ee4a828..c391a63 100644
--- a/README.md
+++ b/README.md
@@ -33,29 +33,28 @@ Emfed sanitizes the HTML contents of toots using [DOMPurify][] to avoid maliciou
 [eftm]: https://atp.fm/115
 [DOMPurify]: https://github.com/cure53/DOMPurify
 
-Embedding single posts and replies
-----------------------------------
+Embed a Post and Its Replies
+----------------------------
 
-You can also embed individual posts and its replies. There are options to exclude the post itself and just show replies. Or 
-exclude the replies and show the just the post.
+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].
 
-This functionality was added to support embedding comments on static sites and was inspired by 
-inspired by Carl Schwan's post here: https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/
-
-To embed a single post and its responses put a special link where you want it to appear:
+Use this to embed a post:
 
     Post and replies from the Fediverse
 
+By default, both the original post and the replies appear.
 You can customize this link with `data-` attributes:
 
-* `data-exclude-replies`: "true" or "false" according to whether or not you'd like to exclude replies. The default behavior is that replies are included.
-* `data-exclude-post`:"true" or "false" according to whether or not you'd like to exclude the post itself. The default behavior is that the is included. Excluding the post supports behavior described in Carl Schwan's post mentioned above to add comments to a static web page.
+* `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.
 
-Note that `mastodon-post-and-replies` style links and behavior employ the exact styling mechanisms as the standard feed so all CSS
-stylings and links work the same.
+[reply-post]: https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/
 
 Hacking
 -------

From 0351ac18ea61bef043823ee28338440d35db7483 Mon Sep 17 00:00:00 2001
From: Adrian Sampson 
Date: Sun, 24 Mar 2024 19:13:02 -0400
Subject: [PATCH 3/5] Changelog entry for #15

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index c391a63..7a3db81 100644
--- a/README.md
+++ b/README.md
@@ -75,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.

From 7c1694664d4e5a40b39d249aabfb06b318dbdb8a Mon Sep 17 00:00:00 2001
From: Adrian Sampson 
Date: Sun, 24 Mar 2024 19:15:51 -0400
Subject: [PATCH 4/5] Simplify homepage

---
 index.html | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 85963f1..c2a564f 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@ 
Emfed

       in-browser way to embed
       Mastodon
       feeds into webpages.
-      To make a feed like the one on the top, right of this page, you use simple markup like
+      To make a feed like the one on this page, you use simple markup like
       this:

 
<a class="mastodon-feed"
    href="https://mastodon.social/@Mastodon"
@@ -63,14 +63,12 @@ 
Emfed

       it yourself, however you like):

 
<link rel="stylesheet" type="text/css"
     href="https://esm.sh/emfed@1/toots.css">

-    
-    
To make embed a post and reply like the right of thie page you can use simple markup like this:

-    
-      <a class="mastodon-post-and-replies"
-        href="https://mastodon.social/@Mastodon"
-        data-toot-id="112011697087209298"
-        >Replies to my toot</a>
-    

+
+    
Alternatively, you can embed a single post along with its replies:

+
<a class="mastodon-post-and-replies"
+   href="https://mastodon.social/@Mastodon"
+   data-toot-id="112011697087209298"
+   >replies to my toot</a>

     
One place you can see Emfed in action is at the
     beets project.
     The code is
@@ -79,17 +77,11 @@ 
Emfed

       README.

     
     
     
   

From 848e8b6741f5cc3a96ff292b208b50f0aad42d90 Mon Sep 17 00:00:00 2001
From: chrisfarnham 
Date: Tue, 9 Apr 2024 08:10:59 -0400
Subject: [PATCH 5/5] updated to embed using

---
 README.md   | 6 +++---
 index.html  | 4 ++--
 src/core.ts | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 7a3db81..2a8973e 100644
--- a/README.md
+++ b/README.md
@@ -39,12 +39,12 @@ 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:
+Use this to embed a post along with its responses:
 
-    Post and replies from the Fediverse
+       >Thread from the Fediverse
 
 By default, both the original post and the replies appear.
 You can customize this link with `data-` attributes:
diff --git a/index.html b/index.html
index c2a564f..95f6987 100644
--- a/index.html
+++ b/index.html
@@ -65,10 +65,10 @@ 
Emfed

     href="https://esm.sh/emfed@1/toots.css">

 
     
Alternatively, you can embed a single post along with its replies:

-
<a class="mastodon-post-and-replies"
+
<a class="mastodon-thread"
    href="https://mastodon.social/@Mastodon"
    data-toot-id="112011697087209298"
-   >replies to my toot</a>

+   >Single toot and its replies</a>

     
One place you can see Emfed in action is at the
     beets project.
     The code is
diff --git a/src/core.ts b/src/core.ts
index 5127b8c..fa4dafc 100644
--- a/src/core.ts
+++ b/src/core.ts
@@ -163,6 +163,6 @@ export async function loadTootPostAndReplies(element: Element) {
 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-post-and-replies").forEach(loadTootPostAndReplies)
+ document.querySelectorAll("a.mastodon-thread").forEach(loadTootPostAndReplies)
 
 }