fix: a few bugs

.github/workflows/deploy.yaml

@@ -50,5 +50,5 @@ jobs:
           RSS_DESCRIPTION: ${{ vars.RSS_DESCRIPTION }}
         run: |
           cd Rin/
-          bun install
+          bun install --frozen-lockfile
           bun scripts/migrator.ts

.github/workflows/seo.yaml

@@ -45,5 +45,5 @@ jobs:
           S3_FORCE_PATH_STYLE: ${{ vars.S3_FORCE_PATH_STYLE }}
         run: |
           cd Rin/
-          bun i
+          bun install --frozen-lockfile
           bun scripts/render.ts

client/public/locales/en/translation.json

@@ -119,6 +119,7 @@
       "placeholder": "Please enter your username"
     }
   },
+  "logout": "Logout",
   "next": "Next Page",
   "preview": "Preview",
   "previous": "Previous Page",
@@ -140,6 +141,12 @@
       },
       "clear_failed$message": "Failed to clear cache: {{message}}"
     },
+    "comment": {
+      "enable": {
+        "desc": "Enable comment support",
+        "title": "Enable Comment"
+      }
+    },
     "counter": {
       "enable": {
         "desc": "Enable statistics for article PV and UV",

client/public/locales/ja/translation.json

@@ -119,6 +119,7 @@
       "placeholder": "ユーザー名を入力してください"
     }
   },
+  "logout": "ログアウト",
   "next": "次のページ",
   "preview": "プレビュー",
   "previous": "前のページ",
@@ -140,6 +141,12 @@
       },
       "clear_failed$message": "キャッシュのクリアに失敗しました: {{message}}"
     },
+    "comment": {
+      "enable": {
+        "desc": "コメント機能を有効にする",
+        "title": "コメントを有効にする"
+      }
+    },
     "counter": {
       "enable": {
         "desc": "記事の PV と UV 機能を有効にする",
@@ -221,4 +228,4 @@
   },
   "writing": "執筆",
   "year$year": "{{year}} 年"
-}
+}

client/public/locales/zh/translation.json

@@ -119,6 +119,7 @@
       "placeholder": "请输入用户名"
     }
   },
+  "logout": "退出登录",
   "next": "下一页",
   "preview": "预览",
   "previous": "上一页",
@@ -140,6 +141,12 @@
       },
       "clear_failed$message": "清除缓存失败: {{message}}"
     },
