rajukottedi/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Bangara Raju Kottedi 2023-08-23 00:49:00 +05:30 committed by Gogs
commit 42f4b533b1
14 changed files with 240 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_data/locales/en.yml
View File

@ -56,6 +56,7 @@ post:
posted: Posted
updated: Updated
views: Views
likes: Likes
words: words
pageview_measure: views
read_time:

40
_includes/comments/remark42.html
View File

@ -1,40 +1,4 @@
<script>
var remark_config = {
host: "{{ site.comments.remark42.host }}",
site_id: '{{ site.id }}',
components: ['embed'],
max_shown_comments: 10,
// theme: 'light',
theme: document.documentElement.hasAttribute("data-mode") ? "dark" : "light",
locale: 'en',
show_email_subscription: false
};
</script>
<script>
(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", () => {
if (document.documentElement.hasAttribute("data-mode")) {
window.REMARK42.changeTheme('light');
} else {
window.REMARK42.changeTheme('dark');
}
})
}
</script>
<div id="remark42">
</div>
<script src="/assets/js/comments/remark42.js"></script>

96
_includes/head.html Normal file
View File

@ -0,0 +1,96 @@
<!-- The Head -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
<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
name="viewport"
content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
>
{% 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 '//' %}
<!-- it's a cross-origin URL -->
{% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %}
{% else %}
<!-- it's a local file path -->
{%- 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 }}
<title>
{%- unless page.layout == 'home' -%}
{{ page.title | append: ' | ' }}
{%- endunless -%}
{{ site.title }}
</title>
{% 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">
{% else %}
{% for cdn in site.data.origin[type].cdns %}
<link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
<link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
{% endfor %}
<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="dns-prefetch" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
{% endif %}
<!-- Bootstrap -->
<link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url}}">
<!-- Font Awesome -->
<link rel="stylesheet" href="{{ site.data.origin[type].fontawesome.css | relative_url }}">
<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 }}">
{% endif %}
{% if page.layout == 'page' or page.layout == 'post' %}
<!-- Manific Popup -->
<link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">
{% endif %}
<!-- JavaScript -->
<script src="/assets/js/common.js" 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 %}
{% endunless %}
{% include metadata-hook.html %}
</head>

7
_includes/likes.html Normal file
View File

@ -0,0 +1,7 @@
<link rel="stylesheet" href="/assets/css/heart.css">
<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"></script>

2
_includes/loader.html
View File

@ -1 +1 @@
<i id="{{include.id}}" class="fa-solid fa-circle-notch fa-spin"></i>
<i id="{{include.id}}" class="fa-solid fa-circle-notch fa-spin" {% if include.style %} style="{{include.style}}" {% endif %}></i>

35
_includes/post-counter.html
View File

@ -1,35 +0,0 @@
<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("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();
xhr.onload = function () {
resolve(this.responseText);
};
xhr.onerror = reject;
xhr.open('GET', url);
xhr.send();
});
}
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('visit-count').innerText = result;
document.getElementById("postcountloader").style.display = "none";
document.getElementById("visit-count").style.display = "inline-block";
})
.catch(function () {
// An error occurred
});
</script>

8
_includes/views.html Normal file
View File

@ -0,0 +1,8 @@
<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="views-loader" style="margin-right: 12px" %}
<em id="views-count" style="margin-right: 12px">
</em>
<script src="/assets/js/views.js">
</script>

4
_layouts/post.html
View File

@ -34,8 +34,8 @@ tail_includes:
<!-- post counter -->
<div>
<!-- {{ site.data.locales[lang].post.views }} -->
{% include post-counter.html tooltip=true lang=lang %}
{% include views.html tooltip=true lang=lang %}
{% include likes.html tooltip=true lang=lang %}
</div>
</div>

21
assets/css/heart.css Normal file
View File

@ -0,0 +1,21 @@
.heart-icon {
margin-bottom: -41px;
margin-right: -38px;
display: inline-flex;
width: 46px;
height: 46px;
transform: translate(-50%, -50%);
background: url(/assets/img/custom/heart.png) 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;
}
}

BIN
assets/img/custom/heart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

28
assets/js/comments/remark42.js Normal file
View File

@ -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');
})
}

16
assets/js/common.js Normal file
View File

@ -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();
});
}

41
assets/js/likes.js Normal file
View File

@ -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);
});

16
assets/js/views.js Normal file
View File

@ -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";
});