From 88b2584d06d6349089e96039b34de56187c99305 Mon Sep 17 00:00:00 2001
From: Reorx <novoreorx@gmail.com>
Date: Wed, 1 Jun 2022 22:03:01 +0800
Subject: [PATCH] add title for comments, enhance styles

---
 assets/css/common/post-single.css     | 25 ++++++++++++++++++++++++-
 layouts/partials/comments.html        |  4 ++--
 layouts/partials/disqus.html          |  2 +-
 layouts/partials/remark42.html        | 15 +++++++++++----
 layouts/partials/telegram_widget.html |  2 +-
 5 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css
index b5fc3b3..a560164 100644
--- a/assets/css/common/post-single.css
+++ b/assets/css/common/post-single.css
@@ -544,6 +544,29 @@ h6:hover .anchor {
     margin: calc(var(--content-gap) * 2) 0;
     background-color: var(--code-bg);
     border-radius: 10px;
-    padding: 1.5em;
     box-shadow: var(--shadow-elevation-low);
 }
+
+.comments-box.telegram-widget {
+    padding: .8em;
+}
+
+.comments {
+    border-top: 1px solid var(--tertiary);
+}
+.comments {
+    margin: 40px 0 20px;
+}
+.comments .title {
+    margin: 20px 0;
+    font-size: 1.5em;
+}
+.comments .title > span {
+    line-height: 1.5rem;
+}
+.comments .title .counter {
+    color: var(--link-hover-color);
+    font-size: 1rem;
+    font-weight: bold;
+    vertical-align: super;
+}
diff --git a/layouts/partials/comments.html b/layouts/partials/comments.html
index 36460f4..c7fae9d 100644
--- a/layouts/partials/comments.html
+++ b/layouts/partials/comments.html
@@ -9,7 +9,7 @@
 {{- with site.Params.commentSystems -}}
   {{- if $pageCommentSystems.remark42 -}}
   {{- with .remark42 -}}
-    {{- partial "remark42.html" . }}
+    {{- partial "remark42.html" (dict "page" $page "ctx" .) }}
   {{- end -}}
   {{- end -}}
 
@@ -21,7 +21,7 @@
 
   {{- if $pageCommentSystems.disqus -}}
   {{- with .disqus -}}
-    {{- partial "disqus.html" (dict "page" $page "disqus" .) }}
+    {{- partial "disqus.html" (dict "page" $page "ctx" .) }}
   {{- end -}}
   {{- end -}}
 {{- end -}}
diff --git a/layouts/partials/disqus.html b/layouts/partials/disqus.html
index d1e80f8..673d7ea 100644
--- a/layouts/partials/disqus.html
+++ b/layouts/partials/disqus.html
@@ -19,7 +19,7 @@
       });
     } else {
       var d = document, s = d.createElement('script');
-      s.src = '//' + '{{ .disqus.shortname }}' + '.disqus.com/embed.js';
+      s.src = '//' + '{{ .ctx.shortname }}' + '.disqus.com/embed.js';
       s.defer = true;
       s.setAttribute('data-timestamp', +new Date());
       // prevent the <script> from loading mutiple times by InstantClick
diff --git a/layouts/partials/remark42.html b/layouts/partials/remark42.html
index a2d8fd9..b7b9d01 100644
--- a/layouts/partials/remark42.html
+++ b/layouts/partials/remark42.html
@@ -1,10 +1,17 @@
-<div id="remark42"></div>
+<div class="comments">
+  <div class="title">
+    <span>Comments</span>
+    <span class="counter"><span class="remark42__counter" data-url="{{ .page.Permalink }}"></span></span>
+  </div>
+  <div id="remark42">
+  </div>
+</div>
 
 <script>
   var remark_config = {
-    host: '{{ .url }}',
-    site_id: '{{ .site }}',
-    components: ['embed'],
+    host: '{{ .ctx.url }}',
+    site_id: '{{ .ctx.site }}',
+    components: ['embed', 'counter'],
     max_shown_comments: 20,
     theme: 'light',
     // page_title: 'My custom title for a page',
diff --git a/layouts/partials/telegram_widget.html b/layouts/partials/telegram_widget.html
index df75a59..61c048f 100644
--- a/layouts/partials/telegram_widget.html
+++ b/layouts/partials/telegram_widget.html
@@ -1,4 +1,4 @@
-<div class="comments-box">
+<div class="comments-box telegram-widget">
   <div id="telegram-widget-container"></div>
 </div>