Add data

archetypes/default.md

@@ -0,0 +1,6 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+---
+

config.yaml

@@ -0,0 +1,6 @@
+baseURL: 'https://fedicomment.patu.re'
+languageCode: 'fr'
+title: 'Fedicomment'
+theme: 'poc'
+params:
+  mastodonurl: https://framapiaf.org

content/_index.md

@@ -0,0 +1 @@
+Hello world!

content/posts/bonjour/index.md

@@ -0,0 +1,18 @@
+---
+title: Bonjour
+date: 2022-11-21
+---
+
+Je suis heureux de vous présenter aujourd'hui ma dernière expérimentation. Je suis un adepte de blogs, des choses simples et du [Fédiverse](https://fr.wikipedia.org/wiki/Fediverse), j'ai donc assez naturellement eu envie de lier un peu tout ça.
+
+J'ai découvert [Plume](https://joinplu.me/), un logiciel permettant de faire des blogs liés au Fediverse en 2020. Le concept est génial, les blogs pour lesquels il est possible d'interagir avec l'auteurice de l'article permettent de préciser le contenu, apporter un point de vue contradictoire et amener à la discussion et même améliorer le contenu, mais souvent ces systèmes reposent soit sur un service propriétaire et centralisé tel que [Disqus](https://disqus.com/) ou obligent à créer un compte sur chacun des blogs pour lesquels nous souhaitons intéragir. Pouvoir intéragir avec son compte Mastodon, c'est tout ce qu'il manquait. Seulement voilà, Plume n'est plus maintenu, il existe bien d'autres logiciels qui proposent quelque chose de similaire mais aucune ne me satisfait réellement, et puis je me demande s'il est vraiment nécessaire de faire tourner tout un service fédéré juste pour faire tourner un blog quand il existe d'existe d'excellent générateurs de sites statiques et qu'on utilise déjà un compte Mastodon pour faire la promo/l'annonce de son dernier article de blog, ne serait-il pas possible d'utiliser son propre compte Mastodon, celui avec lequel nous intéragissont déjà avec notre communauté pour afficher des interactions sur notre article ?
+
+Pour celleux qui ne sont pas au courant, j'ai écrit il y a quelques temps [Mastogem](gemini://vps01.rdelaage.ovh), un logiciel qui permet d'accéder à du contenu public sur le Fédiverse depuis [Gemini](https://fr.wikipedia.org/wiki/Gemini_(protocole)) (une sorte de web en plus sobre, plus calme). Pour écrire ce logiciel j'ai utilise l'[API web](https://fr.wikipedia.org/wiki/Interface_de_programmation) de Mastodon. Une API est une interface qui permet à des logiciels de communiquer ensemble, en l'occurence de récupérer les informations d'un post du Fédiverse et ses interactions depuis une instance Mastodon. Je me suis dis que je pouvais réutiliser ce principe pour l'intégrer sur un blog, en plus comme l'API en question utilise le web pour communiquer on peut laisser le client faire le travail et ainsi garder quelque chose de très simple côté serveur (un site statique, quasiment pas de traitement).
+
+Je me lance donc dans l'écriture du projet, le résultat est le site que vous avez devant vos yeux. Il s'agit d'un simple site statique généré à l'aide de [Hugo](https://gohugo.io/). Il n'y a besoin d'effectuer un traitement que quand l'auteurice du blog souhaite ajouter ou modifier du contenu.
+
+Je ne voulais pas forcer l'utilisateurice à effectuer des communications avec l'instance Mastodon qu'ielle ne souhaitait pas, c'est pour cela que par défaut en naviguant sur le blog, les interactions ne sont pas affichées. Le système proposé nécessite l'exécution de code JavaScript pour fonctionner, certaines utilisateurices ne souhaitent pas exécuter de code JavaScript, dans ce cas il ne sera pas possible d'afficher d'interaction mais la fonction première du site restera disponible, à savoir lire les articles.
+
+Bon, mon système n'est pas parfait, notamment il faut continuer à renseigner manuellement le post Mastodon à lier à notre article pour activer les interactions, donc créer un post puis ajouter les informations nécessaires à l'article, la simplicité a un coup. S'il y a besoin de faire de la modération dans les commentaires (contenu offensant, spam, ...) vous êtes dépendant de la modération de l'instance Mastodon utilisée, ça peut vous motiver à monter votre propre instance ;).
+
+Cet article ne propose pas d'interactions, mais le second article de ce blog (un article de test uniquement) propose de voir ce mécanisme en action.

content/posts/example/index.md

@@ -0,0 +1,9 @@
+---
+title: Exemple d'interactions
+date: 2022-11-21
+postid: 109357906602593256
+---
+
+Ceci est un article de test. Il n'y a pas de contenu intéressant ici mais une très belle démonstration de ce que permet de faire ce petit projet.
+
+Le post à l'origine des interactions montrées dans cet article est le post d'annonce de l'article sur Le Guide du Connard Professionnel par Framasoft, il est disponible à [cette adresse](https://framapiaf.org/@Framasoft/109357906602593256).

fedicomment.css

@@ -1,57 +0,0 @@
-.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: '❤️';
-}

index.html

@@ -1,30 +0,0 @@
-<!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>

main.css

@@ -1,20 +0,0 @@
-* {
-	margin: 0;
-	box-sizing: border-box;
-}
-
-body {
-	height: 100%;
-	padding: 15px;
-	width: 70%;
-	margin: auto;
-}
-
-h1 {
-	margin: 15px;
-	text-align: center;
-}
-
-article {
-	padding: 15px;
-}

themes/poc/layouts/_default/baseof.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+	{{- partial "head.html" . -}}
+	<body>
+		<header>
+			<h1>{{ if .Params.Title}}{{ .Params.Title }}{{ else }}{{ .Site.Title }}{{ end }}</h1>
+		</header>
+		{{- block "main" . }}{{- end }}
+	</body>
+</html>

themes/poc/layouts/_default/index.html

@@ -0,0 +1,10 @@
+{{ define "main" }}
+	{{ .Content }}
+	<ul class="articles">
+	{{ range .Paginator.Pages }}
+		<li>
+			<a href="{{ .Permalink }}">{{ .Title }}</a> -- {{ .Date.Format "2006-01-02" }}
+		</li>
+	{{ end }}
+	</ul>
+{{ end }}

themes/poc/layouts/_default/single.html

@@ -0,0 +1,8 @@
+{{ define "main" }}
+<article>
+{{ .Content }}
+</article>
+{{ if .Params.postid }}
+{{ partial "fedicomment.html" . }}
+{{ end }}
+{{ end }}

themes/poc/layouts/partials/fedicomment.html

@@ -0,0 +1,4 @@
+<div id="fedicomment-container" data-mastodonurl="{{ if .Params.mastodonurl }}{{ .Params.mastodonurl }}{{ else }}{{ .Site.Params.mastodonurl }}{{ end }}" data-postid="{{ .Params.postid }}">
+	<div class="fedicomment-alert fedicomment-warning">Your browser must support JS to view comments</div>
+</div>
+<script src="/fedicomment.js"></script>

themes/poc/layouts/partials/head.html

@@ -0,0 +1,7 @@
+<head>
+	<title>{{ .Site.Title }}</title>
+	<meta charset="utf-8" />
+	<link rel="stylesheet" href="/main.css" />
+	<link rel="stylesheet" href="/fedicomment.css" />
+	<link rel="icon" href="/favicon.png" />
+</head>

themes/poc/static/fedicomment.css

@@ -0,0 +1,85 @@
+:root {
+	--fedi-button-color: #502102;
+	--fedi-warning-color: #b5680b;
+	--fedi-error-color: #fca01d;
+	--fedi-light-color: #f8efd5;
+	--fedi-dark-color: #2e1600;
+	--fedi-hl-color: #7c7672;
+}
+
+#fedicomment-button {
+	background-color: var(--fedi-button-color);
+	border: none;
+	border-radius: 10px;
+	margin: auto;
+	color: var(--fedi-light-color);
+	padding: 15px 32px;
+	text-align: center;
+	text-decoration: none;
+	display: block;
+	font-size: 16px;
+	transition: 0.2s;
+}
+
+#fedicomment-button:hover {
+	border-radius: 15px;
+}
+
+.fedicomment-alert {
+	color: var(--fedi-light-color);
+	text-align: center;
+	font-weight: bold;
+	padding: 30px;
+	width: 60%;
+	border-radius: 15px;
+	margin: auto;
+}
+
+.fedicomment-error {
+	background-color: var(--fedi-error-color);
+}
+
+.fedicomment-warning {
+	background-color: var(--fedi-warning-color);
+}
+
+.fedicomment-comment {
+	margin: 10px;
+	padding: 10px;
+	border: solid var(--fedi-hl-color) 1px;
+	border-radius: 10px;
+}
+
+.fedicomment-comment .fedicomment-comment {
+	border: none;
+	border-radius: initial;
+	margin: 0;
+	margin-left: 5px;
+	padding: 0;
+	padding-left: 5px;
+	border-left: solid var(--fedi-hl-color) 1px;
+}
+
+.fedicomment-comment-header img {
+	height: 25px;
+	width: auto;
+}
+
+.fedicomment-comment-header * {
+	vertical-align: middle;
+}
+
+.fedicomment-reactions {
+	margin: 10px;
+	padding: 10px;
+	border: solid var(--fedi-hl-color) 1px;
+	border-radius: 10px;
+}
+
+.fedicomment-share::before {
+	content: '🔄';
+}
+
+.fedicomment-fav::before{
+	content: '❤️';
+}

