feat: add ai lab banner (#591)

* feat: ai lab banner

* fix: left nav styles

* tweak: ja banner

* tweak: banner styles

* fix: use ja lab url

* chore: typo

Author: shhdgit

gatsby/create-pages.ts

@@ -124,7 +124,7 @@ export const createDocs = async ({
         buildType: (process.env.WEBSITE_BUILD_TYPE ??
           DEFAULT_BUILD_TYPE) as BuildType, // prod | archive, default is prod; archive is for archive site
         feature: {
-          banner: false,
+          banner: true,
           feedback: true,
         },
       },
@@ -273,7 +273,7 @@ export const createDocHome = async ({
         buildType: (process.env.WEBSITE_BUILD_TYPE ??
           DEFAULT_BUILD_TYPE) as BuildType,
         feature: {
-          banner: false,
+          banner: true,
           feedback: true,
           globalHome: true,
         },

locale/en/translation.json

@@ -165,12 +165,10 @@
     "success": "Thank you! You will be notified when a new TiDB LTS release comes out."
   },
   "banner": {
-    "docDash2024": {
-      "link": "https://www.pingcap.com/event/tidb-docs-dash/",
-      "title": "TiDB Docs Dash 2024",
-      "date": "Jan 9 - Jan 12 (UTC)",
-      "intro": "Join us to improve docs and win a prize!"
-    }
+    "link": "https://labs.tidb.io/",
+    "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

@@ -148,6 +148,12 @@
     "scrollToTop": "トップへ戻る",
     "goToFeedback": "このページは役に立ちましたか？"
   },
+  "banner": {
+    "link": "https://labs.tidb.io/ja",
+    "title": "新しい TiDB Labs を探索し、ブラウザから直接分散型 SQL データベースを学び、RAG アプリを構築しましょう。",
+    "date": "",
+    "intro": ""
+  },
   "campaign": {
     "docSurvey": {
       "link": "https://forms.gle/LbWEygumJkc4jAPD7",

locale/zh/translation.json

@@ -162,12 +162,10 @@
     "success": "感谢订阅！当新的 LTS 版本发布时，我们会通过邮件通知您。"
   },
   "banner": {
-    "docDash2024": {
-      "link": "https://asktug.com/t/topic/1019364",
-      "title": "2024 TiDB 文档挑战赛",
-      "date": "1/9 - 1/12",
-      "intro": "提 PR 或 Issue 来赢取 Bose 耳机、机械键盘等奖品吧！"
-    }
+    "link": "https://labs.pingcap.com/",
+    "title": "探索全新的 TiDB Labs，直接在浏览器中学习分布式 SQL 数据库并构建 RAG 应用。",
+    "date": "",
+    "intro": ""
   },
   "campaign": {
     "docSurvey": {

src/components/Layout/Banner/Banner.tsx

@@ -15,17 +15,18 @@ const useBannerEvents = (
   const urlKey = prefix ? `${prefix}.${linkKey}` : linkKey;
   const url = t(urlKey);
   const textList = validTextKeys.map((k) => t(k));
-  const logo = (
-    <Box
-      component="img"
-      alt="TiDB"
-      src={require("media/logo/tidb-logo.svg")?.default}
-      sx={{
-        width: "1.25rem",
-        height: "1.25rem",
-      }}
-    />
-  );
+  const logo = "🚀";
+  // const logo = (
+  //   <Box
+  //     component="img"
+  //     alt="TiDB"
+  //     src={require("media/logo/tidb-logo.svg")?.default}
+  //     sx={{
+  //       width: "1.25rem",
+  //       height: "1.25rem",
+  //     }}
+  //   />
+  // );
   const bgImgSrc =
     "https://static.pingcap.com/files/2023/11/15190759/20231116-105219.png";
 
@@ -38,22 +39,25 @@ const useBannerEvents = (
 };
 
 export function Banner() {
-  const { bgImgSrc, url, logo, textList } = useBannerEvents(
-    ["title", "date", "intro"],
+  const { url, logo, textList } = useBannerEvents(
+    // ["title", "date", "intro"],
+    ["title"],
     "link",
-    "banner.docDash2024"
+    "banner"
   );
 
   return (
     <Box
       sx={{
         flexShrink: 0,
-        height: "2rem",
-        backgroundColor: "#15005B",
-        backgroundImage: `url(${bgImgSrc})`,
+        minHeight: "1.5rem",
+        backgroundColor: "var(--tiui-palette-peacock-100)",
+        // backgroundImage: `url(${bgImgSrc})`,
         backgroundPosition: "bottom left",
         backgroundSize: "400px auto",
         backgroundRepeat: "no-repeat",
+        paddingTop: "0.5rem",
+        paddingBottom: "0.5rem",
       }}
     >
       <Stack
@@ -84,19 +88,22 @@ export function Banner() {
         }
         sx={(theme) => ({
           textDecoration: "none",
-          color: "website.m1",
+          color: "text.primary",
           height: "100%",
           px: 2,
           [theme.breakpoints.down("md")]: {
             px: 1,
           },
+          ":hover span": {
+            textDecoration: "underline",
+          },
         })}
       >
         {textList.map((text, index) => (
           <Fragment key={index}>
             {!index ? (
-              <Stack direction="row" alignItems="center" spacing={2}>
-                {logo}
+              <Stack direction="row" alignItems="center" spacing={1}>
+                <Box>{logo}</Box>
                 <Typography component="span" variant="body2" color="inherit">
                   {text}
                 </Typography>

src/components/Layout/Header.tsx

@@ -36,16 +36,15 @@ export default function Header(props: {
         zIndex: 9,
         backgroundColor: "carbon.50",
         boxShadow: "none",
-        height: props.bannerEnabled ? "7rem" : "5rem",
-        borderBottom: `1px solid ${theme.palette.carbon[400]}`,
+        height: props.bannerEnabled ? "7.5rem" : "5rem",
       }}
     >
-      {props.bannerEnabled && <Banner />}
       <Toolbar
         sx={{
           height: "100%",
           paddingLeft: "24px",
           paddingRight: "24px",
+          borderBottom: `1px solid ${theme.palette.carbon[400]}`,
         }}
       >
         {props.menu}
@@ -78,6 +77,7 @@ export default function Header(props: {
           buildType={props.buildType}
         />
       </Toolbar>
+      {props.bannerEnabled && <Banner />}
     </AppBar>
   );
 }

src/components/Navigation/LeftNav.tsx

@@ -24,6 +24,7 @@ interface LeftNavProps {
   pathConfig: PathConfig;
   availIn: string[];
   buildType?: BuildType;
+  bannerEnabled?: boolean;
 }
 
 export function LeftNavDesktop(props: LeftNavProps) {
@@ -44,9 +45,9 @@ export function LeftNavDesktop(props: LeftNavProps) {
       <Box
         sx={{
           position: "sticky",
-          top: "80px",
+          top: props.bannerEnabled ? "7.5rem" : "5rem",
           height: "100%",
-          maxHeight: "calc(100vh - 80px)",
+          maxHeight: `calc(100vh - ${props.bannerEnabled ? "7.5rem" : "5rem"})`,
           boxSizing: "border-box",
           overflowY: "auto",
           padding: "20px 14px",

src/templates/404Template.tsx

@@ -82,7 +82,7 @@ export default function PageNotFoundTemplate({
             <Seo lang={language as Locale} title="404 Not Found" noindex />
             <Container
               sx={{
-                marginTop: bannerVisible ? "7rem" : "5rem",
+                marginTop: bannerVisible ? "7.5rem" : "5rem",
                 minHeight: "calc(100vh - 30rem)",
                 display: "flex",
                 alignItems: "center",

src/templates/CloudAPIReferenceTemplate.tsx

@@ -132,7 +132,9 @@ export default function APIReferenceTemplate({
             },
           ]}
         />
-        <Box sx={{ marginTop: bannerVisible ? "7rem" : "5rem", width: "100%" }}>
+        <Box
+          sx={{ marginTop: bannerVisible ? "7.5rem" : "5rem", width: "100%" }}
+        >
           <Box id="redoc-container" data-testid="redoc-container" />
         </Box>
       </Layout>

src/templates/DocSearchTemplate.tsx

@@ -207,7 +207,7 @@ export default function DocSearchTemplate({
       <Layout bannerEnabled={bannerVisible}>
         <Container
           sx={{
-            marginTop: bannerVisible ? "7rem" : "5rem",
+            marginTop: bannerVisible ? "7.5rem" : "5rem",
             minHeight: "calc(100vh - 30rem)",
             position: "relative",
           }}