From 64a4083c5415c15578b7ba90126269198a9d66c7 Mon Sep 17 00:00:00 2001 From: Romain de Laage Date: Mon, 21 Nov 2022 13:47:46 +0100 Subject: [PATCH] Initial commit --- fedicomment.css | 57 ++++++++++++++++++++++++++++++++ fedicomment.js | 86 +++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 30 +++++++++++++++++ main.css | 20 ++++++++++++ 4 files changed, 193 insertions(+) create mode 100644 fedicomment.css create mode 100644 fedicomment.js create mode 100644 index.html create mode 100644 main.css diff --git a/fedicomment.css b/fedicomment.css new file mode 100644 index 0000000..9e0fdc9 --- /dev/null +++ b/fedicomment.css @@ -0,0 +1,57 @@ +.fedicomment-alert { + color: white; + text-align: center; + font-weight: bold; + padding: 30px; + width: 60%; + border-radius: 15px; + margin: auto; +} + +.fedicomment-error { + background-color: red; +} + +.fedicomment-warning { + background-color: blue; +} + +.fedicomment-comment { + margin: 10px; + padding: 10px; + border: solid grey 1px; + border-radius: 10px; +} + +.fedicomment-comment .fedicomment-comment { + border: none; + border-radius: initial; + margin: 0; + margin-left: 5px; + padding: 0; + border-left: solid grey 1px; +} + +.fedicomment-comment-header img { + height: 25px; + width: auto; +} + +.fedicomment-comment-header * { + vertical-align: middle; +} + +.fedicomment-reactions { + margin: 10px; + padding: 10px; + border: solid grey 1px; + border-radius: 10px; +} + +.fedicomment-share::before { + content: '🔄'; +} + +.fedicomment-fav::before{ + content: '❤️'; +} diff --git a/fedicomment.js b/fedicomment.js new file mode 100644 index 0000000..557dce8 --- /dev/null +++ b/fedicomment.js @@ -0,0 +1,86 @@ +class Fedicomment { + enableButton; + container; + postod; + mastodonurl; + + constructor() { + this.container = document.getElementById("fedicomment-container"); + if (this.container == null) { + console.error("Fedicomment: could not find fedicomment container"); + return; + } + + this.postid = this.container.dataset.postid; + if (typeof this.postid != "string") { + console.error("Fedicomment: expected postid"); + return; + } + + this.mastodonurl = this.container.dataset.mastodonurl; + if (typeof this.mastodonurl != "string") { + console.error("Fedicomment: expected mastodonurl"); + return; + } + + this.enableButton = document.createElement("button"); + this.enableButton.innerHTML = "Enable Fedicomment"; + this.enableButton.onclick = function() { + fedicomment.enable(); + } + + this.container.replaceChildren(this.enableButton); + + console.log("Fedicomment successfully initialized"); + } + + enable() { + fetch(`${this.mastodonurl}/api/v1/statuses/${this.postid}`) + .then((resp) => { + if (resp.ok) { + resp.json().then((data) => { + this.container.innerHTML = `
${data.reblogs_count} - ${data.favourites_count} - ${data.replies_count} replies
`; + }) + } + else { + throw "Mastodon instance failed"; + } + }) + .catch((error) => console.error("Fedicomment: failed to fetch comments:", error)); + fetch(`${this.mastodonurl}/api/v1/statuses/${this.postid}/context`) + .then((resp) => { + if (resp.ok) { + resp.json().then((data) => { + // comments is maps post id to replies to this post + let comments = new Map(); + data.descendants.forEach((comment) => { + if (comments.has(comment.in_reply_to_id)) { + comments.set(comment.in_reply_to_id, [...comments.get(comment.in_reply_to_id), comment]); + } + else { + comments.set(comment.in_reply_to_id, [comment]); + } + }) + this.container.innerHTML += this.commentsToHTML(comments, this.postid); + }) + } + else { + throw "Mastodon instance failed"; + } + }) + .catch((error) => console.error("Fedicomment: failed to fetch comments:", error)); + console.log("Fedicomment: Successfully got comments and reactions"); + } + + commentsToHTML(comments, id) { + let result = ""; + if (comments.has(id)) { + comments.get(id).forEach((comment) => { + result += `
${comment.account.username} avatar ${comment.account.username}
${comment.content}${this.commentsToHTML(comments, comment.id)}
` + }) + } + return result; + } +} + +let fedicomment = new Fedicomment(); diff --git a/index.html b/index.html new file mode 100644 index 0000000..e7c2a5f --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + + + + + + + + Fedicomment demo + + +

Les Connards Pro™, capter les données des cons–

+
+ –sommateurs. Les données des consommateurs. Cet épisode inédit des Connards Professionnels™ vous invite à découvrir le monde merveilleux du capitalisme de surveillance, où l’on donne ce qui nous est le plus personnel : notre attention. + +

Le retour des Connards Pros™ avec des épisodes inédits !

+ + Afin de fêter leur retour, le Framablog souhaite publier, chaque semaine pendant un mois, un des épisodes inédits de ce travail… de connards, il faut bien le dire ! + + Le Guide du Connard Professionnel est un livre-BD scénarisé par Pouhiou et dessiné par Gee, placé dans le domaine public volontaire. Nos comparses viennent d’ailleurs de le publier en un joli livre, qui se télécharge librement mais s’achète aussi dans sa version papier si vous voulez soutenir les auteurs. + + L'article utilisé en exemple ici provient du Framablog et a été plublié le 17 novembre 2022. + + Les réponses viennent de Mastodon, depuis le pouet d'annonce de l'article. +
+
+
Your browser must support JS to view comments
+
+ + + diff --git a/main.css b/main.css new file mode 100644 index 0000000..f85cf6e --- /dev/null +++ b/main.css @@ -0,0 +1,20 @@ +* { + margin: 0; + box-sizing: border-box; +} + +body { + height: 100%; + padding: 15px; + width: 70%; + margin: auto; +} + +h1 { + margin: 15px; + text-align: center; +} + +article { + padding: 15px; +}