fix: update Link

HelloGitHub-Team · Aug 9, 2024 · 42c7512 · 42c7512
1 parent e3139ae
commit 42c7512
Show file tree

Hide file tree

Showing 27 changed files with 115 additions and 92 deletions.
diff --git a/src/components/dropdown/AvatarWithDropdown.tsx b/src/components/dropdown/AvatarWithDropdown.tsx
@@ -4,7 +4,7 @@ import { useLoginContext } from '@/hooks/useLoginContext';
 
 import LanguageSwitcher from '@/components/buttons/LanguageSwitcher';
 import ThemeSwitcher from '@/components/buttons/ThemeSwitcher';
-import CustomLink from '@/components/links/CustomLink';
+import { CustomLink } from '@/components/links/CustomLink';
 
 import { DEFAULT_AVATAR } from '@/utils/constants';
 

diff --git a/src/components/home/Item.tsx b/src/components/home/Item.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { AiFillFire, AiOutlineEye } from 'react-icons/ai';
 import { GoStar, GoVerified } from 'react-icons/go';
 
-import CustomLink from '@/components/links/CustomLink';
+import { CustomLink } from '@/components/links/CustomLink';
 
 import { fromNow } from '@/utils/day';
 import { numFormat } from '@/utils/util';

diff --git a/src/components/layout/ErrorPage.tsx b/src/components/layout/ErrorPage.tsx
@@ -1,8 +1,8 @@
-import Link from 'next/link';
 import { IoIosArrowForward } from 'react-icons/io';
 
 import LanguageSwitcher from '@/components/buttons/LanguageSwitcher';
 import ThemeSwitcher from '@/components/buttons/ThemeSwitcher';
