tweak: notice of archived site (#597)

shhdgit · web-flow · commit 22f98a6fd490 · 2025-02-28T10:26:05.000+08:00
* fix: archive header

* tweak: archive notice
diff --git a/gatsby/create-pages.ts b/gatsby/create-pages.ts
@@ -307,6 +307,8 @@ export const create404 = async ({
     path: "/404",
     component: template,
     context: {
+      buildType: (process.env.WEBSITE_BUILD_TYPE ??
+        DEFAULT_BUILD_TYPE) as BuildType,
       feature: {
         banner: false,
       },
diff --git a/src/components/Card/CustomNotice.tsx b/src/components/Card/CustomNotice.tsx
@@ -1,12 +1,9 @@
-import * as React from "react";
 import { Link, Trans, useI18next } from "gatsby-plugin-react-i18next";
 import Typography from "@mui/material/Typography";
 
-import { Locale, PathConfig } from "shared/interface";
+import { PathConfig } from "shared/interface";
 import { docs } from "../../../docs/docs.json";
-import { Important, CustomAlert } from "components/MDXComponents";
-import { generateUrl } from "shared/utils";
-import LinkComponent from "components/Link";
+import { Important } from "components/MDXComponents";
 
 interface Props {
   name: string;
@@ -101,20 +98,3 @@ export const MachineTranslationNotice = ({ name, pathConfig }: Props) => {
     </Important>
   );
 };
-
-export const ArchiveTiDBNotice = ({ name, pathConfig }: Props) => {
-  const stableCfg = { ...pathConfig, version: "stable" };
-  const path = generateUrl(name, stableCfg);
-  const targetUrl = `https://docs.pingcap.com${path}`;
-  return (
-    <CustomAlert
-      severity="error"
-      title={<Trans i18nKey="shortcodes.important" />}
-    >
-      <Trans
-        i18nKey={`doc.archive.tidb`}
-        components={[<LinkComponent to={targetUrl} fontSize="inherit" />]}
-      />
-    </CustomAlert>
-  );
-};
diff --git a/src/components/Layout/Banner/ArchiveBanner.tsx b/src/components/Layout/Banner/ArchiveBanner.tsx
@@ -0,0 +1,78 @@
+import { ErrorOutlineOutlined, OpenInNewOutlined } from "@mui/icons-material";
+import { Box, Icon, Stack, Typography } from "@mui/material";
+import LinkComponent from "components/Link";
+import { PathConfig } from "shared/interface";
+import { generateUrl } from "shared/utils";
+
+interface ArchiveBannerProps {
+  name?: string;
+  pathConfig?: PathConfig;
+}
+
+export function ArchiveBanner({ name, pathConfig }: ArchiveBannerProps) {
+  let targetUrl = `https://docs.pingcap.com`;
+  if (name && pathConfig) {
+    const stableCfg = { ...pathConfig, version: "stable" };
+    const path = generateUrl(name, stableCfg);
+    targetUrl = `https://docs.pingcap.com${path}`;
+  }
+
+  return (
+    <Box
+      sx={{
+        flexShrink: 0,
+        minHeight: "1.5rem",
+        backgroundColor: "#FEFBF3",
+        backgroundPosition: "bottom left",
+        backgroundSize: "400px auto",
+        backgroundRepeat: "no-repeat",
+        paddingTop: "0.5rem",
+        paddingBottom: "0.5rem",
+      }}
+    >
+      <Stack
+        direction="row"
+        justifyContent="center"
+        alignItems="center"
+        flexWrap="nowrap"
+        spacing={1}
+        sx={(theme) => ({
+          color: "#AE6D0C",
+          height: "100%",
+          px: 2,
+          [theme.breakpoints.down("md")]: {
+            px: 1,
+          },
+        })}
+      >
+        <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.
+        </Typography>
+
+        <LinkComponent
+          to={targetUrl}
+          sx={{
+            "&:hover": {
+              textDecoration: "underline!important",
+            },
+          }}
+        >
+          <Stack direction="row" alignItems="center" spacing="4px">
+            <Typography variant="body2" color="secondary">
+              View latest LTS version docs
+            </Typography>
+            <OpenInNewOutlined
+              sx={{
+                fontSize: "1rem",
+                color: "var(--tiui-palette-secondary)",
+              }}
+            />
+          </Stack>
+        </LinkComponent>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
@@ -12,19 +12,21 @@ import HeaderAction from "components/Layout/HeaderAction";
 
 import TiDBLogo from "media/logo/tidb-logo-withtext.svg";
 
-import { Locale, BuildType } from "shared/interface";
+import { Locale, BuildType, PathConfig } from "shared/interface";
 import { GTMEvent, gtmTrack } from "shared/utils/gtm";
 import { Banner } from "./Banner";
 import { generateDocsHomeUrl } from "shared/utils";
 import { useI18next } from "gatsby-plugin-react-i18next";
-
+import { ArchiveBanner } from "./Banner/ArchiveBanner";
 export default function Header(props: {
   bannerEnabled?: boolean;
   menu?: React.ReactNode;
   locales: Locale[];
   docInfo?: { type: string; version: string };
   buildType?: BuildType;
   pageUrl?: string;
+  name?: string;
+  pathConfig?: PathConfig;
 }) {
   const { language } = useI18next();
   const theme = useTheme();
@@ -77,7 +79,10 @@ export default function Header(props: {
           buildType={props.buildType}
         />
       </Toolbar>
-      {props.bannerEnabled && <Banner />}
+      {props.bannerEnabled && props.buildType !== "archive" && <Banner />}
+      {props.buildType === "archive" && (
+        <ArchiveBanner name={props.name} pathConfig={props.pathConfig} />
+      )}
     </AppBar>
   );
 }
diff --git a/src/components/Layout/MDXContent.tsx b/src/components/Layout/MDXContent.tsx
@@ -10,7 +10,6 @@ import * as MDXComponents from "components/MDXComponents";
 import {
   CustomNotice,
   MachineTranslationNotice,
-  ArchiveTiDBNotice,
 } from "components/Card/CustomNotice";
 import { PathConfig, FrontMatter, BuildType } from "shared/interface";
 import { useTotalContributors } from "components/Contributors";
@@ -63,13 +62,6 @@ export default function MDXContent(props: {
   return (
     <Container disableGutters className={className} maxWidth="lg">
       <Box className="markdown-body">
-        {buildType === "archive" && typeof name !== "undefined" && (
-          <ArchiveTiDBNotice
-            name={name}
-            pathConfig={pathConfig}
-            availIn={availIn}
-          />
-        )}
         {buildType !== "archive" && (
           <CustomNotice name={name} pathConfig={pathConfig} availIn={availIn} />
         )}
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -8,7 +8,7 @@ import "@fontsource/ibm-plex-sans";
 import theme from "theme/index";
 import Header from "components/Layout/Header";
 import Footer from "components/Layout/Footer";
-import { Locale, BuildType } from "shared/interface";
+import { Locale, BuildType, PathConfig } from "shared/interface";
 
 export default function Layout(props: {
   children?: React.ReactNode;
@@ -18,6 +18,8 @@ export default function Layout(props: {
   docInfo?: { type: string; version: string };
   buildType?: BuildType;
   pageUrl?: string;
+  name?: string;
+  pathConfig?: PathConfig;
 }) {
   return (
     <ThemeProvider theme={theme}>
@@ -29,6 +31,8 @@ export default function Layout(props: {
         docInfo={props.docInfo}
         buildType={props.buildType}
         pageUrl={props.pageUrl}
+        name={props.name}
+        pathConfig={props.pathConfig}
       />
       {props.children}
       <Footer />
diff --git a/src/templates/404Template.tsx b/src/templates/404Template.tsx
@@ -9,7 +9,7 @@ import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 
 import Layout from "components/Layout";
-import { Locale } from "shared/interface";
+import { BuildType, Locale } from "shared/interface";
 import { Page404Icon } from "components/Icons";
 import Seo from "components/Layout/Seo";
 
@@ -27,6 +27,7 @@ interface AllLocales {
 
 interface PageNotFoundTemplateProps {
   pageContext: {
+    buildType: BuildType;
     feature?: {
       banner?: boolean;
     };
@@ -35,7 +36,7 @@ interface PageNotFoundTemplateProps {
 }
 
 export default function PageNotFoundTemplate({
-  pageContext: { feature },
+  pageContext: { feature, buildType },
   data,
 }: PageNotFoundTemplateProps) {
   const pathname =
@@ -72,13 +73,14 @@ export default function PageNotFoundTemplate({
     return i18n;
   }, [language, data]);
 
-  const bannerVisible = feature?.banner && language !== Locale.ja;
+  const bannerVisible =
+    (feature?.banner && language !== Locale.ja) || buildType === "archive";
 
   return (
     <>
       <I18nextProvider i18n={i18n}>
         <I18nextContext.Provider value={{ ...context, language }}>
-          <Layout bannerEnabled={bannerVisible}>
+          <Layout bannerEnabled={bannerVisible} buildType={buildType}>
             <Seo lang={language as Locale} title="404 Not Found" noindex />
             <Container
               sx={{
@@ -123,13 +125,6 @@ export default function PageNotFoundTemplate({
                           <Trans i18nKey="doc404.searchDoc" />
                         </Typography>
                       </Typography>
-                      {/* <div className={styles.searchInput}>
-                    <SearchInput
-                      docInfo={docInfo}
-                      searchValue={searchValue}
-                      setSearchValue={handleSetSearchValue}
-                    />
-                  </div> */}
                     </>
                   )}
                 </Stack>
@@ -153,40 +148,6 @@ export default function PageNotFoundTemplate({
               </Stack>
             </Container>
           </Layout>
-          {/* <Layout is404={true}>
-          <Seo title="404 Not Found" noindex />
-          <div className={styles.container}>
-            <div className={clsx('markdown-body', styles.left)}>
-              <h1 className={clsx(styles.title)}>
-                {<Trans i18nKey="doc404.title" />}
-              </h1>
-              {['en', 'zh'].includes(language) && (
-                <>
-                  <div>{<Trans i18nKey="doc404.youMayWish" />}</div>
-                  <ul className={clsx(styles.optionsContainer)}>
-                    <li>
-                      {
-                        <Trans
-                          i18nKey="doc404.goToDocHome"
-                          components={[<Link to="/" />]}
-                        />
-                      }
-                    </li>
-                    <li>{<Trans i18nKey="doc404.searchDoc" />}</li>
-                  </ul>
-                  <div className={styles.searchInput}>
-                    <SearchInput
-                      docInfo={docInfo}
-                      searchValue={searchValue}
-                      setSearchValue={handleSetSearchValue}
-                    />
-                  </div>
-                </>
-              )}
-            </div>
-            <div className={clsx(styles.right)}></div>
-          </div>
-        </Layout> */}
         </I18nextContext.Provider>
       </I18nextProvider>
     </>
diff --git a/src/templates/DocTemplate.tsx b/src/templates/DocTemplate.tsx
@@ -91,6 +91,8 @@ export default function DocTemplate({
 
   return (
     <Layout
+      name={name}
+      pathConfig={pathConfig}
       locales={availIn.locale}
       bannerEnabled={bannerVisible}
       pageUrl={pageUrl}
