SEO optimization

1. added critical JS and CSS inline

_includes/comments/remark42.html

@@ -1,4 +1,35 @@
 <div id="remark42">
 </div>
 
-<script src="{{ '/assets/js/comments/remark42.js' | relative_url }}"></script>
+<script>
+    var remark_config = {
+    host: remark42Host,
+    site_id: siteId,
+    components: ['embed'],
+
+    max_shown_comments: 10,
+    theme: modeToggle.modeStatus,
+
+    locale: 'en',
+    show_email_subscription: false
+};
+
+(function (c) {
+    for (var i = 0; i < c.length; i++) {
+        var d = document, s = d.createElement('script');
+        s.src = remark_config.host + '/web/' + c[i] + '.js';
+        s.defer = true;
+        (d.head || d.body).appendChild(s);
+    }
+})(remark_config.components || ['embed']);
+
+var targetDiv = document.getElementById("sidebar").getElementsByClassName("mode-toggle")[0];
+
+if (targetDiv != null) {
+    targetDiv.addEventListener("click", () => {
+        window.REMARK42.changeTheme(modeToggle.modeStatus === 'light' ? 'dark' : 'light');
+    })
+}
+</script>
+
+<!-- <script src="{{ '/assets/js/comments/remark42.js' | relative_url }}"></script> -->

_includes/head.html

@@ -6,41 +6,39 @@
   <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-  <meta
+  <meta name="viewport"
-    name="viewport"
+    content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
-    content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
-  >
 
   {% capture seo_tags %}
-    {% seo title=false %}
+  {% seo title=false %}
   {% endcapture %}
 
   {% if page.image %}
-    {% assign img = page.image.path | default: page.image %}
+  {% assign img = page.image.path | default: page.image %}
 
-    {% unless img contains '://' %}
+  {% unless img contains '://' %}
-      {% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %}
+  {% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %}
-      {% capture target %}"{{ img | absolute_url }}"{% endcapture %}
+  {% capture target %}"{{ img | absolute_url }}"{% endcapture %}
 
-      {% if site.img_cdn contains '//' %}
+  {% if site.img_cdn contains '//' %}
-        <!-- it's a cross-origin URL -->
+  <!-- it's a cross-origin URL -->
-        {% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %}
+  {% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %}
-      {% else %}
+  {% else %}
-        <!-- it's a local file path -->
+  <!-- it's a local file path -->
-        {%- capture replacement -%}
+  {%- capture replacement -%}
-          "{{ site.img_cdn | append: '/' | append: img_path | replace: '//', '/' | absolute_url }}"
+  "{{ site.img_cdn | append: '/' | append: img_path | replace: '//', '/' | absolute_url }}"
-        {%- endcapture -%}
+  {%- endcapture -%}
-      {% endif %}
+  {% endif %}
 
-      {% assign seo_tags = seo_tags | replace: target, replacement %}
+  {% assign seo_tags = seo_tags | replace: target, replacement %}
-    {% endunless %}
+  {% endunless %}
   {% endif %}
 
   {{ seo_tags }}
 
   <title>
     {%- unless page.layout == 'home' -%}
-      {{ page.title | append: ' | ' }}
+    {{ page.title | append: ' | ' }}
     {%- endunless -%}
     {{ site.title }}
   </title>
@@ -48,24 +46,24 @@
   {% include_cached favicons.html %}
 
   {% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %}
-    <link href="{{ site.data.origin[type].webfonts | relative_url }}" rel="stylesheet">
+  <link href="{{ site.data.origin[type].webfonts | relative_url }}" rel="stylesheet">
 
   {% else %}
-    {% for cdn in site.data.origin[type].cdns %}
+  {% for cdn in site.data.origin[type].cdns %}
-      <link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
+  <link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
-      <link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
+  <link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
-    {% endfor %}
+  {% endfor %}
 
-    <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
+  <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
   {% endif %}
 
   <!-- GA -->
   {% if jekyll.environment == 'production' and site.google_analytics.id != empty and site.google_analytics.id %}
-    <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
+  <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
-    <link rel="dns-prefetch" href="https://www.google-analytics.com">
+  <link rel="dns-prefetch" href="https://www.google-analytics.com">
 
-    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
+  <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
-    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
+  <link rel="dns-prefetch" href="https://www.googletagmanager.com">
   {% endif %}
 
   <!-- Bootstrap -->
@@ -77,20 +75,41 @@
   <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
 
   {% if site.toc and page.toc %}
-    <link rel="stylesheet" href="{{ site.data.origin[type].toc.css | relative_url }}">
+  <link rel="stylesheet" href="{{ site.data.origin[type].toc.css | relative_url }}">
   {% endif %}
 
   {% if page.layout == 'page' or page.layout == 'post' %}
-    <!-- Manific Popup -->
+  <!-- Manific Popup -->
-    <link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">
+  <link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">
   {% endif %}
 
   <!-- JavaScript -->