+import { NoPrefetchLink } from '@/components/links/CustomLink';
 
 type Props = {
   httpCode: number;
@@ -24,7 +24,7 @@ const ErrorPage = ({ t, httpCode }: Props) => {
               width={500}
             />
           </div>
-          <Link href='/'>
+          <NoPrefetchLink href='/'>
             <a>
               <div className='group relative inline-flex cursor-pointer items-center overflow-hidden rounded border border-current px-7 py-2 text-blue-600 focus:outline-none focus:ring active:text-blue-500 dark:text-gray-500 dark:active:text-gray-500'>
                 <span className='absolute right-0 translate-x-full transition-transform group-hover:-translate-x-4'>
@@ -36,27 +36,27 @@ const ErrorPage = ({ t, httpCode }: Props) => {
                 </span>
               </div>
             </a>
-          </Link>
+          </NoPrefetchLink>
           <div className='mt-4 block text-xs text-gray-400'>
-            <Link href='mailto:[email protected]'>
+            <NoPrefetchLink href='mailto:[email protected]'>
               <a
                 target='_blank'
                 className='cursor-pointer hover:underline'
                 rel='noreferrer'
               >
                 <span>{t('footer.feedback')}</span>
               </a>
-            </Link>
+            </NoPrefetchLink>
             <span className='px-1'>·</span>
-            <Link href='https://github.com/HelloGitHub-Team/geese'>
+            <NoPrefetchLink href='https://github.com/HelloGitHub-Team/geese'>
               <a
                 target='_blank'
                 className='cursor-pointer hover:underline'
                 rel='noreferrer'
               >
                 <span>{t('footer.source')}</span>
               </a>
-            </Link>
+            </NoPrefetchLink>
 
             <p className='mt-2'>
               <span className='cursor-default'>

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -2,7 +2,7 @@ import { AiFillWechat, AiFillWeiboCircle } from 'react-icons/ai';
 import { IoLogoRss } from 'react-icons/io';
 
 import { FeedbackModal } from '@/components/dialog/Feedback';
-import CustomLink from '@/components/links/CustomLink';
+import { CustomLink } from '@/components/links/CustomLink';
 
 import FooterLink from './FooterLink';
 
@@ -30,7 +30,11 @@ const Footer = ({ t }: SideProps) => {
       </div>
 
       <p className='mt-2'>
-        <FooterLink href='/help/ats'>{t('footer.agreement')}</FooterLink>
+        <CustomLink className='inline' href='/help/ats'>
+          <span className='cursor-pointer hover:text-blue-500'>
+            {t('footer.agreement')}
+          </span>
+        </CustomLink>
         <span className='px-1 lg:px-1.5'>·</span>
         <FooterLink href='https://github.com/HelloGitHub-Team/geese'>
           {t('footer.source')}

diff --git a/src/components/links/CustomLink.tsx b/src/components/links/CustomLink.tsx
@@ -9,7 +9,7 @@ type Props = {
   onClick?: any;
 } & React.ComponentPropsWithoutRef<'div'>;
 
-const CustomLink = ({ href, className, children, onClick }: Props) => {
+export const CustomLink = ({ href, className, children, onClick }: Props) => {
   const [isMobile, setIsMobile] = useState<boolean>(false);
   useEffect(() => {
     if (
@@ -35,4 +35,10 @@ const CustomLink = ({ href, className, children, onClick }: Props) => {
   );
 };
 
-export default CustomLink;
+export const NoPrefetchLink = ({ href, children }: Props) => {
+  return (
+    <Link prefetch={false} href={href}>
+      {children}
+    </Link>
+  );
+};
diff --git a/src/components/links/TagItem.tsx b/src/components/links/TagItem.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { NoPrefetchLink } from '@/components/links/CustomLink';
 
 interface Props {
   name: string;
@@ -7,11 +7,11 @@ interface Props {
 
 const TagItem = ({ name, tid }: Props) => {
   return (
-    <Link href={`/?sort_by=hot&tid=${tid}`}>
+    <NoPrefetchLink href={`/?sort_by=hot&tid=${tid}`}>
       <a className='inline-flex h-8 items-center justify-center rounded-lg pl-3 pr-3 text-sm font-bold text-blue-400 hover:bg-blue-400 hover:text-white'>
         {name}
       </a>
-    </Link>
+    </NoPrefetchLink>
   );
 };
 

diff --git a/src/components/links/TagLink.tsx b/src/components/links/TagLink.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { NoPrefetchLink } from '@/components/links/CustomLink';
 
 import { TagType } from '@/types/tag';
 
@@ -15,7 +15,9 @@ export default function TagLink(props: Props) {
         {props.items.map((item: TagType) => {
           return (
             <li className='shrink-0 grow-0 basis-auto' key={item.tid}>
-              <Link href={`/?sort_by=${props.sort_by}&tid=${item.tid}`}>
+              <NoPrefetchLink
+                href={`/?sort_by=${props.sort_by}&tid=${item.tid}`}
+              >
                 {props.tid == item.tid ? (
                   <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'>
                     {item.name}
@@ -25,7 +27,7 @@ export default function TagLink(props: Props) {
                     {item.name}
                   </a>
                 )}
-              </Link>
+              </NoPrefetchLink>
             </li>
           );
         })}

diff --git a/src/components/navbar/ArticleBar.tsx b/src/components/navbar/ArticleBar.tsx
@@ -1,8 +1,9 @@
 import classNames from 'classnames';
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { AiOutlineArrowLeft } from 'react-icons/ai';
 
+import { NoPrefetchLink } from '@/components/links/CustomLink';
+
 type Props = {
   t: (key: string) => string;
 };
@@ -41,12 +42,12 @@ const ArticleNavbar = ({ t }: Props) => {
           {t('nav.title')}
         </div>
         <div className='flex justify-end text-sm text-gray-500 dark:text-gray-400'>
-          <Link href='/article?sort_by=last'>
+          <NoPrefetchLink href='/article?sort_by=last'>
             <a className={linkClassName('last')}>{t('nav.last')}</a>
-          </Link>
-          <Link href='/article?sort_by=hot'>
+          </NoPrefetchLink>
+          <NoPrefetchLink href='/article?sort_by=hot'>
             <a className={linkClassName('hot')}>{t('nav.hot')}</a>
-          </Link>
+          </NoPrefetchLink>
         </div>
       </div>
     </div>

diff --git a/src/components/navbar/IndexBar.tsx b/src/components/navbar/IndexBar.tsx
@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import { NextPage } from 'next';
-import Link from 'next/link';
 
 import useTagHandling from '@/hooks/useTagHandling';
 
 import { RepoModal } from '@/components/dialog/RepoModal';
+import { NoPrefetchLink } from '@/components/links/CustomLink';
 import TagLink from '@/components/links/TagLink';
 
 type Props = {
@@ -31,12 +31,12 @@ const IndexBar: NextPage<Props> = ({ t, i18n_lang, tid, sort_by }) => {
   return (
     <div className='relative my-2 overflow-hidden bg-white dark:bg-gray-800 md:rounded-lg'>
       <div className='flex h-12 shrink grow items-center justify-start space-x-1 py-2 px-4 md:space-x-2'>
-        <Link href={featuredURL}>
+        <NoPrefetchLink href={featuredURL}>
           <a className={linkClassName('featured')}>{t('nav.featured')}</a>
-        </Link>
-        <Link href={allURL}>
+        </NoPrefetchLink>
+        <NoPrefetchLink href={allURL}>
           <a className={linkClassName('all')}>{t('nav.all')}</a>
-        </Link>
+        </NoPrefetchLink>
         <span onClick={handleTagButton} className={linkClassName('label')}>
           {t('nav.tag')}
         </span>

diff --git a/src/components/navbar/RepoNavbar.tsx b/src/components/navbar/RepoNavbar.tsx
@@ -1,7 +1,8 @@
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { AiOutlineArrowLeft } from 'react-icons/ai';
 
+import { NoPrefetchLink } from '@/components/links/CustomLink';
+
 interface Props {
   avatar: string;
   uid: string;
@@ -31,7 +32,7 @@ const RepoDetailNavbar = ({ avatar, uid, t }: Props) => {
         <div className='text-center font-bold dark:text-gray-300'>
           {t('nav.title')}
         </div>
-        <Link href={`/user/${uid}`}>
+        <NoPrefetchLink href={`/user/${uid}`}>
           <div className='flex cursor-pointer items-center justify-end text-xs text-gray-500 hover:text-blue-400 dark:text-gray-400'>
             {t('nav.desc')}
             <a className='m-1 flex items-center'>
@@ -45,7 +46,7 @@ const RepoDetailNavbar = ({ avatar, uid, t }: Props) => {
             </a>
             {t('nav.desc2')}
           </div>
-        </Link>
+        </NoPrefetchLink>
       </div>
     </div>
   );

diff --git a/src/components/periodical/item.tsx b/src/components/periodical/item.tsx
@@ -1,16 +1,16 @@
 import { NextPage } from 'next';
-import Link from 'next/link';
 import { useTranslation } from 'next-i18next';
 import { GoClock, GoRepoForked } from 'react-icons/go';
 import { IoIosStarOutline } from 'react-icons/io';
 
+import { CustomLink, NoPrefetchLink } from '@/components/links/CustomLink';
+
 import { redirectRecord } from '@/services/home';
 import { fromNow } from '@/utils/day';
 import { numFormat } from '@/utils/util';
 
 import Button from '../buttons/Button';
 import ImageWithPreview from '../ImageWithPreview';
-import CustomLink from '../links/CustomLink';
 import { MDRender } from '../mdRender/MDRender';
 
 import { PeriodicalItem, PeriodicalItemProps } from '@/types/periodical';
@@ -54,7 +54,7 @@ const PeriodItem: NextPage<PeriodicalItemProps> = ({ item, index }) => {
           </div>
         </div>
         <div className='flex h-14 flex-1 flex-row items-center justify-end pr-1'>
-          <Link prefetch={false} href={`/repository/${item.rid}`}>
+          <NoPrefetchLink href={`/repository/${item.rid}`}>
             <Button
               variant='white-outline'
               className='font-normal text-gray-700'
@@ -65,7 +65,7 @@ const PeriodItem: NextPage<PeriodicalItemProps> = ({ item, index }) => {
                 </div>
               </div>
             </Button>
-          </Link>
+          </NoPrefetchLink>
         </div>
       </div>
 

diff --git a/src/components/respository/CommentItem.tsx b/src/components/respository/CommentItem.tsx
@@ -1,10 +1,10 @@
-import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { AiFillFire } from 'react-icons/ai';
 import { GoCommentDiscussion, GoThumbsup } from 'react-icons/go';
 
 import { useLoginContext } from '@/hooks/useLoginContext';
 
+import { NoPrefetchLink } from '@/components/links/CustomLink';
 import Message from '@/components/message';
 import Rating from '@/components/respository/Rating';
 
@@ -115,15 +115,15 @@ const CommentItem = (props: CommentItemProps) => {
     <div className={`flex ${className} truncate`}>
       <div className='mr-4 hidden md:block'>
         <div className='relative h-10 w-10'>
-          <Link href={`/user/${user.uid}`}>
+          <NoPrefetchLink href={`/user/${user.uid}`}>
             <a>
               <img
                 className='cursor-pointer rounded-full'
                 src={user?.avatar || DEFAULT_AVATAR}
                 alt='comment_avatar'
               />
             </a>
-          </Link>
+          </NoPrefetchLink>
         </div>
       </div>
       <div className='relative max-w-full flex-1'>
@@ -137,13 +137,13 @@ const CommentItem = (props: CommentItemProps) => {
                   alt='comment_avatar'
                 />
               </div>
-              <Link href={`/user/${user.uid}`}>
+              <NoPrefetchLink href={`/user/${user.uid}`}>
                 <a>
                   <div className='w-fit max-w-[80px] truncate text-xs font-bold md:max-w-[120px] md:text-sm'>
                     {user?.nickname}
                   </div>
                 </a>
-              </Link>
+              </NoPrefetchLink>
               {isMaker && (
                 <span className='ml-1 rounded-md bg-gray-200 px-1.5 text-xs font-semibold text-blue-400'>
                   OP
@@ -166,13 +166,13 @@ const CommentItem = (props: CommentItemProps) => {
                   <span className='text-xs md:text-sm'>
                     {t('comment.reply')}
                   </span>
-                  <Link href={`/user/${props.reply_user?.uid}`}>
+                  <NoPrefetchLink href={`/user/${props.reply_user?.uid}`}>
                     <a>
                       <div className='w-fit max-w-[180px] truncate text-xs text-gray-500 md:text-sm'>
                         {props.reply_user?.nickname}
                       </div>
                     </a>
-                  </Link>
+                  </NoPrefetchLink>
                   <span className='text-xs md:text-sm'>：</span>
                 </>
               )

diff --git a/src/components/respository/Info.tsx b/src/components/respository/Info.tsx
@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import copy from 'copy-to-clipboard';
 import ReactECharts from 'echarts-for-react';
-import Link from 'next/link';
 import { useEffect, useRef, useState } from 'react';
 import {
   AiFillCaretUp,
@@ -35,7 +34,7 @@ import Button from '../buttons/Button';
 import AddCollection from '../collection/AddCollection';
 import BasicDialog from '../dialog/BasicDialog';
 import Dropdown, { option } from '../dropdown/Dropdown';
-import CustomLink from '../links/CustomLink';
+import { CustomLink, NoPrefetchLink } from '../links/CustomLink';
 import Message from '../message';
 
 import { Repository, RepositoryProps } from '@/types/repository';
@@ -457,23 +456,23 @@ const Info = ({ repo, t, i18n_lang }: RepositoryProps) => {
                 <div className='flex-row items-center md:flex'>
                   <span>{t('info.opensource')}</span>
                   <span className='mx-0.5 md:mx-1.5'>•</span>
-                  <Link href={`/license/${repo.license_lid}`}>
+                  <NoPrefetchLink href={`/license/${repo.license_lid}`}>
                     <span className='cursor-pointer text-blue-500'>
                       {repo.license}
                     </span>
-                  </Link>
+                  </NoPrefetchLink>
                 </div>
               )}
             </div>
           </div>
           <div className='flex flex-row gap-x-4 text-sm'>
             {!repo.is_claimed && (
-              <Link href={`/repository/${repo.rid}/embed`}>
+              <NoPrefetchLink href={`/repository/${repo.rid}/embed`}>
                 <div className='flex cursor-pointer items-center justify-center text-blue-500 hover:text-current active:text-gray-400 md:hover:text-blue-600'>
                   <BsPersonCheck className='mr-2' size={16} />
                   {t('info.unclaim')}
                 </div>
-              </Link>
+              </NoPrefetchLink>
             )}
 
             <div