fix: set page title

packages/website/package.json

@@ -22,6 +22,7 @@
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
     "react-hook-form": "^7.43.8",
     "react-router-dom": "^6.9.0",
     "reset-css": "^5.0.1",

packages/website/src/App.tsx

@@ -1,14 +1,17 @@
 import pageRoutes from '~react-pages';
 import React, { Suspense } from 'react';
+import { HelmetProvider } from 'react-helmet-async';
 import { useRoutes } from 'react-router-dom';
 
 import { UserProvider } from './hooks/use-user';
 
 const App = () => {
   return (
-    <UserProvider>
-      <Suspense fallback={null}>{useRoutes(pageRoutes)}</Suspense>
-    </UserProvider>
+    <HelmetProvider>
+      <UserProvider>
+        <Suspense fallback={null}>{useRoutes(pageRoutes)}</Suspense>
+      </UserProvider>
+    </HelmetProvider>
   );
 };
 

packages/website/src/components/Helmet.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Helmet as BaseHelmet, type HelmetProps } from 'react-helmet-async';
+
+const Helmet = (props: React.PropsWithChildren<HelmetProps>) => {
+  return (
+    <BaseHelmet defaultTitle='Bangumi 番组计划' titleTemplate='%s | Bangumi 番组计划' {...props} />
+  );
+};
+
+export default Helmet;

packages/website/src/pages/index/group/[name]/__tests__/members.spec.tsx

@@ -2,7 +2,7 @@ import type { RenderResult } from '@testing-library/react';
 import { waitFor } from '@testing-library/react';
 import { rest } from 'msw';
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { Outlet, Route, Routes, useParams } from 'react-router-dom';
 
 import type { GroupMember, ResponseWithPagination } from '@bangumi/client/group';
 
@@ -50,7 +50,13 @@ class GroupMembersTest {
       }),
     );
 
