fix: home、footer

HelloGitHub-Team · Jun 12, 2024 · cd116c2 · cd116c2
1 parent 0807c24
commit cd116c2
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 87 deletions.
diff --git a/data/ats.md b/data/ats.md
@@ -1,4 +1,4 @@
-欢迎使用 HelloGitHub！HelloGitHub 是一群热爱开源的人（以下简称“我们”）提供的互联网技术服务。
+欢迎访问 HelloGitHub 社区！HelloGitHub 是一群热爱开源的人（以下简称“我们”）提供的互联网技术服务。
 
 ## 一、提示
 

diff --git a/src/components/home/Item.tsx b/src/components/home/Item.tsx
@@ -54,7 +54,7 @@ const Item: NextPage<ItemProps> = ({ item }) => {
               <div className='relative flex w-full flex-col truncate'>
                 <div className='flex flex-row pb-0.5'>
                   <h2 className='flex w-full items-center'>
-                    <div className='flex flex-grow truncate text-base leading-snug'>
+                    <div className='flex flex-grow items-center truncate text-base leading-snug'>
                       {is_hot && (
                         <AiFillFire
                           className='mr-0.5 inline-block align-[-2px]'
@@ -63,7 +63,7 @@ const Item: NextPage<ItemProps> = ({ item }) => {
                           aria-label='Hot item'
                         />
                       )}
-                      <p className='mr-1 truncate text-sm font-normal first-letter:uppercase md:text-[15px]'>
+                      <p className='mr-1 truncate text-sm font-normal md:text-[15px]'>
                         <span className='font-semibold dark:text-white'>
                           {name}
                         </span>

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -88,7 +88,9 @@ const Footer = () => {
       </FooterLink>
 
       <p className='mt-2 flex items-center space-x-1 lg:space-x-1.5'>
-        <span className='cursor-default'>©2024 HelloGitHub</span>
+        <span className='cursor-default'>
+          ©{new Date().getFullYear()} HelloGitHub
+        </span>
         <span>·</span>
         <FooterLink
           href='https://hellogithub.com/weixin_footer.png'

diff --git a/src/pages/article/[aid].tsx b/src/pages/article/[aid].tsx
@@ -15,9 +15,8 @@ const ArticlePage: NextPage<ArticleProps> = ({ article }) => {
   return (
     <>
       <Seo title={article.title} />
-      <Navbar middleText={article.title} endText='文章'></Navbar>
-
-      <div className='mt-2 bg-white py-0.5 px-5 dark:bg-gray-800 md:rounded-lg '>
+      <Navbar middleText={article.title} endText='文章' />
+      <div className='mt-2 bg-white py-0.5 px-5 dark:bg-gray-800 md:rounded-lg'>
         <article className='relative'>
           <MDRender className='mobile:prose-sm prose prose-blue max-w-none dark:prose-invert'>
             {article.content}
@@ -30,7 +29,7 @@ const ArticlePage: NextPage<ArticleProps> = ({ article }) => {
             alt='weixin_footer'
           />
         </div>
-        <ItemBottom endText='END'></ItemBottom>
+        <ItemBottom endText='END' />
         <ToTop />
       </div>
       <div className='h-4'></div>

diff --git a/src/pages/article/index.tsx b/src/pages/article/index.tsx
@@ -24,43 +24,33 @@ import { ArticleItem, ArticleItems } from '@/types/article';
 const ArticleIndex: NextPage = () => {
   const router = useRouter();
   const { sort_by = 'last' } = router.query;
-
   const { isLogin } = useLoginContext();
+
   const { data, error, setSize, isValidating, size } =
     useSWRInfinite<ArticleItems>(
       (index) => makeUrl(`/article/`, { sort_by, page: index + 1 }),
       fetcher,
       { revalidateFirstPage: false }
     );
 
-  const articles = data
-    ? data.reduce((pre: ArticleItem[], curr) => {
-        if (curr.data.length > 0) {
-          pre.push(...curr.data);
-        }
-        return pre;
-      }, [])
-    : [];
+  const articles = data ? data.flatMap((page) => page.data) : [];
+
   const hasMore = data ? data[data.length - 1].has_more : false;
-  const pageIndex = data ? size : 0;
 
   const [sentryRef] = useInfiniteScroll({
     loading: isValidating,
     hasNextPage: hasMore,
     disabled: !!error,
-    onLoadMore: () => {
-      setSize(pageIndex + 1);
-    },
+    onLoadMore: () => setSize((prevSize) => prevSize + 1),
     rootMargin: '0px 0px 100px 0px',
   });
 
   const handleItemBottom = () => {
     if (!isValidating && !hasMore) {
-      if (isLogin) {
-        return <ItemBottom endText='你不经意间触碰到了底线'></ItemBottom>;
-      } else {
-        return <ItemBottom endText='到底啦！登录可查看更多内容'></ItemBottom>;
-      }
+      const endText = isLogin
+        ? '你不经意间触碰到了底线'
+        : '到底啦！登录可查看更多内容';
+      return <ItemBottom endText={endText} />;
     }
   };
 
@@ -75,62 +65,45 @@ const ArticleIndex: NextPage = () => {
         <div className='divide-y divide-slate-100 bg-white dark:divide-slate-700 dark:bg-slate-800 md:overflow-y-hidden md:rounded-lg'>
           {articles.map((item: ArticleItem) => (
             <article key={item.aid}>
-              <Link href={`/article/${item.aid}`} className='relative'>
-                <a>
-                  <div className='text-color-primary relative cursor-pointer bg-white py-2 pl-3 pr-3 hover:bg-gray-50 hover:text-blue-500  dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 md:py-3 md:pl-5'>
-                    <div className='flex-cloume relative flex items-center'>
-                      <div className='w-9/12 max-w-full'>
-                        <div className='flex'>
+              <Link href={`/article/${item.aid}`}>
+                <a className='relative'>
+                  <div className='text-color-primary relative cursor-pointer bg-white py-2 pl-3 pr-3 hover:bg-gray-50 hover:text-blue-500 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 md:py-3 md:pl-5'>
+                    <div className='relative flex items-center'>
+                      <div className='w-9/12'>
+                        <div className='flex items-center'>
                           {item.is_hot && (
-                            <span className='text-center'>
-                              <AiFillFire
-                                className='mr-1 inline-block align-[-2px]'
-                                size={16}
-                                style={{ color: 'rgb(226,17,12)' }}
-                              />
-                            </span>
+                            <AiFillFire
+                              className='mr-1 inline-block min-w-min align-[-2px]'
+                              size={16}
+                              style={{ color: 'rgb(226,17,12)' }}
+                            />
                           )}
                           <span className='truncate pr-2 text-sm leading-snug md:pr-0 md:text-base'>
                             {item.title}
                           </span>
                         </div>
-
                         <div className='pt-1 pb-1.5 pr-1 text-xs leading-loose text-gray-400 line-clamp-2 md:pr-0'>
                           {item.desc}
                         </div>
-                        <div className='flex items-center'>
-                          <div className='font-base flex shrink grow items-center overflow-x-hidden text-xs text-gray-800 dark:text-gray-200'>
-                            <div className='hidden md:flex '>
-                              <div className='truncate whitespace-nowrap md:max-w-xs'>
-                                作者 {item.author}
-                              </div>
-                              <span className='px-1'>·</span>
-                              <time>发布于 {fromNow(item.publish_at)}</time>
-                              <span className='px-1'>·</span>
-                              阅读 {numFormat(item.clicks_count, 1, 10000)}
-                            </div>
-                            <div className='flex md:hidden'>
-                              <div className='w-fit truncate whitespace-nowrap'>
-                                {item.author}
-                              </div>
-                              <span className='px-1'>·</span>
-                              <time>{fromNow(item.publish_at)}</time>
-                              <span className='px-1'>·</span>
-                              {numFormat(item.clicks_count, 1, 10000)} 阅读
-                            </div>
+                        <div className='flex items-center text-xs text-gray-800 dark:text-gray-200'>
+                          <div className='truncate whitespace-nowrap md:max-w-xs'>
+                            作者 {item.author}
                           </div>
+                          <span className='px-1'>·</span>
+                          <time>{fromNow(item.publish_at)}</time>
+                          <span className='px-1'>·</span>
+                          阅读 {numFormat(item.clicks_count, 1, 10000)}
                         </div>
                       </div>
-                      <div className='relative flex w-3/12 justify-center'>
-                        {item.head_image ? (
+                      {item.head_image && (
+                        <div className='relative flex w-3/12 justify-center'>
                           <img
                             className='h-20 rounded-md md:w-32'
                             src={`${item.head_image}!headimage`}
+                            alt='article head'
                           />
-                        ) : (
-                          <></>
-                        )}
-                      </div>
+                        </div>
+                      )}
                     </div>
                   </div>
                 </a>
@@ -144,7 +117,7 @@ const ArticleIndex: NextPage = () => {
             ref={sentryRef}
           >
             {isValidating && size <= 1 && <ArticleSkeleton />}
-            {(isValidating || hasMore) && size > 1 && <Loading />}
+            {isValidating && size > 1 && <Loading />}
           </div>
         )}
         {handleItemBottom()}

diff --git a/src/pages/help/ats.tsx b/src/pages/help/ats.tsx
@@ -1,35 +1,35 @@
-import { NextPage } from 'next';
+import { GetStaticProps, NextPage } from 'next';
 
 import ItemBottom from '@/components/home/ItemBottom';
 import Seo from '@/components/Seo';
 import ToTop from '@/components/toTop/ToTop';
 
-import content from '../../../data/ats.md';
-
 import { HelpPageProps } from '@/types/help';
 
 const ATSPage: NextPage<HelpPageProps> = ({ content }) => {
   return (
     <>
       <Seo title='用户服务协议' />
-
-      <div className='mt-2 bg-white p-5 dark:bg-gray-800 md:rounded-lg '>
-        <div className='mb-10 flex flex-col items-center px-2 text-4xl font-bold '>
+      <div className='mt-2 bg-white p-5 dark:bg-gray-800 md:rounded-lg'>
+        <div className='mb-10 flex flex-col items-center px-2 text-4xl font-bold'>
           用户服务协议
         </div>
         <article className='whitespace-pre-line'>{content}</article>
-        <ItemBottom endText='END'></ItemBottom>
+        <ItemBottom endText='END' />
       </div>
       <ToTop />
-      <div className='h-4'></div>
+      <div className='h-4' />
     </>
   );
 };
 
 export default ATSPage;
 
-export async function getStaticProps() {
+export const getStaticProps: GetStaticProps = async () => {
+  const content = await import('../../../data/ats.md').then(
+    (mod) => mod.default
+  );
   return {
-    props: { content: content },
+    props: { content },
   };
-}
+};
diff --git a/src/pages/help/level.tsx b/src/pages/help/level.tsx
@@ -1,13 +1,11 @@
-import { NextPage } from 'next';
+import { GetStaticProps, NextPage } from 'next';
 
 import ItemBottom from '@/components/home/ItemBottom';
 import { MDRender } from '@/components/mdRender/MDRender';
 import Navbar from '@/components/navbar/Navbar';
 import Seo from '@/components/Seo';
 import ToTop from '@/components/toTop/ToTop';
 
-import content from '../../../data/level.md';
-
 import { HelpPageProps } from '@/types/help';
 
 const RulePage: NextPage<HelpPageProps> = ({ content }) => {
@@ -16,24 +14,27 @@ const RulePage: NextPage<HelpPageProps> = ({ content }) => {
       <Seo title='社区等级规则' />
       <Navbar middleText='社区等级' endText='介绍' />
 
-      <div className='mt-2 bg-white p-5 dark:bg-gray-800 md:rounded-lg '>
+      <div className='mt-2 bg-white p-5 dark:bg-gray-800 md:rounded-lg'>
         <article>
           <MDRender className='prose max-w-none dark:prose-invert'>
             {content}
           </MDRender>
         </article>
-        <ItemBottom endText='END'></ItemBottom>
+        <ItemBottom endText='END' />
       </div>
       <ToTop />
-      <div className='h-4'></div>
+      <div className='h-4' />
     </>
   );
 };
 
 export default RulePage;
 
-export async function getStaticProps() {
+export const getStaticProps: GetStaticProps = async () => {
+  const content = await import('../../../data/level.md').then(
+    (mod) => mod.default
+  );
   return {
-    props: { content: content },
+    props: { content },
   };
-}
+};