From fd8c860d35d21da1edb4b9f2b5f4d7bddafe3d14 Mon Sep 17 00:00:00 2001
From: Bangara Raju Kottedi <bangararaju.kottedi@gmail.com>
Date: Sun, 20 Aug 2023 23:41:31 +0530
Subject: [PATCH 1/2] added views icon and some alignment changes and code
 refactoring

---
 _includes/post-counter.html |  56 ++++++++---------
 _layouts/post.html          | 116 +++++++++++++++++++-----------------
 2 files changed, 86 insertions(+), 86 deletions(-)

diff --git a/_includes/post-counter.html b/_includes/post-counter.html
index 8072982..093be3e 100644
--- a/_includes/post-counter.html
+++ b/_includes/post-counter.html
@@ -1,36 +1,32 @@
-<em id="postvisitcounter">
+<i class="fa fa-eye fa-fw me-1" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.views}}"
+  data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
+<em id="visit-count">
 </em>
 
-<!-- <script defer>
-    function postvisits(response) {
-        document.getElementById('postvisitcounter').innerText = response.value;
-    }
-</script>
-
-<script async src="http://localhost:5016/GetCounter/test?callback=postvisits"></script> -->
-
 <script>
-    function ajax(url) {
-  return new Promise(function(resolve, reject) {
-    var xhr = new XMLHttpRequest();
-    xhr.onload = function() {
-      resolve(this.responseText);
-    };
-    xhr.onerror = reject;
-    xhr.open('GET', url);
-    xhr.send();
-  });
-}
+  document.getElementById("postvisitcounter").style.visibility = "hidden";
+  function ajax(url) {
+    return new Promise(function (resolve, reject) {
+      var xhr = new XMLHttpRequest();
+      xhr.onload = function () {
+        resolve(this.responseText);
+      };
+      xhr.onerror = reject;
+      xhr.open('GET', url);
+      xhr.send();
+    });
+  }
 
-var siteId = "{{ site.id }}";
-var postId = "{{ page.title }}";
+  var siteId = "{{ site.id }}";
+  var postId = "{{ page.title }}";
 
-ajax("{{site.custom-config.blog-services.service_url}}/GetPostViews?siteId="+ siteId + "&postId=" + postId)
-  .then(function(result) {
-    console.log(result); // Code depending on result
-    document.getElementById('postvisitcounter').innerText = result;
-  })
-  .catch(function() {
-    // An error occurred
-  });
+  ajax("{{site.custom-config.blog-services.service_url}}/GetPostViews?siteId=" + siteId + "&postId=" + postId)
+    .then(function (result) {
+      console.log(result); // Code depending on result
+      document.getElementById('visit-count').innerText = result;
+      document.getElementById("postvisitcounter").style.visibility = "visible";
+    })
+    .catch(function () {
+      // An error occurred
+    });
 </script>
\ No newline at end of file
diff --git a/_layouts/post.html b/_layouts/post.html
index d066479..718f8d8 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -2,11 +2,11 @@
 layout: page
 refactor: true
 panel_includes:
-  - toc
+- toc
 tail_includes:
-  - related-posts
-  - post-nav
-  - comments
+- related-posts
+- post-nav
+- comments
 ---
 
 {% include lang.html %}
@@ -14,65 +14,70 @@ tail_includes:
 <h1 data-toc-skip>{{ page.title }}</h1>
 
 <div class="post-meta text-muted">
-    <!-- published date -->
-    <span>
-      {{ site.data.locales[lang].post.posted }}
-      {% include datetime.html date=page.date tooltip=true lang=lang %}
-    </span>
 
