Skip to content

Commit 47b050b

Browse files
shhdgitshhdgit
authored
feat: cloud cn (#614)
* feat: cloud cn * chore: i18n * feat: hide search * feat: tips * test: preview * chore: sync preview * feat: improve translation notices and refactor banner component - Updated Japanese and Chinese translation notices for clarity. - Enhanced the Header component to handle auto-translation scenarios. - Refactored the Banner component to accept props for URL, logo, and text list, improving reusability. * refactor: implement useIsAutoTranslation hook and update components - Introduced a new `useIsAutoTranslation` hook to centralize auto-translation logic. - Updated `Header`, `HeaderAction`, and `MDXContent` components to utilize the new hook. - Modified `Banner` component to accept an optional `bgColor` prop for better customization. * chore: update subproject commit reference in docs * refactor: update machine translation notice and clean up components - Revised the Chinese translation notice for clarity. - Removed the `MachineTranslationNotice` component from `CustomNotice.tsx` and its usage in `MDXContent.tsx`. - Adjusted the URL construction logic in the `Header` component to ensure correct paths for auto-translation. * fix: add background color to auto-translation banner in Header component - Updated the Banner component in the Header to include a background color for the auto-translation notice, enhancing visibility and aesthetics. * refactor: enhance translation notices and update Banner component - Split machine translation notices into multiple parts for improved clarity in both Japanese and Chinese translations. - Updated the Header component to utilize the new translation structure, enhancing the auto-translation banner's presentation. - Modified the Banner component to accept a text color prop, allowing for better customization of the banner's appearance.
1 parent 9bcef22 commit 47b050b

File tree

11 files changed

+150
-117
lines changed

11 files changed

+150
-117
lines changed

‎docs‎

Submodule docs updated 8484 files

‎gatsby/toc.ts‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@ function handleList(ast: ListItem[], config: PathConfig, prefixId = `0`) {
4141
if (content[1]) {
4242
const list = content[1];
4343
if (list.type !== "list") {
44-
throw new Error(`incorrect listitem in TOC.md`);
44+
throw new Error(
45+
`incorrect listitem in TOC.md: ${JSON.stringify(list)}`
46+
);
4547
}
4648

4749
ret.children = handleList(list.children, config, `${prefixId}-${idx}`);
@@ -50,7 +52,11 @@ function handleList(ast: ListItem[], config: PathConfig, prefixId = `0`) {
5052
return ret;
5153
}
5254

53-
throw new Error(`incorrect format in TOC.md`);
55+
throw new Error(
56+
`incorrect format list in TOC.md: ${content
57+
.flatMap((n) => JSON.stringify(n))
58+
.join(", ")}`
59+
);
5460
});
5561
}
5662

