perf: sponsor style

Author: 521xueweihan

public/locales/en/common.json

@@ -105,6 +105,8 @@
     "limit": "Word limit: 1-1000 characters",
     "contact_placeholder": "Contact information: WeChat/Phone number/Email",
     "submit": "Submit",
+    "contact_info": "You can also contact me directly: ",
+    "contact_info_desc": "[email protected]",
     "options": {
       "feedback": {
         "name": "Suggestions",

public/locales/en/periodical.json

@@ -1,8 +1,8 @@
 {
   "title": "HelloGitHub Monthly",
-  "description": "Discover engaging and beginner-friendly open-source projects on GitHub, with the latest updates published on the 28th of each month. Spanning development tools, open-source books, tutorials, and enterprise-level projects, we aim to make you fall in love with open source.",
+  "description": "Sharing interesting, beginner-friendly open-source projects from GitHub. Updated monthly on the 28th, covering developer tools, open-source books, tutorials, and enterprise-grade projects to help you fall in love with open source.",
   "nav": "HelloGitHub Monthly",
-  "p_text": "<strong>“HelloGitHub Monthly”</strong> shares interesting and beginner-friendly open source projects on GitHub. Published on the 28th of each month, it includes development tools, open source books, tutorials, and enterprise-level projects, helping you enjoying programming and fall in love with open source!",
+  "p_text": "<strong>'HelloGitHub Monthly'</strong> has been carefully curating interesting, beginner-friendly open-source projects from GitHub every month since 2016, updated on the 28th. It covers developer tools, open-source books, tutorials, enterprise-grade projects, and more, enabling you to quickly discover the charm and spark your interest in open source.",
   "read_button": "Read",
   "submit_button": "Submit",
   "detail_button": "Detail",
@@ -32,7 +32,7 @@
     "title": "HelloGitHub Monthly Vol.{{num}}",
     "nav": "Volume",
     "h2_text": "HelloGitHub Vol.{{num}}",
-    "p_text": "<p>HelloGitHub shares interesting and beginner-friendly open source projects on GitHub, updated on the <strong>28th of each month</strong>. Here you will find fun and beginner-level open source projects, open source books, practical projects, and enterprise-level projects, allowing you to quickly appreciate the charm of open source and develop an interest in it.</p>",
+    "p_text": "<p>HelloGitHub shares interesting, beginner-friendly open-source projects from GitHub, updated <strong>every month on the 28th</strong>. Discover fun beginner projects, open-source books, practical tutorials, and enterprise-grade projects, helping you quickly experience and become interested in the charm of open source.</p>",
     "catalog": "Catalog",
     "catalog2": "Catalog"
   }

public/locales/en/profile.json

@@ -88,6 +88,7 @@
     "featured": "Featured",
     "failed": "Failed",
     "review": "Under Review",
-    "feedback": "Feedback"
+    "feedback": "Feedback",
+    "appeal": "Appeal"
   }
 }

public/locales/zh/common.json

@@ -105,6 +105,8 @@
     "limit": "字数限制 1-1000 字符",
     "contact_placeholder": "联系方式：微信/手机号/邮箱",
     "submit": "提交",
+    "contact_info": "您也可以直接联系我：",
+    "contact_info_desc": "xueweihan（微信）",
     "options": {
       "feedback": { "name": "建议", "title": "建议改善" },
       "bug": { "title": "问题反馈" },

public/locales/zh/periodical.json

@@ -1,8 +1,8 @@
 {
   "title": "HelloGitHub 月刊",
-  "description": "分享 GitHub 上有趣的入门级开源项目，每月 28 日发布最新内容。涵盖开发工具、开源书籍、教程及企业级的开源项目，让你爱上开源。",
+  "description": "分享 GitHub 上有趣的入门级开源项目，每月 28 日发布最新内容，涵盖开发工具、开源书籍、教程及企业级的开源项目，让你爱上开源。",
   "nav": "HelloGitHub 月刊",
-  "p_text": "<strong>「HelloGitHub 月刊」</strong>分享 GitHub 上有趣、入门级的开源项目，每月 28 号发布最新一期。内容包括开发利器、开源书籍、教程、企业级项目等，让你发现编程的乐趣、爱上开源！",
+  "p_text": "<strong>「HelloGitHub 月刊」</strong>自 2016 年起，每月 28 号精选发布 GitHub 上有趣、入门级的开源项目。内容包括开发利器、开源书籍、教程、企业级项目等，帮助你快速发现开源的魅力，对开源产生兴趣。",
   "read_button": "查看",
   "submit_button": "推荐",
   "detail_button": "详情",
@@ -32,7 +32,7 @@
     "title": "《HelloGitHub 月刊》第 {{num}} 期",
     "nav": "期数",
     "h2_text": "《HelloGitHub》第 {{num}} 期",
-    "p_text": "<p>HelloGitHub 分享 GitHub 上有趣、入门级的开源项目，<strong>每月 28 号</strong>更新一期。这里有好玩和入门级的开源项目、开源书籍、实战项目、企业级项目，让你用极短的时间感受到开源的魅力，对开源产生兴趣。</p>",
+    "p_text": "<p>HelloGitHub 分享 GitHub 上有趣、入门级的开源项目，<strong>每月 28 号</strong>更新一期。这里有好玩和入门级的开源项目、开源书籍、实战项目、企业级项目，帮助你快速发现开源的魅力，对开源产生兴趣。</p>",
     "catalog": "本期目录",
     "catalog2": "目录"
   }

public/locales/zh/profile.json

@@ -88,6 +88,7 @@
     "featured": "已推荐",
     "failed": "未通过",
     "review": "审核中",
-    "feedback": "反馈"
+    "feedback": "反馈",
+    "appeal": "申诉"
   }
 }

