feat: add marquee for provider advices (#2925)

Author: Chasen-Zhang

package.json

@@ -54,6 +54,7 @@
     "react-dom": "^19.1.0",
     "react-markdown": "^9.0.1",
     "react-scroll-progress-bar": "^2.0.3",
+    "react-slick": "^0.31.0",
     "sass": "^1.77.8",
     "sass-resources-loader": "^2.2.5",
     "turndown": "^7.2.0",

src/css/theme.scss

@@ -209,12 +209,14 @@
   --indigo-5: rgb(94, 110, 195);
   --prism-color2: #393A34;
   --prism-background-color2: #fff;
+    --scroll-banner-bg: rgb(243 248 255);
   ::selection {
     color: #fff;
     background: var(--color-primary);
     cursor: none;
     outline: none;
   }
+
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -410,6 +412,7 @@
   --indigo-5: rgb(63, 80, 180);
   --prism-color2: #F8F8F2;
   --prism-background-color2: #121a2a;
+    --scroll-banner-bg: #121a2a;
 }
 
 .cc--darkmode {

src/theme/DocPaginator/index.tsx

@@ -15,6 +15,7 @@ import ThumbsDown from "./ThumbsDown.svg";
 import clsx from "clsx";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { useLocation } from "@docusaurus/router";
+import ScrollBanner from "./scroll-banner";
 const { TextArea } = Input;
 function Alarm() {
   return (
@@ -162,7 +163,9 @@ export default function DocPaginator(props) {
             {$t("Raise issue")}
           </Button>
         </div>
+        {isChina && <ScrollBanner />}
       </Spin>
+
       <nav
         className="pagination-nav docusaurus-mt-lg"
         aria-label={translate({

src/theme/DocPaginator/scroll-banner.tsx

@@ -0,0 +1,67 @@
+// Copyright 2025 DatabendLabs.
+import { Flex } from "antd";
+import type { FC, ReactElement } from "react";
+import Slider from "react-slick";
+import styles from "./styles.module.scss";
+const ANNOUNCEMENTS = [
+  "用户 ue**[email protected] 指出问题【注释与命令不符，拼写错误】，获得 Tshirt 一件",
+  "用户 bo**[email protected] 提出建议【存储过程相关的文档过于分散】，获得定制魔方一个",
+  "用户 7**[email protected] 指出问题【没看到 range + 时间方式的处理】，获得 Tshirt 一件",
+  "用户 ty**ll@**.com 指出问题【404 找不到链接】，获得 Tshirt 一件",
+];
+
+function Item({ text }: { text: string }) {
+  return (
+    <div style={{ height: "40px", lineHeight: "40px", paddingLeft: "20px" }}>
+      <Flex
+        align="center"
+        gap={8}
+        style={{
+          height: "100%",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        }}
+      >
+        <span
+          style={{
+            width: "6px",
+            height: "6px",
+            backgroundColor: "var(--color-primary)",
+            display: "inline-block",
+            borderRadius: "50%",
+          }}
+        ></span>
+        {text}
+      </Flex>
+    </div>
+  );
+}
+
+const ScrollBanner: FC = (): ReactElement => {
+  const settings = {
+    dots: false,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 3000,
+    vertical: true,
+    arrows: false,
+    pauseOnHover: false,
+    cssEase: "cubic-bezier(0.25, 1, 0.5, 1)",
+  };
+
+  return (
+    <div className={styles?.marquee}>
+      <Slider {...settings}>
+        {ANNOUNCEMENTS.map((text, index) => (
+          <Item key={index} text={text} />
+        ))}
+      </Slider>
+    </div>
+  );
+};
+
+export default ScrollBanner;

src/theme/DocPaginator/styles.module.scss

@@ -94,8 +94,26 @@
 
 .RaiseButton {
   margin-left: auto;
+  background-color: var(--color-bg-1);
   color: var(--color-text-2);
   @media screen and (max-width: 500px) {
     display: none;
   }
 }
+
+.marquee {
+  width: 100%;
+  height: 40px;
+  overflow: hidden;
+  background-color: var(--scroll-banner-bg);
+  color: var(--color-text-2);
+  border-radius: 4px;
+  font-size: 14px;
+  margin-top: 6px;
+  @media screen and (max-width: 630px) {
+    display: none;
+  }
+  @media screen and (min-width: 997px) and (max-width: 1168px) {
+    display: none;
+  }
+}

yarn.lock

@@ -10807,6 +10807,16 @@ react-scroll-progress-bar@^2.0.3:
   resolved "https://registry.yarnpkg.com/react-scroll-progress-bar/-/react-scroll-progress-bar-2.0.3.tgz#f3b4847f408d3fc4d3bd9f60386cff8c441a461a"
   integrity sha512-CJ8L/X/oJMei6Pi3LaAG7seLahpdBc3CMNY+hhkmUUtPjND8W8Bva32OipESm2rj5ulkezym05DxKupeAjldzQ==
 
+react-slick@^0.31.0:
+  version "0.31.0"
+  resolved "https://registry.npmmirror.com/react-slick/-/react-slick-0.31.0.tgz#6b9c51b1a285acd6a5b7da70528c3a5429e86986"
+  integrity sha512-zo6VLT8wuSBJffg/TFPbzrw2dEnfZ/cUKmYsKByh3AgatRv29m2LoFbq5vRMa3R3A4wp4d8gwbJKO2fWZFaI3g==
+  dependencies:
+    classnames "^2.2.5"
+    json2mq "^0.2.0"
+    lodash.debounce "^4.0.8"
+    resize-observer-polyfill "^1.5.0"
+
 react@^19.1.0:
   version "19.1.0"
   resolved "https://registry.yarnpkg.com/react/-/react-19.1.0.tgz#926864b6c48da7627f004795d6cce50e90793b75"
@@ -11060,7 +11070,7 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
-resize-observer-polyfill@^1.5.1:
+resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==