themes/poc/static/fedicomment.js

@@ -1,7 +1,6 @@
 class Fedicomment {
-	enableButton;
 	container;
-	postod;
+	postid;
 	mastodonurl;
 	
 	constructor() {
@@ -14,22 +13,34 @@ class Fedicomment {
 		this.postid = this.container.dataset.postid;
 		if (typeof this.postid != "string") {
 			console.error("Fedicomment: expected postid");
+			
+			let errorContainer = document.createElement("div");
+			errorContainer.innerHTML = "Failed to initialize Fedicomment (see the console for details)";
+			errorContainer.classList.add("fedicomment-alert", "fedicomment-error");
+			this.container.replaceChildren(errorContainer);
+			
 			return;
 		}
 		
 		this.mastodonurl = this.container.dataset.mastodonurl;
 		if (typeof this.mastodonurl != "string") {
 			console.error("Fedicomment: expected mastodonurl");
+			
+			let errorContainer = document.createElement("div");
+			errorContainer.innerHTML = "Failed to initialize Fedicomment (see the console for details)";
+			errorContainer.classList.add("fedicomment-alert", "fedicomment-error");
+			this.container.replaceChildren(errorContainer);
+			
 			return;
 		}
 		
-		this.enableButton = document.createElement("button");
-		this.enableButton.innerHTML = "Enable Fedicomment";
-		this.enableButton.onclick = function() {
+		let enableButton = document.createElement("button");
+		enableButton.innerHTML = "Enable Fedicomment";
+		enableButton.id = "fedicomment-button";
+		enableButton.onclick = function() {
 			fedicomment.enable();
 		}
-		
-		this.container.replaceChildren(this.enableButton);
+		this.container.replaceChildren(enableButton);
 		
 		console.log("Fedicomment successfully initialized");
 	}
@@ -39,7 +50,7 @@ class Fedicomment {
 			.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>`;
+						this.container.innerHTML = `<details><summary>Interact with this post</summary>Copy and paste this URL in your Mastodon application: ${data.url}</details><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 {
@@ -68,7 +79,14 @@ class Fedicomment {
 					throw "Mastodon instance failed";
 				}
 			})
-			.catch((error) => console.error("Fedicomment: failed to fetch comments:", error));
+			.catch((error) => {
+				let errorContainer = document.createElement("div");
+				errorContainer.innerHTML = "Failed to fetch comments (see the console for details)";
+				errorContainer.classList.add("fedicomment-alert", "fedicomment-error");
+				this.container.replaceChildren(errorContainer);
+				
+				console.error("Fedicomment: failed to fetch comments:", error)
+			});
 		console.log("Fedicomment: Successfully got comments and reactions");
 	}
 	

themes/poc/static/main.css

@@ -0,0 +1,62 @@
+:root {
+	--bg-color: #fefee2;
+	--fg-color: #000000;
+	--hl-color1: #2f1b0c;
+	--hl-color2: #370028;
+	--link-color1: #2e006c;
+	--link-color2: #2c007a;
+}
+
+* {
+	margin: 0;
+	box-sizing: border-box;
+	font-family: sans-serif;
+	color: var(--fg-color);
+}
+
+a {
+	color: var(--link-color1);
+}
+
+a:hover {
+	color: var(--link-color2);
+}
+
+h1, h2, h3, h3, h5, h6 {
+	color: var(--hl-color1);
+}
+
+h1:hover, h2:hover, h3:hover, h3:hover, h5:hover, h6:hover {
+	color: var(--hl-color2);
+}
+
+body {
+	height: 100%;
+	padding: 15px;
+	width: 60%;
+	margin: auto;
+	background-color: var(--bg-color);
+}
+
+header h1 {
+	margin: 60px;
+	text-align: center;
+}
+
+article h1, article h2, article h3, article h4, article h5, article h6 {
+	margin-bottom: 35px;
+	padding-left: 35px;
+}
+
+article {
+	padding: 15px;
+}
+
+article p {
+	margin-bottom: 20px;
+}
+
+.articles {
+	line-height: 3em;
+	margin: 60px;
+}