src/components/dialog/Feedback.tsx

@@ -1,6 +1,9 @@
 import { useTranslation } from 'next-i18next';
 import { useCallback, useEffect, useState } from 'react';
-import { IoIosArrowRoundForward } from 'react-icons/io';
+import {
+  IoIosArrowRoundForward,
+  IoMdInformationCircleOutline,
+} from 'react-icons/io';
 
 import { useLoginContext } from '@/hooks/useLoginContext';
 
@@ -129,6 +132,22 @@ export function CreateFeedback({
         ))}
       </div>
 
+      <div className='rounded-md bg-blue-50 p-3 dark:bg-blue-900/30'>
+        <div className='flex'>
+          <div className='flex-shrink-0'>
+            <IoMdInformationCircleOutline className='h-5 w-5 text-blue-400' />
+          </div>
+          <div className='ml-2 flex-1 text-sm'>
+            <p className='text-blue-700 dark:text-blue-300'>
+              {t('feedback.contact_info')}
+              <span className='font-medium'>
+                {t('feedback.contact_info_desc')}
+              </span>
+            </p>
+          </div>
+        </div>
+      </div>
+
       <div>
         <textarea
           className='focus:ring-shadow-1 w-full rounded border-gray-200 p-3 text-sm focus:border-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:placeholder:text-gray-400'

src/components/layout/Header.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { AiOutlineGithub } from 'react-icons/ai';
 
 import { useLoginContext } from '@/hooks/useLoginContext';
+import { useSponsor } from '@/hooks/useSponsor';
 
 import HeaderBtn from '@/components/buttons/HeaderBtn';
 import LanguageSwitcher from '@/components/buttons/LanguageSwitcher';
@@ -13,14 +14,10 @@ import ThemeSwitcher from '@/components/buttons/ThemeSwitcher';
 import { RepoModal } from '@/components/dialog/RepoModal';
 import AvatarWithDropdown from '@/components/dropdown/AvatarWithDropdown';
 
-import { getHeaderAd } from '@/services/home';
-
 import TopBanner from './TopBanner';
 import { LoginButton } from '../buttons/LoginButton';
 import SearchInput from '../search/SearchInput';
 
