feat:docs add private cloud page (#4215)

labring · Oct 31, 2023 · 8835beb · 8835beb
1 parent 47de26e
commit 8835beb
Show file tree

Hide file tree

Showing 54 changed files with 2,012 additions and 126 deletions.
diff --git a/docs/4.0/code.json b/docs/4.0/code.json
@@ -630,5 +630,8 @@
   },
   "Cloud Operating System": {
     "message": "云操作系统: Sealos"
+  },
+  "Pricing": {
+    "message": "价格"
   }
 }
diff --git a/docs/website/.prettierrc.js b/docs/website/.prettierrc.js
@@ -0,0 +1,20 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  jsxSingleQuote: false,
+  trailingComma: 'none',
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  arrowParens: 'always',
+  rangeStart: 0,
+  rangeEnd: Infinity,
+  requirePragma: false,
+  insertPragma: false,
+  proseWrap: 'preserve',
+  htmlWhitespaceSensitivity: 'css',
+  endOfLine: 'lf'
+}
diff --git a/docs/website/docusaurus.config.js b/docs/website/docusaurus.config.js
@@ -195,6 +195,17 @@ const config = {
   ],
   plugins: [
     'docusaurus-plugin-sass',
+    async function myPlugin (context, options) {
+      return {
+        name: "docusaurus-tailwindcss",
+        configurePostCss (postcssOptions) {
+          // Appends TailwindCSS and AutoPrefixer.
+          postcssOptions.plugins.push(require("tailwindcss"))
+          postcssOptions.plugins.push(require("autoprefixer"))
+          return postcssOptions
+        },
+      }
+    },
   ]
 }
 

diff --git a/docs/website/package.json b/docs/website/package.json
@@ -28,6 +28,10 @@
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "sass": "^1.62.1",
+    "@headlessui/react": "^1.7.17",
+    "autoprefixer": "^10.4.16",
+    "tailwindcss": "^3.3.3",
+    "postcss": "^8.4.31",
     "wowjs": "^1.1.3"
   },
   "devDependencies": {
@@ -48,4 +52,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/docs/website/src/constants/platform.ts b/docs/website/src/constants/platform.ts
@@ -1 +1 @@
-export const PC_MIN_WIDTH = 996
+export const PC_MIN_WIDTH = 1000;
diff --git a/docs/website/src/css/custom.scss b/docs/website/src/css/custom.scss
@@ -30,9 +30,9 @@
   border-radius: 10px;
 }
 
