tweak: archive banner

Author: shhdgit

locale/en/translation.json

@@ -167,10 +167,16 @@
     "success": "Thank you! You will be notified when a new TiDB LTS release comes out."
   },
   "banner": {
-    "link": "https://labs.tidb.io/?utm_source=docs&utm_medium=direct&utm_campaign=labs_lp_05",
-    "title": "Explore the new TiDB Labs, learn distributed SQL database and build RAG apps directly from your browser.",
-    "date": "",
-    "intro": ""
+    "archive": {
+      "title": "You are viewing the archived documentation of TiDB, which no longer receives updates.",
+      "viewLatestLTSVersion": "View latest LTS version docs"
+    },
+    "campaign": {
+      "link": "https://labs.tidb.io/?utm_source=docs&utm_medium=direct&utm_campaign=labs_lp_05",
+      "title": "Explore the new TiDB Labs, learn distributed SQL database and build RAG apps directly from your browser.",
+      "date": "",
+      "intro": ""
+    }
   },
   "campaign": {
     "docSurvey": {

locale/ja/translation.json

@@ -151,10 +151,16 @@
     "goToFeedback": "このページは役に立ちましたか？"
   },
   "banner": {
-    "link": "https://labs.tidb.io/ja?utm_source=docs&utm_medium=direct&utm_campaign=labs_lp_05",
-    "title": "新しい TiDB Labs を探索し、ブラウザから直接分散型 SQL データベースを学び、RAG アプリを構築しましょう。",
-    "date": "",
-    "intro": ""
+    "archive": {
+      "title": "これはアーカイブされた TiDB のドキュメントであり、更新は行われていません。",
+      "viewLatestLTSVersion": "最新の LTS バージョンのドキュメントを表示する"
+    },
+    "campaign": {
+      "link": "https://labs.tidb.io/ja?utm_source=docs&utm_medium=direct&utm_campaign=labs_lp_05",
+      "title": "新しい TiDB Labs を探索し、ブラウザから直接分散型 SQL データベースを学び、RAG アプリを構築しましょう。",
+      "date": "",
+      "intro": ""
+    }
   },
   "campaign": {
     "docSurvey": {

locale/zh/translation.json

@@ -164,10 +164,16 @@
     "success": "感谢订阅！当新的 LTS 版本发布时，我们会通过邮件通知您。"
   },
   "banner": {
-    "link": "https://labs.pingcap.com/?utm_source=docs&utm_medium=direct&utm_campaign=labs_zh_lp_04",
-    "title": "探索全新的 TiDB Labs，直接在浏览器中学习分布式 SQL 数据库并构建 RAG 应用。",
-    "date": "",
-    "intro": ""
+    "archive": {
+      "title": "你正在查看已归档的 TiDB 文档，该文档不再更新。",
+      "viewLatestLTSVersion": "查看最新 LTS 版本文档"
+    },
+    "campaign": {
+      "link": "https://labs.pingcap.com/?utm_source=docs&utm_medium=direct&utm_campaign=labs_zh_lp_04",
+      "title": "探索全新的 TiDB Labs，直接在浏览器中学习分布式 SQL 数据库并构建 RAG 应用。",
+      "date": "",
+      "intro": ""
+    }
   },
   "campaign": {
     "docSurvey": {

src/components/Layout/Banner/ArchiveBanner.tsx

@@ -1,20 +1,25 @@
 import { ErrorOutlineOutlined, OpenInNewOutlined } from "@mui/icons-material";
-import { Box, Icon, Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import LinkComponent from "components/Link";
-import { PathConfig } from "shared/interface";
+import { Locale, PathConfig } from "shared/interface";
 import { generateUrl } from "shared/utils";
-
+import { useTranslation } from "react-i18next";
 interface ArchiveBannerProps {
   name?: string;
   pathConfig?: PathConfig;
 }
 
 export function ArchiveBanner({ name, pathConfig }: ArchiveBannerProps) {
-  let targetUrl = `https://docs.pingcap.com`;
+  const { t } = useTranslation();
+  let targetUrl = "";
   if (name && pathConfig) {
     const stableCfg = { ...pathConfig, version: "stable" };
     const path = generateUrl(name, stableCfg);
     targetUrl = `https://docs.pingcap.com${path}`;
+  } else {
+    const lang =
+      pathConfig?.locale === Locale.en ? "" : `/${pathConfig?.locale}`;
+    targetUrl = `https://docs.pingcap.com${lang}/tidb/stable`;
   }
 
   return (
@@ -48,8 +53,7 @@ export function ArchiveBanner({ name, pathConfig }: ArchiveBannerProps) {
         <ErrorOutlineOutlined sx={{ fontSize: "1rem", color: "#F2AA18" }} />
 
         <Typography component="span" variant="body2" color="inherit">
-          You are viewing the archived documentation of TiDB, which no longer
-          receives updates.
+          {t("banner.archive.title")}
         </Typography>
 
         <LinkComponent
@@ -62,7 +66,7 @@ export function ArchiveBanner({ name, pathConfig }: ArchiveBannerProps) {
         >
           <Stack direction="row" alignItems="center" spacing="4px">
             <Typography variant="body2" color="secondary">
-              View latest LTS version docs
+              {t("banner.archive.viewLatestLTSVersion")}
             </Typography>
             <OpenInNewOutlined
               sx={{

src/components/Layout/Banner/Banner.tsx

@@ -43,7 +43,7 @@ export function Banner() {
     // ["title", "date", "intro"],
     ["title"],
     "link",
-    "banner"
+    "banner.campaign"
   );
 
   return (