perf: translate repoModal, periodical, article page

public/locales/en/article.json

@@ -0,0 +1,13 @@
+{
+  "title": "Articles",
+  "description": "Here you'll find original and high-quality articles focused on open source projects.",
+  "bottom_text_login": "You've reached the end.",
+  "bottom_text_nologin": "End of content! Log in to see more.",
+  "nav": {
+    "title": "Articles",
+    "hot": "Popular",
+    "last": "Latest"
+  },
+  "author": "Author: {{name}}",
+  "read": "Read: {{num}}"
+}

public/locales/en/common.json

@@ -15,12 +15,12 @@
     "login": "Sign In"
   },
   "advert": {
-    "desc": "Server expires in",
+    "desc": "Server expires by",
     "desc2": "Buy me a coffee",
     "next": "Need to gold",
     "next2": "Next target by",
     "day": "D",
-    "year": "Y"
+    "year": ""
   },
   "site_stats": {
     "user": "#Users",
@@ -37,16 +37,37 @@
   "footer": {
     "feedback": "Feedback",
     "business": "Business",
-    "contact": "Contact Us",
+    "contact": "Contact",
     "agreement": "Agreement",
-    "source": "Source Code",
+    "source": "Source",
     "sitemap": "Sitemap",
     "server_sponsor": "Servers sponsor",
     "server_sponsor2": "",
-    "cdn_sponsor": "Cloud service sponsor",
+    "cdn_sponsor": "Cloud storage sponsor",
     "cdn_sponsor2": ""
   },
+  "submit_repo": {
+    "text": "Submit",
+    "title": "Recommend or Submit an Open Source Project",
+    "description": "Only approved projects will be featured on the homepage",
+    "url_placeholder": "Project URL",
+    "url_tip": "👆 Only GitHub projects are accepted",
+    "title_placeholder": "Title: Briefly introduce the project",
+    "summary_placeholder": "Description: Explain what the project is, the problems it solves, the technologies used, features, and use cases. (A clear description improves approval chances!)",
+    "summary_tip": "10-300 characters",
+    "create_err": "URL cannot be empty",
+    "create_err2": "Title must be at least 5 characters",
+    "create_err3": "Description must be at least 10 characters",
+    "create_err4": "Title cannot exceed 50 characters",
+    "create_err5": "Description cannot exceed 300 characters",
+    "create_success": "Thanks for sharing! You can submit {{remaining}} more times today",
+    "check_url_err": "URL must start with https://github.com",
+    "check_url_err2": "This project already exists, try another one",
+    "check_url_err3": "Invalid URL",
+    "check_url_err4": "Request failed, please try again later"
+  },
   "collect": {
     "title": "New"
-  }
+  },
+  "redirect": "Leave HelloGitHub community and jump to the URL 👇"
 }

public/locales/en/home.json

@@ -10,7 +10,7 @@
     "submit": "Submit"
   },
   "tag_side": {
-    "title": "Hot Tags",
+    "title": "Topics",
     "manage": "Preference"
   },
   "tag_modal": {

public/locales/en/periodical.json

@@ -0,0 +1,34 @@
+{
+  "title": "HelloGitHub Monthly",
+  "description": "Discover development tools, open source books, tutorials, and enterprise-level projects that make programming fun and foster a love for 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 to help you discover the joy of programming and fall in love with open source!",
+  "read_button": "Read",
+  "submit_button": "Submit",
+  "detail_button": "Detail",
+  "order_t1": "Published",
+  "order_t2": "Volumes",
+  "order_t3": "Select：",
+  "order_t4": "Contains",
+  "order_t5": "Categories",
+  "order_t6": "Choose：",
+  "order_t7": "Projects",
+  "order_t8": "Items",
+  "order_t9": "Welcome recommend",
+  "page_prev": "Previous",
+  "page_next": "Next",
+  "category": {
+    "title": "《HelloGitHub Monthly》{{name}} Collection",
+    "nav": "Category",
+    "p_text": "Here you can browse past issues of HelloGitHub Monthly by <strong>category</strong>. You are currently viewing the",
+    "p_text2": "collection."
+  },
+  "volume": {
+    "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>",
+    "catalog": "Catalog",
+    "catalog2": "Catalog"
+  }
+}

public/locales/zh/article.json

@@ -0,0 +1,13 @@
+{
+  "title": "文章",
+  "description": "这里有一些专注于开源项目的原创和优质文章",
+  "bottom_text_login": "你不经意间触碰到了底线",
+  "bottom_text_nologin": "到底啦！登录可查看更多内容",
+  "nav": {
+    "title": "文章",
+    "hot": "热门",
+    "last": "最新"
+  },
+  "author": "作者 {{name}}",
+  "read": "阅读 {{num}}"
+}

public/locales/zh/common.json

@@ -46,7 +46,28 @@
     "cdn_sponsor": "专业的",
     "cdn_sponsor2": "提供云存储服务"
   },
