Added comments made with Nginx NJS

6 files changed, 120 insertions, 7 deletions

diff --git a/template/_includes.html b/template/_includes.html
index 3c73ccf..d16fa3d 100755
--- a/template/_includes.html
+++ b/template/_includes.html
@@ -1,3 +1,3 @@
 <!-- user code -->
 
-<script src="/script.js?v=2021-10-08" async></script>
+<script src="/script.js?v=2022-01-30-01" async></script>
diff --git a/template/_meta.html b/template/_meta.html
index 93f168a..e29a9a8 100755
--- a/template/_meta.html
+++ b/template/_meta.html
@@ -5,7 +5,7 @@
 
 <meta name="theme-color" content="#ffffff">
 
-<link rel="stylesheet" href="/style.css?v=2021-12-07-10">
+<link rel="stylesheet" href="/style.css?v=2022-01-30-02">
 
 <link rel="alternate" type="application/rss+xml" href="/feed.rss">
 <link rel="alternate" type="application/feed+json" href="/feed.json">
diff --git a/template/_navigation.html b/template/_navigation.html
index 8a6152c..f6567c9 100755
--- a/template/_navigation.html
+++ b/template/_navigation.html
@@ -11,10 +11,8 @@
 
       <a href="https://git.mitjafelicijan.com" target="_blank" rel="noopener nofollow" itemprop="url">Git</a>
       <a href="https://files.mitjafelicijan.com" target="_blank" rel="noopener nofollow" itemprop="url">Files</a>
-      <!--<a href="https://github.com/mitjafelicijan" target="_blank" rel="noopener nofollow" itemprop="url">Github</a>-->
       <a href="/curriculum-vitae.html">CV</a>
 
-      <!-- <a href="https://feedbin.com/starred/28977384dcc292a0a400e36cd9bcf64e.xml" itemprop="url">Starred</a> -->
       <a href="/feed.rss" itemprop="url">RSS</a>
     </nav>
   </header>
diff --git a/template/post.html b/template/post.html
index 0404820..31a77b6 100755
--- a/template/post.html
+++ b/template/post.html
@@ -28,8 +28,17 @@
       </article>
 
       {{if .Listing}}
-      <section class="top-margin">
-        <a href="mailto:m@mitjafelicijan.com">➝ Get in contact with me via email.</a>
+
+      <hr class="top-margin">
+
+      <section class="comments" data-guid="{{.Slug}}">
+        <h4>Comments</h4>
+        <form>
+          <p><input type="text" placeholder="Your name (optional)"></p>
+          <p><textarea placeholder="Your comment" required></textarea></p>
+          <p><button type="button">Submit your comment</button></p>
+        </form>
+        <ul></ul>
       </section>
 
       <hr class="top-margin">
diff --git a/template/script.js b/template/script.js
index 4c508ed..0e1291c 100755
--- a/template/script.js
+++ b/template/script.js
@@ -1,4 +1,4 @@
-window.addEventListener('load', () => {
+window.addEventListener('load', async () => {
   // dither image on mouse over replace
   // document.querySelectorAll('article img').forEach(img => {
   //   const ditheredImage = img.src;
@@ -24,4 +24,80 @@ window.addEventListener('load', () => {
       evt.target.style.transform = 'scaleX(1)';
     });
   }
+
+  // comments code
+  const commentsEndpoint = 'https://mitjafelicijan.com/comments-api';
+  const commentsPlaceholder = document.querySelector('.comments');
+
+  if (commentsPlaceholder) {
+    const guid = commentsPlaceholder.dataset.guid;
+    const name = commentsPlaceholder.querySelector('input');
+    const comment = commentsPlaceholder.querySelector('textarea');
+    const submit = commentsPlaceholder.querySelector('button');
+    const comments = commentsPlaceholder.querySelector('ul');
+
+    if (guid) {
+      await readAndRenderComments(guid, comments);
+
+      submit.addEventListener('click', async() => {
+        submit.disabled = true;
+        await writeComments(guid, name.value, comment.value);
+
+        submit.disabled = false;
+        name.value = '';
+        comment.value = '';
+
+        await readAndRenderComments(guid, comments);
+      });
+    }
+  }
+
+  async function writeComments(guid, name, comment) {
+    const response = await fetch(commentsEndpoint, {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        action: 'write',
+        guid,
+        name,
+        comment,
+      })
+    });
+  }
+
+  async function readAndRenderComments(guid, commentsPlaceholder) {
+    const response = await fetch(commentsEndpoint, {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        action: 'read',
+        guid,
+      })
+    });
+
+    // remove all existing comments from list
+    commentsPlaceholder.innerHTML = '';
+
+    const commentList = await response.json();
+    for (const comment of commentList.reverse()) {
+      const date = new Date(comment.date).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric'
+      });
+
+      const commentElement = document.createElement('li');
+      commentElement.innerHTML = `<p><b>${comment.name}</b> - ${date}<p><p>${comment.comment}<p><hr>`;
+      commentsPlaceholder.appendChild(commentElement);
+    }
+  }
+
 });
diff --git a/template/style.css b/template/style.css
index aa0be85..cce9621 100755
--- a/template/style.css
+++ b/template/style.css
@@ -14,6 +14,8 @@
   --badge-label-color: #111111;
 
   --code-font-size: 13px;
+
+  --comment-form-font: 16px 'Times New Roman', Times, serif;
 }
 
 * {
@@ -337,6 +339,34 @@ audio {
   color: #666;
 }
 
+/* comments */
+
+.comments input{
+  width: 100%;
+  font: var(--comment-form-font);
+  border: 1px solid #bbb;
+  padding: 5px;
+}
+
+.comments textarea{
+  width: 100%;
+  height: 100px;
+  resize: vertical;
+  font: var(--comment-form-font);
+  border: 1px solid #bbb;
+  padding: 5px;
+}
+
+.comments ul {
+  list-style-type: none;
+  padding: 0;
+  margin-top: 30px;
+}
+
+.comments hr {
+  border: initial !important;
+  border-top: initial !important;
+}
 
 /* responsive */