-    this.page = renderPage(<GroupMembers />);
+    this.page = renderPage(
+      <Routes>
+        <Route element={<Outlet context={{ groupRet: { group: Sandbox } }} />}>
+          <Route index element={<GroupMembers />} />
+        </Route>
+      </Routes>,
+    );
   }
 
   async assertMembersExist(expectMembers: string[]): Promise<void> {

packages/website/src/pages/index/group/[name]/index/forum.tsx

@@ -3,12 +3,14 @@ import { useParams } from 'react-router-dom';
 
 import { Pagination } from '@bangumi/design';
 import { withErrorBoundary } from '@bangumi/website/components/ErrorBoundary';
+import Helmet from '@bangumi/website/components/Helmet';
 import { useGroupRecentTopics } from '@bangumi/website/hooks/use-group';
 import { useTransitionNavigate } from '@bangumi/website/hooks/use-navigate';
 import { usePaginationParams } from '@bangumi/website/hooks/use-pagination';
 import { useUser } from '@bangumi/website/hooks/use-user';
 
 import TopicForm from '../../components/TopicForm';
+import { useGroupContext } from '..';
 import TopicsTable from '../components/TopicsTable';
 import styles from './style.module.less';
 
@@ -18,6 +20,11 @@ const GroupForum = () => {
   const { curPage, offset, pageSize } = usePaginationParams();
   const { user } = useUser();
 
+  const groupContext = useGroupContext();
+  const {
+    groupRet: { group },
+  } = groupContext;
+
   const topics = useGroupRecentTopics(name!, {
     offset,
     limit: pageSize,
@@ -29,6 +36,7 @@ const GroupForum = () => {
 
   return (
     <>
+      <Helmet title={`${group.group.title}小组的讨论`} />
       <TopicsTable topics={topics.data} />
       <Pagination
         total={topics.total}

packages/website/src/pages/index/group/[name]/index/index.tsx

@@ -4,6 +4,7 @@ import { useParams } from 'react-router-dom';
 import { Button, CollapsibleContent, Section } from '@bangumi/design';
 import { ArrowRightCircle } from '@bangumi/icons';
 import { render as renderBBCode, UnreadableCodeError } from '@bangumi/utils';
+import Helmet from '@bangumi/website/components/Helmet';
 import { useGroupRecentTopics } from '@bangumi/website/hooks/use-group';
 import { useUser } from '@bangumi/website/hooks/use-user';
 
@@ -29,6 +30,7 @@ const GroupHome: React.FC = () => {
 
   return (
     <>
+      <Helmet title={`${group.group.title}小组`} />
       <CollapsibleContent
         threshold={193}
         content={parsedDescription}

packages/website/src/pages/index/group/[name]/index/members.tsx

@@ -3,11 +3,13 @@ import { useParams } from 'react-router-dom';
 
 import { Pagination, Section } from '@bangumi/design';
 import { UnreadableCodeError } from '@bangumi/utils';
+import Helmet from '@bangumi/website/components/Helmet';
 import { useGroupMembers } from '@bangumi/website/hooks/use-group-members';
 import { useTransitionNavigate } from '@bangumi/website/hooks/use-navigate';
 import { usePaginationParams } from '@bangumi/website/hooks/use-pagination';
 
 import { UserCard } from '../../components/UserCard';
+import { useGroupContext } from '..';
 import styles from './style.module.less';
 
 const GroupMembersPage = () => {
@@ -18,6 +20,11 @@ const GroupMembersPage = () => {
     throw new UnreadableCodeError('BUG: name is undefined');
   }
 
+  const groupContext = useGroupContext();
+  const {
+    groupRet: { group },
+  } = groupContext;
+
   // 仅第一页获取管理员
   const { data: groupModMembers } = useGroupMembers(name, {
     offset,
@@ -39,6 +46,7 @@ const GroupMembersPage = () => {
   // TODO: 遵循旧站的交互规则，可能需要改动
   return (
     <>
+      <Helmet title={`${group.group.title}小组成员`} />
       {curPage === 1 && (
         <Section title='小组管理员'>
           <div className={styles.members}>

packages/website/src/pages/index/group/[name]/new_topic/index.tsx

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
 
 import { Typography } from '@bangumi/design';
 import { withErrorBoundary } from '@bangumi/website/components/ErrorBoundary';
+import Helmet from '@bangumi/website/components/Helmet';
 import { useGroup } from '@bangumi/website/hooks/use-group';
 
 import GroupInfo from '../../components/GroupInfo';
@@ -11,25 +12,23 @@ import styles from './style.module.less';
 
 const GroupNewTopicPage = () => {
   const { name } = useParams();
-  const { group } = useGroup(name!);
+  const { group: groupProfile } = useGroup(name!);
+  const { group } = groupProfile;
 
   return (
     <>
+      <Helmet title={`在${group.title}小组发表新话题`} />
       <Typography.Text type='secondary' className={styles.tipText}>
         在
-        <Typography.Link
-          to={`/group/${group.group.name}`}
-          fontWeight='bold'
-          className={styles.groupLink}
-        >
-          {group.group.title}
+        <Typography.Link to={`/group/${group.name}`} fontWeight='bold' className={styles.groupLink}>
+          {group.title}
         </Typography.Link>
         发表新话题
       </Typography.Text>
       <div className={styles.grid}>
-        <TopicForm groupName={name} />
+        <TopicForm groupName={group.name} />
         <div className={styles.rightColumn}>
-          <GroupInfo group={group.group} />
+          <GroupInfo group={group} />
         </div>
       </div>
     </>

packages/website/src/pages/index/group/reply/[id]/edit.tsx

@@ -5,6 +5,7 @@ import { useSWRConfig } from 'swr';
 
 import { ozaClient } from '@bangumi/client';
 import { EditorForm, toast, Typography } from '@bangumi/design';
+import Helmet from '@bangumi/website/components/Helmet';
 import useGroupPost from '@bangumi/website/hooks/use-group-post';
 import { useUser } from '@bangumi/website/hooks/use-user';
 
@@ -65,6 +66,7 @@ const EditReplyPage = () => {
 
   return (
     <>
+      <Helmet title={`修改主题“${data.topicTitle}”的回复`} />
       <Typography.Text type='secondary' className={styles.tipText}>
         修改主题
         <Typography.Link

packages/website/src/pages/index/group/topic/[id]/edit.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 
 import { Typography } from '@bangumi/design';
+import Helmet from '@bangumi/website/components/Helmet';
 import useGroupTopic from '@bangumi/website/hooks/use-group-topic';
 
 import TopicForm from '../../components/TopicForm';
@@ -17,6 +18,7 @@ const EditTopicPage = () => {
 
   return (
     <>
+      <Helmet title={`修改主题“${data.title}”`} />
       <Typography.Text type='secondary' className={styles.tipText}>
         修改主题
         <Typography.Link

packages/website/src/pages/index/group/topic/[id]/index.tsx

@@ -5,6 +5,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 import { Avatar, Button, Layout, RichContent, Topic } from '@bangumi/design';
 import ReplyForm from '@bangumi/design/components/Topic/ReplyForm';
+import Helmet from '@bangumi/website/components/Helmet';
 import { useGroup } from '@bangumi/website/hooks/use-group';
 import useGroupTopic from '@bangumi/website/hooks/use-group-topic';
 import { useUser } from '@bangumi/website/hooks/use-user';
@@ -54,6 +55,7 @@ const TopicPage: FC = () => {
 
   return (
     <>
+      <Helmet title={topicDetail.title} />
       <GroupTopicHeader
         id={topicDetail.id}
         title={topicDetail.title}

packages/website/src/pages/index/subject/[id]/components/WikiBeginnerEditor.spec.tsx

@@ -41,8 +41,6 @@ it('add WikiElement properly', async () => {
   addRootWikiElementBtn.click();
   editor.rerender(<WikiBeginnerEditor elements={res} onChange={onChange} />);
 
-  console.log(res);
-
   expect(res[1]).toBeInstanceOf(WikiElement);
   expect(res[1]?.value?.length).toBe(2);
   expect(res.length).toBe(3);