Markdown parser

.gitignore

@@ -0,0 +1,2 @@
+./DS_Store
+./*/.DS_Store

README.md

@@ -2,6 +2,12 @@ Comma: a super simple comment server for static websites, in go
 
 This means your website is no longer purely static, but it's a simple, fairly pragmatic solution to dynamically save and load comments (using javascript)
 
+******************
+This is a fork to tailor the program to the needs of the Quickloox blog.
+
+The comments.html file is a partial used by hugo for comment generation.
+*******************
+
 # API
 
 * GET /foo/bar/whatever/my-post-slug

comments.html

@@ -0,0 +1,137 @@
+<div id="comments-container">
+  <!-- javascript will add comments here. loaded from backend and/or submitted successfully -->
+</div>
+
+<h3>Commenta</h3>
+<form id="new-comment-form" action="{{.Site.Params.commentServer}}">
+  <input type="hidden" name="post" value="{{ .File.BaseFileName }}">
+  <br /><input type="text" name="name" placeholder="* Nome" required />
+  <br /><input type="email" name="email" placeholder="* Email (non visibile, usata per Gravatar)" required />
+  <br /><input type="url" name="url" placeholder="Sito web" />
+  <br /><input type="text" name="special" placeholder="* Sei un umano?" required />
+  <br /><textarea rows="10" name="message" placeholder="* Commento" required></textarea>
+  <button id="new-comment-submit" class="btn-ready" type="submit" value="Send">Invia</button>
+</form>
+
+<script src="{{ .Site.BaseURL }}js/purify.min.js"></script>
+
+<script src="{{ .Site.BaseURL }}js/marked.min.js"></script>
+
+<script language="javascript">
+  function codeToHTMLentities(mdWithHtml) {
+      var result = mdWithHtml.replace(/<code>([\s\S]*?)<\/code>/gm, function(a,b){ return "<code>"+toHtmlEntities(b)+"</code>" });
+
+      result = result.replace(/^```([\s\S]*?)```$/gm, function(a,b){ return "<pre><code>"+toHtmlEntities(b)+"</code></pre>" });
+
+      result = result.replace(/`([^`]+)`/g, function(a,b){ return "<code>"+toHtmlEntities(b)+"</code>" });
+
+      return result;
+  }
+
+  function toHtmlEntities(str) {
+    var map = {
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      "'": '&#39;',
+      '"': '&quot;'
+     };
+
+     return str.replace(/[&<>"']/g, function(m) { return map[m]; });
+	}
+
+  var monthNames = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
+
+
+  function domReady(fn) {
+    if (document.readyState === "complete" || document.readyState === "interactive") {
+      setTimeout(fn, 1);
+    } else {
+      document.addEventListener("DOMContentLoaded", fn);
+    }
+  }
+
+  marked.use({
+    breaks: true,
+    gfm: true,
+  });
+
+  var addComment = function (data) {
+
+    const container = document.getElementById("comments-container");
+
+
+    var txt = "";
+    var d = new Date(data.Ts);
+    var date = d.getDate() + " " + monthNames[d.getMonth()] + " " + d.getFullYear() + " alle " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
+
+    var msg = DOMPurify.sanitize(marked.parse(data.Message)); // Converte il markdown e lo sanifica.
+
+    txt += '<article id="comment" class="comment">\n';
+    txt += '\t<img class="commentAvatar" src="https://www.gravatar.com/avatar/' + data.Hash + '?d=mm&s=60">\n';
+    txt += '\t<div class="commentRight">\n';
+    txt += '\t\t<p class="commentAuthor">' + ((data.Link == "") ? data.Author : '<a href="' + data.Link + '" class="commentAuthor">' + data.Author + '</a>') + '</p>\n';
+    txt += '\t\t<time class="entry-date" datetime="' + data.Ts + '">' + date + '</time>\n';
+    txt += '\t\t<div class="commentMessage">' + msg + '</div>\n';
+    txt += '\t</div>\n';
+    txt += '</article>\n';
+
+    container.innerHTML += txt;
+  };
+
+  domReady(async function () {
+    let form = document.getElementById("new-comment-form");
+    let commentsUrl = "{{.Site.Params.commentServer}}/{{ .File.BaseFileName }}";
+
+    form.addEventListener("submit", (event) => {
+      event.preventDefault();
+      sendData();
+    });
+
+    const response = await fetch(commentsUrl);
+    if (response.ok) {
+      comments = await response.json();
+      comments.forEach(addComment);
+    } else {
+      e = "<div><b>Impossibile caricare i commenti</b></br>" + status + " " + err +
+        "<br/>Funzione commenti disabilitata";
+      form.parentNode.insertBefore(document.createElement(e), form);
+      form.display = "none";
+    }
+
+    async function sendData() {
+      document.querySelector('#new-comment-submit').textContent = 'Invio in corso...';
+      const formData = new FormData(form);
+
+      // Recupera il testo del commento, lo sanitizza, lo sostituisce nel form
+      const msg = formData.get('message');
+      const sanitizedMsg = DOMPurify.sanitize(codeToHTMLentities(msg));
+      //console.log({msg, sanitizedMsg});
+      formData.set('message', sanitizedMsg);
+
+      try {
+        const response = await fetch(commentsUrl, {
+          method: "POST",
+          body: formData,
+        });
+        button = document.querySelector('#new-comment-submit');
+        if (response.ok) {
+          button.textContent = 'Inviato!'; // Qui lasciamo pure la diciture Inviato!...
+          button.className = 'btn-ok';
+          comment = await response.json();
+          addComment(comment);
+          form.reset(); // Clear the form
+          button.textContent = 'Invia'; // Set the button text back to "Send"
+          button.className = 'btn-ready'; // Set the button class back to its default state
+        } else {
+          button.className = 'btn-err';
+          const message = await response.text();
+          button.textContent = 'failed with status ' + response.status + ' ' + message;
+        }
+      } catch (e) {
+        button.textcontent = 'failed with error ' + e;
+        console.error(e);
+      }
+    }
+  });
+</script>