Skip to content

Commit 119f234

Browse files
521xueweihan521xueweihan
committed
feat: update home
1 parent c051ccf commit 119f234

File tree

21 files changed

+443
-163
lines changed

21 files changed

+443
-163
lines changed

‎public/locales/en/home.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
"bottom_text_nologin": "End of the page! Sign in to read more",
66
"nav": {
77
"all": "All",
8+
"newest": "Newest",
9+
"monthly": "Monthly",
10+
"yearly": "Yearly",
811
"featured": "Featured",
912
"tag": "Tags",
1013
"submit": "Submit"

‎public/locales/zh/home.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
"bottom_text_login": "你不经意间触碰到了底线",
55
"bottom_text_nologin": "到底啦！登录可查看更多内容",
66
"nav": {
7+
"newest": "最新",
8+
"monthly": "月度",
9+
"yearly": "年度",
710
"all": "全部",
811
"featured": "精选",
912
"tag": "标签",

‎src/components/dialog/TagModal.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,8 +107,8 @@ export function TagModal({
107107
if (effectedTidList.length <= maxTotal) {
108108
const defaultTag =
109109
i18n_lang === 'en'
110-
? { name: 'All', tid: '', icon_name: 'find', name_en: 'All' }
111-
: { name: '综合', tid: '', icon_name: 'find', name_en: 'All' };
110+
? { name: 'All', tid: 'all', icon_name: 'find', name_en: 'All' }
111+
: { name: '综合', tid: 'all', icon_name: 'find', name_en: 'All' };
112112
const selectTags = [defaultTag];
113113
for (let i = 0; i < effectedTidList.length; i++) {
114114
const item = portalTagGroups

‎src/components/home/Item.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ const RepositoryItem = ({
193193
aria-label='Verified item'
194194
/>
195195
)}
196-
<div className='truncate'>{name}</div>
196+
<div className='truncate'>{author}</div>
197197
</div>
198198
<span className='px-1'>·</span>
199199
<span>

‎src/components/layout/ErrorPage.tsx

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,21 +39,13 @@ const ErrorPage = ({ t, httpCode }: Props) => {
3939
</NoPrefetchLink>
4040
<div className='mt-4 block text-xs text-gray-400'>
4141
<NoPrefetchLink href='mailto:[email protected]'>
42-
<a
43-
target='_blank'
44-
className='cursor-pointer hover:underline'
45-
rel='noreferrer'
46-
>
42+
<a target='_blank' className='cursor-pointer hover:underline'>
4743
<span>{t('footer.feedback')}</span>
4844
</a>
4945
</NoPrefetchLink>
5046
<span className='px-1'>·</span>
5147
<NoPrefetchLink href='https://github.com/HelloGitHub-Team/geese'>
52-
<a
53-
target='_blank'
54-
className='cursor-pointer hover:underline'
55-
rel='noreferrer'
56-
>
48+
<a target='_blank' className='cursor-pointer hover:underline'>
5749
<span>{t('footer.source')}</span>
5850
</a>
5951
</NoPrefetchLink>

‎src/components/links/CustomLink.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ export const CustomLink = ({ href, className, children, onClick }: Props) => {
2727
onClick={onClick}
2828
target={isMobile ? '_self' : '_blank'}
2929
className={clsxm('block', className)}
30-
rel='noopener noreferrer'
3130
>
3231
{children}
3332
</a>

‎src/components/links/TagItem.tsx

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎src/components/links/TagLink.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { NoPrefetchLink } from '@/components/links/CustomLink';
33
import { TagType } from '@/types/tag';
44

55
interface Props {
6-
tid: string;
6+
tid?: string;
77
sort_by: string;
88
items: TagType[];
99
}

‎src/components/links/rankLink.tsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { NoPrefetchLink } from '@/components/links/CustomLink';
2+
3+
import { constructURL } from '@/utils/util';
4+
5+
import { RankItem } from '@/types/home';
6+
7+
interface Props {
8+
year?: number;
9+
month?: number;
10+
tid?: string;
11+
sort_by: string;
12+
rank_by: string;
13+
items: RankItem[];
14+
}
15+
16+
export default function RankLink(props: Props) {
17+
const currentDate = new Date();
18+
const defaultYear = currentDate.getFullYear();
19+
const defaultMonth = currentDate.getMonth(); // 上个月，如果是1月则为0
20+
21+
// 设置默认值并处理边界条件
22+
const yearNum = props.year ?? defaultYear - 1;
23+
const monthlyYearNum =
24+
props.year ?? (defaultMonth === 0 ? defaultYear - 1 : defaultYear);
25+
const monthNum = props.month ?? (defaultMonth === 0 ? 12 : defaultMonth);
26+
27+
return (
28+
<div className='custom-scrollbar overflow-y-auto'>
29+
<ul className='flex text-xs font-semibold'>
30+
{props.items.map((item: RankItem) => {
31+
return (
32+
<li className='shrink-0 grow-0 basis-auto' key={item.key}>
33+
{item.month ? (
34+
<NoPrefetchLink
35+
href={constructURL({
36+
sort_by: props.sort_by,
37+
rank_by: props.rank_by,
38+
tid: props.tid,
39+
year: item.year,
40+
month: item.month,
41+
})}
42+
>
43+
{item.key == `${monthlyYearNum}.${monthNum}` ? (
44+
<a className='mt-1 mr-1 inline-flex h-6 items-center justify-center rounded-xl bg-gray-100 px-0 pl-2 pr-2 text-blue-500 dark:bg-gray-700 dark:focus:bg-gray-700'>
45+
{item.name}
46+
</a>
47+
) : (
48+
<a className='mt-1 mr-1 inline-flex h-6 items-center justify-center rounded-xl px-0 pl-2 pr-2 text-gray-500 hover:bg-gray-100 hover:text-blue-500 dark:text-gray-200 dark:hover:bg-gray-700'>
49+
{item.name}
50+
</a>
51+
)}
52+
</NoPrefetchLink>
53+
) : (
54+
<NoPrefetchLink
55+
href={constructURL({
56+
sort_by: props.sort_by,
57+
rank_by: props.rank_by,
58+
tid: props.tid,
59+
year: item.year,
60+
})}
61+
>
62+
{item.key == `${yearNum}` ? (
63+
<a className='mt-1 mr-1 inline-flex h-6 items-center justify-center rounded-xl bg-gray-100 px-0 pl-2 pr-2 text-blue-500 dark:bg-gray-700 dark:focus:bg-gray-700'>
64+
{item.name}
65+
</a>
66+
) : (
67+
<a className='mt-1 mr-1 inline-flex h-6 items-center justify-center rounded-xl px-0 pl-2 pr-2 text-gray-500 hover:bg-gray-100 hover:text-blue-500 dark:text-gray-200 dark:hover:bg-gray-700'>
68+
{item.name}
69+
</a>
70+
)}
71+
</NoPrefetchLink>
72+
)}
73+
</li>
74+
);
75+
})}
76+
</ul>
77+
</div>
78+
);
79+
}

‎src/components/navbar/IndexBar.tsx

Lines changed: 120 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,123 @@
11
import classNames from 'classnames';
22
import { NextPage } from 'next';
33

4-
import useTagHandling from '@/hooks/useTagHandling';
4+
import useFilterHandling from '@/hooks/useFilterHandling';
55

66
import { RepoModal } from '@/components/dialog/RepoModal';
77
import { NoPrefetchLink } from '@/components/links/CustomLink';
8+
import RankLink from '@/components/links/rankLink';
89
import TagLink from '@/components/links/TagLink';
910

11+
import { indexRankBy } from '@/utils/constants';
12+
1013
type Props = {
1114
t: (key: string) => string;
1215
i18n_lang: string;
13-
tid: string;
14-
sort_by: string;
16+
tid?: string;
17+
sortBy: string;
18+
rankBy: string;
19+
year?: number;
20+
month?: number;
1521
};
1622

17-
const IndexBar: NextPage<Props> = ({ t, i18n_lang, tid, sort_by }) => {
18-
const { labelStatus, tagItems, featuredURL, allURL, handleTagButton } =
19-
useTagHandling(tid, sort_by, i18n_lang);
23+
const IndexBar: NextPage<Props> = ({
24+
t,
25+
i18n_lang,
26+
tid,
27+
sortBy,
28+
rankBy,
29+
year,
30+
month,
31+
}) => {
32+
const defaultURL = '/?sort_by=featured';
33+
34+
const {
35+
tagLabelStatus,
36+
tagItems,
37+
featuredURL,
38+
allURL,
39+
handleTagButton,
40+
monthlyURL,
41+
yearlyURL,
42+
rankItems,
43+
} = useFilterHandling(tid, sortBy, rankBy, i18n_lang, year, month);
44+
45+
const getSortLinkClassName = (sortName: string, isMobile = false) => {
46+
const isActive = sortBy === sortName;
2047

21-
const linkClassName = (sortName: string) =>
48+
if (isMobile) {
49+
return classNames(
50+
'flex h-8 items-center rounded-lg pl-3 pr-3 text-sm font-bold',
51+
'hover:bg-gray-100 hover:text-blue-500 dark:hover:bg-gray-700',
52+
{
53+
'text-gray-500 dark:text-gray-200': !isActive,
54+
'bg-gray-100 dark:bg-gray-700 text-blue-500': isActive,
55+
'lg:hidden': sortName === 'label',
56+
}
57+
);
58+
} else {
59+
return isActive ? 'text-blue-500' : 'text-gray-500 dark:text-gray-300';
60+
}
61+
};
62+
63+
const rankLinkClassName = (rankName: string) =>
2264
classNames(
23-
'flex h-8 items-center whitespace-nowrap rounded-lg pl-3 pr-3 text-sm font-bold hover:bg-gray-100 hover:text-blue-500 dark:hover:bg-gray-700',
65+
'flex h-8 items-center rounded-lg pl-3 pr-3 hover:bg-gray-100 hover:text-blue-500 dark:hover:bg-gray-700',
2466
{
25-
'text-gray-500 dark:text-gray-200': sort_by !== sortName,
26-
'bg-gray-100 dark:bg-gray-700 text-blue-500': sort_by === sortName,
27-
'lg:hidden': sortName === 'label',
67+
'text-gray-500 dark:text-gray-200': rankBy !== rankName,
68+
'bg-gray-100 dark:bg-gray-700 text-blue-500': rankBy === rankName,
2869
}
2970
);
3071

3172
return (
32-
<div className='relative my-2 overflow-hidden bg-white dark:bg-gray-800 md:rounded-lg'>
33-
<div className='flex h-12 shrink grow items-center justify-start space-x-1 py-2 px-4 md:space-x-2'>
34-
<NoPrefetchLink href={featuredURL}>
35-
<a className={linkClassName('featured')}>{t('nav.featured')}</a>
36-
</NoPrefetchLink>
37-
<NoPrefetchLink href={allURL}>
38-
<a className={linkClassName('all')}>{t('nav.all')}</a>
39-
</NoPrefetchLink>
40-
<span onClick={handleTagButton} className={linkClassName('label')}>
41-
{t('nav.tag')}
42-
</span>
43-
<div className='shrink grow' />
73+
<div className='relative my-2 overflow-hidden bg-white dark:bg-gray-800'>
74+
<div className='flex h-12 items-center space-x-1 py-2 px-2 md:space-x-2 md:rounded-lg lg:px-4'>
75+
<div className='hidden space-x-2 text-sm font-bold md:flex'>
76+
{indexRankBy.map((rank) => (
77+
<NoPrefetchLink
78+
key={rank}
79+
href={
80+
rank === 'newest'
81+
? defaultURL
82+
: rank === 'monthly'
83+
? monthlyURL
84+
: yearlyURL
85+
}
86+
>
87+
<a className={rankLinkClassName(rank)}>{t(`nav.${rank}`)}</a>
88+
</NoPrefetchLink>
89+
))}
90+
</div>
91+
<div className='hidden shrink grow md:block' />
92+
<div className='hidden gap-2.5 text-[13px] font-medium md:flex'>
93+
<NoPrefetchLink href={featuredURL}>
94+
<a className={getSortLinkClassName('featured')}>
95+
{t('nav.featured')}
96+
</a>
97+
</NoPrefetchLink>
98+
<span className='border-r border-gray-100 dark:border-gray-700'></span>
99+
<NoPrefetchLink href={allURL}>
100+
<a className={getSortLinkClassName('all')}>{t('nav.all')}</a>
101+
</NoPrefetchLink>
102+
</div>
103+
{/* 移动端 */}
104+
<div className='flex md:hidden'>
105+
<NoPrefetchLink href={featuredURL}>
106+
<a className={getSortLinkClassName('featured', true)}>
107+
{t('nav.featured')}
108+
</a>
109+
</NoPrefetchLink>
110+
<NoPrefetchLink href={allURL}>
111+
<a className={getSortLinkClassName('all', true)}>{t('nav.all')}</a>
112+
</NoPrefetchLink>
113+
<span
114+
onClick={handleTagButton}
115+
className={getSortLinkClassName('label', true)}
116+
>
117+
{t('nav.tag')}
118+
</span>
119+
</div>
120+
<div className='shrink grow md:hidden' />
44121
<div className='md:hidden'>
45122
<RepoModal>
46123
<div className='flex h-8 items-center rounded-lg bg-blue-500 px-3 text-xs text-white active:bg-blue-600 dark:bg-gray-700 dark:text-gray-300 dark:active:bg-gray-900 sm:px-4'>
@@ -49,9 +126,26 @@ const IndexBar: NextPage<Props> = ({ t, i18n_lang, tid, sort_by }) => {
49126
</RepoModal>
50127
</div>
51128
</div>
52-
<div className={labelStatus ? 'flex px-4 pb-2.5 lg:hidden' : 'hidden'}>
53-
<TagLink items={tagItems} tid={tid} sort_by={sort_by} />
54-
</div>
129+
130+
{/* 移动端标签 */}
131+
{tagLabelStatus && (
132+
<div className='flex px-4 pb-2.5 lg:hidden'>
133+
<TagLink items={tagItems} tid={tid} sort_by={sortBy} />
134+
</div>
135+
)}
136+
{/* 排行榜 */}
137+
{rankItems.length > 0 && (
138+
<div className='hidden px-4 pb-2 md:flex'>
139+
<RankLink
140+
items={rankItems}
141+
tid={tid}
142+
sort_by={sortBy}
143+
rank_by={rankBy}
144+
year={year}
145+
month={month}
146+
/>
147+
</div>
148+
)}
55149
</div>
56150
);
57151
};

‎src/components/side/Ad.tsx

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -123,28 +123,20 @@ export default function Ad({ data, className, t, i18n_lang }: Props) {
123123
{data.is_reward ? (
124124
i18n_lang != 'zh' ? (
125125
<NoPrefetchLink href={PayURL}>
126-
<a target='_blank' rel='noreferrer'>
126+
<a target='_blank'>
127127
<RewardAdContent data={data} t={t} />
128128
</a>
129129
</NoPrefetchLink>
130130
) : (
131131
<NoPrefetchLink href={data.url}>
132-
<a
133-
target='_blank'
134-
onClick={() => onClickLink(data.aid)}
135-
rel='noreferrer'
136-
>
132+
<a target='_blank' onClick={() => onClickLink(data.aid)}>
137133
<RewardAdContent data={data} t={t} />:
138134
</a>
139135
</NoPrefetchLink>
140136
)
141137
) : (
142138
<NoPrefetchLink href={data.url}>
143-
<a
144-
target='_blank'
145-
onClick={() => onClickLink(data.aid)}
146-
rel='noreferrer'
147-
>
139+
<a target='_blank' onClick={() => onClickLink(data.aid)}>
148140
<ImageAdContent data={data} handleClose={handleClose} />
149141
</a>
150142
</NoPrefetchLink>

0 commit comments

Comments
 (0)