diff --git a/docs/website/src/components/NavBanner/index.scss b/docs/website/src/components/NavBanner/index.scss new file mode 100644 index 00000000000..429e3e47459 --- /dev/null +++ b/docs/website/src/components/NavBanner/index.scss @@ -0,0 +1,195 @@ +.sealos-banner-box { + position: fixed; + top: 0; + background: linear-gradient( + 90deg, + rgba(20, 46, 78, 0.3) 0%, + rgba(33, 115, 160, 0.3) 50%, + rgba(20, 46, 78, 0.3) 100% + ); + backdrop-filter: blur(187px); + width: 100%; + height: 48px; + display: flex; + justify-content: center; + align-items: center; + + color: #fff; + font-family: PingFang SC; + font-size: 16px; + font-style: normal; + font-weight: 600; + letter-spacing: 0.16px; + z-index: 99; + flex-shrink: 0; + + svg { + position: absolute; + right: 9rem; + cursor: pointer; + } +} + +.sealos-banner-btn { + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + border-radius: 8px; + background: rgba(0, 0, 0, 0.2); + padding: 0 14px; + margin-left: 24px; + position: relative; + height: 32px; + font-size: 16px; + svg { + position: absolute; + right: -8px; + bottom: -8px; + } +} + +.sealos-banner-container { + width: 590px; + height: 444px; + border-radius: 16px; + background: #0e1a28; + box-shadow: 0px 8px 29px 0px rgba(187, 196, 206, 0.25); + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 99; + .title { + height: 64px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 16px 16px 0px 0px; + background: rgba(122, 207, 255, 0.1); + + .txt { + color: #fff; + font-family: Karmilla; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 140%; + margin-left: 8px; + } + + .sealos-banner-btn-close { + cursor: pointer; + fill: #fff; + width: 32px; + height: 32px; + position: absolute; + right: 20px; + // margin-left: auto; + } + } +} + +.sealos-banner-body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 0 117px; + + color: #fff; + font-style: normal; + font-weight: 600; + line-height: 140%; + letter-spacing: 0.28px; + + .banner-title { + font-size: 28px; + margin-top: 76px; + margin-bottom: 30px; + } + + .banner__subtitle { + font-size: 18px; + } +} + +.btn { + cursor: pointer; + border-radius: 64px; + background: #479ceb; + display: flex; + padding: 12px 16px; + justify-content: center; + align-items: center; + margin-top: 46px; + width: 100%; +} + +.btn-cancel { + cursor: pointer; + margin-top: 20px; + color: rgba(255, 255, 255, 0.9); + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 20px; +} + +.sealos-banner-modal { + position: fixed; + left: 0; + top: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.48); + z-index: 99; +} + +@media screen and (max-width: 1000px) { + .sealos-banner-box { + font-size: 12px; + font-weight: 500; + + svg { + position: absolute; + right: 1rem; + } + } + + .sealos-banner-btn { + font-size: 12px; + font-weight: 500; + padding: 0 8px; + } + + .sealos-banner-container { + width: 90%; + + .title { + svg { + width: 36px; + height: 36px; + } + + .txt { + font-size: 18px; + } + } + } + + .sealos-banner-body { + padding: 0 12px; + .banner-title { + font-size: 20px; + } + + .banner__subtitle { + font-size: 14px; + } + } + + .btn { + font-size: 14px; + } +} diff --git a/docs/website/src/components/NavBanner/index.tsx b/docs/website/src/components/NavBanner/index.tsx new file mode 100644 index 00000000000..2573b9b67ef --- /dev/null +++ b/docs/website/src/components/NavBanner/index.tsx @@ -0,0 +1,47 @@ +import Translate from '@docusaurus/Translate'; +import React, { useEffect, useState } from 'react'; +import CloseIcon from '@site/static/icons/close.svg'; +import './index.scss'; + +export default function NavBanner({ + isBannerVisible = false, + setIsBannerVisible +}: { + isBannerVisible: boolean; + setIsBannerVisible: React.Dispatch>; +}) { + const closeBanner = () => { + localStorage.setItem('bannerCloseTimestamp', Date.now().toString()); + setIsBannerVisible(false); + }; + + const goDetail = () => { + window.open(`https://seaos.run`); + }; + + useEffect(() => { + const lastCloseTimestamp = +localStorage.getItem('bannerCloseTimestamp'); + if ( + window.location.hostname === 'localhost' && + (!lastCloseTimestamp || Date.now() - lastCloseTimestamp > 7 * 24 * 60 * 60 * 1000) + ) { + setIsBannerVisible(true); + } else { + setIsBannerVisible(false); + } + }, []); + + return ( + <> + {isBannerVisible && ( +
+ 如果您是国内用户，请直接访问 👉 +
+ 国内官网 +
+ +
+ )} + + ); +} diff --git a/docs/website/src/pages/components/Banner/index.scss b/docs/website/src/components/_Banner/index.scss similarity index 100% rename from docs/website/src/pages/components/Banner/index.scss rename to docs/website/src/components/_Banner/index.scss diff --git a/docs/website/src/pages/components/Banner/index.tsx b/docs/website/src/components/_Banner/index.tsx similarity index 100% rename from docs/website/src/pages/components/Banner/index.tsx rename to docs/website/src/components/_Banner/index.tsx diff --git a/docs/website/src/pages/components/Header/index.scss b/docs/website/src/pages/components/Header/index.scss index b41cf63f00f..d7a3bcb2728 100644 --- a/docs/website/src/pages/components/Header/index.scss +++ b/docs/website/src/pages/components/Header/index.scss @@ -21,7 +21,6 @@ align-items: center; justify-content: space-between; padding: 30px 0; - margin-top: 48px; .sealos-title { line-height: 140%; diff --git a/docs/website/src/pages/components/Header/index.tsx b/docs/website/src/pages/components/Header/index.tsx index 51eba57224b..92a4e0320eb 100644 --- a/docs/website/src/pages/components/Header/index.tsx +++ b/docs/website/src/pages/components/Header/index.tsx @@ -3,11 +3,12 @@ import Translate from '@docusaurus/Translate'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useIsBrowser from '@docusaurus/useIsBrowser'; import useWindow from '@site/src/hooks/useWindow'; +import NavBanner from '@site/src/components/NavBanner'; 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 VideoPlayer from '@site/src/pages/components/VideoPlayer'; import './index.scss'; const navbar = [ @@ -42,22 +43,23 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => { const [stars, setStars] = useState(10000); const isBrowser = useIsBrowser(); const { cloudUrl, bd_vid } = useWindow(); - - const i18nMap: { [key: string]: { label: string; link: string } } = { - en: { label: '中', link: '/zh-Hans/' }, - ['zh-Hans']: { label: 'En', link: '/' } - }; + const [isBannerVisible, setIsBannerVisible] = useState(false); const { - i18n: { currentLocale }, - siteConfig: { - themeConfig: { - // @ts-ignore nextLine - // navbar: { items: navbarData } - } - } + i18n: { currentLocale, defaultLocale } } = useDocusaurusContext(); + const i18nMap: { [key: string]: { label: string; link: string } } = + defaultLocale === 'en' + ? { + en: { label: '中', link: '/zh-Hans/' }, + ['zh-Hans']: { label: 'En', link: '/' } + } + : { + en: { label: '中', link: '/' }, + ['zh-Hans']: { label: 'En', link: '/en/' } + }; + useEffect(() => { const getStars = async () => { try { @@ -89,7 +91,16 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => { src={require('@site/static/img/bg-header.png').default} alt="community" /> -