@@ -71,7 +77,9 @@ function getContentFromLink(
7177
id: string
7278
): RepoNavLink {
7379
if (content.type !== "paragraph" || content.children.length === 0) {
74-
throw new Error(`incorrect format in TOC.md`);
80+
throw new Error(
81+
`incorrect format paragraph in TOC.md: ${JSON.stringify(content)}`
82+
);
7583
}
7684

7785
const child = content.children[0] as Link | Text;
@@ -84,7 +92,7 @@ function getContentFromLink(
8492

8593
if (child.type === "link") {
8694
if (child.children.length === 0) {
87-
throw new Error(`incorrect link in TOC.md`);
95+
throw new Error(`incorrect link in TOC.md: ${JSON.stringify(child)}`);
8896
}
8997

9098
const content = child.children.map((node) => {

‎locale/ja/translation.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
"cannotswitchJa": "このページは日本語ではご利用いただけません",
1010
"cannotswitchtocloudJa": "TiDB Cloud 日本語ドキュメントは現在利用できません",
1111
"cannotswitchtocloudZh": "TiDB Cloud 中国語ドキュメントは現在利用できません",
12-
"machineTransNotice": "このページは英語版のページを機械翻訳しています。原文は<0>こちら</0>からご覧ください。"
12+
"machineTransNotice1": "このページは英語版のページを機械翻訳しています。",
13+
"machineTransNotice2": "原文はこちらからご覧ください",
14+
"machineTransNotice3": "。"
1315
},
1416
"meta": {
1517
"title": "TiDB Docs",

‎locale/zh/translation.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@
66
"ja": "日本語",
77
"cannotswitchEn": "本页面暂无英文版",
88
"cannotswitchZh": "本页面暂无中文版",
9-
"cannotswitchJa": "本页面暂无日文版"
9+
"cannotswitchJa": "本页面暂无日文版",
10+
"machineTransNotice1": "此页面由 AI 自动翻译，英文原文请见",
11+
"machineTransNotice2": "此处",
12+
"machineTransNotice3": "。"
1013
},
1114
"meta": {
1215
"title": "TiDB 文档中心",
@@ -20,6 +23,7 @@
2023
"archive-label": "归档文档",
2124
"tidb": "TiDB",
2225
"tools": "生态工具",
26+
"cloud": "TiDB Cloud",
2327
"appdev": "开发指南",
2428
"asktug": "社区",
2529
"download": "免费试用",

‎src/components/Card/CustomNotice.tsx‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -81,20 +81,3 @@ export function CustomNotice({ name, pathConfig, availIn }: Props) {
8181

8282
return null;
8383
}
84-
85-
export const MachineTranslationNotice = ({ name, pathConfig }: Props) => {
86-
const targetEnUrl =
87-
pathConfig.repo === "tidbcloud"
88-
? `/tidbcloud`
89-
: `/${pathConfig.repo}/${pathConfig?.version || "stable"}/${
90-
name === "_index" ? "" : name
91-
}`;
92-
return (
93-
<Important>
94-
<Trans
95-
i18nKey={`lang.machineTransNotice`}
96-
components={[<Link language="en" to={targetEnUrl} />]}
97-
/>
98-
</Important>
99-
);
100-
};

‎src/components/Layout/Banner/Banner.tsx‎

Lines changed: 31 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,25 @@
11
import { Box, Divider, Stack, Typography } from "@mui/material";
2-
import { useI18next } from "gatsby-plugin-react-i18next";
32
import { Fragment } from "react";
43

5-
const useBannerEvents = (
6-
textKeys: string[],
7-
linkKey: string,
8-
prefix: string = ""
9-
) => {
10-
const { t } = useI18next();
11-
const validTextKeys = prefix
12-
? textKeys.map((k) => `${prefix}.${k}`)
13-
: textKeys;
14-
15-
const urlKey = prefix ? `${prefix}.${linkKey}` : linkKey;
16-
const url = t(urlKey);
17-
const textList = validTextKeys.map((k) => t(k));
18-
const logo = "🚀";
19-
// const logo = (
20-
// <Box
21-
// component="img"
22-
// alt="TiDB"
23-
// src={require("media/logo/tidb-logo.svg")?.default}
24-
// sx={{
25-
// width: "1.25rem",
26-
// height: "1.25rem",
27-
// }}
28-
// />
29-
// );
30-
const bgImgSrc =
31-
"https://static.pingcap.com/files/2023/11/15190759/20231116-105219.png";
32-
33-
return {
34-
bgImgSrc,
35-
url,
36-
logo,
37-
textList,
38-
};
39-
};
40-
41-
export function Banner() {
42-
const { url, logo, textList } = useBannerEvents(
43-
// ["title", "date", "intro"],
44-
["title"],
45-
"link",
46-
"banner.campaign"
47-
);
48-
4+
export function Banner({
5+
url,
6+
textList,
7+
logo,
8+
bgColor,
9+
textColor,
10+
}: {
11+
url?: string;
12+
textList: (string | React.ReactNode)[];
13+
logo?: React.ReactNode;
14+
bgColor?: string;
15+
textColor?: string;
16+
}) {
4917
return (
5018
<Box
5119
sx={{
5220
flexShrink: 0,
5321
minHeight: "1.5rem",
54-
backgroundColor: "var(--tiui-palette-peacock-100)",
22+
backgroundColor: bgColor || "var(--tiui-palette-peacock-100)",
5523
// backgroundImage: `url(${bgImgSrc})`,
5624
backgroundPosition: "bottom left",
5725
backgroundSize: "400px auto",
@@ -61,14 +29,14 @@ export function Banner() {
6129
}}
6230
>
6331
<Stack
64-
component="a"
65-
href={url}
66-
target="_blank"
32+
component={url ? "a" : "div"}
33+
href={url || undefined}
34+
target={url ? "_blank" : undefined}
6735
direction="row"
6836
justifyContent="center"
6937
alignItems="center"
7038
flexWrap="nowrap"
71-
spacing={2}
39+
spacing={0.5}
7240
divider={
7341
<Divider
7442
orientation="vertical"
@@ -88,42 +56,29 @@ export function Banner() {
8856
}
8957
sx={(theme) => ({
9058
textDecoration: "none",
91-
color: "text.primary",
59+
color: textColor || "text.primary",
9260
height: "100%",
9361
px: 2,
9462
[theme.breakpoints.down("md")]: {
9563
px: 1,
9664
},
9765
":hover span": {
98-
textDecoration: "underline",
66+
textDecoration: url ? "underline" : "none",
9967
},
10068
})}
10169
>
70+
{logo && (
71+
<Box sx={{ display: "flex", alignItems: "center" }}>{logo}</Box>
72+
)}
10273
{textList.map((text, index) => (
103-
<Fragment key={index}>
104-
{!index ? (
105-
<Stack direction="row" alignItems="center" spacing={1}>
106-
<Box>{logo}</Box>
107-
<Typography component="span" variant="body2" color="inherit">
108-
{text}
109-
</Typography>
110-
</Stack>
111-
) : (
112-
<Typography
113-
component="span"
114-
variant="body2"
115-
color="inherit"
116-
sx={(theme) => ({
117-
display: "initial",
118-
[theme.breakpoints.down("md")]: {
119-
display: "none",
120-
},
121-
})}
122-
>
123-
{text}
124-
</Typography>
125-
)}
126-
</Fragment>
74+
<Typography
75+
key={index}
76+
component="span"
77+
variant="body2"
78+
color="inherit"
79+
>
80+
{text}
81+
</Typography>
12782
))}
12883
</Stack>
12984
</Box>

‎src/components/Layout/Header.tsx‎

Lines changed: 79 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ import { Banner } from "./Banner";
1818
import { generateDocsHomeUrl } from "shared/utils";
1919
import { useI18next } from "gatsby-plugin-react-i18next";
2020
import { ArchiveBanner } from "./Banner/ArchiveBanner";
21+
import { useIsAutoTranslation } from "shared/useIsAutoTranslation";
22+
import { ErrorOutlineOutlined } from "@mui/icons-material";
23+
import { Typography } from "@mui/material";
24+
2125
export default function Header(props: {
2226
bannerEnabled?: boolean;
2327
menu?: React.ReactNode;
@@ -28,8 +32,21 @@ export default function Header(props: {
2832
name?: string;
2933
pathConfig?: PathConfig;
3034
}) {
31-
const { language } = useI18next();
35+
const { language, t } = useI18next();
3236
const theme = useTheme();
37+
const isAutoTranslation = useIsAutoTranslation(props.pageUrl || "");
38+
const { url, logo, textList } = useBannerEvents(
39+
["title"],
40+
"link",
41+
"banner.campaign"
42+
);
43+
const urlAutoTranslation =
44+
props.pathConfig?.repo === "tidbcloud"
45+
? `/tidbcloud/${props.name === "_index" ? "" : props.name}`
46+
: `/${props.pathConfig?.repo}/${props.pathConfig?.version || "stable"}/${
47+
props.name === "_index" ? "" : props.name
48+
}`;
49+
3350
return (
3451
<AppBar
3552
className="doc-site-header"
@@ -77,12 +94,72 @@ export default function Header(props: {
7794
supportedLocales={props.locales}
7895
docInfo={props.docInfo}
7996
buildType={props.buildType}
97+
pageUrl={props.pageUrl}
8098
/>
8199
</Toolbar>
82-
{props.bannerEnabled && props.buildType !== "archive" && <Banner />}
100+
{!isAutoTranslation &&
101+
props.bannerEnabled &&
102+
props.buildType !== "archive" && (
103+
<Banner url={url} logo={logo} textList={textList} />
104+
)}
105+
{isAutoTranslation && props.buildType !== "archive" && (
106+
<Banner
107+
textList={[
108+
<Typography component="span" variant="body2" color="inherit">
109+
{t("lang.machineTransNotice1")}
110+
<Typography
111+
component="a"
112+
href={urlAutoTranslation}
113+
target="_blank"
114+
sx={{
115+
textDecoration: "none",
116+
"&:hover": {
117+
textDecoration: "underline!important",
118+
},
119+
}}
120+
>
121+
<Typography component="span" variant="body2" color="secondary">
122+
{t("lang.machineTransNotice2")}
123+
</Typography>
124+
</Typography>
125+
{t("lang.machineTransNotice3")}
126+
</Typography>,
127+
]}
128+
bgColor="#FEFBF3"
129+
textColor="#AE6D0C"
130+
logo={
131+
<ErrorOutlineOutlined sx={{ fontSize: "1rem", color: "#F2AA18" }} />
132+
}
133+
/>
134+
)}
83135
{props.buildType === "archive" && (
84136
<ArchiveBanner name={props.name} pathConfig={props.pathConfig} />
85137
)}
86138
</AppBar>
87139
);
88140
}
141+
142+
const useBannerEvents = (
143+
textKeys: string[],
144+
linkKey: string,
145+
prefix: string = ""
146+
) => {
147+
const { t } = useI18next();
148+
const validTextKeys = prefix
149+
? textKeys.map((k) => `${prefix}.${k}`)
150+
: textKeys;
151+
152+
const urlKey = prefix ? `${prefix}.${linkKey}` : linkKey;
153+
const url = t(urlKey);
154+
const textList = validTextKeys.map((k) => t(k));
155+
const logo = "🚀";
156+
const bgImgSrc =
157+
"https://static.pingcap.com/files/2023/11/15190759/20231116-105219.png";
158+
159+
return {
160+
bgImgSrc,
161+
url,
162+
logo,
163+
textList,
164+
};
165+
};

‎src/components/Layout/HeaderAction.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import Search from "components/Search";
2020
import { Locale, BuildType } from "shared/interface";
2121
import { ActionButton } from "components/Card/FeedbackSection/components";
2222
import { Link } from "gatsby";
23+
import { useIsAutoTranslation } from "shared/useIsAutoTranslation";
2324

2425
const useTiDBAIStatus = () => {
2526
const [showTiDBAIButton, setShowTiDBAIButton] = React.useState(true);
@@ -60,10 +61,12 @@ export default function HeaderAction(props: {
6061
supportedLocales: Locale[];
6162
docInfo?: { type: string; version: string };
6263
buildType?: BuildType;
64+
pageUrl?: string;
6365
}) {
64-
const { supportedLocales, docInfo, buildType } = props;
66+
const { supportedLocales, docInfo, buildType, pageUrl } = props;
6567
const { language, t } = useI18next();
6668
const { showTiDBAIButton, initializingTiDBAI } = useTiDBAIStatus();
69+
const isAutoTranslation = useIsAutoTranslation(pageUrl || "");
6770

6871
return (
6972
<Stack
@@ -77,7 +80,7 @@ export default function HeaderAction(props: {
7780
{supportedLocales.length > 0 && (
7881
<LangSwitch supportedLocales={supportedLocales} />
7982
)}
80-
{docInfo && language !== "ja" && buildType !== "archive" && (
83+
{docInfo && !isAutoTranslation && buildType !== "archive" && (
8184
<>
8285
<Stack direction="row" spacing="4px">
8386
<Search placeholder={t("navbar.searchDocs")} docInfo={docInfo} />

0 commit comments

Comments
 (0)