pref(components): improve comment components

README.md

@@ -3,7 +3,7 @@
 </h2><br>
 
 <pre align="center">
- Build with 🦖<a href="https://kuizuo.cn">Docusaurus</a> 
+ Build with 🦖<a href="https://docusaurus.io/">Docusaurus</a> 
 </pre>
 
 <p align="center">

blog/program/将 Supabase 作为下一个后端服务.md

@@ -217,9 +217,9 @@ const {data, error} = await supabase.auth.signInWithOAuth({
 
 你可以到[Supabase Storage API](https://supabase.github.io/storage-api/ 'Supabase Storage API') 查看 storage 相关 api。
 
-:::caution
+:::tip 现学现用
 
-本文中的所有图片数据都来源于 supabase bucket，现学现用了属于是。
+本文中的所有图片数据都来源于 supabase bucket。
 
 :::
 

docs/skill/docusaurus/comment.md

@@ -21,9 +21,9 @@ Waline：需要搭建后端服务与数据库服务，提供评论与浏览量
 2. **[giscus](https://github.com/apps/giscus) app 已安装**否则访客将无法评论和回应。
 3. **Discussions** 功能已[在你的仓库中启用](https://docs.github.com/en/github/administering-a-repository/managing-repository-settings/enabling-or-disabling-github-discussions-for-a-repository)。
 
-本博客已经内置好评论组件 `src/component/Comment`，所以只需要在 docusaurus.config.js 中设置 giscus 的配置即可。
+本博客已经内置好评论组件 [src/component/Comment](https://github.com/kuizuo/blog/blob/main/src/components/Comment/index.tsx)，所以只需要在 `docusaurus.config.js` 中设置 giscus 的配置即可。
 
-### 配置giscus
+### 配置 giscus
 
 打开 [giscus](https://giscus.app/) 官网，填写完对应的信息后，可以得到一个已经配置好的`<script>`标签
 
@@ -45,17 +45,17 @@ Waline：需要搭建后端服务与数据库服务，提供评论与浏览量
 </script>
 ```
 
-复制 `data-repo`, `data-repo-id`, `data-category` 和  `data-category-id` 填写到 `docusaurus.config.js` 中即可，
+由于我在 `src/component/Comment` 组件中做了配置合并，并且支持主题变化、国际化。因此，你只需要复制 `data-repo`, `data-repo-id`, `data-category` 和  `data-category-id` 填写到 `docusaurus.config.js` 中即可，以下是我的配置文件。
 
 ```javascript title='docusaurus.config.js'
 giscus: {
-    repo: 'kuizuo/blog',
-    repoId: 'MDEwOlJlcG9zaXRvcnkzOTc2MjU2MTI=',
-    category: 'General',
-    categoryId: 'DIC_kwDOF7NJDM4CPK95',
-    mapping: 'title',
-    lang: 'zh-CN',
-},
+  repo: 'kuizuo/blog',
+  repoId: 'MDEwOlJlcG9zaXRvcnkzOTc2MjU2MTI=',
+  category: 'General',
+  categoryId: 'DIC_kwDOF7NJDM4CPK95',
+  theme: 'light',
+  darkTheme: 'dark',
+}
 ```
 
 :::info

docusaurus.config.js

@@ -229,8 +229,8 @@ const config = {
       repoId: 'MDEwOlJlcG9zaXRvcnkzOTc2MjU2MTI=',
       category: 'General',
       categoryId: 'DIC_kwDOF7NJDM4CPK95',
-      mapping: 'title',
-      lang: 'zh-CN',
+      theme: 'light',
+      darkTheme: 'dark',
     },
     liveCodeBlock: {
       playgroundPosition: 'top',
@@ -338,8 +338,8 @@ const config = {
   ],
   stylesheets: [],
   i18n: {
-    defaultLocale: 'zh',
-    locales: ['en', 'zh'],
+    defaultLocale: 'zh-CN',
+    locales: ['en', 'zh-CN'],
     localeConfigs: {
       en: {
         htmlLang: 'en-GB',

src/components/Comment/index.tsx

@@ -1,25 +1,42 @@
 import React from 'react';
-import {useThemeConfig} from '@docusaurus/theme-common';
-import {useColorMode} from '@docusaurus/theme-common';
+import { useThemeConfig, useColorMode } from '@docusaurus/theme-common';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { ThemeConfig } from '@docusaurus/preset-classic';
 import BrowserOnly from '@docusaurus/BrowserOnly';
-import Giscus, {GiscusProps} from '@giscus/react';
+import Giscus, { GiscusProps } from '@giscus/react';
+
+interface CustomThemeConfig extends ThemeConfig {
+  giscus: GiscusProps & { darkTheme: string };
+}
+
+const defaultConfig: Partial<GiscusProps> & { darkTheme: string } = {
+  id: 'comments',
+  mapping: 'title',
+  reactionsEnabled: '1',
+  emitMetadata: '0',
+  inputPosition: 'top',
+  lang: 'zh-CN',
+  theme: 'light',
+  darkTheme: 'dark',
+}
 
 export default function Comment(): JSX.Element {
-  const themeConfig = useThemeConfig() as any;
+  const themeConfig = useThemeConfig() as CustomThemeConfig;
+  const { i18n } = useDocusaurusContext();
+
+  // merge default config
+  const giscus = { ...defaultConfig, ...themeConfig.giscus };
+
+  if (!giscus.repo || !giscus.repoId || !giscus.categoryId) {
+    throw new Error('You must provide `repo`, `repoId`, and `categoryId` to `themeConfig.giscus`.');
+  }
 
-  const theme = useColorMode().colorMode === 'dark' ? 'dark' : 'light';
+  giscus.theme = useColorMode().colorMode === 'dark' ? giscus.darkTheme : giscus.theme;
+  giscus.lang = i18n.currentLocale
 
-  const options: GiscusProps = {
-    ...(themeConfig.giscus as GiscusProps),
-    id: 'comments',
-    reactionsEnabled: '1',
-    emitMetadata: '0',
-    inputPosition: 'top',
-    theme,
-  };
   return (
-    <BrowserOnly fallback={<div></div>}>
-      {() => <Giscus {...options} />}
+    <BrowserOnly fallback={<div>Loading Comments...</div>}>
+      {() => <Giscus {...giscus} />}
     </BrowserOnly>
   );
 }

src/pages/friends/_components/FriendCard/styles.module.css

@@ -12,6 +12,7 @@
   height: 100px;
   min-width: 100px;
   border-radius: 50%;
+  object-fit: contain;
 }
 
 .friendCardHeader {

src/pages/friends/index.tsx

@@ -21,7 +21,7 @@ function FriendHeader() {
         href={ADD_FRIEND_URL}
         target="_blank"
         rel="noreferrer">
-        申请友链
+        🔗 申请友链
       </a>
     </section>
   );

src/theme/BlogPostPage/index.tsx

@@ -1,15 +1,15 @@
-import React, {type ReactNode} from 'react';
+import React, { type ReactNode } from 'react';
 import clsx from 'clsx';
-import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
-import {BlogPostProvider, useBlogPost} from '@docusaurus/theme-common/internal';
+import { HtmlClassNameProvider, ThemeClassNames } from '@docusaurus/theme-common';
+import { BlogPostProvider, useBlogPost } from '@docusaurus/theme-common/internal';
 import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';
 import BlogPostPageMetadata from '@theme/BlogPostPage/Metadata';
 import BackToTopButton from '@theme/BackToTopButton';
 import TOC from '@theme/TOC';
-import type {Props} from '@theme/BlogPostPage';
-import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
+import type { Props } from '@theme/BlogPostPage';
+import type { BlogSidebar } from '@docusaurus/plugin-content-blog';
 import Comment from '@site/src/components/Comment';
 
 function BlogPostPageContent({
@@ -19,13 +19,15 @@ function BlogPostPageContent({
   sidebar: BlogSidebar;
   children: ReactNode;
 }): JSX.Element {
-  const {metadata, toc} = useBlogPost();
-  const {nextItem, prevItem, frontMatter} = metadata;
+  const { metadata, toc } = useBlogPost();
+  const { nextItem, prevItem, frontMatter } = metadata;
   const {
     hide_table_of_contents: hideTableOfContents,
     toc_min_heading_level: tocMinHeadingLevel,
     toc_max_heading_level: tocMaxHeadingLevel,
+    hide_comment: hideComment,
   } = frontMatter;
+
   return (
     <BlogLayout
       // sidebar={sidebar}
@@ -43,7 +45,7 @@ function BlogPostPageContent({
       {(nextItem || prevItem) && (
         <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
       )}
-      <Comment />
+      {!hideComment && <Comment />}
       <BackToTopButton />
     </BlogLayout>
   );