From 000a89aca21bd221299db5dc0f0f7a6c68356bed Mon Sep 17 00:00:00 2001
From: FarseaSH <yy_shao@outlook.com>
Date: Fri, 10 Nov 2023 23:59:18 +0800
Subject: [PATCH] NEW: experimental comment feature

---
 assets/style-refractored.scss |  8 ++++
 layouts/_default/list.html    |  4 +-
 layouts/index.html            |  4 +-
 layouts/partials/head.html    |  4 ++
 layouts/partials/row.html     | 69 ++++++++++++++++++++++++-----------
 5 files changed, 64 insertions(+), 25 deletions(-)

diff --git a/assets/style-refractored.scss b/assets/style-refractored.scss
index cc3c2bf..a422206 100644
--- a/assets/style-refractored.scss
+++ b/assets/style-refractored.scss
@@ -386,6 +386,14 @@ $gray: #919EB1;
             cursor: pointer;
         }
     }
+
+    .comment-btn {
+        padding-right: 10px;
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
 }
 
 // hr 
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index de60b94..ad637d6 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,8 +1,8 @@
 {{ define "main" }}
     <div class="container bodycontainer">
         {{ $paginator := .Paginate ((where $.Site.RegularPages "Section" .Section ).ByParam "top") }}
-        {{ range $paginator.Pages }}
-            {{ partial "row.html" . }}
+        {{ range $i, $page := $paginator.Pages }}
+            {{ partial "row.html" (dict "page" $page "index" $i) }}
         {{ end }}
     </div>
 {{ end }}
diff --git a/layouts/index.html b/layouts/index.html
index 2a3762d..172a7c1 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,8 +1,8 @@
 {{ define "main" }}
     <div class="container">
         {{ $paginator := .Paginate (.Site.RegularPages.ByParam "top") }}