+    "comment": {
+      "enable": {
+        "desc": "启用评论功能",
+        "title": "启用评论"
+      }
+    },
     "counter": {
       "enable": {
         "desc": "启用统计文章 PV 与 UV 功能",

client/src/components.css

@@ -1,7 +1,4 @@
 @import "./base.css";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 
 @layer base {
     .border-card {

client/src/components/feed_card.tsx

@@ -14,7 +14,7 @@ export function FeedCard({ id, title, avatar, draft, listed, top, summary, hasht
     const { t } = useTranslation()
     return useMemo(() => (
         <>
-            <Link href={`/feed/${id}`} target="_blank" className="w-full rounded-2xl bg-w my-2 p-6 duration-300 ani-show bg-button">
+            <Link href={`/feed/${id}`} target="_blank" className="w-full rounded-2xl bg-w my-2 p-6 duration-300 bg-button">
                 {avatar &&
                     <div className="flex flex-row items-center mb-2 rounded-xl overflow-clip">
                         <img src={avatar} alt=""

client/src/components/markdown.tsx

@@ -13,7 +13,6 @@ import { remarkAlert } from "remark-github-blockquote-alert";
 import remarkMath from "remark-math";
 import Lightbox, { SlideImage } from "yet-another-react-lightbox";
 import Counter from "yet-another-react-lightbox/plugins/counter";
-import "yet-another-react-lightbox/plugins/counter.css";
 import Download from "yet-another-react-lightbox/plugins/download";
 import Zoom from "yet-another-react-lightbox/plugins/zoom";
 import "yet-another-react-lightbox/styles.css";

client/src/hooks/useTableOfContents.tsx

@@ -76,18 +76,19 @@ const useTableOfContents = (selector: string) => {
     }
 
     return {
-        TOC: () => (<div>
+        TOC: () => (<div className='rounded-2xl bg-w py-4 px-4 t-primary'>
             <h2 className="text-lg font-bold">{t("index.title")}</h2>
-            <ul>
+            <ul className="max-h-[calc(100vh-10.25rem)] overflow-auto" style={{ scrollbarWidth: "none" }}>
                 {tableOfContents.length === 0 && <li>{t("index.empty.title")}</li>}
                 {tableOfContents.map((item) => (
                     <li
-                        key={item.index}
+                        key={`toc$${item.index}`}
                         className={activeIndex === item.index ? "text-theme" : ""}
                         style={{ marginLeft: item.marginLeft }}
                         onClick={() => {
-                            item.element.scrollIntoView({
-                                behavior: 'smooth'
+                            window.scrollTo({
+                                behavior: 'smooth',
+                                top: item.element.offsetTop,
                             });
                         }}
                     >

client/src/index.css

@@ -1,7 +1,5 @@
 @import "./base.css";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+
 /* cantarell-latin-400-normal */
 @font-face {
   font-family: "Cantarell";
@@ -91,6 +89,12 @@ ul {
 .octicon {
   @apply mr-1 w-3;
 }
+
+.katex {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
 /* animation */
 
 @keyframes anvil {
@@ -127,6 +131,8 @@ ul {
 
 .table {
   @apply w-full border-collapse my-4;
+  overflow-x: auto;
+  display: block !important;
 }
 
 .table th,
@@ -197,4 +203,4 @@ a.toc-link {
 
 .is-active-link::before {
   @apply bg-theme;
-}
+}

client/src/page/feed.tsx

@@ -280,7 +280,7 @@ export function FeedPage({ id, TOC, clean }: { id: string, TOC: () => JSX.Elemen
             </main>
             <div className="w-80 hidden lg:block relative">
               <div
-                className={`ml-2 rounded-2xl bg-w py-4 px-4 start-0 end-0 top-[5.5rem] sticky t-primary`}
+                className={`ml-2 start-0 end-0 top-[5.5rem] sticky`}
               >
                 <TOC />
               </div>
@@ -331,7 +331,7 @@ export function TOCHeader({ TOC }: { TOC: () => JSX.Element }) {
         }}
         onRequestClose={() => setIsOpened(false)}
       >
-        <div className="rounded-2xl bg-w py-4 px-4 w-[80vw] sm:w-[60vw] lg:w-[40vw] overflow-clip relative t-primary">
+        <div className="w-[80vw] sm:w-[60vw] lg:w-[40vw] overflow-clip relative t-primary">
           <TOC />
         </div>
       </ReactModal>
@@ -432,6 +432,7 @@ type Comment = {
 };
 
 function Comments({ id }: { id: string }) {
+  const config = useContext(ClientConfigContext);
   const [comments, setComments] = useState<Comment[]>([]);
   const [error, setError] = useState<string>();
   const ref = useRef("");
@@ -458,33 +459,35 @@ function Comments({ id }: { id: string }) {
   }, [id]);
   return (
     <>
-      <div className="m-2 flex flex-col justify-center items-center">
-        <CommentInput id={id} onRefresh={loadComments} />
-        {error && (
-          <>
-            <div className="flex flex-col wauto rounded-2xl bg-w t-primary m-2 p-6 items-center justify-center">
-              <h1 className="text-xl font-bold t-primary">{error}</h1>
-              <button
-                className="mt-2 bg-theme text-white px-4 py-2 rounded-full"
-                onClick={loadComments}
-              >
-                {t("reload")}
-              </button>
+      {config.get<boolean>('comment.enabled') &&
+        <div className="m-2 flex flex-col justify-center items-center">
+          <CommentInput id={id} onRefresh={loadComments} />
+          {error && (
+            <>
+              <div className="flex flex-col wauto rounded-2xl bg-w t-primary m-2 p-6 items-center justify-center">
+                <h1 className="text-xl font-bold t-primary">{error}</h1>
+                <button
+                  className="mt-2 bg-theme text-white px-4 py-2 rounded-full"
+                  onClick={loadComments}
+                >
+                  {t("reload")}
+                </button>
+              </div>
+            </>
+          )}
+          {comments.length > 0 && (
+            <div className="w-full">
+              {comments.map((comment) => (
+                <CommentItem
+                  key={comment.id}
+                  comment={comment}
+                  onRefresh={loadComments}
+                />
+              ))}
             </div>
-          </>
-        )}
-        {comments.length > 0 && (
-          <div className="w-full">
-            {comments.map((comment) => (
-              <CommentItem
-                key={comment.id}
-                comment={comment}
-                onRefresh={loadComments}
-              />
-            ))}
-          </div>
-        )}
-      </div>
+          )}
+        </div>
+      }
     </>
   );
 }

client/src/page/feeds.tsx

@@ -98,10 +98,10 @@ export function FeedsPage() {
                         </div>
                     </div>
                     <Waiting for={status === 'idle'}>
-                        <div className="wauto flex flex-col">
-                        {feeds[listState].data.map(({ id, ...feed }: any) => (
-                            <FeedCard key={id} id={id} {...feed} />
-                        ))}
+                        <div className="wauto flex flex-col ani-show">
+                            {feeds[listState].data.map(({ id, ...feed }: any) => (
+                                <FeedCard key={id} id={id} {...feed} />
+                            ))}
                         </div>
                         <div className="wauto flex flex-row items-center mt-4 ani-show">
                             {page > 1 &&

client/src/page/friends.tsx

@@ -1,5 +1,5 @@
 import i18next from "i18next";
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Helmet } from 'react-helmet';
 import { useTranslation } from "react-i18next";
 import Modal from 'react-modal';
@@ -86,9 +86,6 @@ export function FriendsPage() {
         })
         ref.current = true
     }, [])
-    function publishButton() {
-        publish({ name, desc, avatar, url, showAlert })
-    }
     return (<>
         <Helmet>
             <title>{`${t('friends.title')} - ${process.env.NAME}`}</title>
@@ -99,14 +96,14 @@ export function FriendsPage() {
             <meta property="og:url" content={document.URL} />
         </Helmet>
         <Waiting for={friendsAvailable.length !== 0 || friendsUnavailable.length !== 0 || status === "idle"}>
-            <main className="w-full flex flex-col justify-center items-center mb-8 t-primary">
+            <main className="w-full flex flex-col justify-center items-center mb-8 t-primary ani-show">
                 <FriendList title={t('friends.title')} show={friendsAvailable.length > 0} friends={friendsAvailable} />
                 <FriendList title={t('friends.left')} show={friendsUnavailable.length > 0} friends={friendsUnavailable} />
                 <FriendList title={t('friends.review.waiting')} show={waitList.length > 0} friends={waitList} />
                 <FriendList title={t('friends.review.rejected')} show={refusedList.length > 0} friends={refusedList} />
                 <FriendList title={t('friends.my_apply')} show={profile?.permission !== true && apply !== undefined} friends={apply ? [apply] : []} />
                 {profile && (profile.permission || config.get("friend_apply_enable")) &&
-                    <div className="wauto t-primary flex text-start text-2xl font-bold mt-8 ani-show">
+                    <div className="wauto t-primary flex text-start text-2xl font-bold mt-8">
                         <div className="md:basis-1/2 bg-w rounded-xl p-4">
                             <p>
                                 {profile.permission ? t('friends.create') : t('friends.apply')}
@@ -117,7 +114,7 @@ export function FriendsPage() {
                                 <Input value={avatar} setValue={setAvatar} placeholder={t('avatar.url')} className="mt-2" />
                                 <Input value={url} setValue={setUrl} placeholder={t('url')} className="my-2" />
                                 <div className='flex flex-row justify-center'>
-                                    <button onClick={publishButton} className='basis-1/2 bg-theme text-white py-4 rounded-full shadow-xl shadow-light'>{t('create.title')}</button>
+                                    <button onClick={() => publish({ name, desc, avatar, url, showAlert })} className='basis-1/2 bg-theme text-white py-4 rounded-full shadow-xl shadow-light'>{t('create.title')}</button>
                                 </div>
                             </div>
                         </div>
@@ -130,6 +127,7 @@ export function FriendsPage() {
 }
 
 function FriendList({ title, show, friends }: { title: string, show: boolean, friends: FriendItem[] }) {
+    console.log(friends)
     return (<>
         {
             show && <>
@@ -199,14 +197,14 @@ function Friend({ friend }: { friend: FriendItem }) {
         })
     }, [avatar, name, desc, url, status])
 
-    const statusOption = [
+    const statusOption = useMemo(() => [
         { value: -1, label: t('friends.review.rejected') },
         { value: 0, label: t('friends.review.waiting') },
         { value: 1, label: t('friends.review.accepted') }
-    ]
+    ], [])
     return (
         <>
-            <a title={friend.name} href={friend.url} target="_blank" className="bg-button w-full bg-w rounded-xl p-4 flex flex-col justify-center items-center relative ani-show">
+            <a title={friend.name} href={friend.url} target="_blank" className="bg-button w-full bg-w rounded-xl p-4 flex flex-col justify-center items-center relative">
                 <div className="w-16 h-16">
                     <img className={"rounded-full " + (friend.health.length > 0 ? "grayscale" : "")} src={friend.avatar} alt={friend.name} />
                 </div>

client/src/page/settings.tsx

@@ -94,6 +94,7 @@ export function Settings() {
                             <ItemSwitch title={t('settings.friend.health.title')} description={t('settings.friend.health.desc')} type="server" configKey="friend_crontab" />
                             <ItemInput title={t('settings.friend.health.ua.title')} description={t('settings.friend.health.ua.desc')} type="server" configKey="friend_ua" configKeyTitle="User-Agent" />
                             <ItemTitle title={t('settings.other.title')} />
+                            <ItemSwitch title={t('settings.comment.enable.title')} description={t('settings.comment.enable.desc')} type="client" configKey="comment.enabled" />
                             <ItemSwitch title={t('settings.counter.enable.title')} description={t('settings.counter.enable.desc')} type="client" configKey="counter.enabled" />
                             <ItemSwitch title={t('settings.rss.title')} description={t('settings.rss.desc')} type="client" configKey="rss" />
                             <ItemInput title={t('settings.favicon.title')} description={t('settings.favicon.desc')} type="client" configKey="favicon" configKeyTitle="Favicon" />

client/src/state/config.tsx

@@ -5,6 +5,7 @@ export const defaultClientConfig = new Map(Object.entries({
     "favicon": defaultFavicon,
     "counter.enabled": true,
     "friend_apply_enable": true,
+    "comment.enabled": true,
 }))
 
 export const defaultServerConfig = new Map(Object.entries({

package.json

@@ -11,7 +11,7 @@
     "dev:client": "bun --filter './client' dev",
     "dev:server": "bun wrangler dev --port 11498",
     "check": "turbo check",
-    "cf-deploy": "bun server/migrator.ts",
+    "cf-deploy": "bun scripts/migrator.ts",
     "b": "turbo build",
     "t": "turbo t",
     "g": "turbo run g",
@@ -25,7 +25,7 @@
     "autoprefixer": "^10.4.19",
     "i18next-parser": "^9.0.0",
     "postcss": "^8.4.38",
-    "puppeteer": "^22.10.0",
+    "puppeteer": "^22.13.0",
     "tailwindcss": "^3.4.3",
     "turbo": "^1.13.3",
     "vitest": "1.3.0"