+  "submit_repo": {
+    "text": "提交",
+    "title": "推荐或自荐开源项目",
+    "description": "通过审核的开源项目，才会在首页展示",
+    "url_placeholder": "项目地址",
+    "url_tip": "👆 仅接受 GitHub 上的开源项目",
+    "title_placeholder": "标题：请用一句话介绍项目",
+    "summary_placeholder": "描述：请从它是什么、解决了什么痛点等方面介绍项目，包括用的技术、支持的功能、适用的场景。（描述通俗易懂、符合要求可以提高通过率！）",
+    "summary_tip": "字数限制 10-300 字符",
+    "create_err": "地址不能为空",
+    "create_err2": "标题不能少于 5 个字",
+    "create_err3": "描述不能少于 10 个字",
+    "create_err4": "标题不能超过 50 个字",
+    "create_err5": "描述不能超过 300 个字",
+    "create_success": "感谢您的分享！今天还可以提交 {{remaining}} 次",
+    "check_url_err": "地址必须是 https://github.com 开头",
+    "check_url_err2": "该项目已存在，换一个试试吧~",
+    "check_url_err3": "地址不合规",
+    "check_url_err4": "请求失败，稍后重试"
+  },
   "collect": {
     "title": "新建收藏夹"
-  }
+  },
+  "redirect": "即将离开 HelloGitHub 社区，跳转到👇"
 }

public/locales/zh/periodical.json

@@ -0,0 +1,34 @@
+{
+  "title": "HelloGitHub 月刊",
+  "description": "这里有开发利器、开源书籍、教程、企业级的开源项目，让发现编程的乐趣你爱上开源",
+  "nav": "HelloGitHub 月刊",
+  "p_text": "<strong>「HelloGitHub 月刊」</strong>分享 GitHub 上有趣、入门级的开源项目，每月 28 号发布最新一期。内容包括开发利器、开源书籍、教程、企业级项目等，让你发现编程的乐趣、爱上开源！",
+  "read_button": "查看",
+  "submit_button": "推荐",
+  "detail_button": "详情",
+  "order_t1": "已发布",
+  "order_t2": "期",
+  "order_t3": "选择：",
+  "order_t4": "共包含",
+  "order_t5": "类",
+  "order_t6": "选择：",
+  "order_t7": "项目数",
+  "order_t8": "个",
+  "order_t9": "欢迎推荐和自荐项目",
+  "page_prev": "上一页",
+  "page_next": "下一页",
+  "category": {
+    "title": "《HelloGitHub 月刊》{{name}} 集合",
+    "nav": "分类",
+    "p_text": "这里是按照「<strong>分类</strong>」阅读往期的 HelloGitHub 月刊内容， 您目前在查看",
+    "p_text2": "集合。"
+  },
+  "volume": {
+    "title": "《HelloGitHub 月刊》第 {{num}} 期",
+    "nav": "期数",
+    "h2_text": "《HelloGitHub》第 {{num}} 期",
+    "p_text": "<p>HelloGitHub 分享 GitHub 上有趣、入门级的开源项目，<strong>每月 28 号</strong>更新一期。这里有好玩和入门级的开源项目、开源书籍、实战项目、企业级项目，让你用极短的时间感受到开源的魅力，对开源产生兴趣。</p>",
+    "catalog": "本期目录",
+    "catalog2": "目录"
+  }
+}

src/components/dialog/RepoModal.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'next-i18next';
 import { useCallback, useState } from 'react';
 import { IoIosArrowRoundForward } from 'react-icons/io';
 
@@ -13,9 +14,10 @@ import { CheckRepoRes, CreateRepoRes } from '@/types/repository';
 
 interface CreateRepoProps {
   response: (res: CreateRepoRes) => void;
+  t: (key: string, total?: any) => any;
 }
 
