17 files changed, 145 insertions, 21 deletions

diff --git a/.editorconfig b/.editorconfig
index 9f48fab..1923d41 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,6 +1,8 @@
 root = true
 
 [*]
+indent_style = space
+indent_size = 2
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
diff --git a/site.tmpl b/site.tmpl
index 243fc59..39e8c6c 100644
--- a/site.tmpl
+++ b/site.tmpl
@@ -72,15 +72,22 @@
   <article>
     <header>
       <h1>{{ .Title }}</h1>
+      {{ if eq .Other.Type "post" }}
       <div class="info">
-        {{ template "date" .Date }}
-        {{ template "author" . }}
-      </div>
+          {{ template "date" .Date }}
+          {{ template "author" . }}
+        </div>
+      {{ end }}
     </header>
     <section>
     {{ .Content }}
     </section>
   </article>
+
+  {{ if eq .Other.Type "post" }}
+    {{ template "comments" . }}
+  {{ end }}
+
   {{ template "modified" . }}
 {{ end }}
 
@@ -113,3 +120,19 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-core.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/autoloader/prism-autoloader.min.js"></script>
 {{ end }}
+
+{{ define "comments" }}
+  <div class="comments">
+    <h3>Comments</h3>
+    <div class="form">
+      <div><input id="name" placeholder="Your name" maxlength="20"></div>
+      <div><textarea id="comment" placeholder="Your comment" maxlength="500"></textarea></div>
+      <div><button id="submit">Post a comment</button></div>
+    </div>
+    <ul></ul>
+  </div>
+
+  <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-database.js"></script>
+  <script src="{{ .Rel "static/comments.js" }}?v={{ .ModTime.Format "20060102150405" }}" async></script>
+{{ end }}
diff --git a/src/curriculum-vitae.md b/src/curriculum-vitae.md
index 6900867..acbd83e 100644
--- a/src/curriculum-vitae.md
+++ b/src/curriculum-vitae.md
@@ -1,6 +1,6 @@
 title: Curriculum Vitae
 date: 2018-01-16
-tags: research
+type: page
 hide: false
 ----
 
diff --git a/src/experiments/encoding-binary-data-into-dna-sequence.md b/src/experiments/encoding-binary-data-into-dna-sequence.md
index cdff15f..bfcf710 100644
--- a/src/experiments/encoding-binary-data-into-dna-sequence.md
+++ b/src/experiments/encoding-binary-data-into-dna-sequence.md
@@ -1,7 +1,7 @@
 title: Encoding binary data into DNA sequence
 description: Imagine a world where you could go outside and take a leaf from a tree and put it through your personal DNA sequencer and get data like music, videos or computer programs from it
 date: 2019-01-03
-tags: experiment
+type: post
 hide: false
 ----
 
diff --git a/src/experiments/profiling-python-web-applications-with-visual-tools.md b/src/experiments/profiling-python-web-applications-with-visual-tools.md
index 58d85bf..cf7164c 100644
--- a/src/experiments/profiling-python-web-applications-with-visual-tools.md
+++ b/src/experiments/profiling-python-web-applications-with-visual-tools.md
@@ -1,7 +1,7 @@
 title: Profiling Python web applications with visual tools
 description: Missing link when debugging and profiling python web application
 date: 2017-04-21
-tags: experiment
+type: post
 hide: false
 ----
 
