From 08cdbcdd8262a62ea61e74ea02fd3c0edac680f0 Mon Sep 17 00:00:00 2001 From: Bangara Raju Kottedi Date: Tue, 22 Aug 2023 02:08:21 +0530 Subject: [PATCH 1/2] post likes ui changes --- _data/locales/en.yml | 1 + _includes/likes.html | 34 ++++++++++++++++++++ _includes/{post-counter.html => views.html} | 18 +++++++---- _layouts/post.html | 3 +- assets/css/heart.css | 21 ++++++++++++ assets/img/custom/heart.png | Bin 0 -> 18622 bytes 6 files changed, 69 insertions(+), 8 deletions(-) create mode 100644 _includes/likes.html rename _includes/{post-counter.html => views.html} (65%) create mode 100644 assets/css/heart.css create mode 100644 assets/img/custom/heart.png diff --git a/_data/locales/en.yml b/_data/locales/en.yml index 98e2c1a..15e5831 100644 --- a/_data/locales/en.yml +++ b/_data/locales/en.yml @@ -56,6 +56,7 @@ post: posted: Posted updated: Updated views: Views + likes: Likes words: words pageview_measure: views read_time: diff --git a/_includes/likes.html b/_includes/likes.html new file mode 100644 index 0000000..8ca0ade --- /dev/null +++ b/_includes/likes.html @@ -0,0 +1,34 @@ + + +{% include loader.html id="likes-loader" %} +125 + + \ No newline at end of file diff --git a/_includes/post-counter.html b/_includes/views.html similarity index 65% rename from _includes/post-counter.html rename to _includes/views.html index 37335d7..4a9d636 100644 --- a/_includes/post-counter.html +++ b/_includes/views.html @@ -1,12 +1,16 @@ -{% include loader.html id="postcountloader" %} - +{% include loader.html id="views-loader" %} + - -
-
\ No newline at end of file + + + \ No newline at end of file diff --git a/_includes/head.html b/_includes/head.html new file mode 100644 index 0000000..ad7f878 --- /dev/null +++ b/_includes/head.html @@ -0,0 +1,96 @@ + + + + + + + + + + + {% capture seo_tags %} + {% seo title=false %} + {% endcapture %} + + {% if page.image %} + {% assign img = page.image.path | default: page.image %} + + {% unless img contains '://' %} + {% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %} + {% capture target %}"{{ img | absolute_url }}"{% endcapture %} + + {% if site.img_cdn contains '//' %} + + {% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %} + {% else %} + + {%- capture replacement -%} + "{{ site.img_cdn | append: '/' | append: img_path | replace: '//', '/' | absolute_url }}" + {%- endcapture -%} + {% endif %} + + {% assign seo_tags = seo_tags | replace: target, replacement %} + {% endunless %} + {% endif %} + + {{ seo_tags }} + + + {%- unless page.layout == 'home' -%} + {{ page.title | append: ' | ' }} + {%- endunless -%} + {{ site.title }} + + + {% include_cached favicons.html %} + + {% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %} + + + {% else %} + {% for cdn in site.data.origin[type].cdns %} + + + {% endfor %} + + + {% endif %} + + + {% if jekyll.environment == 'production' and site.google_analytics.id != empty and site.google_analytics.id %} + + + + + + {% endif %} + + + + + + + + + + {% if site.toc and page.toc %} + + {% endif %} + + {% if page.layout == 'page' or page.layout == 'post' %} + + + {% endif %} + + + + + {% unless site.theme_mode %} + {% include mode-toggle.html %} + {% endunless %} + + {% include metadata-hook.html %} + diff --git a/_includes/likes.html b/_includes/likes.html index 8ca0ade..4f52229 100644 --- a/_includes/likes.html +++ b/_includes/likes.html @@ -2,33 +2,6 @@ {% include loader.html id="likes-loader" %} -125 + - \ No newline at end of file + \ No newline at end of file diff --git a/_includes/loader.html b/_includes/loader.html index cde5386..39ccaf0 100644 --- a/_includes/loader.html +++ b/_includes/loader.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/_includes/views.html b/_includes/views.html index 4a9d636..ea3f645 100644 --- a/_includes/views.html +++ b/_includes/views.html @@ -1,39 +1,8 @@ -{% include loader.html id="views-loader" %} +{% include loader.html id="views-loader" style="margin-right: 12px" %} - \ No newline at end of file diff --git a/_layouts/post.html b/_layouts/post.html index 65bbd1b..fed7154 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -34,7 +34,6 @@ tail_includes:
- {% include views.html tooltip=true lang=lang %} {% include likes.html tooltip=true lang=lang %}
diff --git a/assets/js/comments/remark42.js b/assets/js/comments/remark42.js new file mode 100644 index 0000000..37434e1 --- /dev/null +++ b/assets/js/comments/remark42.js @@ -0,0 +1,28 @@ +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'); + }) +} \ No newline at end of file diff --git a/assets/js/common.js b/assets/js/common.js new file mode 100644 index 0000000..ba847be --- /dev/null +++ b/assets/js/common.js @@ -0,0 +1,16 @@ +var serviceUrl = document.currentScript.getAttribute('serviceurl'); +var siteId = document.currentScript.getAttribute('siteid'); +var postId = document.currentScript.getAttribute('postid'); +var remark42Host = document.currentScript.getAttribute('remark42host'); + +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(); + }); + } diff --git a/assets/js/likes.js b/assets/js/likes.js new file mode 100644 index 0000000..907a8f7 --- /dev/null +++ b/assets/js/likes.js @@ -0,0 +1,41 @@ +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 apiCall(url) { + ajax(url) + .then(function (result) { + console.log(result); + 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-block"; + }); +} + +var apiUrl = serviceUrl + "/GetPostLikes?siteId=" + siteId + "&postId=" + postId; + +apiCall(apiUrl); + +heartIcon.addEventListener("click", () => { + likesLoader.style.display = "inline-flex" + likesCount.style.display = "none"; + heartIcon.style.pointerEvents = 'none'; + + heartIcon.classList.toggle("liked"); + if (heartIcon.classList.contains("liked")) { + apiUrl = serviceUrl + "/LikePost?siteId=" + siteId + "&postId=" + postId; + } else { + apiUrl = serviceUrl + "/DislikePost?siteId=" + siteId + "&postId=" + postId; + } + + apiCall(apiUrl); +}); \ No newline at end of file diff --git a/assets/js/views.js b/assets/js/views.js new file mode 100644 index 0000000..8659033 --- /dev/null +++ b/assets/js/views.js @@ -0,0 +1,16 @@ +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"; + }); \ No newline at end of file