From cb95e90d97b9edac4890ec723b2695d88048fe37 Mon Sep 17 00:00:00 2001
From: Yufan Sheng <syhily@gmail.com>
Date: Thu, 28 Nov 2024 01:06:06 +0800
Subject: [PATCH] feat: add the switch for enable or disable the comments.

---
 README.md                                   |  37 +++--
 options.ts                                  |   2 +
 src/actions/index.ts                        |   7 +-
 src/components/comment/Comments.astro       | 143 +++++++++++---------
 src/components/sidebar/RecentComments.astro |   2 +-
 5 files changed, 110 insertions(+), 81 deletions(-)

diff --git a/README.md b/README.md
index b61aafe..e34c590 100644
--- a/README.md
+++ b/README.md
@@ -108,6 +108,18 @@ This weblog uses artalk as its backend comment service. But since artalk didn't
 We decide to query it directly from the Postgres database. So the comments and fav clicks are living in the same
 database.
 
+If you don't want the astro integration, change the switch in `options.ts` to `false`.
+
+```json
+{
+  settings: {
+    comments: {
+      enable: false,
+    }
+  }
+}
+```
+
 ### S3 Compatible Storage Integration
 
 This blog will upload all the built resources at build stage. You can remove this feature by removing the
@@ -135,8 +147,8 @@ date: 2013/7/13 20:46:25
 
 | Setting     | Description                          | Required | Default              |
 |-------------|--------------------------------------|----------|----------------------|
-| `slug`      | ID (unique), used as the permalink   | true     | Filename             |
-| `title`     | Title                                | true     | Filename             |
+| `slug`      | ID (unique), used as the permalink   | true     |                      |
+| `title`     | Title                                | true     |                      |
 | `date`      | Published date                       | true     |                      |
 | `updated`   | Updated date                         | false    | Published date       |
 | `comments`  | Enables comment feature for the post | false    | `true`               |
@@ -150,16 +162,17 @@ date: 2013/7/13 20:46:25
 
 ### Pages Front Matter Settings
 
-| Setting     | Description                          | Required | Default        |
-|-------------|--------------------------------------|----------|----------------|
-| `slug`      | ID (unique), used as the permalink   | true     | Filename       |
-| `title`     | Title                                | true     | Filename       |
-| `date`      | Published date                       | true     |                |
-| `updated`   | Updated date                         | false    | Published date |
-| `comments`  | Enables comment feature for the post | false    | `true`         |
-| `cover`     | The cover image                      | false    | `null`         |
-| `published` | Whether the post should be published | false    | `true`         |
-| `toc`       | Display the Table of Contents        | false    | `false`        |
+| Setting     | Description                          | Required | Default              |
+|-------------|--------------------------------------|----------|----------------------|
+| `slug`      | ID (unique), used as the permalink   | true     |                      |
+| `title`     | Title                                | true     |                      |
+| `date`      | Published date                       | true     |                      |
+| `updated`   | Updated date                         | false    | Published date       |
+| `comments`  | Enables comment feature for the page | false    | `true`               |
+| `summary`   | Page summary in plain text           | false    | First 140 characters |
+| `cover`     | The cover image                      | false    | `null`               |
+| `published` | Whether the page should be published | false    | `true`               |
+| `toc`       | Display the Table of Contents        | false    | `false`              |
 
 ## Weblog Design
 
