Added simple commenting system with Firebase Database integration

2 files changed, 100 insertions, 3 deletions

diff --git a/src/static/comments.js b/src/static/comments.js
new file mode 100644
index 0000000..c8234d2
--- /dev/null
+++ b/src/static/comments.js
@@ -0,0 +1,63 @@
+var firebaseConfig = {
+  apiKey: "AIzaSyD3E0XtiUJI4-JIxcIPZziNLGVaTdojz20",
+  authDomain: "mitja-felicijan-blog.firebaseapp.com",
+  databaseURL: "https://mitja-felicijan-blog.firebaseio.com",
+  projectId: "mitja-felicijan-blog",
+  storageBucket: "mitja-felicijan-blog.appspot.com",
+  messagingSenderId: "41650892882",
+  appId: "1:41650892882:web:b308f0a9c47198bdf7ef8b"
+};
+firebase.initializeApp(firebaseConfig);
+
+var database = firebase.database();
+var docPath = 'comments' + window.location.pathname.replace('.html', '');
+var submit = document.querySelector('#submit');
+var comments = document.querySelector('.comments ul');
+var textName = document.querySelector('#name');
+var textComment = document.querySelector('#comment');
+var ref = firebase.database().ref(docPath);
+
+function encodeHTML(s) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
+}
+
+ref.on("value", function (snapshot) {
+  comments.innerHTML = '';
+  var commentList = Array();
+
+  // generating normal array
+  snapshot.forEach(function (item) {
+    commentList.push(item.val())
+  });
+
+  // rendering html
+  commentList.reverse().forEach(function (item) {
+    var liItem = `<li>
+        <div><b>${encodeHTML(item.name)}</b> - ${encodeHTML(item.published)}</div>
+        <div>${encodeHTML(item.comment)}</div>
+      </li>`;
+    comments.innerHTML += liItem;
+  });
+
+}, function (errorObject) {
+  console.log("The read failed: " + errorObject.code);
+});
+
+submit.addEventListener('click', function (evt) {
+  if (textName.value && textComment.value) {
+    submit.disabled = true;
+    firebase.database().ref(docPath + '/' + Date.now()).set({
+      name: textName.value,
+      comment: textComment.value,
+      published: new Date().toISOString().slice(0, 16).replace('T', ' '),
+    }, function (error) {
+      if (error) {
+        alert('Data could not be saved.' + error);
+      } else {
+        textName.value = '';
+        textComment.value = '';
+        submit.disabled = false;
+      }
+    });
+  }
+});
diff --git a/src/static/style.css b/src/static/style.css
index b7fe7f7..f76fea0 100644
--- a/src/static/style.css
+++ b/src/static/style.css
@@ -1,3 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
 body {
     line-height: 150%;
     margin-bottom: 100px;
@@ -39,14 +43,19 @@ img {
 }
 
 ul.article-list li {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
+}
+
+ul.article-list li div {
+  display: flex;
 }
 
 ul.article-list time {
-    display: inline-block;
-    min-width: 120px;
+  display: inline-block;
+  min-width: 130px;
 }
 
+
 article .info {
     font-style: oblique;
 }
@@ -84,6 +93,31 @@ p.modified {
     color: #000;
 }
 
+
+.comments {
+  margin-top: 50px;
+}
+.comments ul {
+  margin-top: 30px;
+  padding-left: 15px;
+}
+.comments ul li {
+  margin-bottom: 20px;
+}
+.comments input,
+.comments textarea {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  font-family: inherit;
+  font-size: inherit;
+  border: 1px solid lightgray;
+}
+.comments textarea {
+  resize: vertical;
+  height: 100px;
+}
+
 @media only screen and (max-width:480px) {
     main {
         padding: 20px;