Add ZH Pages

.eslintrc.js

@@ -101,5 +101,11 @@ module.exports = {
         "no-param-reassign": OFF,
       },
     },
+    {
+      files: ["src/components/AppComponent.tsx"],
+      rules: {
+        "simple-import-sort/imports": OFF,
+      },
+    },
   ],
 };

next.config.js

@@ -57,7 +57,7 @@ const baseNextConfig = {
         protocol: "https",
         hostname: "images.ctfassets.net", // contentful images
         port: "",
-        pathname: "/jmvpciyouqsr/**", // production space id
+        pathname: "/**",
       },
       {
         protocol: "http",

src/components/AppComponent.tsx

@@ -1,12 +1,16 @@
+import React from "react";
 import { CacheProvider, EmotionCache } from "@emotion/react";
 import { ThemeProvider } from "@mui/material/styles";
 import { compose } from "@reduxjs/toolkit";
 import type { AppProps } from "next/app";
+import Link from "next/link";
+import { useRouter } from "next/router";
 import Script from "next/script";
-import React from "react";
 
 import { HeadProgressBar, Layout } from "~/components/shared";
+import { ClientOnlyPortal } from "~/components/shared/components/ClientOnlyPortal";
 import { environment } from "~/env.cjs";
+import { basePath } from "~/lib/app.constants";
 import { useAppDispatch, wrapper } from "~/lib/app.store";
 import { createEmotionCache } from "~/lib/helpers/createEmotionCache";
 import { useHydrateTheme } from "~/lib/theme/useHydrateTheme";
@@ -19,6 +23,65 @@ const textTargetTags = ["INPUT", "TEXTAREA"];
 
 export const getIsTextTarget = (target: any) => target?.nodeName && textTargetTags.includes(target.nodeName);
 
+const LanguageSwitcher: React.FC = () => {
+  const router = useRouter();
+  const rawPath = router.asPath || "/";
+
+  let normalized = rawPath;
+  if (basePath && normalized.startsWith(basePath)) {
+    normalized = normalized.slice(basePath.length) || "/";
+  }
+
+  const [pathAndQuery, hash] = normalized.split("#", 2);
+  const [rawPathname, search] = pathAndQuery.split("?", 2);
+
+  let pathname = rawPathname || "/";
+  if (!pathname.startsWith("/")) pathname = `/${pathname}`;
+
+  const isChinese = pathname === "/zh" || pathname.startsWith("/zh/");
+
+  let englishPathname = pathname;
+  let chinesePathname = pathname;
+
+  if (isChinese) {
+    englishPathname = pathname.replace(/^\/zh/, "") || "/";
+  } else {
+    chinesePathname = pathname === "/" ? "/zh" : `/zh${pathname}`;
+  }
+
+  const targetPathname = isChinese ? englishPathname : chinesePathname;
+
+  let target = targetPathname || "/";
+  if (search) target += `?${search}`;
+  if (hash) target += `#${hash}`;
+
+  const label = isChinese ? "English" : "中文";
+
+  const linkClasses =
+    "inline-flex items-center justify-center rounded-full border border-grey-200 dark:border-grey-600 px-3 py-1.5 text-sm font-medium text-grey-500 hover:text-black hover:border-grey-300 dark:text-grey-200 dark:hover:text-white transition-colors";
+
+  const renderLink = (additionalClasses?: string) => (
+    <Link
+      key={additionalClasses ?? "default"}
+      href={target}
+      prefetch={false}
+      className={`${linkClasses} ${additionalClasses ?? ""}`}
+    >
+      {label}
+    </Link>
+  );
+
+  return (
+    <>
+      <ClientOnlyPortal selector=".nextra-nav-container nav">
+        <div className="hidden sm:flex items-center gap-3 ml-4">{renderLink()}</div>
+      </ClientOnlyPortal>
+
+      <ClientOnlyPortal selector="#docs-mobile-language-switcher">{renderLink("sm:hidden")}</ClientOnlyPortal>
+    </>
+  );
+};
+
 const App = ({ Component, pageProps, ...rest }: AppProps & { emotionCache: EmotionCache }) => {
   const { emotionCache = clientSideEmotionCache, router } = rest;
 
@@ -74,6 +137,7 @@ const App = ({ Component, pageProps, ...rest }: AppProps & { emotionCache: Emoti
           <HeadProgressBar />
 
           <Layout>
+            <LanguageSwitcher />
             <Component {...pageProps} />
           </Layout>
         </ThemeProvider>

src/components/Docs/components/Fees.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-array-index-key */
-// @ts-ignore
 import { getFees } from "@zetachain/toolkit/query";
 import { useEffect, useMemo, useState } from "react";
 

src/components/shared/components/Hero.tsx

@@ -55,46 +55,47 @@ export const Hero: React.FC = () => {
     if (!currentDirectory) return {};
 
     const { frontMatter, meta } = currentDirectory;
+    const metaFrontMatter = (meta?.frontMatter as Record<string, unknown>) || {};
 
     const title = frontMatter?.title ? String(frontMatter.title) : meta?.title ? String(meta.title) : undefined;
 
-    const description = frontMatter?.description
-      ? String(frontMatter.description)
-      : meta?.description
-      ? String(meta.description)
-      : undefined;
-
-    const readTime = frontMatter?.readTime
-      ? String(frontMatter.readTime)
-      : meta?.readTime
-      ? String(meta.readTime)
-      : undefined;
-
-    const readType = frontMatter?.readType
-      ? String(frontMatter.readType)
-      : meta?.readType
-      ? String(meta.readType)
-      : undefined;
-
-    const imgUrl = frontMatter?.heroImgUrl
-      ? String(frontMatter.heroImgUrl)
-      : meta?.heroImgUrl
-      ? String(meta.heroImgUrl)
-      : undefined;
-
-    const imgWidth = frontMatter?.heroImgWidth
-      ? Number(frontMatter.heroImgWidth)
-      : meta?.heroImgWidth
-      ? Number(meta.heroImgWidth)
-      : undefined;
+    const description =
+      frontMatter?.description ??
+      (metaFrontMatter.description as string | undefined) ??
+      (meta?.description ? String(meta.description) : undefined);
+    const formattedDescription = description ? String(description) : undefined;
+
+    const readTimeValue =
+      frontMatter?.readTime ??
+      (metaFrontMatter.readTime as string | undefined) ??
+      (meta?.readTime ? String(meta.readTime) : undefined);
+    const formattedReadTime = readTimeValue ? String(readTimeValue) : undefined;
+
+    const readTypeValue =
+      frontMatter?.readType ??
+      (metaFrontMatter.readType as string | undefined) ??
+      (meta?.readType ? String(meta.readType) : undefined);
+    const formattedReadType = readTypeValue ? String(readTypeValue) : undefined;
+
+    const heroImgUrl =
+      frontMatter?.heroImgUrl ??
+      (metaFrontMatter.heroImgUrl as string | undefined) ??
+      (meta?.heroImgUrl ? String(meta.heroImgUrl) : undefined);
+    const formattedImgUrl = heroImgUrl ? String(heroImgUrl) : undefined;
+
+    const heroImgWidth =
+      frontMatter?.heroImgWidth ??
+      (metaFrontMatter.heroImgWidth as number | undefined) ??
+      (meta?.heroImgWidth ? Number(meta.heroImgWidth) : undefined);
+    const formattedImgWidth = heroImgWidth ? Number(heroImgWidth) : undefined;
 
     return {
       title,
-      description,
-      readTime,
-      readType,
-      imgUrl,
-      imgWidth,
+      description: formattedDescription,
+      readTime: formattedReadTime,
+      readType: formattedReadType,
+      imgUrl: formattedImgUrl,
+      imgWidth: formattedImgWidth,
     };
   }, [currentDirectory]);
 

src/components/shared/components/Layout/components/Header.tsx

@@ -64,11 +64,14 @@ export const Header: React.FC<{
             <IconZetaDocsLogo className="text-green-700 dark:text-grey-50" />
           </Link>
 
-          <MobileMenuButton
-            className="mt-1.5 text-black dark:text-grey-50"
-            isOpen={isLeftDrawerOpen}
-            toggle={toggleDrawerOpen}
-          />
+          <div className="flex items-center gap-3">
+            <div id="docs-mobile-language-switcher" className="flex" />
+            <MobileMenuButton
+              className="mt-1.5 text-black dark:text-grey-50"
+              isOpen={isLeftDrawerOpen}
+              toggle={toggleDrawerOpen}
+            />
+          </div>
         </div>
       </Toolbar>
     </>

src/lib/helpers/nextra.ts

@@ -1,22 +1,66 @@
 import { startCase, toLower } from "lodash-es";
 import { Page } from "nextra";
 
+const getMetaFrontMatter = (page: Page) => {
+  const meta = page.meta as Record<string, any> | undefined;
+  if (!meta) return undefined;
+
+  const frontMatter = meta.frontMatter as Record<string, any> | undefined;
+  return { meta, frontMatter };
+};
+
 export const getPageTitle = (page: Page) =>
   page.meta?.title ? String(page.meta.title) : startCase(toLower(page.name));
 
-export const getPageDescription = (page: Page) => (page.meta?.description ? String(page.meta.description) : undefined);
+export const getPageDescription = (page: Page) => {
+  const refs = getMetaFrontMatter(page);
+  if (!refs) return undefined;
 
-export const getPageReadTime = (page: Page) => (page.meta?.readTime ? String(page.meta.readTime) : undefined);
+  const { meta, frontMatter } = refs;
+  if (meta.description) return String(meta.description);
+  if (frontMatter?.description) return String(frontMatter.description);
+  return undefined;
+};
+
+export const getPageReadTime = (page: Page) => {
+  const refs = getMetaFrontMatter(page);
+  if (!refs) return undefined;
+
+  const { meta, frontMatter } = refs;
+  if (meta.readTime) return String(meta.readTime);
+  if (frontMatter?.readTime) return String(frontMatter.readTime);
+  return undefined;
+};
 
-export const getPageReadType = (page: Page) => (page.meta?.readType ? String(page.meta.readType) : undefined);
+export const getPageReadType = (page: Page) => {
+  const refs = getMetaFrontMatter(page);
+  if (!refs) return undefined;
+
+  const { meta, frontMatter } = refs;
+  if (meta.readType) return String(meta.readType);
+  if (frontMatter?.readType) return String(frontMatter.readType);
+  return undefined;
+};
 
 export type NavigationSectionVariant = "default" | "fancy";
 
-export const getPageNavigationSectionVariant = (page: Page): NavigationSectionVariant =>
-  page.meta?.variant && page.meta?.variant === "fancy" ? "fancy" : "default";
+export const getPageNavigationSectionVariant = (page: Page): NavigationSectionVariant => {
+  const refs = getMetaFrontMatter(page);
+  if (!refs) return "default";
+
+  const { meta, frontMatter } = refs;
+  const variant = meta.variant ?? frontMatter?.variant;
+  return variant === "fancy" ? "fancy" : "default";
+};
+
+export const getPageNavigationSectionImage = (page: Page) => {
+  const refs = getMetaFrontMatter(page);
+  if (!refs) return undefined;
 
-export const getPageNavigationSectionImage = (page: Page) =>
-  page.meta?.navImgUrl ? String(page.meta.navImgUrl) : undefined;
+  const { meta, frontMatter } = refs;
+  const navImgUrl = meta.navImgUrl ?? frontMatter?.navImgUrl;
+  return navImgUrl ? String(navImgUrl) : undefined;
+};
 
 export const getRecursivelyInnerMdxPages = ({ pages, maxPages }: { pages: Page[]; maxPages: number }): Page[] => {
   const mdxPages: Page[] = [];

src/pages/_meta.json

@@ -1,32 +1,46 @@
 {
   "index": {
     "title": "ZetaChain Documentation",
-    "description": "ZetaChain is the only decentralized blockchain and smart contract platform built for omnichain interoperability."
+    "frontMatter": {
+      "description": "ZetaChain is the only decentralized blockchain and smart contract platform built for omnichain interoperability."
+    }
   },
   "start": {
     "title": "Get Started",
-    "description": "Start building on ZetaChain."
+    "frontMatter": {
+      "description": "Start building on ZetaChain."
+    }
   },
   "developers": {
     "title": "Build",
-    "description": "Learn how to build on ZetaChain."
+    "frontMatter": {
+      "description": "Learn how to build on ZetaChain."
+    }
   },
   "reference": {
     "title": "Tools",
-    "description": "Useful articles to help get you up and running."
+    "frontMatter": {
+      "description": "Useful articles to help get you up and running."
+    }
   },
   "nodes": {
     "title": "Run a Node",
-    "description": "Setup and run a ZetaChain node.",
-    "variant": "fancy",
-    "navImgUrl": "/img/pages/operate.svg"
+    "frontMatter": {
+      "description": "Setup and run a ZetaChain node.",
+      "variant": "fancy",
+      "navImgUrl": "/img/pages/operate.svg"
+    }
   },
   "users": {
     "title": "Using our Products",
-    "description": "Start using our many products."
+    "frontMatter": {
+      "description": "Start using our many products."
+    }
   },
   "about": {
     "title": "About",
-    "description": "All about ZetaChain, the foundational, public blockchain that enables omnichain, generic smart contracts and messaging between any blockchain."
+    "frontMatter": {
+      "description": "All about ZetaChain, the foundational, public blockchain that enables omnichain, generic smart contracts and messaging between any blockchain."
+    }
   }
-}
+}

src/pages/about/_meta.json

@@ -1,20 +1,28 @@
 {
   "index": {
     "title": "About",
-    "description": "All about ZetaChain, the foundational, public blockchain that enables omnichain, generic smart contracts and messaging between any blockchain.",
-    "readTime": "10 min"
+    "frontMatter": {
+      "description": "All about ZetaChain, the foundational, public blockchain that enables omnichain, generic smart contracts and messaging between any blockchain.",
+      "readTime": "10 min"
+    }
   },
   "token-utility": {
     "title": "About ZETA Token",
-    "description": "Understand more about the token underpinning ZetaChain",
-    "readTime": "5 min"
+    "frontMatter": {
+      "description": "Understand more about the token underpinning ZetaChain",
+      "readTime": "5 min"
+    }
   },
   "services": {
     "title": "Apps & Services",
-    "description": "Discover useful developer-focused applications and services to enhance your development process on ZetaChain."
+    "frontMatter": {
+      "description": "Discover useful developer-focused applications and services to enhance your development process on ZetaChain."
+    }
   },
   "info": {
     "title": "More Info",
-    "description": "More information about ZetaChain."
+    "frontMatter": {
+      "description": "More information about ZetaChain."
+    }
   }
-}
+}