-  <script src="{{ '/assets/js/common.js' | relative_url }}" serviceurl="{{site.custom-config.blog-services.service_url}}" siteid="{{site.id}}" postid="{{page.title}}" remark42host="{{ site.comments.remark42.host }}"></script>
+  <script>
+    var serviceUrl = "{{site.custom-config.blog-services.service_url}}";
+    var siteId = "{{site.id}}";
+    var postId = "{{page.title}}";
+    var remark42Host = "{{ site.comments.remark42.host }}";
+
+    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();
+      });
+    }
+  </script>
+
+  <!-- <script src="{{ '/assets/js/common.js' | relative_url }}"
+    serviceurl="{{site.custom-config.blog-services.service_url}}" siteid="{{site.id}}" postid="{{page.title}}"
+    remark42host="{{ site.comments.remark42.host }}"></script> -->
 
   {% unless site.theme_mode %}
-    {% include mode-toggle.html %}
+  {% include mode-toggle.html %}
   {% endunless %}
 
   {% include metadata-hook.html %}
-</head>
+</head>

_includes/likes.html

@@ -1,7 +1,81 @@
-<link rel="stylesheet" href="{{ '/assets/css/heart.css' | relative_url }}">
+<!-- <link rel="stylesheet" href="{{ '/assets/css/heart.css' | relative_url }}"> -->
+
+<style>
+    .heart-icon {
+        margin-bottom: -41px;
+        margin-right: -40px;
+        display: inline-flex;
+        width: 46px;
+        height: 46px;
+        transform: translate(-50%, -50%);
+        background: url("{{ '/assets/img/custom/heart.png' | relative_url }}") no-repeat;
+        background-position: 0 0;
+        cursor: pointer;
+    }
+
+    .heart-icon.liked {
+        animation: like-anim 0.7s steps(28) forwards;
+    }
+
+    @keyframes like-anim {
+        to {
+            background-position: right;
+        }
+    }
+</style>
+
 <i class="heart-icon" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.likes}}"
     data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
 {% include loader.html id="likes-loader" %}
 <em id="likes-count"></em>
 
-<script src="{{ '/assets/js/likes.js' | relative_url }}"></script>
+<script>
+    const heartIcon = document.querySelector(".heart-icon");
+    const likesCount = document.getElementById("likes-count");
+    const likesLoader = document.getElementById("likes-loader");
+
+    likesLoader.style.display = "none"
+
+    let likesAmount = likesCount.innerHTML;
+
+    function onLoadAndClick() {
+        likesLoader.style.display = "inline-flex"
+        likesCount.style.display = "none";
+        heartIcon.style.pointerEvents = 'none';
+    }
+
+    function apiCall(url, event) {
+        onLoadAndClick();
+        ajax(url)
+            .then(function (result) {
+                console.log(result);
+                if (event === "click") {
+                    heartIcon.classList.toggle("liked");
+                }
+                likesCount.innerHTML = result;
+                likesLoader.style.display = "none"
+                likesCount.style.display = "inline-flex";
+                heartIcon.style.pointerEvents = 'auto';
+            })
+            .catch(function () {
+                likesLoader.style.display = "none";
+                likesCount.style.display = "inline-flex";
+            });
+    }
+
+    var apiUrl = serviceUrl + "/GetPostLikes?siteId=" + siteId + "&postId=" + postId;
+
+    apiCall(apiUrl);
+
+    heartIcon.addEventListener("click", () => {
+        if (!heartIcon.classList.contains("liked")) {
+            apiUrl = serviceUrl + "/LikePost?siteId=" + siteId + "&postId=" + postId;
+        } else {
+            apiUrl = serviceUrl + "/DislikePost?siteId=" + siteId + "&postId=" + postId;
+        }
+
+        apiCall(apiUrl, "click");
+    });
+</script>
+
+<!-- <script src="{{ '/assets/js/likes.js' | relative_url }}"></script> -->

_includes/views.html

@@ -4,5 +4,24 @@
 <em id="views-count" style="margin-right: 12px">
 </em>
 
-<script src="{{ '/assets/js/views.js' | relative_url }}">
+<script>
-</script>
+  const viewsCount = document.getElementById("views-count");
+  const viewsLoader = document.getElementById("views-loader");
+
+  viewsCount.style.display = "none";
+  viewsLoader.style.display = "inline-block"
+
+  ajax(serviceUrl + "/GetPostViews?siteId=" + siteId + "&postId=" + postId)
+    .then(function (result) {
+      viewsCount.innerText = result;
+      viewsLoader.style.display = "none";
+      viewsCount.style.display = "inline-block";
+    })
+    .catch(function () {
+      viewsLoader.style.display = "none";
+      viewsCount.style.display = "inline-block";
+    });
+</script>
+
+<!-- <script src="{{ '/assets/js/views.js' | relative_url }}">
+</script> -->