feat:docs language-differentiated domain names

docs/4.0/code.json

@@ -636,5 +636,8 @@
   },
   "A cloud operating system based on the Kubernetes kernel": {
     "message": "以 Kubernetes 为内核的云操作系统"
+  },
+  "Explore": {
+    "message": "了解更多"
   }
 }

docs/website/docusaurus.config.js

@@ -102,6 +102,11 @@ const config = {
           to: "https://cloud.sealos.io",
           label: "Start Now"
         },
+        {
+          position: "left",
+          to: "/pricing",
+          label: "Pricing"
+        },
         {
           position: "left",
           to: "https://fael3z0zfze.feishu.cn/share/base/form/shrcnesSfEK65JZaAf2W6Fwz6Ad",

docs/website/i18n/zh-Hans/docusaurus-theme-classic/navbar.json

@@ -7,6 +7,10 @@
     "message": "商务合作",
     "description": "Navbar item with label Contact"
   },
+  "item.label.Pricing": {
+    "message": "价格",
+    "description": "Navbar item with label Contact"
+  },
   "logo.alt": {
     "message": "sealos",
     "description": "The alt text of navbar logo"
@@ -15,4 +19,4 @@
     "message": "在线使用",
     "description": "Navbar item with label Start Now"
   }
-}
+}

docs/website/src/hooks/useWindow.ts

@@ -1,24 +1,37 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 
-export default function() {
-    const isBrowser = useIsBrowser();
-    const [screenWidth, setScreenWidth] = useState(isBrowser ? document.body.clientWidth : 1440)
+export default function () {
+  const isBrowser = useIsBrowser();
+  const [screenWidth, setScreenWidth] = useState(isBrowser ? document.body.clientWidth : 1440);
+  const [currentLanguage, setCurrentLanguage] = useState(
+    isBrowser ? document.documentElement.lang : 'en'
+  );
+  const [cloudUrl, setCloudUrl] = useState('https://cloud.sealos.io');
 
-    useEffect(() => {
-        if(!isBrowser) return
-        setScreenWidth(document.body.clientWidth)
-        const updateScreenWidth = () => {
-            requestAnimationFrame(() => setScreenWidth(document?.body.clientWidth))
-        }
-        window.addEventListener('resize', updateScreenWidth)
+  useEffect(() => {
+    if (!isBrowser) return;
+    setScreenWidth(document.body.clientWidth);
+    const updateScreenWidth = () => {
+      requestAnimationFrame(() => setScreenWidth(document?.body.clientWidth));
+    };
+    window.addEventListener('resize', updateScreenWidth);
+    // handle
+    setCurrentLanguage(document.documentElement.lang);
+    setCloudUrl(
+      document.documentElement.lang === 'en'
+        ? 'https://cloud.sealos.io'
+        : 'https://cloud.sealos.top'
+    );
 
-        return () => {
-            window.removeEventListener('resize', updateScreenWidth)
-        }
-    },[isBrowser])
+    return () => {
+      window.removeEventListener('resize', updateScreenWidth);
+    };
+  }, [isBrowser]);
 
-    return {
-        screenWidth
-    }
-}
+  return {
+    screenWidth,
+    currentLanguage,
+    cloudUrl
+  };
+}

docs/website/src/pages/components/Banner/index.tsx

@@ -3,10 +3,11 @@ import DrawIcon from '@site/static/icons/draw.svg';
 import LogoIcon from '@site/static/icons/sealos.svg';
 import React, { useEffect, useState } from 'react';
 import './index.scss';
