201 | {skipParsing
202 | ? children
203 | : contentBlocks.map((block, index) =>
204 | block.type === Paragraph ? (
205 |
{block.children}
206 | ) : (
207 | cloneElement(block, { key: index })
208 | )
209 | )}
210 |
53 | {posts.map((post, index) => (
54 |
69 |
83 | {
87 | activePostItemRef.current = event.currentTarget;
88 | }}
89 | {...post}
90 | />
91 |
92 |
93 | ))}
94 |
管理人員
29 |
30 |
31 | 本看板由板主「
32 |
33 | {moderator.nickname}
34 |
35 | 」負責管理。
36 |
37 |
38 |
39 | 若板主出現以下情形，請來信看板{' '}
40 | 申訴信箱 反應：
41 |
42 |
43 |
44 |
45 | - 文章明顯違規，但板主未依照板規執法
46 | - 板主誤判違規文章，將當事人禁言
47 | - 板規含有攻擊、歧視，違反全站站規等不適當的內容
48 | - 板主連續多日未處理看板事務
49 |
50 |
{forumName}板板規
64 |
65 | 若貼文內容違反規定，板主將透過管理後臺刪除貼文，貼文刪除的同時，系統會自動禁止發文者繼續於本看板發言。
66 |
67 | 歡迎交流《{forumName}》相關文章。
68 |
69 |
70 |
71 |
72 | {forumRules.map((rule) => (
73 | -
74 |
{rule.title}
75 | {rule.content && {rule.content}
}
76 | 違反此板規禁言 {rule.bucketDays} 天。
77 |
78 | ))}
79 |
80 |
81 |
82 | );
83 | }
84 |
85 | function GlobalRules({ globalRules }) {
86 | if (!globalRules.length) {
87 | return null;
88 | }
89 |
90 | return (
91 | <>
92 |
93 | 全站站規
94 |
95 | 違反全站站規的貼文，板主刪文後系統會通知官方審核人員，依全站站規於全站停權使用者。
96 |
97 |
98 |
99 |
100 | {globalRules.map((rule) => (
101 | -
102 |
{rule.title}
103 | {rule.content && {rule.content}
}
104 | 違反此站規，於此看板禁言 {rule.bucketDays} 天。
105 |
106 | ))}
107 |
108 |
109 |
110 | );
111 | }
112 |
113 | function Rule() {
114 | const router = useRouter();
115 | const { forumAlias } = router.query;
116 |
117 | const forum = useForumByAlias(forumAlias);
118 | const forumID = forum?.id;
119 |
120 | const { data: bulletin } = useQuery([`forums/bulletin`, { forumID }], {
121 | staleTime: Infinity,
122 | });
123 |
124 | const version = useMemo(() => {
125 | const date = new Date(bulletin?.lastUpdatedAt);
126 | return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(
127 | 2,
128 | '0'
129 | )}.${String(date.getDate()).padStart(2, '0')}`;
130 | }, [bulletin?.lastUpdatedAt]);
131 |
132 | if (!bulletin || !forum) {
133 | return null;
134 | }
135 |
136 | const { forumRules, globalRules, moderators } = bulletin;
137 |
138 | return (
139 | ol {
174 | color: rgba(0, 0, 0, 0.45);
175 |
176 | > li {
177 | padding-bottom: 8px;
178 | margin-top: 10px;
179 | border-bottom: 1px solid rgb(222, 222, 222);
180 |
181 | &:first-child {
182 | margin-top: 0;
183 | }
184 |
185 | &::marker {
186 | font-size: 20px;
187 | font-weight: 500;
188 | line-height: 1.6;
189 | }
190 | }
191 | }
192 | }
193 | `}
194 | >
195 |
196 |
197 |
198 |
205 |
規範
206 |
211 | 版本：{version}
212 |
213 |
214 |
215 | 於看板發言時請遵守全站站規與本板板規，讓大家都有一個乾淨的討論空間。
216 |
217 |
218 |
219 |
220 |
221 |
222 |
47 | {forumsList.map((forum, index) => (
48 |
54 |
55 |
56 | ))}
57 |
47 | {personasList.map((persona, index) => (
48 |
55 |
56 |
57 | ))}
58 |
134 |
140 |
141 | {SORT_LABEL[sort] ?? '最新發佈'}
142 |
143 |
155 |
156 |
157 | {SINCE_LABEL[since] ?? '不限時間'}
158 |
159 |
171 |
172 |
173 |
225 |
95 | {posts.slice(0, 2).map((post, index) => (
96 |
103 | ))}
104 |
105 | {thirdSlot}
106 |
107 | {posts.slice(2).map((post, index) => (
108 |
115 | ))}
116 |
47 | {topicsList.map((topic, index) => (
48 |
55 |
56 |
57 | ))}
58 |
57 | {children}
58 |
59 |
60 | );
61 | }
62 |
63 | export default Search;
64 |
--------------------------------------------------------------------------------
/src/components/sort-icons.js:
--------------------------------------------------------------------------------
1 | export function PopularIcon(props) {
2 | return (
3 |
12 | );
13 | }
14 |
15 | export function LatestIcon(props) {
16 | return (
17 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/tab-list.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | // TODO: Use Reakit's Tab component
4 | const Tab = styled.a.attrs({
5 | tabIndex: 0,
6 | })`
7 | color: ${(props) => (props.isActive ? '#000' : 'rgba(0, 0, 0, 0.35)')};
8 | height: 60px;
9 | padding: 0 16px;
10 | line-height: 60px;
11 | font-weight: 500;
12 | font-size: 16px;
13 | position: relative;
14 | cursor: pointer;
15 |
16 | &:hover {
17 | color: #000;
18 | }
19 |
20 | &:after {
21 | content: ${(props) => (props.isActive ? '""' : 'none')};
22 | border-bottom: 2px solid rgb(51, 151, 207);
23 | position: absolute;
24 | left: 0px;
25 | bottom: -1px;
26 | width: 100%;
27 | }
28 |
29 | &:focus:not(:focus-visible) {
30 | outline: none;
31 | }
32 | `;
33 |
34 | const TabList = styled.div`
35 | display: flex;
36 | `;
37 |
38 | TabList.Tab = Tab;
39 |
40 | export default TabList;
41 |
--------------------------------------------------------------------------------
/src/components/topic-item.js:
--------------------------------------------------------------------------------
1 | import { css } from 'styled-components';
2 | import Link from 'next/link';
3 |
4 | export default function TopicItem({ topic }) {
5 | if (!topic) {
6 | return null;
7 | }
8 |
9 | return (
10 |
11 |
19 |
32 |
43 |
44 |
45 |
51 |
60 | {topic.name}
61 |
62 |
63 |
71 | {topic.postCount} 篇文章
72 | ・
73 | {topic.subscriptionCount} 人追蹤
74 |
75 |
76 |
77 |
78 | );
79 | }
80 |
--------------------------------------------------------------------------------
/src/components/topic-posts-list.js:
--------------------------------------------------------------------------------
1 | import { useInfiniteQuery } from 'react-query';
2 | import { useRouter } from 'next/router';
3 | import Link from 'next/link';
4 | import { css } from 'styled-components';
5 | import usePostsList from '../hooks/use-posts-list';
6 | import useModalParentLocation from '../hooks/use-modal-parent-location';
7 | import PostItem from './post-item';
8 |
9 | const PAGE_SIZE = 30;
10 |
11 | function TopicPostsList() {
12 | const router = useRouter();
13 | const { postID } = router.query;
14 | const isModalOpen = !!postID;
15 | const modalParentLocation = useModalParentLocation(isModalOpen);
16 | const { topic, latest } = modalParentLocation.query;
17 | const sort = latest ? 'created' : 'like';
18 |
19 | const {
20 | data,
21 | fetchNextPage,
22 | hasNextPage,
23 | isFetching,
24 | isFetchingNextPage,
25 | } = useInfiniteQuery(['topics/posts', { topic, sort }], {
26 | getNextPageParam: (lastGroup, pages) =>
27 | lastGroup.length < PAGE_SIZE
28 | ? null
29 | : {
30 | offset: pages
31 | .map((page) => page.length)
32 | .reduce((sum, cur) => sum + cur, 0),
33 | },
34 | staleTime: Infinity,
35 | });
36 |
37 | const isLoading = isFetching || isFetchingNextPage;
38 |
39 | const posts = data ? data.pages.flat() : [];
40 |
41 | const [modal, activePostItemRef] = usePostsList(posts, {
42 | fetchNextPage,
43 | hasNextPage,
44 | isFetching,
45 | isFetchingNextPage,
46 | });
47 |
48 | return (
49 | <>
50 |
51 | {posts.map((post, index) => (
52 |
67 |
82 | {
85 | activePostItemRef.current = event.currentTarget;
86 | }}
87 | {...post}
88 | />
89 |
90 |
91 | ))}
92 |
50 | 沒有更多文章囉！
51 |
52 | )}
53 |
61 |
62 | );
63 |
64 | return [children, activePostItemRef];
65 | }
66 |
--------------------------------------------------------------------------------
/src/hooks/use-previous.js:
--------------------------------------------------------------------------------
1 | import { useRef, useEffect } from 'react';
2 |
3 | export default function usePrevious(value) {
4 | const ref = useRef(value);
5 |
6 | useEffect(() => {
7 | ref.current = value;
8 | }, [value]);
9 |
10 | return ref.current;
11 | }
12 |
--------------------------------------------------------------------------------
/src/pages/@/[persona].js:
--------------------------------------------------------------------------------
1 | import { css } from 'styled-components';
2 | import { useRouter } from 'next/router';
3 | import { useQuery } from 'react-query';
4 | import Head from '../../components/head';
5 | import PersonaPostsList from '../../components/persona-posts-list';
6 | import withLayout from '../../components/with-layout';
7 | import Layout from '../../components/layout';
8 | import Avatar from '../../components/avatar';
9 | import useModalParentLocation from '../../hooks/use-modal-parent-location';
10 |
11 | function PersonaInfo() {
12 | const router = useRouter();
13 | const modalParentLocation = useModalParentLocation(!!router.query.postID);
14 | const { persona } = modalParentLocation.query;
15 |
16 | const { data: personaInfo } = useQuery(`personas/${persona}`, {
17 | staleTime: Infinity,
18 | });
19 |
20 | if (!personaInfo) {
21 | return null;
22 | }
23 |
24 | const {
25 | gender,
26 | nickname,
27 | postAvatar,
28 | postCount,
29 | subscriptionCount,
30 | } = personaInfo;
31 |
32 | return (
33 |
43 |
44 |
53 |
59 |
68 | {nickname}
69 |
70 |
79 | @{persona}
80 |
81 |
89 | {postCount} 篇文章・
90 | {subscriptionCount} 位粉絲
91 |
92 |