commit 64a4083c5415c15578b7ba90126269198a9d66c7
Author: Romain de Laage <romain.delaage@rdelaage.ovh>
Date:   Mon Nov 21 13:47:46 2022 +0100

    Initial commit

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 = `<div class="fedicomment-reactions"><span class="fedicomment-share">${data.reblogs_count}</span> - <span class="fedicomment-fav">${data.favourites_count}</span> - ${data.replies_count} replies</div>`;
+					})
+				}
+				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 += `<div class="fedicomment-comment"><div class="fedicomment-comment-header"><img src="${comment.account.avatar}" alt="${comment.account.username} avatar"> <a href="${comment.account.url}">${comment.account.username}</a></div>${comment.content}${this.commentsToHTML(comments, comment.id)}</div>`
+			})
+		}
+		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 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf8" />
+		<link rel="stylesheet" href="main.css" />
+		<link rel="stylesheet" href="fedicomment.css" />
+		<link rel="favicon" href="icon.png" />
+		<title>Fedicomment demo</title>
+	</head>
+	<body>
+		<h1>Les Connards Pro™, capter les données des cons–</h1>
+		<article>
+			–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.
+			
+			<h2>Le retour des Connards Pros™ avec des épisodes inédits !</h2>
+			
+			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.
+			
+			<a href="https://framablog.org/2022/11/17/les-connards-pro-capter-les-donnees-des-cons/">L'article utilisé en exemple ici provient du Framablog et a été plublié le 17 novembre 2022.</a>
+			
+			Les réponses viennent de Mastodon, depuis <a href="https://framapiaf.org/@Framasoft/109357906602593256">le pouet d'annonce de l'article</a>.
+		</article>
+		<div id="fedicomment-container" data-mastodonurl="https://framapiaf.org" data-postid="109357906602593256">
+			<div class="fedicomment-alert fedicomment-warning">Your browser must support JS to view comments</div>
+		</div>
+		<script src="fedicomment.js"></script>
+	</body>
+</html>
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;
+}