From 27b000c83103a2d7d835c8cc5b97ef4a04151a01 Mon Sep 17 00:00:00 2001
From: zhujingyang <72259332+zjy365@users.noreply.github.com>
Date: Thu, 14 Dec 2023 21:55:48 +0800
Subject: [PATCH] feat:docs banner (#4415)
---
docs/website/docusaurus.config.js | 29 +++
.../src/components/NavBanner/index.scss | 195 ------------------
.../src/components/NavBanner/index.tsx | 47 -----
.../website/src/components/_Banner/index.scss | 177 ----------------
docs/website/src/components/_Banner/index.tsx | 84 --------
docs/website/src/css/custom.scss | 67 ++++++
.../src/pages/components/Header/index.tsx | 24 +--
docs/website/src/pages/index.scss | 21 ++
.../src/pages/self-hosting/header/index.tsx | 24 +--
docs/website/static/global.js | 24 ++-
10 files changed, 144 insertions(+), 548 deletions(-)
delete mode 100644 docs/website/src/components/NavBanner/index.scss
delete mode 100644 docs/website/src/components/NavBanner/index.tsx
delete mode 100644 docs/website/src/components/_Banner/index.scss
delete mode 100644 docs/website/src/components/_Banner/index.tsx
diff --git a/docs/website/docusaurus.config.js b/docs/website/docusaurus.config.js
index d5b0d89049d..581ceaccd11 100644
--- a/docs/website/docusaurus.config.js
+++ b/docs/website/docusaurus.config.js
@@ -1,6 +1,7 @@
require('dotenv').config()
const generateAlgoliKey = () => "ce5b8e1e4d0d35ff587caf75ac404df4"
+const isChinese = process.env.SEALOS_LANG === "zh-Hans"
/** @type {import('@docusaurus/types').Config} */
const config = {
@@ -59,6 +60,34 @@ const config = {
themeConfig: { // @type {import('@docusaurus/preset-classic').ThemeConfig}
metadata: [{ name: 'title', content: 'Sealos by 环界云' }],
+ ...(!isChinese && {
+ announcementBar: {
+ id: 'sealos_tip',
+ content: `
+
+
如果您是国内用户,请直接访问 👉
+
+ 国内官网
+
+
+
+ `,
+ isCloseable: true,
+ }
+ }),
algolia: {
// Algolia 提供的应用 ID
appId: "SLTSB7B9Y0",
diff --git a/docs/website/src/components/NavBanner/index.scss b/docs/website/src/components/NavBanner/index.scss
deleted file mode 100644
index 429e3e47459..00000000000
--- a/docs/website/src/components/NavBanner/index.scss
+++ /dev/null
@@ -1,195 +0,0 @@
-.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
deleted file mode 100644
index 2d3098b66f5..00000000000
--- a/docs/website/src/components/NavBanner/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-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://sealos.run`);
- };
-
- useEffect(() => {
- const lastCloseTimestamp = +localStorage.getItem('bannerCloseTimestamp');
- if (
- window.location.hostname === 'sealos.io' &&
- (!lastCloseTimestamp || Date.now() - lastCloseTimestamp > 7 * 24 * 60 * 60 * 1000)
- ) {
- setIsBannerVisible(true);
- } else {
- setIsBannerVisible(false);
- }
- }, []);
-
- return (
- <>
- {isBannerVisible && (
-
-
如果您是国内用户,请直接访问 👉
-
- 国内官网
-
-
-
- )}
- >
- );
-}
diff --git a/docs/website/src/components/_Banner/index.scss b/docs/website/src/components/_Banner/index.scss
deleted file mode 100644
index 1bba583c14c..00000000000
--- a/docs/website/src/components/_Banner/index.scss
+++ /dev/null
@@ -1,177 +0,0 @@
-.sealos-banner-box {
- position: fixed;
- 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;
-}
-
-.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;
- width: 120px;
- height: 32px;
- 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;
- }
-
- .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/_Banner/index.tsx b/docs/website/src/components/_Banner/index.tsx
deleted file mode 100644
index 03fb5b12edc..00000000000
--- a/docs/website/src/components/_Banner/index.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import Translate from '@docusaurus/Translate';
-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 { cloudUrl, bd_vid } = useWindow();
-
- const closeBanner = () => {
- setIsBannerVisible(false);
- };
-
- const goDetailFeishu = () => {
- window.open(`https://fael3z0zfze.feishu.cn/docx/N6C0dl2szoxeX8xtIcAcKSXRn8e`, '_blank');
- };
-
- useEffect(() => {
- // Get the last display timestamp from localStorage
- const lastDisplayTimestamp = localStorage.getItem('bannerLastDisplay');
- const today = new Date().toLocaleDateString();
-
- // Check if the banner has not been displayed today
- if (!lastDisplayTimestamp || lastDisplayTimestamp !== today) {
- setIsBannerVisible(true);
- // Store the current date in localStorage
- localStorage.setItem('bannerLastDisplay', today);
- }
- }, []);
-
- return (
- <>
-
-
🎉 10.24 双十一双节降临!充值优惠限时开启,多充多送还有精美周边!
-
- 活动详情
-
-
-
- {isBannerVisible && }
- {isBannerVisible && (
-
-
-
-
🎉 10.24 双十一双节降临!
-
充值优惠限时开启
-
多充多送还有精美周边!
-
{
- window.open(
- `${cloudUrl}/?bd_vid=${bd_vid}&openapp=system-costcenter?openRecharge=true`,
- '_blank'
- );
- closeBanner();
- }}
- >
- 立即参加
-
-
- 我再想想
-
-
-
- )}
- >
- );
-}
diff --git a/docs/website/src/css/custom.scss b/docs/website/src/css/custom.scss
index 3be0b9662e7..07bb3ca384d 100644
--- a/docs/website/src/css/custom.scss
+++ b/docs/website/src/css/custom.scss
@@ -120,3 +120,70 @@ div.kernel-arch h3::before {
[data-theme='dark'] img[src$='#gh-light-mode-only'] {
display: none;
}
+
+.sealos-banner-box {
+ 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;
+ }
+}
+
+@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;
+ }
+}
diff --git a/docs/website/src/pages/components/Header/index.tsx b/docs/website/src/pages/components/Header/index.tsx
index 25dc0e0297d..d85e2a66ae1 100644
--- a/docs/website/src/pages/components/Header/index.tsx
+++ b/docs/website/src/pages/components/Header/index.tsx
@@ -3,7 +3,6 @@ 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';
@@ -48,7 +47,6 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {
const [stars, setStars] = useState(10000);
const isBrowser = useIsBrowser();
const { cloudUrl, bd_vid } = useWindow();
- const [isBannerVisible, setIsBannerVisible] = useState(false);
const {
i18n: { currentLocale, defaultLocale }
@@ -96,16 +94,7 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {
src={require('@site/static/img/bg-header.png').default}
alt="community"
/>
-
-