-::-webkit-scrollbar-thumb:hover {
-  // background-color: rgba(64, 158, 255, 0.8);
-}
+// ::-webkit-scrollbar-thumb:hover {
+// background-color: rgba(64, 158, 255, 0.8);
+// }
 
 :root {
   --ifm-color-primary: #4caaf4;
@@ -109,7 +109,7 @@ div.kernel-arch h3::before {
   transform: translateX(-10px);
 }
 
-@media screen and (max-width: 996px) {
+@media screen and (max-width: 1000px) {
   html {
     font-size: 14px;
   }

diff --git a/docs/website/src/pages/components/Banner/index.scss b/docs/website/src/pages/components/Banner/index.scss
@@ -21,6 +21,7 @@
   line-height: 140%;
   letter-spacing: 0.16px;
   z-index: 99;
+  flex-shrink: 0;
 }
 
 .sealos-banner-btn {
@@ -70,8 +71,8 @@
       line-height: 140%;
       margin-left: 8px;
     }
-    
-    .sealos-banner-btn-close{
+
+    .sealos-banner-btn-close {
       cursor: pointer;
       fill: #fff;
       width: 32px;

diff --git a/docs/website/src/pages/components/Banner/index.tsx b/docs/website/src/pages/components/Banner/index.tsx
@@ -6,8 +6,8 @@ import './index.scss';
 
 export default function Banner() {
   const [isBannerVisible, setIsBannerVisible] = useState(false);
-  const [doMain,setDoMain] = useState('')
-  
+  const [doMain, setDoMain] = useState('');
+
   const closeBanner = () => {
     setIsBannerVisible(false);
   };
@@ -17,8 +17,8 @@ export default function Banner() {
   };
 
   useEffect(() => {
-    let url = window?.location?.hostname || 'cloud.sealos.io'
-    setDoMain(url.indexOf('top') !== -1 ?'cloud.sealos.top':'cloud.sealos.io')
+    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();
@@ -46,12 +46,16 @@ export default function Banner() {
           <div className="title">
             <LogoIcon width={'42px'} height={'42px'} />
             <span className="txt">Sealos</span>
-            <svg 
-              fill='#FFF'
-              className='sealos-banner-btn-close'
+            <svg
+              fill="#FFF"
+              className="sealos-banner-btn-close"
               onClick={closeBanner}
-              xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33">
-              <path d="M16.3536 18.1531L16.0001 17.7995L15.6465 18.1531L9.11318 24.6864C8.97166 24.8279 8.79211 24.9066 8.5334 24.9066C8.27469 24.9066 8.09513 24.8279 7.95362 24.6864C7.8121 24.5449 7.7334 24.3653 7.7334 24.1066C7.7334 23.8479 7.8121 23.6684 7.95362 23.5268L14.487 16.9935L14.8405 16.64L14.487 16.2864L7.95362 9.75307C7.8121 9.61156 7.7334 9.43201 7.7334 9.17329C7.7334 8.91458 7.8121 8.73502 7.95362 8.59351C8.09513 8.452 8.27468 8.37329 8.5334 8.37329C8.79211 8.37329 8.97166 8.452 9.11318 8.59351L15.6465 15.1268L16.0001 15.4804L16.3536 15.1268L22.887 8.59351C23.0285 8.452 23.208 8.37329 23.4667 8.37329C23.7254 8.37329 23.905 8.452 24.0465 8.59351C24.188 8.73503 24.2667 8.91458 24.2667 9.17329C24.2667 9.432 24.188 9.61156 24.0465 9.75307L17.5132 16.2864L17.1596 16.64L17.5132 16.9935L24.0465 23.5268C24.188 23.6684 24.2667 23.8479 24.2667 24.1066C24.2667 24.3653 24.188 24.5449 24.0465 24.6864C23.905 24.8279 23.7254 24.9066 23.4667 24.9066C23.208 24.9066 23.0285 24.8279 22.887 24.6864L16.3536 18.1531Z"/>
+              xmlns="http://www.w3.org/2000/svg"
+              width="32"
+              height="33"
+              viewBox="0 0 32 33"
+            >
+              <path d="M16.3536 18.1531L16.0001 17.7995L15.6465 18.1531L9.11318 24.6864C8.97166 24.8279 8.79211 24.9066 8.5334 24.9066C8.27469 24.9066 8.09513 24.8279 7.95362 24.6864C7.8121 24.5449 7.7334 24.3653 7.7334 24.1066C7.7334 23.8479 7.8121 23.6684 7.95362 23.5268L14.487 16.9935L14.8405 16.64L14.487 16.2864L7.95362 9.75307C7.8121 9.61156 7.7334 9.43201 7.7334 9.17329C7.7334 8.91458 7.8121 8.73502 7.95362 8.59351C8.09513 8.452 8.27468 8.37329 8.5334 8.37329C8.79211 8.37329 8.97166 8.452 9.11318 8.59351L15.6465 15.1268L16.0001 15.4804L16.3536 15.1268L22.887 8.59351C23.0285 8.452 23.208 8.37329 23.4667 8.37329C23.7254 8.37329 23.905 8.452 24.0465 8.59351C24.188 8.73503 24.2667 8.91458 24.2667 9.17329C24.2667 9.432 24.188 9.61156 24.0465 9.75307L17.5132 16.2864L17.1596 16.64L17.5132 16.9935L24.0465 23.5268C24.188 23.6684 24.2667 23.8479 24.2667 24.1066C24.2667 24.3653 24.188 24.5449 24.0465 24.6864C23.905 24.8279 23.7254 24.9066 23.4667 24.9066C23.208 24.9066 23.0285 24.8279 22.887 24.6864L16.3536 18.1531Z" />
             </svg>
           </div>
           <div className="sealos-banner-body">

diff --git a/docs/website/src/pages/components/Capability/index.phone.scss b/docs/website/src/pages/components/Capability/index.phone.scss
@@ -1,4 +1,4 @@
-@media screen and (max-width: 996px) {
+@media screen and (max-width: 1000px) {
   .capability {
     padding: 0 16px;
     .comet-icon {

diff --git a/docs/website/src/pages/components/Capability/index.scss b/docs/website/src/pages/components/Capability/index.scss
@@ -92,7 +92,6 @@
       margin-left: 50px;
       margin-top: 50px;
       text-align: left;
-
       h4{
         height: 112px;
       }

diff --git a/docs/website/src/pages/components/Capability/index.tsx b/docs/website/src/pages/components/Capability/index.tsx
@@ -12,22 +12,22 @@ const i18nObj = {
   appMan: <Translate>Application Management</Translate>,
   appManagement_introduce: (
     <Translate>
-      Easy management and quick release of publicly accessible distributed applications 
-      in the app store.
+      Rapidly deploy any distributed application with the ability to access the
+      public network.
     </Translate>
   ),
   database: <Translate>Database</Translate>,
   database_introduce: (
     <Translate>
-      Create high-availability databases in seconds, offering support for MySQL, 
+      Create highly available databases in seconds that support MySQL,
       PostgreSQL, MongoDB, and Redis.
     </Translate>
   ),
-  serverless: <Translate>Cloud Universality</Translate>,
+  serverless: <Translate>Serverless</Translate>,
   serverless_introduce: (
     <Translate>
-      Equally effective in both public and private cloud, enabling a seamless transition of 
-      traditional applications to the cloud.
+      Serverless computing makes writing code as easy as blogging, allowing you
+      to launch and deploy your business code anytime, anywhere.
     </Translate>
   ),
 }

diff --git a/docs/website/src/pages/components/Community/index.phone.scss b/docs/website/src/pages/components/Community/index.phone.scss
@@ -1,4 +1,4 @@
-@media screen and (max-width: 996px) {
+@media screen and (max-width: 1000px) {
   .community {
     display: flex;
     justify-content: center;
@@ -32,10 +32,7 @@
       position: relative;
       border-radius: 12px;
       border: 1px solid rgba(255, 255, 255, 0.1);
-      background: var(
-        --30,
-        linear-gradient(90deg, #182941 0%, #0d3037 42.19%, #352644 97.92%)
-      );
+      background: var(--30, linear-gradient(90deg, #182941 0%, #0d3037 42.19%, #352644 97.92%));
       display: flex;
       align-items: center;
       flex-direction: column;

diff --git a/docs/website/src/pages/components/Footer/index.phone.scss b/docs/website/src/pages/components/Footer/index.phone.scss
@@ -1,4 +1,4 @@
-@media screen and (max-width: 996px) {
+@media screen and (max-width: 1000px) {
   .home-footer {
     position: relative;
     display: flex;

diff --git a/docs/website/src/pages/components/Header/index.phone.scss b/docs/website/src/pages/components/Header/index.phone.scss
@@ -1,4 +1,4 @@
-@media screen and (max-width: 996px) {
+@media screen and (max-width: 1000px) {
   .home-header {
     position: relative;
     overflow: hidden;

diff --git a/docs/website/src/pages/components/Header/index.scss b/docs/website/src/pages/components/Header/index.scss
@@ -165,7 +165,7 @@
       .txt-title {
         color: #379fff;
       }
-      @media screen and (min-width: 450px) and (max-width: 996px) {
+      @media screen and (min-width: 450px) and (max-width: 1000px) {
         padding: 0 60px;
       }
     }
@@ -180,6 +180,13 @@
   }
 }
 
+.sealos_home_header_title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
 @media screen and (max-width: 1220px) {
   .home-header {
     main {