-export function CreateRepo({ response }: CreateRepoProps) {
+export function CreateRepo({ response, t }: CreateRepoProps) {
   const [loading, setLoading] = useState<boolean>(false);
   const [paramReady, setParamReady] = useState<boolean>(true);
 
@@ -29,15 +31,15 @@ export function CreateRepo({ response }: CreateRepoProps) {
   const handleCreateRepo = useCallback(async () => {
     let isEmpty = false;
     if (url.length == 0) {
-      setURLMessage('地址不能为空');
+      setURLMessage(t('submit_repo.create_err'));
       isEmpty = true;
     }
     if (title.length == 0) {
-      setTitleMessage('标题不能少于 5 个字');
+      setTitleMessage(t('submit_repo.create_err2'));
       isEmpty = true;
     }
     if (summary.length == 0) {
-      setSummaryMessage('描述不能少于 10 个字');
+      setSummaryMessage(t('submit_repo.create_err3'));
       isEmpty = true;
     }
     // 有一个条件不满足就不能提交
@@ -47,7 +49,7 @@ export function CreateRepo({ response }: CreateRepoProps) {
     setLoading(true);
     const res = await createRepo({ url, summary, title });
     if (res.success) {
-      Message.success(`感谢您的分享！您还可以提交 ${res.remaining} 次`);
+      Message.success(t('submit_repo.create_success', res.remaining));
     } else {
       Message.error(res.message);
     }
@@ -65,26 +67,26 @@ export function CreateRepo({ response }: CreateRepoProps) {
   const onUrlBlur = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const url = e.target.value;
     if (!validateUrl(url)) {
-      setURLMessage('地址必须是 https://github.com 开头');
+      setURLMessage(t('submit_repo.check_url_err'));
       return;
     }
     checkRepo(url)
       .then((res: CheckRepoRes) => {
         if (res.success) {
           if (res.data.is_exist) {
-            setURLMessage(res.message || '该项目已存在，换一个试试吧~');
+            setURLMessage(res.message || t('submit_repo.check_url_err2'));
             setParamReady(false);
           } else {
             setURLMessage('');
             setParamReady(true);
           }
         } else {
-          setURLMessage('地址不合规');
+          setURLMessage(t('submit_repo.check_url_err3'));
           setParamReady(false);
         }
       })
       .catch((err) => {
-        setURLMessage('请求失败，稍后重试');
+        setURLMessage(t('submit_repo.check_url_err4'));
         setParamReady(false);
         console.error(err);
       });
@@ -97,11 +99,11 @@ export function CreateRepo({ response }: CreateRepoProps) {
       setParamReady(true);
     } else {
       if (title.length < 5) {
-        setTitleMessage('标题不能少于 5 个字');
+        setTitleMessage(t('submit_repo.create_err2'));
         setParamReady(false);
       }
       if (title.length > 50) {
-        setTitleMessage('标题不能超过 50 个字');
+        setTitleMessage(t('submit_repo.create_err4'));
         setParamReady(false);
       }
     }
@@ -115,11 +117,11 @@ export function CreateRepo({ response }: CreateRepoProps) {
         setParamReady(true);
       } else {
         if (summay.length < 10) {
-          setSummaryMessage('描述不能少于 10 个字');
+          setSummaryMessage(t('submit_repo.create_err3'));
           setParamReady(false);
         }
         if (summay.length > 300) {
-          setSummaryMessage('描述不能超过 300 个字');
+          setSummaryMessage(t('submit_repo.create_err5'));
           setParamReady(false);
         }
       }
@@ -147,7 +149,7 @@ export function CreateRepo({ response }: CreateRepoProps) {
       <div>
         <input
           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'
-          placeholder='项目地址'
+          placeholder={t('submit_repo.url_placeholder')}
           type='text'
           id='url'
           onChange={onUrlChange}
@@ -157,33 +159,29 @@ export function CreateRepo({ response }: CreateRepoProps) {
           {urlMessage ? (
             <span className='text-red-600'>{urlMessage}</span>
           ) : (
-            '👆 仅接受 GitHub 上的开源项目'
+            t('submit_repo.url_tip')
           )}
         </div>
       </div>
 
       <div>
         <input
           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'
-          placeholder='标题：请用一句话介绍项目'
+          placeholder={t('submit_repo.title_placeholder')}
           type='text'
           id='title'
           onChange={onTitleChange}
           onBlur={onTitleBlur}
         />
         <div className='mt-2 text-left text-xs text-gray-400'>
-          {titleMessage ? (
-            <span className='text-red-600'>{titleMessage}</span>
-          ) : (
-            ''
-          )}
+          {titleMessage && <span className='text-red-600'>{titleMessage}</span>}
         </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'
-          placeholder='描述：请从技术栈、功能、适用场景、解决了哪些痛点等方面介绍项目，突出特点和闪光的亮点。'
+          placeholder={t('submit_repo.summary_placeholder')}
           rows={8}
           id='summary'
           onChange={onSummaryChange}
@@ -193,7 +191,7 @@ export function CreateRepo({ response }: CreateRepoProps) {
           {summaryMessage ? (
             <span className='text-red-600'>{summaryMessage}</span>
           ) : (
-            '字数限制 10-300 字符'
+            t('submit_repo.summary_tip')
           )}
         </div>
       </div>
@@ -205,15 +203,20 @@ export function CreateRepo({ response }: CreateRepoProps) {
           isLoading={loading}
           onClick={handleCreateRepo}
         >
-          提交
+          {t('submit_repo.text')}
           <IoIosArrowRoundForward size={24} />
         </Button>
       </div>
     </div>
   );
 }
 
-export function RepoModal({ children }: { children: JSX.Element }) {
+interface RepoModalProps {
+  children: JSX.Element;
+}
+
+export function RepoModal({ children }: RepoModalProps) {
+  const { t } = useTranslation('common');
   const [isOpen, setIsOpen] = useState(false);
   const { isLogin, login } = useLoginContext();
 
@@ -243,15 +246,15 @@ export function RepoModal({ children }: { children: JSX.Element }) {
         hideClose={false}
         title={
           <>
-            欢迎<span className='mx-0.5 font-medium'>自荐/分享</span>开源项目
+            {t('submit_repo.title')}
             <p className='mt-2 mb-2 text-xs text-gray-500'>
-              通过审核的开源项目，才会在首页展示
+              {t('submit_repo.description')}
             </p>
           </>
         }
         onClose={closeModal}
       >
-        <CreateRepo response={handleResponse}></CreateRepo>
+        <CreateRepo response={handleResponse} t={t} />
       </BasicDialog>
     </>
   );