diff --git a/options.ts b/options.ts
index d831da8..b00df74 100644
--- a/options.ts
+++ b/options.ts
@@ -67,6 +67,7 @@ const Options = z
         calendar: z.boolean().default(false),
       }),
       comments: z.object({
+        enable: z.boolean().optional().default(true),
         size: z.number().default(10).readonly(),
         avatar: z.object({
           mirror: z.string().url().readonly(),
@@ -190,6 +191,7 @@ const options: z.input<typeof Options> = {
       calendar: true,
     },
     comments: {
+      enable: true,
       size: 10,
       avatar: {
         mirror: 'https://weavatar.com/avatar',
diff --git a/src/actions/index.ts b/src/actions/index.ts
index 0fef424..97ebfd4 100644
--- a/src/actions/index.ts
+++ b/src/actions/index.ts
@@ -15,7 +15,7 @@ const CommentConnectError = new ActionError({
   message: "couldn't connect to comment server",
 });
 
-export const server = {
+const normalActions = {
   like: defineAction({
     accept: 'json',
     input: z
@@ -53,6 +53,9 @@ export const server = {
       return { avatar: urlJoin(import.meta.env.SITE, 'avatar', `${hash}.webp`) };
     },
   }),
+};
+
+const commentActions = {
   comment: defineAction({
     accept: 'json',
     input: z.object({
@@ -98,3 +101,5 @@ export const server = {
     },
   }),
 };
+
+export const server = options.settings.comments.enable ? { ...normalActions, ...commentActions } : { ...normalActions };
diff --git a/src/components/comment/Comments.astro b/src/components/comment/Comments.astro
index c8b6d3c..c1e3249 100644
--- a/src/components/comment/Comments.astro
+++ b/src/components/comment/Comments.astro
@@ -11,77 +11,86 @@ interface Props {
 }
 
 const { commentKey, title } = Astro.props;
-const comments = await loadComments(commentKey, title, 0);
+const comments = options.settings.comments.enable ? await loadComments(commentKey, title, 0) : null;
 
 // Increase the PV in production environment.
-if (options.isProd()) {
+if (options.settings.comments.enable && options.isProd()) {
   await increaseViews(commentKey, title);
 }
 ---
 
-<div id="comments" class="comments pt-5">
-  {
-    comments != null ? (
-      <>
-        <div class="h5 mb-4 comment-total-count">
-          评论 <small class="font-theme text-sm">({comments.count})</small>
-        </div>
-        <div id="respond" class="comment-respond mb-3 mb-md-4">
-          <form method="post" action="/comments/new" id="commentForm" class="comment-form">
-            <div class="comment-from-avatar flex-avatar">
-              <img
-                alt="头像"
-                src={urlJoin(options.assetsPrefix(), '/images/default-avatar.png')}
-                data-src={urlJoin(options.assetsPrefix(), '/images/default-avatar.png')}
-                class="avatar avatar-40 photo avatar-default"
-                height="40"
-                width="40"
-                decoding="async"
-              />
-            </div>
-            <div class="comment-from-input flex-fill">
-              <div class="comment-form-text mb-3">
-                <textarea id="content" name="content" class="form-control" rows="3" required />
-              </div>
-              <div class="comment-form-info row g-2 g-md-3 mb-3">
-                <div class="col">
-                  <input class="form-control" placeholder="昵称" name="name" type="text" required="required" />
-                </div>
-                <div class="col-12 col-md-6">
-                  <input class="form-control" name="email" placeholder="邮箱" type="email" required="required" />
-                </div>
-                <div class="col-12">
-                  <input hidden name="page_key" type="text" value={commentKey} />
-                  <input hidden name="rid" type="text" value="0" />
-                  <input class="form-control" placeholder="网址" name="link" type="url" />
-                </div>
-              </div>
-              <div class="form-submit text-end">
-                <input type="button" id="cancel-comment-reply-link" class="btn btn-light me-1" value="再想想" hidden />
-                <input name="submit" type="submit" id="submit" class="btn btn-primary" value="发表评论" />
-              </div>
-            </div>
-          </form>
-        </div>
-        <ul class="comment-list">
-          <Comment comments={comments} />
-        </ul>
-        {options.settings.comments.size < comments.roots_count && (
-          <div class="text-center mt-3 mt-md-4">
-            <button
-              id="comments-next-button"
-              data-key={commentKey}
-              data-size={options.settings.comments.size}
-              data-offset={options.settings.comments.size}
-              class="btn btn-light"
-            >
-              加载更多
-            </button>
+{
+  options.settings.comments.enable && (
+    <div id="comments" class="comments pt-5">
+      {comments != null ? (
+        <>
+          <div class="h5 mb-4 comment-total-count">
+            评论 <small class="font-theme text-sm">({comments.count})</small>
           </div>
-        )}
-      </>
-    ) : (
-      '评论加载失败 ❌'
-    )
-  }
-</div>
+          <div id="respond" class="comment-respond mb-3 mb-md-4">
+            <form method="post" action="/comments/new" id="commentForm" class="comment-form">
+              <div class="comment-from-avatar flex-avatar">
+                <img
+                  alt="头像"
+                  src={urlJoin(options.assetsPrefix(), '/images/default-avatar.png')}
+                  data-src={urlJoin(options.assetsPrefix(), '/images/default-avatar.png')}
+                  class="avatar avatar-40 photo avatar-default"
+                  height="40"
+                  width="40"
+                  decoding="async"
+                />
+              </div>
+              <div class="comment-from-input flex-fill">
+                <div class="comment-form-text mb-3">
+                  <textarea id="content" name="content" class="form-control" rows="3" required />
+                </div>
+                <div class="comment-form-info row g-2 g-md-3 mb-3">
+                  <div class="col">
+                    <input class="form-control" placeholder="昵称" name="name" type="text" required="required" />
+                  </div>
+                  <div class="col-12 col-md-6">
+                    <input class="form-control" name="email" placeholder="邮箱" type="email" required="required" />
+                  </div>
+                  <div class="col-12">
+                    <input hidden name="page_key" type="text" value={commentKey} />
+                    <input hidden name="rid" type="text" value="0" />
+                    <input class="form-control" placeholder="网址" name="link" type="url" />
+                  </div>
+                </div>
+                <div class="form-submit text-end">
+                  <input
+                    type="button"
+                    id="cancel-comment-reply-link"
+                    class="btn btn-light me-1"
+                    value="再想想"
+                    hidden
+                  />
+                  <input name="submit" type="submit" id="submit" class="btn btn-primary" value="发表评论" />
+                </div>
+              </div>
+            </form>
+          </div>
+          <ul class="comment-list">
+            <Comment comments={comments} />
+          </ul>
+          {options.settings.comments.size < comments.roots_count && (
+            <div class="text-center mt-3 mt-md-4">
+              <button
+                id="comments-next-button"
+                data-key={commentKey}
+                data-size={options.settings.comments.size}
+                data-offset={options.settings.comments.size}
+                type="button"
+                class="btn btn-light"
+              >
+                加载更多
+              </button>
+            </div>
+          )}
+        </>
+      ) : (
+        '评论加载失败 ❌'
+      )}
+    </div>
+  )
+}
diff --git a/src/components/sidebar/RecentComments.astro b/src/components/sidebar/RecentComments.astro
index c9c1e46..54a7b8d 100644
--- a/src/components/sidebar/RecentComments.astro
+++ b/src/components/sidebar/RecentComments.astro
@@ -4,7 +4,7 @@ import options from '@/options';
 ---
 
 {
-  options.settings.sidebar.comment > 0 && (
+  options.settings.comments.enable && options.settings.sidebar.comment > 0 && (
     <div id="recent-comments" class="widget widget-recent-comments">
       <div class="widget-title">近期评论</div>
       <ul id="recent-comments">