Merge branch 'dev' of rajukottedi/chirpy-blogging into prod

_config.yml

@@ -125,6 +125,7 @@ pwa:
     # Usually its value is the `baseurl` of another website that
     # shares the same domain name as the current website.
     deny_paths:
+      - "/api"
       # - "/example"  # URLs match `<SITE_URL>/example/*` will not be cached by the PWA
 
 paginate: 10
@@ -216,4 +217,5 @@ future: true
 # Custom configuration
 custom-config:
   blog-services:
-    service_url: 'http://localhost:5000'
+    service_url: 'https://localhost:7013/blog/api/v1/blog/posts'
+    service_key: 'c6eAXYcNT873TT7BfMgQyS4ii7hxa53TLEUN7pAGaaU='

_includes/comments-counter.html

@@ -4,6 +4,30 @@
     }
 </style>
 
-<i class="fa fa-comment" aria-hidden="true" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.comments}}"
+<i class="fa fa-comment" aria-hidden="true" {% if include.tooltip %}
-    data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
+    title="{{site.data.locales[include.lang].post.comments}}" data-bs-toggle="tooltip" data-bs-placement="bottom" {%
-<span class="remark42__counter"></span>
+    endif %}></i>
+<span class="remark42__counter"></span>
+
+<script>
+    function commentTextChange() {
+        var target = document.querySelector('.remark42__counter');
+        if(!target){
+            window.setTimeout(commentTextChange, 500);
+            return;
+        }
+        var observer = new MutationObserver(function (mutations) {
+            const comments = document.querySelector(".remark42__counter");
+            var commentsCount = 0;
+            if(Number(comments.innerText) !== NaN){
+                commentsCount = Number(comments.innerText);
+            }
+            if(commentsCount !== commentsCountFromResponse){
+                ajax(serviceUrl + "/UpdatePostCommentsCount?blogUrl=" + siteId + "&postSlug=" + postId, "POST", commentsCount);
+            }
+        });
+        var config = { childList: true };
+        observer.observe(target, config);
+    }
+    commentTextChange();
+</script>

_includes/comments/remark42.html

