This is an automated email from the ASF dual-hosted git repository.
davidzollo pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/seatunnel-website.git
The following commit(s) were added to refs/heads/main by this push:
new 15a3f251fa76 [Docs] Add homepage Slack community help prompt (#553)
15a3f251fa76 is described below
commit 15a3f251fa76df625239b725abc63c3256784fc1
Author: Daniel <[email protected]>
AuthorDate: Mon Oct 12 02:59:19 2026 -0400
[Docs] Add homepage Slack community help prompt (#553)
---
src/pages/home/index.jsx | 64 ++++++++++++++++++-
src/pages/home/index.less | 159 ++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 222 insertions(+), 1 deletion(-)
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 3c343e5cf6e4..89dd99ddb23a 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useIsBrowser from '@docusaurus/useIsBrowser';
import useBaseUrl from '@docusaurus/useBaseUrl';
@@ -147,6 +147,18 @@ const HOME_COPY = {
'Schema Evolution',
],
},
+ communityHelp: {
+ eyebrow: 'Community Help',
+ title: 'Need help with SeaTunnel?',
+ description: 'Join the SeaTunnel Slack community for setup help,
connector advice, and answers from users and contributors.',
+ highlights: [
+ 'Get help with setup, configuration, and connectors',
+ 'Connect with SeaTunnel users and contributors',
+ 'Share ideas and help improve SeaTunnel',
+ ],
+ joinSlack: 'Join Slack',
+ close: 'Close community help',
+ },
trust: {
label: 'Used in production by',
},
@@ -413,6 +425,18 @@ const HOME_COPY = {
'Schema Evolution',
],
},
+ communityHelp: {
+ eyebrow: '社区帮助',
+ title: '需要 SeaTunnel 帮助？',
+ description: '加入 SeaTunnel Slack 社区，获取安装、配置和连接器方面的帮助，并与用户和贡献者交流。',
+ highlights: [
+ '咨询安装、配置和连接器问题',
+ '与 SeaTunnel 用户和贡献者交流',
+ '分享想法，一起改进 SeaTunnel',
+ ],
+ joinSlack: '加入 Slack',
+ close: '关闭社区帮助',
+ },
trust: {
label: '已被以下团队用于生产环境',
},
@@ -786,6 +810,7 @@ function FeatureIcon({icon}) {
export default function Home() {
const {i18n} = useDocusaurusContext();
const isBrowser = useIsBrowser();
+ const [isCommunityHelpVisible, setIsCommunityHelpVisible] = useState(true);
const pageRef = useRef(null);
const heroWarpCanvasRef = useRef(null);
const ctaWarpCanvasRef = useRef(null);
@@ -808,6 +833,12 @@ export default function Home() {
const quickStartPath = useBaseUrl(localizePath(language,
`/docs/${version}/getting-started/locally/quick-start-seatunnel-engine`));
const connectorsPath = useBaseUrl(localizePath(language,
`/docs/${version}/connectors/source`));
const logoPath = `${assetRoot}image/logo.png`;
+ const slackIconPath = `${assetRoot}home/icons/slack.svg`;
+
+ function closeCommunityHelp() {
+ setIsCommunityHelpVisible(false);
+ }
+
useEffect(() => {
if (!isBrowser || !pageRef.current) {
return undefined;
@@ -1418,6 +1449,37 @@ export default function Home() {
return (
<div className="st-home" ref={pageRef}>
+ {isCommunityHelpVisible && (
+ <aside className="st-home-community-help"
aria-labelledby="st-home-community-help-title">
+ <button
+ type="button"
+ className="st-home-community-help-close"
+ onClick={closeCommunityHelp}
+ aria-label={content.communityHelp.close}
+ >
+ <span aria-hidden="true">×</span>
+ </button>
+ <p
className="st-home-community-help-eyebrow">{content.communityHelp.eyebrow}</p>
+ <h2 id="st-home-community-help-title"
className="st-home-community-help-title">
+ {content.communityHelp.title}
+ </h2>
+ <p
className="st-home-community-help-description">{content.communityHelp.description}</p>
+ <ul className="st-home-community-help-list">
+ {content.communityHelp.highlights.map((highlight) => (
+ <li key={highlight}>{highlight}</li>
+ ))}
+ </ul>
+ <a
+ className="st-home-community-help-button"
+ href={SLACK_URL}
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <img src={slackIconPath} alt="" aria-hidden="true" />
+ <span>{content.communityHelp.joinSlack}</span>
+ </a>
+ </aside>
+ )}
<section className="st-home-hero">
<div className="st-home-orb st-home-orb-1"></div>
<div className="st-home-orb st-home-orb-2"></div>
diff --git a/src/pages/home/index.less b/src/pages/home/index.less
index 48d92861e668..78eead422c88 100644
--- a/src/pages/home/index.less
+++ b/src/pages/home/index.less
@@ -483,6 +483,154 @@ html[data-theme='light'] .st-home {
transform: translateY(-1px);
}
+.st-home-community-help {
+ position: fixed;
+ right: 28px;
+ bottom: 28px;
+ z-index: 320;
+ width: 360px;
+ max-width: calc(100vw - 32px);
+ padding: 26px 24px 24px;
+ border: 1px solid rgba(137, 161, 199, 0.26);
+ border-top: 3px solid var(--teal);
+ border-radius: var(--r-md);
+ background: rgba(11, 18, 37, 0.96);
+ box-shadow: 0 24px 56px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255,
0.03) inset;
+ color: var(--t1);
+ backdrop-filter: blur(18px);
+ -webkit-backdrop-filter: blur(18px);
+
+ .st-home-community-help-close {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ padding: 0;
+ border: 1px solid rgba(137, 161, 199, 0.22);
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.04);
+ color: var(--t3);
+ cursor: pointer;
+ font-size: 22px;
+ line-height: 1;
+ transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
+
+ &:hover {
+ border-color: rgba(93, 184, 226, 0.64);
+ background: rgba(93, 184, 226, 0.1);
+ color: var(--t1);
+ }
+
+ &:focus-visible {
+ outline: 3px solid rgba(93, 184, 226, 0.4);
+ outline-offset: 2px;
+ }
+ }
+
+ .st-home-community-help-eyebrow {
+ margin: 0 42px 8px 0;
+ color: var(--teal);
+ font-family: var(--ifm-font-family-monospace);
+ font-size: 0.7rem;
+ font-weight: 700;
+ letter-spacing: 0.13em;
+ line-height: 1.3;
+ text-transform: uppercase;
+ }
+
+ .st-home-community-help-title {
+ margin: 0 34px 10px 0;
+ color: var(--t1);
+ font-size: 1.45rem;
+ font-weight: 700;
+ line-height: 1.28;
+ letter-spacing: -0.025em;
+ }
+
+ .st-home-community-help-description {
+ margin: 0 0 14px;
+ color: var(--t2);
+ font-size: 0.92rem;
+ line-height: 1.58;
+ }
+
+ .st-home-community-help-list {
+ margin: 0 0 20px;
+ padding: 0;
+ list-style: none;
+
+ li {
+ position: relative;
+ padding-left: 18px;
+ color: var(--t2);
+ font-size: 0.84rem;
+ line-height: 1.5;
+
+ &::before {
+ position: absolute;
+ top: 0.55em;
+ left: 2px;
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ background: var(--teal);
+ box-shadow: 0 0 10px rgba(93, 184, 226, 0.72);
+ content: '';
+ }
+
+ + li {
+ margin-top: 7px;
+ }
+ }
+ }
+
+ .st-home-community-help-button {
+ display: inline-flex;
+ align-items: center;
+ gap: 9px;
+ min-height: 42px;
+ padding: 10px 16px;
+ border-radius: 8px;
+ background: var(--brand-gradient-cool);
+ color: #fff;
+ font-size: 0.82rem;
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ line-height: 1.2;
+ text-decoration: none;
+ text-transform: uppercase;
+ transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
+
+ img {
+ width: 20px;
+ height: 20px;
+ }
+
+ &:hover {
+ color: #fff;
+ filter: brightness(1.1);
+ box-shadow: 0 12px 24px rgba(66, 184, 236, 0.24);
+ text-decoration: none;
+ transform: translateY(-1px);
+ }
+
+ &:focus-visible {
+ outline: 3px solid rgba(93, 184, 226, 0.4);
+ outline-offset: 3px;
+ }
+ }
+}
+
+html[data-theme='light'] .st-home .st-home-community-help {
+ border-color: rgba(90, 150, 230, 0.28);
+ background: rgba(255, 255, 255, 0.96);
+ box-shadow: 0 24px 56px rgba(39, 63, 101, 0.18), 0 0 0 1px rgba(255, 255,
255, 0.8) inset;
+}
+
.st-home-hero {
position: relative;
min-height: 100vh;
@@ -3257,6 +3405,17 @@ html[data-theme='light'] .st-home .st-home-rv {
}
@media (max-width: 640px) {
+ .st-home-community-help {
+ right: 16px;
+ bottom: 16px;
+ padding: 23px 20px 20px;
+
+ .st-home-community-help-button {
+ justify-content: center;
+ width: 100%;
+ }
+ }
+
.st-home-container {
width: min(100%, calc(100% - 24px));
}