-import { AdvertItem } from '@/types/home';
-
 interface Props {
   hiddenAd: () => void;
   showAd: () => void;
@@ -31,34 +28,26 @@ const Header = ({ hiddenAd, showAd }: Props) => {
   const { isLogin } = useLoginContext();
   const [curPath, setCurPath] = useState('');
   const { t, i18n } = useTranslation('common');
-  const [adData, setAdData] = useState<AdvertItem | null>(null);
   const [_, setHasHeaderAd] = useState(false);
+  const { topAd } = useSponsor();
 
   const handleCloseAd = () => {
     hiddenAd();
     setHasHeaderAd(false);
   };
 
-  const initHeaderAd = async () => {
-    const res = await getHeaderAd();
-    if (res.success) {
-      if (res.data.length > 0) {
-        if (localStorage.adClosed === res.data[0].aid) {
-          setHasHeaderAd(false);
-        } else {
-          showAd();
-          setHasHeaderAd(true);
-          setAdData(res.data[0]);
-        }
-      } else {
+  useEffect(() => {
+    if (topAd) {
+      if (localStorage.adClosed === topAd.aid) {
         setHasHeaderAd(false);
+      } else {
+        showAd();
+        setHasHeaderAd(true);
       }
+    } else {
+      setHasHeaderAd(false);
     }
-  };
-
-  useEffect(() => {
-    initHeaderAd();
-  }, []);
+  }, [topAd, showAd]);
 
   useEffect(() => {
     setCurPath(router.pathname);
@@ -79,10 +68,10 @@ const Header = ({ hiddenAd, showAd }: Props) => {
 
   return (
     <div className='fixed z-10 w-full bg-white shadow-sm backdrop-blur dark:border dark:border-gray-50/[0.06] dark:bg-transparent'>
-      {adData && (
+      {topAd && (
         <TopBanner
           i18n_lang={i18n.language}
-          data={adData}
+          data={topAd}
           onClose={handleCloseAd}
         />
       )}

src/components/respository/Info.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import copy from 'copy-to-clipboard';
 import ReactECharts from 'echarts-for-react';
+import { useRouter } from 'next/router';
 import { useEffect, useRef, useState } from 'react';
 import {
   AiFillCaretUp,
@@ -103,6 +104,7 @@ const Info = ({ repo, t, i18n_lang }: RepositoryProps) => {
   const [favoriteOptions, setFavoriteOptions] = useState<option[]>([]);
   const [showDropdown, setShowDropdown] = useState(false);
   const dropdownRef = useRef<any>();
+  const router = useRouter();
 
   const urlOptions = useURLOptions({ repo, t });
 
@@ -327,7 +329,10 @@ const Info = ({ repo, t, i18n_lang }: RepositoryProps) => {
                 </h1>
               </CustomLink>
               {repo.is_claimed && (
-                <div className=' group relative ml-0.5 flex cursor-pointer items-center'>
+                <div
+                  className='group relative ml-0.5 flex cursor-pointer items-center'
+                  onClick={() => router.push('/badge')}
+                >
                   <GoVerified className='ml-0.5 text-xl text-blue-500 group-hover:text-blue-600' />
                   <div className='absolute hidden flex-row transition-opacity duration-300 group-hover:flex'>
                     <div className='relative left-6 w-0 rounded-md bg-gray-300 p-1 text-xs font-medium text-white group-hover:w-max dark:bg-gray-700 dark:text-gray-200'>

src/components/side/Side.tsx

@@ -1,19 +1,15 @@
 import { useTranslation } from 'next-i18next';
 import { useEffect, useRef, useState } from 'react';
-import useSWRImmutable from 'swr/immutable';
+
+import { useSponsor } from '@/hooks/useSponsor';
 
 import Footer from '@/components/layout/Footer';
 import { SideAd, SideFixAd } from '@/components/side/SideAd';
 import SiteStats from '@/components/side/Stats';
 
-import { fetcher } from '@/services/base';
-import { makeUrl } from '@/utils/api';
-
 import Recommend from './Recommend';
 import UserStatus from './UserStatus';
 
-import { AdvertItems } from '@/types/home';
-
 interface Props {
   isHome: boolean;
   topValue: string;
@@ -23,12 +19,7 @@ export const Side = ({ isHome, topValue }: Props) => {
   const { t, i18n } = useTranslation('common');
   const [displayAdOnly, setDisplayAdOnly] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
-  const { data, isValidating } = useSWRImmutable<AdvertItems>(
-    makeUrl('/sponsor/', { position: 'side' }),
-    fetcher
-  );
-
-  const adverts = data?.success ? data.data : [];
+  const { sideAds, isValidating } = useSponsor();
 
   useEffect(() => {
     const handleScroll = () => {
@@ -52,7 +43,7 @@ export const Side = ({ isHome, topValue }: Props) => {
               <UserStatus t={t} i18n_lang={i18n.language} />
             </div>
             {!isValidating && (
-              <SideAd data={adverts} t={t} i18n_lang={i18n.language} />
+              <SideAd data={sideAds} t={t} i18n_lang={i18n.language} />
             )}
             {isHome ? <SiteStats t={t} /> : <Recommend t={t} />}
           </div>
@@ -63,9 +54,9 @@ export const Side = ({ isHome, topValue }: Props) => {
           )}
         </div>
       </div>
-      {adverts && (
+      {sideAds && (
         <SideFixAd
-          data={adverts}
+          data={sideAds}
           displayAdOnly={displayAdOnly}
           t={t}
           i18n_lang={i18n.language}