From 8835beb079b748276c42b21d1f486909dfbff5f2 Mon Sep 17 00:00:00 2001 From: zhujingyang <72259332+zjy365@users.noreply.github.com> Date: Tue, 31 Oct 2023 18:40:06 +0800 Subject: [PATCH] feat:docs add private cloud page (#4215) --- docs/4.0/code.json | 3 + docs/website/.prettierrc.js | 20 ++ docs/website/docusaurus.config.js | 11 + docs/website/package.json | 6 +- docs/website/src/constants/platform.ts | 2 +- docs/website/src/css/custom.scss | 8 +- .../src/pages/components/Banner/index.scss | 5 +- .../src/pages/components/Banner/index.tsx | 22 +- .../components/Capability/index.phone.scss | 2 +- .../pages/components/Capability/index.scss | 1 - .../src/pages/components/Capability/index.tsx | 12 +- .../components/Community/index.phone.scss | 7 +- .../pages/components/Footer/index.phone.scss | 2 +- .../pages/components/Header/index.phone.scss | 2 +- .../src/pages/components/Header/index.scss | 9 +- .../src/pages/components/Header/index.tsx | 145 ++++----- .../components/Introduce/index.phone.scss | 2 +- .../src/pages/components/Introduce/index.scss | 2 +- .../src/pages/components/Introduce/index.tsx | 16 +- .../pages/components/UserBy/index.phone.scss | 2 +- .../pages/components/VideoPlayer/index.scss | 5 +- docs/website/src/pages/index.scss | 6 +- .../src/pages/pricing/advantage/index.tsx | 202 ++++++++++++ .../src/pages/pricing/header/index.scss | 277 +++++++++++++++++ .../src/pages/pricing/header/index.tsx | 154 +++++++++ docs/website/src/pages/pricing/index.scss | 111 +++++++ docs/website/src/pages/pricing/index.tsx | 31 ++ .../src/pages/pricing/overview/index.scss | 55 ++++ .../src/pages/pricing/overview/index.tsx | 232 ++++++++++++++ docs/website/src/pages/pricing/plan/index.tsx | 181 +++++++++++ .../src/pages/pricing/product/index.tsx | 149 +++++++++ docs/website/static/price/bulb.svg | 3 + docs/website/static/price/check.svg | 3 + docs/website/static/price/chevronUp.svg | 3 + docs/website/static/price/clarityCluster.svg | 14 + docs/website/static/price/cloudServer.svg | 5 + docs/website/static/price/cpu.svg | 3 + docs/website/static/price/dashed.svg | 14 + docs/website/static/price/database.svg | 5 + docs/website/static/price/disk.svg | 5 + docs/website/static/price/dottedLine.svg | 27 ++ docs/website/static/price/flow.svg | 3 + .../static/price/functionBackground.svg | 14 + docs/website/static/price/groups.svg | 3 + docs/website/static/price/launchpad.svg | 3 + docs/website/static/price/lightning.svg | 3 + docs/website/static/price/memory.svg | 4 + docs/website/static/price/money.svg | 4 + docs/website/static/price/publicCloud.svg | 5 + docs/website/static/price/queue.svg | 7 + docs/website/static/price/star.svg | 3 + docs/website/static/price/wideApps.svg | 3 + docs/website/tailwind.config.js | 29 ++ docs/website/yarn.lock | 293 +++++++++++++++++- 54 files changed, 2012 insertions(+), 126 deletions(-) create mode 100644 docs/website/.prettierrc.js create mode 100644 docs/website/src/pages/pricing/advantage/index.tsx create mode 100644 docs/website/src/pages/pricing/header/index.scss create mode 100644 docs/website/src/pages/pricing/header/index.tsx create mode 100644 docs/website/src/pages/pricing/index.scss create mode 100644 docs/website/src/pages/pricing/index.tsx create mode 100644 docs/website/src/pages/pricing/overview/index.scss create mode 100644 docs/website/src/pages/pricing/overview/index.tsx create mode 100644 docs/website/src/pages/pricing/plan/index.tsx create mode 100644 docs/website/src/pages/pricing/product/index.tsx create mode 100644 docs/website/static/price/bulb.svg create mode 100644 docs/website/static/price/check.svg create mode 100644 docs/website/static/price/chevronUp.svg create mode 100644 docs/website/static/price/clarityCluster.svg create mode 100644 docs/website/static/price/cloudServer.svg create mode 100644 docs/website/static/price/cpu.svg create mode 100644 docs/website/static/price/dashed.svg create mode 100644 docs/website/static/price/database.svg create mode 100644 docs/website/static/price/disk.svg create mode 100644 docs/website/static/price/dottedLine.svg create mode 100644 docs/website/static/price/flow.svg create mode 100644 docs/website/static/price/functionBackground.svg create mode 100644 docs/website/static/price/groups.svg create mode 100644 docs/website/static/price/launchpad.svg create mode 100644 docs/website/static/price/lightning.svg create mode 100644 docs/website/static/price/memory.svg create mode 100644 docs/website/static/price/money.svg create mode 100644 docs/website/static/price/publicCloud.svg create mode 100644 docs/website/static/price/queue.svg create mode 100644 docs/website/static/price/star.svg create mode 100644 docs/website/static/price/wideApps.svg create mode 100644 docs/website/tailwind.config.js diff --git a/docs/4.0/code.json b/docs/4.0/code.json index e92d5697a19..a00230925a2 100644 --- a/docs/4.0/code.json +++ b/docs/4.0/code.json @@ -630,5 +630,8 @@ }, "Cloud Operating System": { "message": "云操作系统: Sealos" + }, + "Pricing": { + "message": "价格" } } \ No newline at end of file diff --git a/docs/website/.prettierrc.js b/docs/website/.prettierrc.js new file mode 100644 index 00000000000..b48f2c3caef --- /dev/null +++ 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 index 6fee4e9e1d8..33aeb958bd4 100644 --- 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 index 4ca3974b1cd..0d9caa7a1b2 100644 --- 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" ] } -} +} \ No newline at end of file diff --git a/docs/website/src/constants/platform.ts b/docs/website/src/constants/platform.ts index dfc886c793e..e7fdc9c3c48 100644 --- 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 index f020ad9af1c..3be0b9662e7 100644 --- 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 index b6b2a13adc0..612a82eae96 100644 --- 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 index 713b7b8f417..67de416fd69 100644 --- 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() {
Sealos - - + xmlns="http://www.w3.org/2000/svg" + width="32" + height="33" + viewBox="0 0 32 33" + > +
diff --git a/docs/website/src/pages/components/Capability/index.phone.scss b/docs/website/src/pages/components/Capability/index.phone.scss index 9dc16f197ad..a0aa96d6862 100644 --- 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 index 11430b4b58a..cc9ae8cde73 100644 --- 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 index d5660db2518..22d9a8e1ec7 100644 --- 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: Application Management, appManagement_introduce: ( - 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. ), database: Database, database_introduce: ( - Create high-availability databases in seconds, offering support for MySQL, + Create highly available databases in seconds that support MySQL, PostgreSQL, MongoDB, and Redis. ), - serverless: Cloud Universality, + serverless: Serverless, serverless_introduce: ( - 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. ), } diff --git a/docs/website/src/pages/components/Community/index.phone.scss b/docs/website/src/pages/components/Community/index.phone.scss index c3dc0fdca3c..feb923c7be3 100644 --- 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 index 78fc7fa7cb5..a28d819dc85 100644 --- 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 index 804d9d82e61..5efb90939a4 100644 --- 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 index 1562d086ce3..ff85ddc2b10 100644 --- 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 { diff --git a/docs/website/src/pages/components/Header/index.tsx b/docs/website/src/pages/components/Header/index.tsx index 9237d6ec5e4..5e4b5ce2bff 100644 --- a/docs/website/src/pages/components/Header/index.tsx +++ b/docs/website/src/pages/components/Header/index.tsx @@ -1,79 +1,91 @@ -import Link from '@docusaurus/Link' -import Translate from '@docusaurus/Translate' -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, useState } from 'react' -import VideoPlayer from '../VideoPlayer' -import './index.scss' -import useDocusaurusContext from '@docusaurus/useDocusaurusContext' -import useIsBrowser from '@docusaurus/useIsBrowser' +import Link from '@docusaurus/Link'; +import Translate from '@docusaurus/Translate'; +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 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 = [ { key: 'docs', label: Documentation, - to: '/docs/Intro', + to: '/docs/Intro' }, { key: 'community', label: Community, - to: 'https://forum.laf.run/', + to: 'https://forum.laf.run/' + }, + { + key: 'pricing', + label: Pricing, + to: '/pricing' }, { key: 'contact', label: Contact, - to: 'https://fael3z0zfze.feishu.cn/share/base/form/shrcnesSfEK65JZaAf2W6Fwz6Ad', - }, -] + to: 'https://fael3z0zfze.feishu.cn/share/base/form/shrcnesSfEK65JZaAf2W6Fwz6Ad' + } +]; const i18nObj = { startNow: Start Now, - cloudOS: Cloud Operating System, -} + cloudOS: Cloud Operating System +}; const HomeHeader = ({ isPc }: { isPc: boolean }) => { - const [stars, setStars] = useState(10000) - const isBrowser = useIsBrowser() + 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 i18nMap: { [key: string]: { label: string; link: string } } = { en: { label: '中', link: '/zh-Hans/' }, - ['zh-Hans']: { label: 'En', link: '/' }, - } + ['zh-Hans']: { label: 'En', link: '/' } + }; const { i18n: { currentLocale }, siteConfig: { themeConfig: { // @ts-ignore nextLine - navbar: { items: navbarData }, - }, - }, - } = useDocusaurusContext() + navbar: { items: navbarData } + } + } + } = useDocusaurusContext(); useEffect(() => { const getStars = async () => { try { const { stargazers_count } = await ( await fetch('https://api.github.com/repos/labring/sealos') - ).json() - setStars(isNaN(stargazers_count) ? 11 * 1000 : stargazers_count) + ).json(); + setStars(isNaN(stargazers_count) ? 11 * 1000 : stargazers_count); } catch (error) {} - } - getStars() - }, []) + }; + getStars(); + }, []); const openSideBar = () => { - const NavbarButton: HTMLBaseElement = - document.querySelector('.navbar__toggle') + const NavbarButton: HTMLBaseElement = document.querySelector('.navbar__toggle'); const event = new MouseEvent('click', { view: window, bubbles: true, - cancelable: true, - }) - NavbarButton.dispatchEvent(event) - } + cancelable: true + }); + NavbarButton.dispatchEvent(event); + }; if (!isPc) { return ( @@ -81,11 +93,7 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {
- ) + ); } return ( @@ -147,8 +148,17 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {