added views icon and some alignment changes and code refactoring

_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>
+  document.getElementById("postvisitcounter").style.visibility = "hidden";
   function ajax(url) {
-  return new Promise(function(resolve, reject) {
+    return new Promise(function (resolve, reject) {
       var xhr = new XMLHttpRequest();
-    xhr.onload = function() {
+      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) {
+  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;
+      document.getElementById('visit-count').innerText = result;
+      document.getElementById("postvisitcounter").style.visibility = "visible";
     })
-  .catch(function() {
+    .catch(function () {
       // An error occurred
     });
 </script>

_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,6 +14,9 @@ tail_includes:
 <h1 data-toc-skip>{{ page.title }}</h1>
 
 <div class="post-meta text-muted">
+
+  <div class="d-flex justify-content-between">
+    <div>
       <!-- published date -->
       <span>
         {{ site.data.locales[lang].post.posted }}
@@ -27,12 +30,14 @@ tail_includes:
         {% 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 %}
@@ -107,8 +112,7 @@ tail_includes:
   <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" >
+    <a href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/" class="post-tag no-text-decoration">
       {{- tag -}}
     </a>
     {% endfor %}