From 81aafead020083db935964025eb17846ae5723f8 Mon Sep 17 00:00:00 2001
From: jingyang <3161362058@qq.com>
Date: Mon, 19 Aug 2024 15:30:57 +0800
Subject: [PATCH] feat(docs): add SEM keywords parameter

---
 docs/website/src/hooks/useWindow.ts           | 16 ++++++++++++----
 .../src/pages/components/Capability/index.tsx | 19 ++++++++++++++-----
 .../src/pages/components/Header/index.tsx     | 14 +++++++++++---
 docs/website/src/pages/index.tsx              | 13 +++++++++++--
 .../src/pages/self-hosting/header/index.tsx   |  4 ++--
 docs/website/src/pages/self-hosting/index.tsx | 13 +++++++++++--
 .../src/pages/self-hosting/product/index.tsx  | 11 +++++++----
 7 files changed, 68 insertions(+), 22 deletions(-)

diff --git a/docs/website/src/hooks/useWindow.ts b/docs/website/src/hooks/useWindow.ts
index ba09a6260bf..45cba0d185f 100644
--- a/docs/website/src/hooks/useWindow.ts
+++ b/docs/website/src/hooks/useWindow.ts
@@ -1,6 +1,11 @@
 import { useEffect, useState } from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 
+interface SemParams {
+  bd_vid: string;
+  keywords: string;
+}
+
 export default function useWindow() {
   const isBrowser = useIsBrowser();
   const [screenWidth, setScreenWidth] = useState(isBrowser ? document.body.clientWidth : 1440);
@@ -8,12 +13,15 @@ export default function useWindow() {
     isBrowser ? document.documentElement.lang : 'en'
   );
   const [cloudUrl, setCloudUrl] = useState('https://cloud.sealos.io');
-  const [bd_vid, setBdId] = useState('');
+  const [semParams, setSemParams] = useState<SemParams>({ bd_vid: '', keywords: '' });
 
   useEffect(() => {
     if (!isBrowser) return;
-    let bd_vid = sessionStorage.getItem('bd_vid');
-    if (bd_vid) setBdId(bd_vid);
+    const storedParams = sessionStorage.getItem('sealos_sem');
+    if (storedParams) {
+      const parsedParams = JSON.parse(storedParams);
+      setSemParams((prevParams) => ({ ...prevParams, ...parsedParams }));
+    }
   }, [isBrowser]);
 
   useEffect(() => {
@@ -41,6 +49,6 @@ export default function useWindow() {
     screenWidth,
     currentLanguage,
     cloudUrl,
-    bd_vid
+    semParams
   };
 }
diff --git a/docs/website/src/pages/components/Capability/index.tsx b/docs/website/src/pages/components/Capability/index.tsx
index 26e05fc3c2b..093e275f718 100644
--- a/docs/website/src/pages/components/Capability/index.tsx
+++ b/docs/website/src/pages/components/Capability/index.tsx
@@ -36,7 +36,7 @@ const i18nObj = {
 
 const Capability = ({ isPc }: { isPc: boolean }) => {
   const isBrowser = useIsBrowser();
-  const { screenWidth, currentLanguage, cloudUrl, bd_vid } = useWindow();
+  const { screenWidth, currentLanguage, cloudUrl, semParams } = useWindow();
 
   useLayoutEffect(() => {
     // @ts-ignore nextline
@@ -67,7 +67,7 @@ const Capability = ({ isPc }: { isPc: boolean }) => {
             <h3> {i18nObj.appMan} </h3>
             <h4>{i18nObj.appManagement_introduce}</h4>
             <a
-              href={`${cloudUrl}/?bd_vid=${bd_vid}&openapp=system-applaunchpad%3F`}
+              href={`${cloudUrl}/?bd_vid=${semParams.bd_vid}&k=${semParams.keywords}&openapp=system-applaunchpad%3F`}
               target="_black"
             >
               {i18nObj.Explore} {'>'}
@@ -87,7 +87,10 @@ const Capability = ({ isPc }: { isPc: boolean }) => {
           </div>
           <div className="application-title">{i18nObj.database} </div>
           <div className="application-text">{i18nObj.database_introduce}</div>
-          <a href={`${cloudUrl}/?bd_vid=${bd_vid}&openapp=system-dbprovider%3F`} target="_black">
+          <a
+            href={`${cloudUrl}/?bd_vid=${semParams.bd_vid}&k=${semParams.keywords}&openapp=system-dbprovider%3F`}
+            target="_black"
+          >
             {i18nObj.Explore} {'>'}
           </a>
           <img
@@ -128,7 +131,10 @@ const Capability = ({ isPc }: { isPc: boolean }) => {
           </div>
           <h3> {i18nObj.appMan} </h3>
           <h4>{i18nObj.appManagement_introduce}</h4>
-          <a href={`${cloudUrl}/?bd_vid=${bd_vid}&openapp=system-applaunchpad%3F`} target="_black">
+          <a
+            href={`${cloudUrl}/?bd_vid=${semParams.bd_vid}&k=${semParams.keywords}&openapp=system-applaunchpad%3F`}
+            target="_black"
+          >
             {i18nObj.Explore} {'>'}
           </a>
         </div>
@@ -146,7 +152,10 @@ const Capability = ({ isPc }: { isPc: boolean }) => {
           </div>
           <div className="application-title">{i18nObj.database}</div>
           <div className="application-text">{i18nObj.database_introduce}</div>
-          <a href={`${cloudUrl}/?bd_vid=${bd_vid}&openapp=system-dbprovider%3F`} target="_black">
+          <a
+            href={`${cloudUrl}/?bd_vid=${semParams.bd_vid}&k=${semParams.keywords}&openapp=system-dbprovider%3F`}
+            target="_black"
+          >
             {i18nObj.Explore} {'>'}
           </a>
           <img
diff --git a/docs/website/src/pages/components/Header/index.tsx b/docs/website/src/pages/components/Header/index.tsx
index c6ad394fe42..dc40db4f896 100644
--- a/docs/website/src/pages/components/Header/index.tsx
+++ b/docs/website/src/pages/components/Header/index.tsx
@@ -51,7 +51,7 @@ const i18nObj = {
 const HomeHeader = ({ isPc }: { isPc: boolean }) => {
   const [stars, setStars] = useState(10000);
   const isBrowser = useIsBrowser();
-  const { cloudUrl, bd_vid } = useWindow();
+  const { cloudUrl, semParams } = useWindow();
 
   const {
     i18n: { currentLocale, defaultLocale }
@@ -140,7 +140,11 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {
               部署、管理和扩展应用的云操作系统。就像使用个人电脑一样！
             </h3>
           )}
-          <a className="start-now-button" href={`${cloudUrl}?bd_vid=${bd_vid}`} target="_blank">
+          <a
+            className="start-now-button"
+            href={`${cloudUrl}?bd_vid=${semParams.bd_vid}&k=${semParams.keywords}`}
+            target="_blank"
+          >
             {i18nObj.startNow}
             <div className="start-now-button-wrap"></div>
           </a>
@@ -195,7 +199,11 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {
               {i18nMap[currentLocale].label}
             </div>
           )}
-          <a className="start-now-button" href={`${cloudUrl}?bd_vid=${bd_vid}`} target="_blank">
+          <a
+            className="start-now-button"
+            href={`${cloudUrl}?bd_vid=${semParams.bd_vid}&k=${semParams.keywords}`}
+            target="_blank"
+          >
             {i18nObj.startNow}
             <div className="start-now-button-wrap"></div>
           </a>
diff --git a/docs/website/src/pages/index.tsx b/docs/website/src/pages/index.tsx
index 1b5c98b1077..17ad922fb71 100644
--- a/docs/website/src/pages/index.tsx
+++ b/docs/website/src/pages/index.tsx
@@ -40,8 +40,17 @@ const Home = () => {
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
-    const bd_vidValue = urlParams.get('bd_vid');
-    sessionStorage.setItem('bd_vid', bd_vidValue);
+    const params: Record<string, string> = {};
+
+    const bd_vid = urlParams.get('bd_vid');
+    if (bd_vid) params.bd_vid = bd_vid;
+
+    const k = urlParams.get('k');
+    if (k) params.keywords = k;
+
+    if (Object.keys(params).length > 0) {
+      sessionStorage.setItem('sealos_sem', JSON.stringify(params));
+    }
   }, []);
 
   const HomeRender = (
diff --git a/docs/website/src/pages/self-hosting/header/index.tsx b/docs/website/src/pages/self-hosting/header/index.tsx
index 1a452ec2f61..996f25f3922 100644
--- a/docs/website/src/pages/self-hosting/header/index.tsx
+++ b/docs/website/src/pages/self-hosting/header/index.tsx
@@ -45,7 +45,7 @@ const i18nObj = {
 const HomeHeader = ({ isPc }: { isPc: boolean }) => {
   const [stars, setStars] = useState(10000);
   const isBrowser = useIsBrowser();
-  const { cloudUrl, bd_vid } = useWindow();
+  const { cloudUrl, semParams } = useWindow();
 
   const {
     i18n: { currentLocale, defaultLocale }
@@ -145,7 +145,7 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {
           )}
           <a
             className="start-now-button"
-            href={`${cloudUrl}?bd_vid=${bd_vid}&s=bd-sealos-self-hosting`}
+            href={`${cloudUrl}?bd_vid=${semParams.bd_vid}&k=${semParams.keywords}&s=bd-sealos-self-hosting`}
             target="_blank"
           >
             {i18nObj.startNow}
diff --git a/docs/website/src/pages/self-hosting/index.tsx b/docs/website/src/pages/self-hosting/index.tsx
index 6ede32c23f0..85e66f558bd 100644
--- a/docs/website/src/pages/self-hosting/index.tsx
+++ b/docs/website/src/pages/self-hosting/index.tsx
@@ -16,8 +16,17 @@ export default function Pricing() {
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
-    const value = urlParams.get('bd_vid');
-    sessionStorage.setItem('bd_vid', value);
+    const params: Record<string, string> = {};
+
+    const bd_vid = urlParams.get('bd_vid');
+    if (bd_vid) params.bd_vid = bd_vid;
+
+    const k = urlParams.get('k');
+    if (k) params.keywords = k;
+
+    if (Object.keys(params).length > 0) {
+      sessionStorage.setItem('sealos_sem', JSON.stringify(params));
+    }
   }, []);
 
   return (
diff --git a/docs/website/src/pages/self-hosting/product/index.tsx b/docs/website/src/pages/self-hosting/product/index.tsx
index 00f9a966039..cfbca20223c 100644
--- a/docs/website/src/pages/self-hosting/product/index.tsx
+++ b/docs/website/src/pages/self-hosting/product/index.tsx
@@ -4,8 +4,7 @@ import StarIcon from '@site/static/price/star.svg';
 import React from 'react';
 
 export default function Product() {
-  const { bd_vid } = useWindow();
-  const standard = ['工单服务', '应用管理', '高可用数据库', '应用市场', '多租户', '计量/配额'];
+  const { semParams } = useWindow();
 
   const company = [
     '工单/即时通信服务',
@@ -43,7 +42,9 @@ export default function Product() {
       <div className="flex justify-center mt-14">
         <div
           onClick={() =>
-            window.open(`https://license.sealos.io/signin?bd_vid=${bd_vid}&s=bd-sealos-license`)
+            window.open(
+              `https://license.sealos.io/signin?bd_vid=${semParams.bd_vid}&k=${semParams.keywords}&s=bd-sealos-license`
+            )
           }
           className="rounded-md cursor-pointer hover:no-underline text-[#FFFFFFCC] hover:text-[#FFFFFFCC] bg-[#B7D8FF26] flex justify-center items-center font-semibold text-lg gap-2 py-3 px-4  lg:text-sm"
         >
@@ -92,7 +93,9 @@ export default function Product() {
               color: '#03080C'
             }}
             onClick={() =>
-              window.open(`https://license.sealos.io/signin?bd_vid=${bd_vid}&s=bd-sealos-license`)
+              window.open(
+                `https://license.sealos.io/signin?bd_vid=${semParams.bd_vid}&k=${semParams.keywords}&s=bd-sealos-license`
+              )
             }
           >
             获取