-    <!-- lastmod date -->
-    {% if page.last_modified_at and page.last_modified_at != page.date %}
-    <span>
-      {{ site.data.locales[lang].post.updated }}
-      {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
-    </span>
-    {% endif %}
+  <div class="d-flex justify-content-between">
+    <div>
+      <!-- published date -->
+      <span>
+        {{ site.data.locales[lang].post.posted }}
+        {% include datetime.html date=page.date tooltip=true lang=lang %}
+      </span>
+
+      <!-- lastmod date -->
+      {% if page.last_modified_at and page.last_modified_at != page.date %}
+      <span>
+        {{ site.data.locales[lang].post.updated }}
+        {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
+      </span>
+      {% endif %}
+    </div>
 
     <!-- post counter -->
-    <span>
-      {{ site.data.locales[lang].post.views }} 
-      {% include post-counter.html %}
-    </span>
+    <div id="postvisitcounter">
+      <!-- {{ site.data.locales[lang].post.views }}  -->
+      {% include post-counter.html tooltip=true lang=lang %}
+    </div>
+  </div>
 
   {% if page.image %}
-    {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
-    {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
-    {% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
+  {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
+  {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
+  {% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
 
-    {% capture lqip %}
-      {% if page.image.lqip %}
-        lqip="{{ page.image.lqip }}"
-      {% endif %}
-    {% endcapture %}
+  {% capture lqip %}
+  {% if page.image.lqip %}
+  lqip="{{ page.image.lqip }}"
+  {% endif %}
+  {% endcapture %}
 
-    <div class="mt-3 mb-3">
-      <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
-      {%- if page.image.alt -%}
-        <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
-      {%- endif -%}
-    </div>
+  <div class="mt-3 mb-3">
+    <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
+    {%- if page.image.alt -%}
+    <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
+    {%- endif -%}
+  </div>
   {% endif %}
 
   <div class="d-flex justify-content-between">
     <!-- author(s) -->
     <span>
       {% if page.author %}
-        {% assign authors = page.author %}
+      {% assign authors = page.author %}
       {% elsif page.authors %}
-        {% assign authors = page.authors %}
+      {% assign authors = page.authors %}
       {% endif %}
 
       {{ site.data.locales[lang].post.written_by }}
 
       <em>
-      {% if authors %}
+        {% if authors %}
         {% for author in authors %}
-          <a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
-          {% unless forloop.last %}</em>, <em>{% endunless %}
+        <a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
+        {% unless forloop.last %}</em>, <em>{% endunless %}
         {% endfor %}
-      {% else %}
+        {% else %}
         <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
-      {% endif %}
+        {% endif %}
       </em>
     </span>
 
@@ -96,8 +101,8 @@ tail_includes:
   <div class="post-meta mb-3">
     <i class="far fa-folder-open fa-fw me-1"></i>
     {% for category in page.categories %}
-      <a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a>
-      {%- unless forloop.last -%}, {%- endunless -%}
+    <a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a>
+    {%- unless forloop.last -%}, {%- endunless -%}
     {% endfor %}
   </div>
   {% endif %}
@@ -106,12 +111,11 @@ tail_includes:
   {% if page.tags.size > 0 %}
   <div class="post-tags">
     <i class="fa fa-tags fa-fw me-1"></i>
-      {% for tag in page.tags %}
-      <a href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
-          class="post-tag no-text-decoration" >
-        {{- tag -}}
-      </a>
-      {% endfor %}
+    {% for tag in page.tags %}
+    <a href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/" class="post-tag no-text-decoration">
+      {{- tag -}}
+    </a>
+    {% endfor %}
   </div>
   {% endif %}
 
@@ -121,13 +125,13 @@ tail_includes:
 
       {% if site.data.locales[lang].copyright.license.template %}
 
-        {% capture _replacement %}
-        <a href="{{ site.data.locales[lang].copyright.license.link }}">
-          {{ site.data.locales[lang].copyright.license.name }}
-        </a>
-        {% endcapture %}
+      {% capture _replacement %}
+      <a href="{{ site.data.locales[lang].copyright.license.link }}">
+        {{ site.data.locales[lang].copyright.license.name }}
+      </a>
+      {% endcapture %}
 
-        {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
+      {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
 
       {% endif %}
     </div>
@@ -136,4 +140,4 @@ tail_includes:
 
   </div><!-- .post-tail-bottom -->
 
-</div><!-- div.post-tail-wrapper -->
+</div><!-- div.post-tail-wrapper -->
\ No newline at end of file

From dd616fda41cea5c65ba84f02b2c2b9f4bc9a027f Mon Sep 17 00:00:00 2001
From: Bangara Raju Kottedi <bangararaju.kottedi@gmail.com>
Date: Mon, 21 Aug 2023 00:21:20 +0530
Subject: [PATCH 2/2] added loader to the view count and some code refactoring

---
 _config-prod.yml            | 3 +++
 _config-uat.yml             | 3 +++
 _config.yml                 | 4 ++--
 _includes/loader.html       | 1 +
 _includes/post-counter.html | 7 +++++--
 _layouts/post.html          | 2 +-
 6 files changed, 15 insertions(+), 5 deletions(-)
 create mode 100644 _includes/loader.html

diff --git a/_config-prod.yml b/_config-prod.yml
index 7d13ad5..be4c6c1 100644
--- a/_config-prod.yml
+++ b/_config-prod.yml
@@ -3,6 +3,9 @@ id: 'blog'
 
 url: "https://blog.kottedi.in"
 
+show_drafts: false
+future: false
+
 # Custom configuration
 custom-config:
   blog-services:
diff --git a/_config-uat.yml b/_config-uat.yml
index c4415d7..c86625e 100644
--- a/_config-uat.yml
+++ b/_config-uat.yml
@@ -3,6 +3,9 @@ id: 'blog-uat'
 
 url: "https://blog-uat.kottedi.in"
 
+show_drafts: true
+future: true
+
 # Custom configuration
 custom-config:
   blog-services:
diff --git a/_config.yml b/_config.yml
index 8bbe716..193e88c 100644
--- a/_config.yml
+++ b/_config.yml
@@ -198,8 +198,8 @@ jekyll-archives:
     tag: /tags/:name/
     category: /categories/:name/
 
-show_drafts: false
-future: false
+show_drafts: true
+future: true
 
 
 # Custom configuration
diff --git a/_includes/loader.html b/_includes/loader.html
new file mode 100644
index 0000000..cde5386
--- /dev/null
+++ b/_includes/loader.html
@@ -0,0 +1 @@
+<i id="{{include.id}}" class="fa-solid fa-circle-notch fa-spin"></i>
\ No newline at end of file
diff --git a/_includes/post-counter.html b/_includes/post-counter.html
index 093be3e..37335d7 100644
--- a/_includes/post-counter.html
+++ b/_includes/post-counter.html
@@ -1,10 +1,12 @@
 <i class="fa fa-eye fa-fw me-1" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.views}}"
   data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
+{% include loader.html id="postcountloader" %}
 <em id="visit-count">
 </em>
 
 <script>
-  document.getElementById("postvisitcounter").style.visibility = "hidden";
+  document.getElementById("visit-count").style.display = "none";
+  document.getElementById("postcountloader").style.display = "inline-block";
   function ajax(url) {
     return new Promise(function (resolve, reject) {
       var xhr = new XMLHttpRequest();
@@ -24,7 +26,8 @@
     .then(function (result) {
       console.log(result); // Code depending on result
       document.getElementById('visit-count').innerText = result;
-      document.getElementById("postvisitcounter").style.visibility = "visible";
+      document.getElementById("postcountloader").style.display = "none";
+      document.getElementById("visit-count").style.display = "inline-block";
     })
     .catch(function () {
       // An error occurred
diff --git a/_layouts/post.html b/_layouts/post.html
index 718f8d8..7a723cc 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -33,7 +33,7 @@ tail_includes:
     </div>
 
     <!-- post counter -->
-    <div id="postvisitcounter">
+    <div>
       <!-- {{ site.data.locales[lang].post.views }}  -->
       {% include post-counter.html tooltip=true lang=lang %}
     </div>