-        {{ range $paginator.Pages }}
-            {{ partial "row.html" . }}
+        {{ range $i, $page := $paginator.Pages }}
+            {{ partial "row.html" (dict "page" $page "index" $i "site" $.Site) }}
         {{ end }}
     </div>
     {{ if .Site.Params.infiniteScroll }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 5e96b9c..cb85e64 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -58,6 +58,10 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js"></script>
 {{ end }}
 
+{{ if $.site.Params.experimental.comment }}
+<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
+<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
+{{ end }}
 
 {{ if .Site.Params.features.heti }}
 <link rel="stylesheet" href="/style/heti.min.css">
diff --git a/layouts/partials/row.html b/layouts/partials/row.html
index 9beffb9..2a576e8 100644
--- a/layouts/partials/row.html
+++ b/layouts/partials/row.html
@@ -1,3 +1,6 @@
+{{ $page := .page }}
+{{ $index := .index }}
+{{ $site := .site }}
 <div class="moment-row">
 
     <div class="pure-g">
@@ -5,8 +8,8 @@
         {{/* time info shown in the left (or above in small screens) */}}
         <div class="pure-u-1 pure-u-sm-1-3">
             <div class="time">
-                <div class="month-day">{{ .Date.Format "Jan 2"}}{{ if in (slice 1 21 31) .Date.Day}}st{{ else if in (slice 2 22) .Date.Day}}nd{{ else if in (slice 3 23) .Date.Day}}rd{{ else }}th{{ end }}</div>
-                <div class="year">{{ .Date.Format "2006"}}</div>
+                <div class="month-day">{{ $page.Date.Format "Jan 2"}}{{ if in (slice 1 21 31) $page.Date.Day}}st{{ else if in (slice 2 22) $page.Date.Day}}nd{{ else if in (slice 3 23) $page.Date.Day}}rd{{ else }}th{{ end }}</div>
+                <div class="year">{{ $page.Date.Format "2006"}}</div>
             </div>
         </div>
 
@@ -14,7 +17,7 @@
         <div class="pure-u-1 pure-u-sm-2-3">
             <div class="moment-content">
                 {{/* top mark */}}
-                {{ if gt .Params.top 0}}
+                {{ if gt $page.Params.top 0}}
                 <div class="top-mark" style="position: absolute; right: 5%;">
                     <i class="fas fa-bookmark" style="color: #e76b4f;"></i>
                 </div>
@@ -23,22 +26,22 @@
                 {{/* user info */}}
                 <div class="user-info">
                     <div class="avatar-block">
-                        {{ with .Params.avatar }}
+                        {{ with $page.Params.avatar }}
                         <img src='{{ . }}' class="avatar">
                         {{ else }}
                         {{/* fixme check whether the default avatar path is url or not--> */}}
-                        <img src='{{ $.Site.BaseURL }}/{{ .Site.Params.avatar }}' class="avatar">
+                        <img src='{{ $site.BaseURL }}/{{ $page.Site.Params.avatar }}' class="avatar">
                         {{ end }}
                     </div>
                     <div class="intro">
-                        {{ with .Params.name }}
+                        {{ with $page.Params.name }}
                         <div class="name">{{ . }}</div>
                         {{ else }}
-                        <div class="name">{{ .Site.Params.name }}</div>
+                        <div class="name">{{ $site.Params.name }}</div>
                         {{ end }}
                         <div>
                             {{ $tags_filtered := slice}}
-                            {{ with .Params.tags }}
+                            {{ with $page.Params.tags }}
                                 {{ range . }}
                                     {{ with .}}
                                     {{ $tags_filtered = $tags_filtered | append . }}
@@ -55,14 +58,14 @@
                 <div style="padding-left: 5px; padding-right: 5px;">
                     {{/* Main text content */}}
                     {{ if .Site.Params.features.heti }}<div class="context heti">{{ else }}<div class="context">{{ end }}
-                        {{ .Content }}
+                        {{ $page.Content }}
                     </div>
 
                     {{/* add-on info 1: pictures */}}
                     {{/* new pictures API `pictures` (combine single & multiple pictures)*/}}
                     {{ $pictures_set := slice}}
-                    {{ $picture_caption := .Plain}}
-                    {{ with .Params.pictures }}
+                    {{ $picture_caption := $page.Plain}}
+                    {{ with $page.Params.pictures }}
                         {{ range . }}
                             {{ with . }}
                                 {{ $pictures_set = $pictures_set | append . }}
@@ -70,8 +73,8 @@
                         {{ end }}
                     {{ end }}
 
-                    {{ $video_caption := .Plain}}
-                    {{ with .Params.video }}
+                    {{ $video_caption := $page.Plain}}
+                    {{ with $page.Params.video }}
                         <a data-src="{{ . }}" data-fancybox="video-gallery" data-caption={{ $video_caption }}>
                             <video class="video-js" src="{{ . }}"></video>
                         </a>
@@ -88,13 +91,13 @@
                     {{ end }}
 
                     {{/* Probably DEPRECATED in the future: single picture (old version API `pic`)*/}}
-                    {{ with .Params.pic }}
+                    {{ with $page.Params.pic }}
                         <img src="{{ . }}" class="single-pic" alt="Responsive image" data-fancybox="gallery" data-caption={{ $picture_caption }}></img>
                     {{ end }}
 
                     {{/* Probably DEPRECATED in the future: multiple pictures (old version API `pic_set`) */}}
                     {{ $pic_set_filtered := slice}}
-                    {{ with .Params.pic_set }}
+                    {{ with $page.Params.pic_set }}
                         {{ range . }}
                             {{ with . }}
                             {{ $pic_set_filtered = $pic_set_filtered | append . }}
@@ -108,21 +111,45 @@
 
 
                     {{/* add-on info 2: hyperlink to other resourse (e.g webpage, Netease music, Bilibili Video) */}}
-                    {{ $link_link := .Params.link }}
-                    {{ $link_logo := .Params.link_logo }}
-                    {{ $link_text := .Params.link_text }}
+                    {{ $link_link := $page.Params.link }}
+                    {{ $link_logo := $page.Params.link_logo }}
+                    {{ $link_text := $page.Params.link_text }}
 
-                    {{ with .Params.link }}
+                    {{ with $page.Params.link }}
                         {{ partial "link-block.html" (dict "logo" $link_logo "a" $link_link "word" $link_text "baseurl"
                         $.Site.BaseURL)}}
                     {{ end }}
 
                     {{/* Note info shown below the main content */}}
                     <div class="moment-note">
-                        <p class="note">{{ .Date.Format "15:04" }} {{ .Params.note }}</p>
-                        <div class="like-btn"><i class="far fa-heart"></i></div>
+                        <p class="note">{{ $page.Date.Format "15:04" }} {{ $page.Params.note }}</p>
+                        <div class="buttons" style="display: flex;">
+                            {{ if $.site.Params.experimental.comment }}<div class="comment-btn" id="comment-btn-{{ $index }}"><i class="far fa-comment"></i></div>{{ end }}
+                            <div class="like-btn"><i class="far fa-heart"></i></div>
+                        </div>
                     </div>
 
+                    {{ if $.site.Params.experimental.comment }}
+                    <div id="row-comment-{{ $index }}" style="display: none;">
+                        <div id="gitalk-container-{{ $index }}"></div>
+                    </div>
+                    <script type="text/javascript">
+                        var gitalk = new Gitalk({
+                            clientID: 'GitHub Application Client ID',
+                            clientSecret: 'GitHub Application Client Secret',
+                            repo: 'GitHub repo',
+                            owner: 'GitHub repo owner',
+                            admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
+                            id: '{{ $page.File }}',      // Ensure uniqueness and length less than 50
+                            distractionFreeMode: false  // Facebook-like distraction free mode
+                        })
+
+                        $("#comment-btn-{{ $index }}").on('click', function(){
+                            $("#row-comment-{{ $index }}").slideToggle("slow");
+                            gitalk.render('gitalk-container-{{ $index }}')
+                        });
+                    </script>
+                    {{ end }}
                 </div>
 
                 <hr class="seperating_line">