⚡ Perf: optimize close comment feature when the post has expired (#204)

CHANGELOG.md

@@ -9,6 +9,7 @@ All notable changes to this project will be documented in this file.
 
 - :sparkles: Feat: add params to close wordcount and readingTime in post ([#209](https://github.com/hugo-fixit/FixIt/issues/209))
 - :truck: Feat: migrate parameter `params.autoBookmark` to `params.page.autoBookmark` ([#55](https://github.com/hugo-fixit/FixIt/issues/55))
+- :zap: Perf: optimize close comment feature when the post has expired ([#204](https://github.com/hugo-fixit/FixIt/issues/204))
 - :bug: Fix: remove the leading and trailing whitespace of the code string ([#205](https://github.com/hugo-fixit/FixIt/issues/205))
 - :bug: Fix: image shortcode/plugin lose the support for svg type files ([#210](https://github.com/hugo-fixit/FixIt/issues/210))
 - **Full Changelog:** @Lruihao [`v0.2.16...v0.2.17`](https://github.com/hugo-fixit/FixIt/compare/v0.2.16...v0.2.17)

layouts/partials/single/comment.html

@@ -4,7 +4,7 @@
 {{- $commentConfig := dict "enable" false -}}
 
 {{- if $comment.enable -}}
-  {{- $commentConfig = dict "enable" true -}}
+  {{- $commentConfig = dict "enable" true "expired" (.Scratch.Get "commentExpired" | default false) -}}
   <div id="comments">
     {{- /* Artalk Comment System */ -}}
     {{- $artalk := $comment.artalk | default dict -}}

layouts/posts/single.html

@@ -84,7 +84,7 @@ <h1 class="single-title animate__animated animate__flipInX">
           $expirationReminder.enable
           | and (gt (div (sub now.Unix .Lastmod.Unix) 86400) ($expirationReminder.warning | default 180))
           | and $expirationReminder.closeComment -}}
-          {{- .Scratch.Set "comment" (dict "enable" false) -}}
+          {{- .Scratch.Set "commentExpired" true -}}
         {{- end -}}
         {{- $comment := .Scratch.Get "comment" | default dict -}}
         {{- $visitorIcon := dict "Class" "fa-regular fa-eye fa-fw" | partial "plugin/icon.html" -}}
@@ -96,7 +96,6 @@ <h1 class="single-title animate__animated animate__flipInX">
               {{ $visitorIcon }}&nbsp;<span id="{{ .RelPermalink }}" class="artalk-visitor-count">-</span>&nbsp;{{ T "views" }}
             </span>&nbsp;
           {{- else if ($comment.valine.enable | and $comment.valine.visitor) -}}
-            {{- /* Warning: waline v2 will not be compatible with valine */ -}}  
             <span id="{{ .RelPermalink }}" class="leancloud_visitors comment-visitors" data-flag-title="{{ .Title }}">
               {{ $visitorIcon }}&nbsp;<span class="leancloud-visitors-count">-</span>&nbsp;{{ T "views" }}
             </span>&nbsp;

src/js/theme.js

@@ -792,7 +792,16 @@ class FixIt {
         this.util.scrollIntoView('#comments');
       }, false);
     }
+    this.config.comment.expired && document.querySelector('#comments').remove();
     if (this.config.comment.artalk) {
+      if (this.config.comment.expired) {
+        return Artalk.LoadCountWidget({
+          server: this.config.comment.artalk.server,
+          site: this.config.comment.artalk.site,
+          pvEl: this.config.comment.artalk.pvEl,
+          countEl: this.config.comment.artalk.countEl
+        })
+      }
       const artalk = new Artalk(this.config.comment.artalk);
       artalk.setDarkMode(this.isDark);
       this.switchThemeEventSet.add(() => {
@@ -813,6 +822,13 @@ class FixIt {
       return new Valine(this.config.comment.valine);
     }
     if (this.config.comment.waline) {
+      if (this.config.comment.expired) {
+        this.config.comment.waline.pageview && Waline.pageviewCount({
+          serverURL: this.config.comment.waline.serverURL,
+          path: window.location.pathname
+        });
+        return;
+      }
       return Waline.init(this.config.comment.waline);
     }
     if (this.config.comment.utterances) {