@@ -16,7 +16,7 @@ Before we begin there are some requirements. We will need to:
 
 If you are using MacOS you should check out [Profiling Viewer](http://www.profilingviewer.com/) or [MacCallGrind](http://www.maccallgrind.com/).
 
-![KCachegrind](/files/kcachegrind.png)
+![KCachegrind](/files/python-profiling/kcachegrind.png)
 
 We will be dividing this post into two main categories:
 
@@ -135,7 +135,7 @@ $ pyprof2calltree -i awesome_random_number.prof
 
 This file can be opened with visualizing tools listed above. In this case we will be using Profilling Viewer under MacOS. You can open image in new tab. As you can see from this example there is hierarchy of execution order  of your code.
 
-![Profilling Viewer](/files/profiling-viewer.png)
+![Profilling Viewer](/files/python-profiling/profiling-viewer.png)
 
 > Make sure you  convert output of the cProfile output every time you want to refresh and take a look at your possible optimizations because cProfile updates .prof  file every time browser hits the function.
 
@@ -158,7 +158,7 @@ $ snakeviz awesome_random_number.prof
 # shows visualized profile
 ```
 
-![SnakeViz](/files/snakeviz.png)
+![SnakeViz](/files/python-profiling/snakeviz.png)
 
 Reddit user [ccharles](https://www.reddit.com/user/ccharles) suggested a better way for installing pip software by targeting user level instead of using sudo.
 
diff --git a/src/experiments/simple-iot-application.md b/src/experiments/simple-iot-application.md
index 1543e52..c7f59cf 100644
--- a/src/experiments/simple-iot-application.md
+++ b/src/experiments/simple-iot-application.md
@@ -1,7 +1,7 @@
 title: Simple IOT application supported by real-time monitoring and data history
 description: Develop simple IOT application with Arduino MKR1000 and Python
 date: 2017-08-11
-tags: experiment
+type: post
 hide: false
 ----
 
diff --git a/src/experiments/using-digitalocean-spaces-object-storage-with-fuse.md b/src/experiments/using-digitalocean-spaces-object-storage-with-fuse.md
index ab0079f..1d3fe48 100644
--- a/src/experiments/using-digitalocean-spaces-object-storage-with-fuse.md
+++ b/src/experiments/using-digitalocean-spaces-object-storage-with-fuse.md
@@ -1,7 +1,7 @@
 title: Using DigitalOcean Spaces Object Storage with FUSE
 description: Using DigitalOcean Spaces Object Storage with FUSE
 date: 2018-01-16
-tags: experiment
+type: post
 hide: false
 ----
 
diff --git a/src/experiments/using-sentiment-analysis-for-click-bait-detection-in-rss-feeds.md b/src/experiments/using-sentiment-analysis-for-click-bait-detection-in-rss-feeds.md
index 1f9d400..ad0362b 100644
--- a/src/experiments/using-sentiment-analysis-for-click-bait-detection-in-rss-feeds.md
+++ b/src/experiments/using-sentiment-analysis-for-click-bait-detection-in-rss-feeds.md
@@ -1,7 +1,7 @@
 title: Using sentiment analysis for click&#8209;bait detection in RSS feeds
 description: Using Python with sentiment analysis to detect if titles in RSS feeds are click-bait
 date: 2019-10-19
-tags: experiment
+type: post
 hide: false
 ----
 
diff --git a/src/files/python-profiling/kcachegrind.png b/src/files/python-profiling/kcachegrind.png
new file mode 100644
index 0000000..0dc48ab
--- /dev/null
+++ b/src/files/python-profiling/kcachegrind.png
diff --git a/src/files/python-profiling/profiling-viewer.png b/src/files/python-profiling/profiling-viewer.png
new file mode 100644
index 0000000..a450513
--- /dev/null
+++ b/src/files/python-profiling/profiling-viewer.png
diff --git a/src/files/python-profiling/snakeviz.png b/src/files/python-profiling/snakeviz.png
new file mode 100644
index 0000000..5bab395
--- /dev/null
+++ b/src/files/python-profiling/snakeviz.png
diff --git a/src/index.html b/src/index.html
index c0767b0..6b987f7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,8 +2,10 @@
 <ul class="article-list">
 {{ range .Site.Pages.Children "experiments/" }}
   <li>
-    {{ template "date" .Date }}
-    <a href="{{ $.Rel .Url }}" title="{{ .Title }}">{{ .Title }}</a>
+    <div>
+      <time>{{ template "date" .Date }}</time>
+      <a href="{{ $.Rel .Url }}" title="{{ .Title }}">{{ .Title }}</a>
+    </div>
   </li>
 {{ end }}
 </ul>
@@ -12,7 +14,7 @@
 <ul class="article-list">
 {{ range .Site.Pages.Children "notes/" }}
   <li>
-    {{ template "date" .Date }}
+    <time>{{ template "date" .Date }}</time>
     <a href="{{ $.Rel .Url }}" title="{{ .Title }}">{{ .Title }}</a>
   </li>
 {{ end }}
diff --git a/src/notes/golang-profiling-simplified.md b/src/notes/golang-profiling-simplified.md
index c8c6f16..29e07d6 100644
--- a/src/notes/golang-profiling-simplified.md
+++ b/src/notes/golang-profiling-simplified.md
@@ -1,7 +1,7 @@
 title: Golang profiling simplified
 description: Golang profiling demystified
 date: 2017-03-07
-tags: blog
+type: post
 hide: false
 ----
 
diff --git a/src/notes/simplifying-and-reducing-clutter.md b/src/notes/simplifying-and-reducing-clutter.md
index 064f08b..483d0dc 100644
--- a/src/notes/simplifying-and-reducing-clutter.md
+++ b/src/notes/simplifying-and-reducing-clutter.md
@@ -1,7 +1,7 @@
 title: Simplifying and reducing clutter in my life and work
 description: Simplifying and reducing clutter in my life and work
 date: 2019-10-14
-tags: blog
+type: post
 hide: false
 ----
 
diff --git a/src/notes/what-i-ve-learned-developing-ad-server.md b/src/notes/what-i-ve-learned-developing-ad-server.md
index d1cc791..25f11a3 100644
--- a/src/notes/what-i-ve-learned-developing-ad-server.md
+++ b/src/notes/what-i-ve-learned-developing-ad-server.md
@@ -1,7 +1,7 @@
 title: What I've learned developing ad server
 description: Lessons I learned developing contextual ad server
 date: 2017-04-17
-tags: blog
+type: post
 hide: false
 ----
 
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;