+import useWindow from '@site/src/hooks/useWindow';
 
 export default function Banner() {
   const [isBannerVisible, setIsBannerVisible] = useState(false);
-  const [doMain, setDoMain] = useState('');
+  const { screenWidth, currentLanguage, cloudUrl } = useWindow();
 
   const closeBanner = () => {
     setIsBannerVisible(false);
@@ -17,8 +18,6 @@ export default function Banner() {
   };
 
   useEffect(() => {
-    let url = window.self === window.top ? 'cloud.sealos.io' : 'cloud.sealos.top';
-    setDoMain(url);
     // Get the last display timestamp from localStorage
     const lastDisplayTimestamp = localStorage.getItem('bannerLastDisplay');
     const today = new Date().toLocaleDateString();
@@ -65,10 +64,7 @@ export default function Banner() {
             <div
               className="btn"
               onClick={() => {
-                window.open(
-                  `https://${doMain}/?openapp=system-costcenter?openRecharge=true`,
-                  '_blank'
-                );
+                window.open(`${cloudUrl}/?openapp=system-costcenter?openRecharge=true`, '_blank');
                 closeBanner();
               }}
             >

docs/website/src/pages/components/Capability/index.tsx

@@ -1,39 +1,42 @@
-import React, { useLayoutEffect } from 'react'
-import CometIcon from '../Comet'
-import ApplaunchpadIcon from '@site/static/icons/applaunchpad.svg'
-import ServerlessIcon from '@site/static/icons/serverless.svg'
-import DataBaseIcon from '@site/static/icons/database.svg'
-import useIsBrowser from '@docusaurus/useIsBrowser'
-import './index.scss'
-import Translate from '@docusaurus/Translate'
+import Translate from '@docusaurus/Translate';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import useWindow from '@site/src/hooks/useWindow';
+import ApplaunchpadIcon from '@site/static/icons/applaunchpad.svg';
+import DataBaseIcon from '@site/static/icons/database.svg';
+import ServerlessIcon from '@site/static/icons/serverless.svg';
+import React, { useLayoutEffect } from 'react';
+import CometIcon from '../Comet';
+import './index.scss';
 
 const i18nObj = {
   capability: <Translate>The Capabilities of Sealos</Translate>,
   appMan: <Translate>Application Management</Translate>,
   appManagement_introduce: (
     <Translate>
-      Rapidly deploy any distributed application with the ability to access the
-      public network.
+      Easy management and quick release of publicly accessible distributed applications in the app
+      store.
     </Translate>
   ),
   database: <Translate>Database</Translate>,
   database_introduce: (
     <Translate>
-      Create highly available databases in seconds that support MySQL,
-      PostgreSQL, MongoDB, and Redis.
+      Create high-availability databases in seconds, offering support for MySQL, PostgreSQL,
+      MongoDB, and Redis.
     </Translate>
   ),
-  serverless: <Translate>Serverless</Translate>,
+  serverless: <Translate>Cloud Universality</Translate>,
   serverless_introduce: (
     <Translate>
-      Serverless computing makes writing code as easy as blogging, allowing you
-      to launch and deploy your business code anytime, anywhere.
+      Equally effective in both public and private cloud, enabling a seamless transition of
+      traditional applications to the cloud.
     </Translate>
   ),
-}
+  Explore: <Translate>Explore</Translate>
+};
 
 const Capability = ({ isPc }: { isPc: boolean }) => {
-  const isBrowser = useIsBrowser()
+  const isBrowser = useIsBrowser();
+  const { screenWidth, currentLanguage, cloudUrl } = useWindow();
 
   useLayoutEffect(() => {
     // @ts-ignore nextline
@@ -44,10 +47,10 @@ const Capability = ({ isPc }: { isPc: boolean }) => {
         animateClass: 'animate__fadeIn',
         offset: 0,
         mobile: false,
-        live: false,
-      }).init()
+        live: false
+      }).init();
     }
-  }, [isBrowser])
+  }, [isBrowser]);
 
   if (!isPc) {
     return (
@@ -63,19 +66,14 @@ const Capability = ({ isPc }: { isPc: boolean }) => {
             </div>
             <h3> {i18nObj.appMan} </h3>
             <h4>{i18nObj.appManagement_introduce}</h4>
-            <a
-              href="https://cloud.sealos.io/?openapp=system-applaunchpad%3F"
-              target="_black">
-              Explore {'>'}
+            <a href={`${cloudUrl}/?openapp=system-applaunchpad%3F`} target="_black">
+              {i18nObj.Explore} {'>'}
             </a>
           </div>
           <img
             draggable="false"
             className="app-management-img"
-            src={
-              require('@site/static/illustrations/app-launchpad-detail.png')
-                .default
-            }
+            src={require('@site/static/illustrations/app-launchpad-detail.png').default}
             alt="app-management"
           />
         </div>
@@ -86,18 +84,13 @@ const Capability = ({ isPc }: { isPc: boolean }) => {
           </div>
           <div className="application-title">{i18nObj.database} </div>
           <div className="application-text">{i18nObj.database_introduce}</div>
-          <a
-            href="https://cloud.sealos.io/?openapp=system-dbprovider%3F"
-            target="_black">
-            Explore {'>'}
+          <a href={`${cloudUrl}/?openapp=system-dbprovider%3F`} target="_black">
+            {i18nObj.Explore} {'>'}
           </a>
           <img
             draggable="false"
             className="database-img"
-            src={
-              require('@site/static/illustrations/capability-dabase.png')
-                .default
-            }
+            src={require('@site/static/illustrations/capability-dabase.png').default}
             alt="app-management"
           />
         </div>
@@ -110,13 +103,13 @@ const Capability = ({ isPc }: { isPc: boolean }) => {
           <div className="application-text">{i18nObj.serverless_introduce}</div>
           <a
             className="application-link"
-            href="https://github.com/labring/laf"
-            target="_black">
-            Explore {'>'}
+            href={currentLanguage === 'en' ? '/pricing' : '/zh-Hans/pricing'}
+          >
+            {i18nObj.Explore} {'>'}
           </a>
         </div>
       </div>
-    )
+    );
   }
 
   return (
@@ -132,19 +125,14 @@ const Capability = ({ isPc }: { isPc: boolean }) => {
           </div>
           <h3> {i18nObj.appMan} </h3>
           <h4>{i18nObj.appManagement_introduce}</h4>
-          <a
-            href="https://cloud.sealos.io/?openapp=system-applaunchpad%3F"
-            target="_black">
-            Explore {'>'}
+          <a href={`${cloudUrl}/?openapp=system-applaunchpad%3F`} target="_black">
+            {i18nObj.Explore} {'>'}
           </a>
         </div>
         <img
           draggable="false"
           className="app-management-img"
-          src={
-            require('@site/static/illustrations/app-launchpad-detail.png')
-              .default
-          }
+          src={require('@site/static/illustrations/app-launchpad-detail.png').default}
           alt="app-management"
         />
       </div>
@@ -155,18 +143,13 @@ const Capability = ({ isPc }: { isPc: boolean }) => {
           </div>
           <div className="application-title">{i18nObj.database}</div>
           <div className="application-text">{i18nObj.database_introduce}</div>
-          <a
-            href="https://cloud.sealos.io/?openapp=system-dbprovider%3F"
-            target="_black">
-            Explore {'>'}
+          <a href={`${cloudUrl}/?openapp=system-dbprovider%3F`} target="_black">
+            {i18nObj.Explore} {'>'}
           </a>
           <img
             draggable="false"
             className="database-img"
-            src={
-              require('@site/static/illustrations/capability-dabase.png')
-                .default
-            }
+            src={require('@site/static/illustrations/capability-dabase.png').default}
             alt="app-management"
           />
         </div>
@@ -178,14 +161,14 @@ const Capability = ({ isPc }: { isPc: boolean }) => {
           <div className="application-text">{i18nObj.serverless_introduce}</div>
           <a
             className="application-link"
-            href="https://github.com/labring/laf"
-            target="_black">
-            Explore {'>'}
+            href={currentLanguage === 'en' ? '/pricing' : '/zh-Hans/pricing'}
+          >
+            {i18nObj.Explore} {'>'}
           </a>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default React.memo(Capability)
+export default React.memo(Capability);

docs/website/src/pages/components/Header/index.tsx

@@ -1,14 +1,15 @@
 import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import useWindow from '@site/src/hooks/useWindow';
 import GithubIcon from '@site/static/icons/github.svg';
 import MeunIcon from '@site/static/icons/meun.svg';
 import LogoIcon from '@site/static/icons/sealos.svg';
-import React, { useEffect, useMemo, useState } from 'react';
+import HeaderSvg from '@site/static/illustrations/bg-header.svg';
+import React, { useEffect, useState } from 'react';
 import VideoPlayer from '../VideoPlayer';
 import './index.scss';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useIsBrowser from '@docusaurus/useIsBrowser';
-import HeaderSvg from '@site/static/illustrations/bg-header.svg';
 
 const navbar = [
   {
@@ -41,14 +42,7 @@ const i18nObj = {
 const HomeHeader = ({ isPc }: { isPc: boolean }) => {
   const [stars, setStars] = useState(10000);
   const isBrowser = useIsBrowser();
-  const [cloudUrl, setCloudurl] = useState('https://cloud.sealos.io');
-  useEffect(() => {
-    if (!!window) {
-      setCloudurl(
-        window.self === window.top ? 'https://cloud.sealos.io' : 'https://cloud.sealos.top'
-      );
-    }
-  }, []);
+  const { cloudUrl } = useWindow();
 
   const i18nMap: { [key: string]: { label: string; link: string } } = {
     en: { label: '中', link: '/zh-Hans/' },
@@ -60,7 +54,7 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {
     siteConfig: {
       themeConfig: {
         // @ts-ignore nextLine
-        navbar: { items: navbarData }
+        // navbar: { items: navbarData }
       }
     }
   } = useDocusaurusContext();

docs/website/src/pages/components/Introduce/index.phone.scss

@@ -113,13 +113,13 @@
       }
       .tag2 {
         @extend .tag;
-        margin-top: 74px;
+        margin-top: 90px;
         width: fit-content;
         color: #8fe3de;
       }
       .tag3 {
         @extend .tag;
-        margin-top: 44px;
+        margin-top: 80px;
         color: #aa9fec;
       }