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 57a3d3ed42c8 [Docs] Refine docs contrast and homepage motion details
(#461)
57a3d3ed42c8 is described below
commit 57a3d3ed42c8f2a2ab7ff3824fa3929e0ed9484d
Author: Daniel <[email protected]>
AuthorDate: Tue Jun 16 18:29:39 2026 +0800
[Docs] Refine docs contrast and homepage motion details (#461)
Co-authored-by: Daniel <[email protected]>
---
src/css/custom.css | 102 ++++++++++++++++++++++++++++-------------
src/pages/home/index.jsx | 113 +++++++++++++++++++---------------------------
src/pages/home/index.less | 12 +++--
src/theme/Layout/index.js | 20 +++++---
4 files changed, 138 insertions(+), 109 deletions(-)
diff --git a/src/css/custom.css b/src/css/custom.css
index 3972086a62da..0ed63cb2e07f 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -34,13 +34,19 @@ html[data-theme='dark'] {
--ifm-color-primary-light: #74c3e7;
--ifm-color-primary-lighter: #84cbea;
--ifm-color-primary-lightest: #a7dbf1;
+ --ifm-font-color-base: #dde8f7;
+ --ifm-font-color-secondary: #c9d6e7;
+ --ifm-heading-color: #f8fbff;
+ --ifm-menu-color: #d7e3f2;
+ --ifm-menu-color-active: #f8fbff;
+ --ifm-toc-link-color: #d7e3f2;
--st-shell-bg: #060a15;
--st-shell-surface: rgba(10, 17, 34, 0.86);
--st-shell-surface-strong: rgba(10, 17, 34, 0.98);
--st-shell-border: rgba(255, 255, 255, 0.08);
--st-shell-shadow: 0 24px 56px rgba(0, 0, 0, 0.34);
- --st-shell-text: #8ba5c5;
- --st-shell-text-strong: #eef4ff;
+ --st-shell-text: #d7e3f2;
+ --st-shell-text-strong: #f8fbff;
--st-shell-footer-bg: #0a1122;
}
@@ -258,6 +264,33 @@ html[data-theme='dark'] .card {
color: var(--ifm-color-primary);
}
+html[data-theme='dark'] .menu__link--active:not(.menu__link--sublist),
+html[data-theme='dark'] .table-of-contents__link--active {
+ color: var(--ifm-heading-color);
+}
+
+html[data-theme='dark'] .theme-doc-markdown,
+html[data-theme='dark'] .theme-doc-markdown p,
+html[data-theme='dark'] .theme-doc-markdown li,
+html[data-theme='dark'] .theme-doc-markdown td,
+html[data-theme='dark'] .theme-doc-markdown th,
+html[data-theme='dark'] .theme-doc-markdown blockquote,
+html[data-theme='dark'] .menu__link,
+html[data-theme='dark'] .table-of-contents__link {
+ color: var(--ifm-font-color-base);
+}
+
+html[data-theme='dark'] .theme-doc-markdown h1,
+html[data-theme='dark'] .theme-doc-markdown h2,
+html[data-theme='dark'] .theme-doc-markdown h3,
+html[data-theme='dark'] .theme-doc-markdown h4,
+html[data-theme='dark'] .theme-doc-markdown h5,
+html[data-theme='dark'] .theme-doc-markdown h6,
+html[data-theme='dark'] .breadcrumbs__link,
+html[data-theme='dark'] .pagination-nav__label {
+ color: var(--ifm-heading-color);
+}
+
.st-global-ask-ai {
position: fixed;
right: 2rem;
@@ -279,47 +312,47 @@ html[data-theme='dark'] .card {
position: relative;
display: inline-flex;
align-items: center;
- justify-content: center;
- width: 78px;
- height: 92px;
- padding: 0;
- border: 1px solid rgba(155, 206, 245, 0.95);
- border-radius: 28px;
- background: linear-gradient(180deg, rgba(252, 254, 255, 0.98) 0%, rgba(238,
247, 255, 0.98) 100%);
- color: #0f172a;
+ gap: 8px;
+ padding: 0.76rem 1.55rem;
+ border: 1px solid rgba(255, 255, 255, 0.16);
+ border-radius: 999px;
+ background: linear-gradient(135deg, #7eb8ff 0%, #6776ff 48%, #5847ff 100%);
+ color: #fff;
+ white-space: nowrap;
overflow: hidden;
- box-shadow: 0 18px 42px rgba(132, 181, 226, 0.22), 0 2px 10px rgba(15, 23,
42, 0.08);
- transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s,
border-color 0.2s, background 0.2s;
+ box-shadow: 0 14px 34px rgba(74, 87, 255, 0.38), 0 2px 8px rgba(0, 0, 0,
0.3);
+ transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s,
border-color 0.2s;
}
.st-global-ask-ai-button::before {
content: '';
position: absolute;
- inset: 7px;
+ inset: 1px;
border-radius: inherit;
- border: 1px solid rgba(190, 224, 250, 0.7);
- background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.96),
rgba(255, 255, 255, 0) 68%);
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255,
255, 255, 0.03) 52%, transparent);
pointer-events: none;
}
.st-global-ask-ai-button svg {
- width: 34px;
- height: 34px;
- aspect-ratio: 1 / 1;
+ width: 17px;
+ height: 17px;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.st-global-ask-ai-button span {
- display: none;
+ font-size: 0.88rem;
+ font-weight: 700;
+ letter-spacing: 0;
+ position: relative;
+ z-index: 1;
}
.st-global-ask-ai:hover .st-global-ask-ai-button {
- transform: translateY(-3px);
- border-color: rgba(121, 188, 237, 0.98);
- background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(232,
244, 255, 0.98) 100%);
- box-shadow: 0 22px 48px rgba(132, 181, 226, 0.28), 0 2px 10px rgba(15, 23,
42, 0.1);
+ transform: translateY(-3px) scale(1.04);
+ border-color: rgba(255, 255, 255, 0.22);
+ box-shadow: 0 18px 42px rgba(74, 87, 255, 0.48), 0 2px 8px rgba(0, 0, 0,
0.3);
}
.st-global-ask-ai:focus-visible {
@@ -327,12 +360,20 @@ html[data-theme='dark'] .card {
}
.st-global-ask-ai:focus-visible .st-global-ask-ai-button {
- border-color: rgba(121, 188, 237, 0.98);
- box-shadow: 0 0 0 4px rgba(154, 213, 249, 0.24), 0 22px 48px rgba(132, 181,
226, 0.28), 0 2px 10px rgba(15, 23, 42, 0.1);
+ border-color: rgba(255, 255, 255, 0.22);
+ box-shadow: 0 0 0 4px rgba(126, 184, 255, 0.22), 0 18px 42px rgba(74, 87,
255, 0.48), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.st-global-ask-ai-dot {
- display: none;
+ position: absolute;
+ top: -2px;
+ right: -2px;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: #00d79c;
+ box-shadow: 0 0 0 0 rgba(0, 215, 156, 0.55);
+ animation: st-home-pulse 2s ease infinite;
}
@media (max-width: 996px) {
@@ -342,20 +383,17 @@ html[data-theme='dark'] .card {
}
.st-global-ask-ai-button {
- width: 70px;
- height: 82px;
+ padding: 0.72rem 1.2rem;
}
.st-global-ask-ai-button span {
- display: none;
+ font-size: 0.84rem;
}
}
@media (max-width: 640px) {
.st-global-ask-ai-button {
- width: 64px;
- height: 76px;
- border-radius: 24px;
+ padding: 0.7rem 1rem;
}
}
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 826e4d0eac7d..75e69c546176 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -26,6 +26,8 @@ const HERO_SINKS = [
{name: 'Apache Paimon', colorClass: 'pink'},
];
+// Keep the marquee aligned with connectors and integrations that already have
+// public support pages in the current SeaTunnel documentation set.
const CONNECTOR_MARQUEE_ITEMS = [
'MySQL',
'PostgreSQL',
@@ -33,91 +35,67 @@ const CONNECTOR_MARQUEE_ITEMS = [
'SQL Server',
'TiDB',
'MariaDB',
- 'CockroachDB',
- 'SQLite',
'MongoDB',
'DynamoDB',
'Cassandra',
- 'ScyllaDB',
'HBase',
- 'ArangoDB',
'Neo4j',
- 'Couchbase',
+ 'DB2',
+ 'Greenplum',
+ 'OceanBase',
'Apache Kafka',
'Apache Pulsar',
'RabbitMQ',
'RocketMQ',
'ActiveMQ',
- 'NATS',
'AWS SQS',
- 'Azure Event Hub',
'Elasticsearch',
- 'OpenSearch',
- 'Solr',
- 'Meilisearch',
+ 'Apache Druid',
+ 'Typesense',
'ClickHouse',
'Apache Doris',
'StarRocks',
- 'Apache Druid',
- 'Apache Pinot',
- 'Firebolt',
+ 'Snowflake',
+ 'Cloudberry',
+ 'Amazon Redshift',
'Amazon S3',
- 'Google GCS',
- 'Azure Blob',
'HDFS',
- 'MinIO',
'Alibaba OSS',
+ 'LocalFile',
'Apache Iceberg',
'Apache Hudi',
'Delta Lake',
'Apache Paimon',
'Apache Kudu',
'Apache Hive',
- 'Snowflake',
- 'BigQuery',
- 'Amazon Redshift',
- 'Databricks',
- 'SAP HANA',
'InfluxDB',
- 'TimescaleDB',
- 'QuestDB',
'Apache IoTDB',
- 'OpenTSDB',
+ 'TDengine',
'Redis',
- 'Memcached',
'Aerospike',
'FTP',
'SFTP',
- 'HTTP/REST',
+ 'HTTP',
'GraphQL',
- 'LocalFile',
- 'Excel',
- 'CSV',
- 'JSON',
- 'Parquet',
- 'ORC',
- 'Avro',
- 'Protobuf',
+ 'Google Sheets',
+ 'Google Firestore',
'Slack',
'DingTalk',
'Feishu',
'Email',
'MaxCompute',
'TableStore',
- 'SelectDB',
+ 'SelectDB Cloud',
'Milvus',
'Qdrant',
'Lance',
- 'MQTT',
- 'Greenplum',
- 'Teradata',
- 'Sybase',
- 'DB2',
- 'Informix',
- 'Google Firestore',
- 'Google Sheets',
'Apache Fluss',
'HugeGraph',
+ 'Prometheus',
+ 'SLS',
+ 'Sentry',
+ 'SensorsData',
+ 'Web3j',
];
const HOME_COPY = {
@@ -200,13 +178,13 @@ const HOME_COPY = {
title: 'Data Lake',
tag: 'Object Storage',
dotClass: 'orange',
- chips: ['Amazon S3', 'Google GCS', 'HDFS', 'MinIO'],
+ chips: ['Amazon S3', 'Alibaba OSS', 'HDFS',
'LocalFile'],
},
target: {
title: 'AI & Analytics',
tag: 'Vector / LLM',
dotClass: 'purple',
- chips: ['Milvus', 'Qdrant', 'BigQuery',
'Elasticsearch'],
+ chips: ['Milvus', 'Qdrant', 'Elasticsearch',
'Typesense'],
},
},
],
@@ -274,8 +252,8 @@ const HOME_COPY = {
{name: 'Apache Pulsar', colorClass: 'blue'},
{name: 'RabbitMQ', colorClass: 'orange'},
{name: 'RocketMQ', colorClass: 'red'},
- {name: 'AWS SQS / Kinesis', colorClass: 'indigo'},
- {name: 'NATS / MQTT', colorClass: 'green'},
+ {name: 'AWS SQS', colorClass: 'indigo'},
+ {name: 'ActiveMQ', colorClass: 'green'},
],
},
{
@@ -285,23 +263,23 @@ const HOME_COPY = {
{name: 'Apache Doris', colorClass: 'blue'},
{name: 'StarRocks', colorClass: 'indigo'},
{name: 'Snowflake', colorClass: 'sky'},
- {name: 'BigQuery', colorClass: 'blue'},
- {name: 'Databricks', colorClass: 'purple'},
+ {name: 'Amazon Redshift', colorClass: 'blue'},
+ {name: 'Cloudberry', colorClass: 'purple'},
],
},
{
label: 'Data Lakes & Storage',
items: [
{name: 'Amazon S3 / Hudi', colorClass: 'orange'},
- {name: 'Google GCS', colorClass: 'blue'},
- {name: 'Azure Blob Storage', colorClass: 'sky'},
+ {name: 'Alibaba OSS', colorClass: 'blue'},
+ {name: 'HDFS / LocalFile', colorClass: 'sky'},
{name: 'Apache Iceberg', colorClass: 'green'},
{name: 'Delta Lake', colorClass: 'orange'},
{name: 'Apache Paimon', colorClass: 'green'},
],
},
],
- more: 'Also: MongoDB / Redis / Elasticsearch / Neo4j / Cassandra /
HBase / Druid / Pinot / IoTDB / InfluxDB / DynamoDB / Milvus / Qdrant ...',
+ more: 'Also: MongoDB / Redis / Elasticsearch / Neo4j / Cassandra /
HBase / Druid / HugeGraph / IoTDB / InfluxDB / DynamoDB / Milvus / Qdrant ...',
},
flow: {
eyebrow: 'How it works',
@@ -419,7 +397,7 @@ const HOME_COPY = {
],
architecture: {
eyebrow: '架构',
- titleLead: '不只是 ETL',
+ titleLead: '不是 ETL',
titleAccent: '而是 EtLT',
lead: 'SeaTunnel 负责抽取、轻量转换与装载，把重量级的下游转换保留给仓库或湖仓，让数据链路更清晰也更稳定。',
headers: {
@@ -461,13 +439,13 @@ const HOME_COPY = {
title: '数据湖',
tag: 'Object Storage',
dotClass: 'orange',
- chips: ['Amazon S3', 'Google GCS', 'HDFS', 'MinIO'],
+ chips: ['Amazon S3', 'Alibaba OSS', 'HDFS',
'LocalFile'],
},
target: {
title: 'AI 与分析',
tag: 'Vector / LLM',
dotClass: 'purple',
- chips: ['Milvus', 'Qdrant', 'BigQuery',
'Elasticsearch'],
+ chips: ['Milvus', 'Qdrant', 'Elasticsearch',
'Typesense'],
},
},
],
@@ -535,8 +513,8 @@ const HOME_COPY = {
{name: 'Apache Pulsar', colorClass: 'blue'},
{name: 'RabbitMQ', colorClass: 'orange'},
{name: 'RocketMQ', colorClass: 'red'},
- {name: 'AWS SQS / Kinesis', colorClass: 'indigo'},
- {name: 'NATS / MQTT', colorClass: 'green'},
+ {name: 'AWS SQS', colorClass: 'indigo'},
+ {name: 'ActiveMQ', colorClass: 'green'},
],
},
{
@@ -546,23 +524,23 @@ const HOME_COPY = {
{name: 'Apache Doris', colorClass: 'blue'},
{name: 'StarRocks', colorClass: 'indigo'},
{name: 'Snowflake', colorClass: 'sky'},
- {name: 'BigQuery', colorClass: 'blue'},
- {name: 'Databricks', colorClass: 'purple'},
+ {name: 'Amazon Redshift', colorClass: 'blue'},
+ {name: 'Cloudberry', colorClass: 'purple'},
],
},
{
label: '数据湖与存储',
items: [
{name: 'Amazon S3 / Hudi', colorClass: 'orange'},
- {name: 'Google GCS', colorClass: 'blue'},
- {name: 'Azure Blob Storage', colorClass: 'sky'},
+ {name: 'Alibaba OSS', colorClass: 'blue'},
+ {name: 'HDFS / LocalFile', colorClass: 'sky'},
{name: 'Apache Iceberg', colorClass: 'green'},
{name: 'Delta Lake', colorClass: 'orange'},
{name: 'Apache Paimon', colorClass: 'green'},
],
},
],
- more: '还包括：MongoDB / Redis / Elasticsearch / Neo4j / Cassandra /
HBase / Druid / Pinot / IoTDB / InfluxDB / DynamoDB / Milvus / Qdrant ...',
+ more: '还包括：MongoDB / Redis / Elasticsearch / Neo4j / Cassandra /
HBase / Druid / HugeGraph / IoTDB / InfluxDB / DynamoDB / Milvus / Qdrant ...',
},
flow: {
eyebrow: '工作方式',
@@ -937,7 +915,8 @@ export default function Home() {
const dash = 10;
const gap = 8;
const period = dash + gap;
- const offset = -(frame * 0.6) % period;
+ // Keep the divider motion readable instead of turning it into
a noisy scan line.
+ const offset = -(frame * 0.26) % period;
const gradient = context.createLinearGradient(0, 0, width, 0);
gradient.addColorStop(0, 'rgba(66,184,236,0)');
@@ -960,11 +939,11 @@ export default function Home() {
const pulseCount = 5;
for (let index = 0; index < pulseCount; index += 1) {
- const phase = ((frame / 240) + (index / pulseCount)) % 1;
+ const phase = ((frame / 380) + (index / pulseCount)) % 1;
const pulseX = phase * width;
const hueRatio = width > 0 ? (pulseX / width) : 0;
const hue = 197 + (hueRatio * 130);
- const radius = 11 + (Math.sin((frame * 0.04) + index) * 2);
+ const radius = 11 + (Math.sin((frame * 0.022) + index) *
2);
const pulseGradient = context.createRadialGradient(pulseX,
centerY, 0, pulseX, centerY, radius * 2.2);
pulseGradient.addColorStop(0, `hsla(${hue},90%,78%,1)`);
pulseGradient.addColorStop(0.35,
`hsla(${hue},85%,68%,.55)`);
@@ -1275,11 +1254,11 @@ export default function Home() {
<div className="st-home-feature-grid">
<article className="st-home-feature-card
st-home-feature-card-wide st-home-rv" onMouseMove={handleFeatureGlow}>
<div className="st-home-feature-accent"></div>
- <div>
+ <div className="st-home-feature-copy
st-home-feature-copy-wide">
+ <div
className="st-home-feature-number">{content.features.schema.number}</div>
<div className={`st-home-feature-icon
st-home-feature-icon-${content.features.schema.accent}`}>
<FeatureIcon
icon={content.features.schema.icon} />
</div>
- <div
className="st-home-feature-number">{content.features.schema.number}</div>
<h3 className="st-home-feature-title
st-home-feature-title-large">{content.features.schema.title}</h3>
<p className="st-home-feature-description
st-home-feature-description-large">{content.features.schema.description}</p>
</div>
diff --git a/src/pages/home/index.less b/src/pages/home/index.less
index 90e1f9e86937..2fbe63929559 100644
--- a/src/pages/home/index.less
+++ b/src/pages/home/index.less
@@ -965,7 +965,7 @@ html[data-theme='light'] .st-home {
.st-home-architecture-engine-t-small {
font-size: 0.6em;
- color: rgba(181, 230, 255, 0.88);
+ color: #42b8ec;
font-weight: 700;
text-shadow: 0 0 10px rgba(93, 184, 226, 0.18);
vertical-align: middle;
@@ -1113,6 +1113,10 @@ html[data-theme='light'] .st-home {
align-items: center;
}
+.st-home-feature-copy-wide {
+ align-self: start;
+}
+
.st-home-feature-accent {
position: absolute;
top: 0;
@@ -1129,7 +1133,7 @@ html[data-theme='light'] .st-home {
}
.st-home-feature-number {
- margin-bottom: 1.25rem;
+ margin-bottom: 0.7rem;
color: var(--t3);
font-family: var(--ifm-font-family-monospace);
font-size: 0.68rem;
@@ -1166,7 +1170,7 @@ html[data-theme='light'] .st-home {
.st-home-feature-icon {
width: 44px;
height: 44px;
- margin-bottom: 1.25rem;
+ margin-bottom: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -1285,7 +1289,7 @@ html[data-theme='light'] .st-home {
gap: 0.45rem;
width: max-content;
will-change: transform;
- animation: st-home-marquee 72s linear infinite;
+ animation: st-home-marquee 108s linear infinite;
}
.st-home-marquee:hover .st-home-marquee-track,
diff --git a/src/theme/Layout/index.js b/src/theme/Layout/index.js
index b3e42fb40969..be32045247c5 100644
--- a/src/theme/Layout/index.js
+++ b/src/theme/Layout/index.js
@@ -144,14 +144,20 @@ function KapaWidgetOverrides() {
return null;
}
-function AskAiSparkIcon() {
+function MessageIcon() {
return (
- <svg viewBox="0 0 32 32" fill="none" aria-hidden="true">
- <circle cx="16" cy="16" r="4.25" fill="currentColor" />
+ <svg viewBox="0 0 20 20" fill="none" aria-hidden="true">
<path
- d="M16 4.5V8M16 24v3.5M27.5 16H24M8 16H4.5M24.132 7.868l-2.475
2.475M10.343 21.657l-2.475 2.475M24.132 24.132l-2.475-2.475M10.343 10.343 7.868
7.868"
+ d="M5.833 14.167 2.5 17.5V4.167C2.5 3.246 3.246 2.5 4.167
2.5h11.666c.921 0 1.667.746 1.667 1.667v8.333c0 .921-.746 1.667-1.667
1.667H5.833Z"
stroke="currentColor"
- strokeWidth="2.4"
+ strokeWidth="1.7"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ <path
+ d="M6.667 7.083h6.666M6.667 10.417h4.166"
+ stroke="currentColor"
+ strokeWidth="1.7"
strokeLinecap="round"
/>
</svg>
@@ -162,8 +168,10 @@ function GlobalAskAi() {
return (
<button id={ASK_AI_TRIGGER_ID} type="button" className="st-global-ask-ai"
aria-label="Ask AI" title="Ask AI">
<span className="st-global-ask-ai-button">
- <AskAiSparkIcon />
+ <MessageIcon />
+ <span>Ask AI</span>
</span>
+ <span className="st-global-ask-ai-dot" aria-hidden="true"></span>
</button>
);
}
