Fixes

config.yaml

@@ -1,6 +1,6 @@
 baseURL: 'http://example.org/'
 languageCode: 'en-us'
-title: 'My New Hugo Site'
+title: 'Fedicomment, a comment system relying on the Fediverse'
 theme: 'poc'
 params:
   mastodonurl: https://framapiaf.org

content/posts/example1/index.md

@@ -4,6 +4,4 @@ date: 2022-11-21
 postid: 109357906602593256
 ---
 
-# Example 1
-
-test
+Click on the button below, this will automatically load comments and counters from the fediverse.

themes/poc/layouts/_default/single.html

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

themes/poc/layouts/partials/head.html

@@ -3,5 +3,5 @@
 	<meta charset="utf-8" />
 	<link rel="stylesheet" href="/main.css" />
 	<link rel="stylesheet" href="/fedicomment.css" />
-	<link rel="favicon" href="/icon.png" />
+	<link rel="icon" href="/favicon.png" />
 </head>

themes/poc/static/fedicomment.js

@@ -1,5 +1,4 @@
 class Fedicomment {
-	enableButton;
 	container;
 	postod;
 	mastodonurl;
@@ -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");
 	}
@@ -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

@@ -1,6 +1,7 @@
 * {
 	margin: 0;
 	box-sizing: border-box;
+	font-family: sans-serif;
 }
 
 body {