@@ -4,7 +4,7 @@
 <script>
     var remark_config = {
     host: remark42Host,
-    site_id: siteId,
+    site_id: "{{site.id}}",
     components: ['embed', 'counter'],
 
     max_shown_comments: 10,

_includes/head.html

@@ -104,21 +104,54 @@
   <!-- JavaScript -->
   <script>
     var serviceUrl = "{{site.custom-config.blog-services.service_url}}";
-    var siteId = "{{site.id}}";
+    var serviceApiKey = "{{site.custom-config.blog-services.service_key}}";
+    var siteId = "{{site.url}}{{site.baseurl}}";
     var postId = "{{page.slug}}";
     var remark42Host = "{{ site.comments.remark42.host }}";
 
-    function ajax(url) {
+    var postDetails = {
-      return new Promise(function (resolve, reject) {
+      postUrl: "{{site.url}}{{site.baseurl}}{{page.url}}",
-        var xhr = new XMLHttpRequest();
+      slug: "{{page.slug}}",
-        xhr.onload = function () {
+      title: "{{page.title}}",
-          resolve(this.responseText);
+      description: "{{page.description}}",
-        };
+      categories: [],
-        xhr.onerror = reject;
+      image: "{{page.image.path}}",
-        xhr.open('GET', url);
+      createdDate: "{{page.date}}",
-        xhr.send();
+      modifiedDate: "{{page.last_modified_at | strip}}",
-      });
+      blogUrl: "{{site.url}}{{site.baseurl}}",
+      views: 0,
+      likes: 0,
+      comments: 0
+    };
+
+  function liquidArrayToJsonArray(){
+      var items = [];
+    {% for category in page.categories %}
+      {% assign cat = category %}
+      items.push("{{cat}}");
+    {% endfor %}
+      return items;
+  }
+
+    postDetails.categories = liquidArrayToJsonArray();
+
+    function ajax(url, type, payload) {
+    if (payload === undefined) {
+      payload = null;
     }
+    return new Promise(function (resolve, reject) {
+      var xhr = new XMLHttpRequest();
+      xhr.onload = function () {
+        resolve(this.responseText);
+      };
+      xhr.onerror = reject;
+      xhr.open(type, url);
+      xhr.setRequestHeader('XApiKey', serviceApiKey);
+      xhr.setRequestHeader('Content-Type', 'application/json');
+      xhr.setRequestHeader('ngsw-bypass', '');
+      xhr.send(JSON.stringify(payload));
+    });
+  }
   </script>
 {% if jekyll.environment == 'production' and site.google_analytics.id != empty and site.google_analytics.id %}
   <!-- Google Tag Manager -->

_includes/likes-views.html

@@ -29,16 +29,40 @@
     const views = document.getElementById("views-count");
     const likes = document.getElementById("likes-count");
     const postLikesAndViews = document.getElementById("likes-views");
+    var commentsCountFromResponse = 0;
 
     postLikesAndViews.style.display = "none";
 
-    ajax(serviceUrl + "/GetPostLikesAndViews?siteId=" + siteId + "&postId=" + postId)
+    ajax(serviceUrl + "/GetPostLikesAndViews?blogUrl=" + siteId + "&postSlug=" + postId, "GET")
         .then(function (result) {
             if (result != "N/A") {
                 var response = JSON.parse(result);
-                views.innerText = response.postViews;
+                setPostMetrics(response);
-                likes.innerText = response.postLikes;
+                if(!response.postExists){
-                postLikesAndViews.style.display = "inline";
+                    postDetails.likes = postDetails.views = postDetails.comments = 0;
+                    if(Number(likes.innerText) !== NaN){
+                        postDetails.likes = Number(likes.innerText);
+                    }
+                    if(Number(views.innerText) !== NaN){
+                        postDetails.views = Number(views.innerText);
+                    }
+                    ajax(serviceUrl + "/CreatePost", "POST", postDetails)
+                        .then(function (result) {
+                            if(result != "N/A"){
+                                var response = JSON.parse(result);
+                                setPostMetrics(response);
+                            }
+                        });
+                }
             }
         });
+
+    function setPostMetrics(response){
+        if(response.postExists){
+            views.innerText = response.views;
+            likes.innerText = response.likes;
+            commentsCountFromResponse = response.comments;
+            postLikesAndViews.style.display = "inline";
+        }
+    } 
 </script>

_includes/likes.html

@@ -37,9 +37,8 @@
 
     function apiCall(url, event) {
         onLoadAndClick();
-        ajax(url)
+        ajax(url, "POST")
             .then(function (result) {
-                console.log(result);
                 if (event === "click") {
                     heartIcon.classList.toggle("liked");
                 }
@@ -48,7 +47,7 @@
             });
     }
 
-    var apiUrl = serviceUrl + "/GetPostLikes?siteId=" + siteId + "&postId=" + postId;
+    var apiUrl = serviceUrl + "/GetPostLikes?blogUrl=" + siteId + "&postSlug=" + postId;
 
     if(likesOnLoad == "{{include.onload}}"){
     apiCall(apiUrl);
@@ -56,9 +55,9 @@
 
     heartIcon.addEventListener("click", () => {
         if (!heartIcon.classList.contains("liked")) {
-            apiUrl = serviceUrl + "/LikePost?siteId=" + siteId + "&postId=" + postId;
+            apiUrl = serviceUrl + "/LikePost?blogUrl=" + siteId + "&postSlug=" + postId;
         } else {
-            apiUrl = serviceUrl + "/DislikePost?siteId=" + siteId + "&postId=" + postId;
+            apiUrl = serviceUrl + "/DislikePost?blogUrl=" + siteId + "&postSlug=" + postId;
         }
 
         apiCall(apiUrl, "click");

_includes/views.html

@@ -1,7 +1,6 @@
 <i class="fa fa-eye fa-fw" aria-hidden="true" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.views}}"
   data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
-<em id="views-count" style="margin-right: 12px">
+<em id="views-count" style="margin-right: 12px"></em>
-</em>
 
 <script>
   const viewsOnLoad = "true";

assets/js/common.js

@@ -3,14 +3,17 @@ var siteId = document.currentScript.getAttribute('siteid');
 var postId = document.currentScript.getAttribute('postid');
 var remark42Host = document.currentScript.getAttribute('remark42host');
 
-function ajax(url) {
+function ajax(url, type, payload) {
+    if (payload === undefined) {
+      payload = null;
+    }
     return new Promise(function (resolve, reject) {
       var xhr = new XMLHttpRequest();
       xhr.onload = function () {
         resolve(this.responseText);
       };
       xhr.onerror = reject;
-      xhr.open('GET', url);
+      xhr.open(type, url);
-      xhr.send();
+      xhr.send(payload);
     });
   }

assets/js/likes.js

@@ -16,7 +16,6 @@ function apiCall(url, event) {
     onLoadAndClick();
     ajax(url)
         .then(function (result) {
-            console.log(result);
             if(event === "click"){
                 heartIcon.classList.toggle("liked");
             }