From 50980bba1a010c75f426ff3b2b4403a1924237a0 Mon Sep 17 00:00:00 2001 From: CritasWang Date: Fri, 20 Dec 2024 18:19:48 +0800 Subject: [PATCH 1/6] feat: update homepage --- src/.vuepress/components/HomeCarousel.vue | 50 ++++++++++++++--------- src/.vuepress/public/bg.svg | 33 +++++++++++++++ src/.vuepress/styles/config.scss | 2 +- src/.vuepress/styles/index.scss | 37 ++++++++++++++--- src/.vuepress/theme.ts | 2 +- src/README.md | 21 ++++++++-- src/zh/README.md | 25 +++++++++--- 7 files changed, 134 insertions(+), 36 deletions(-) create mode 100644 src/.vuepress/public/bg.svg diff --git a/src/.vuepress/components/HomeCarousel.vue b/src/.vuepress/components/HomeCarousel.vue index 6b76572ce..107473a9b 100644 --- a/src/.vuepress/components/HomeCarousel.vue +++ b/src/.vuepress/components/HomeCarousel.vue @@ -77,26 +77,30 @@ const slidesData = useLocaleConfig({ diff --git a/src/.vuepress/public/bg.svg b/src/.vuepress/public/bg.svg new file mode 100644 index 000000000..b481e2b7d --- /dev/null +++ b/src/.vuepress/public/bg.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/.vuepress/styles/config.scss b/src/.vuepress/styles/config.scss index e828ad19c..e30f0107e 100644 --- a/src/.vuepress/styles/config.scss +++ b/src/.vuepress/styles/config.scss @@ -16,7 +16,7 @@ * limitations under the License. */ -$theme-color: #495ad4; +$theme-color: #9E2878; $colors: #c0392b, #d35400, #f39c12, #27ae60, #16a085, #2980b9, #8e44ad, #2c3e50, #7f8c8d; $code-bg-color: #282c34; diff --git a/src/.vuepress/styles/index.scss b/src/.vuepress/styles/index.scss index e36ad3a3a..15244633b 100644 --- a/src/.vuepress/styles/index.scss +++ b/src/.vuepress/styles/index.scss @@ -16,9 +16,10 @@ * limitations under the License. */ -// #main-description { -// max-width: 55rem; -// } +#main-description { + max-width: 55rem; +} + .vp-skip-link { z-index: 1; } @@ -31,11 +32,15 @@ } .vp-highlight-header, -.vp-feature-header { - color: #ffa500; +.vp-feature-header, +.slide-title { + color: var(--vp-c-accent-bg); text-align: center; } +.vp-feature-title{ + color: var(--vp-c-accent-bg); +} // FIXME: Should be an upstream bug .vp-highlight-info-wrapper:only-child { flex-basis: 0; @@ -90,6 +95,28 @@ div[class*='language-'] pre code { } .home { + .vp-hero-title { + background: linear-gradient(90deg, rgb(158, 40, 120) 0%, rgb(103, 56, 189) 100%); + background-clip: text; + display: inline-block; + } + + .vp-feature-item { + &:hover { + background-color: transparent; + box-shadow: 0 2px 12px 0 var(--vp-c-shadow); + transform: translate(-2px, -2px); + transform: scale(1.05); + } + } + + .vp-hero-action.default { + background: var(--vp-c-bg); + color: var(--vp-c-accent); + &:hover { + background: var(--vp-c-bg-alt); + } + } .theme-hope-content { inset: 0; z-index: 0; diff --git a/src/.vuepress/theme.ts b/src/.vuepress/theme.ts index 6b209388e..697bade60 100644 --- a/src/.vuepress/theme.ts +++ b/src/.vuepress/theme.ts @@ -29,7 +29,7 @@ export default hopeTheme( docsRepo: 'https://github.com/apache/iotdb-docs', docsDir: 'src', - pure: true, + focus: false, darkmode: 'toggle', breadcrumb: false, contributors: false, diff --git a/src/README.md b/src/README.md index 1b9fe14eb..bee230996 100644 --- a/src/README.md +++ b/src/README.md @@ -1,8 +1,16 @@ --- +containerClass: home home: true +icon: home heroText: Apache IoTDB heroImage: /img/logo.svg -tagline: Database for Internet of Things +bgImage: bg.svg +bgImageDark: bg.svg +bgImageStyle: + background-attachment: fixed +heroFullScreen: true +tagline: Apache IoTDB (Database for Internet of Things) is an IoT native database with high performance for data management and analysis, deployable on the edge and the cloud. Due to its light-weight architecture, high performance and rich feature set together with its deep integration with Apache Hadoop, Spark and Flink, Apache IoTDB can meet the requirements of massive data storage, high-speed data ingestion and complex data analysis in the IoT industrial fields. + actions: - text: Download link: ./Download/ @@ -11,11 +19,16 @@ actions: - text: Quick Start link: ./UserGuide/latest/QuickStart/QuickStart_apache.html -highlights: - - header: Introduction - description: Apache IoTDB (Database for Internet of Things) is an IoT native database with high performance for data management and analysis, deployable on the edge and the cloud. Due to its light-weight architecture, high performance and rich feature set together with its deep integration with Apache Hadoop, Spark and Flink, Apache IoTDB can meet the requirements of massive data storage, high-speed data ingestion and complex data analysis in the IoT industrial fields. +# highlights: +# - header: Introduction +# description: Apache IoTDB (Database for Internet of Things) is an IoT native database with high performance for data management and analysis, deployable on the edge and the cloud. Due to its light-weight architecture, high performance and rich feature set together with its deep integration with Apache Hadoop, Spark and Flink, Apache IoTDB can meet the requirements of massive data storage, high-speed data ingestion and complex data analysis in the IoT industrial fields. +highlights: - header: Main Features + bgImage: /bg.svg + bgImageDark: /bg.svg + bgImageStyle: + background-attachment: fixed features: - title: High-throughput read and write details: Apache IoTDB can support high-speed write access for millions of low-power and intelligently networked devices. It also provides lightning read access for retrieving data. diff --git a/src/zh/README.md b/src/zh/README.md index 02e31bfe4..bfe4867ab 100644 --- a/src/zh/README.md +++ b/src/zh/README.md @@ -1,21 +1,34 @@ --- +containerClass: home home: true +icon: home heroText: Apache IoTDB heroImage: /img/logo.svg -tagline: 物联网数据库 +bgImage: bg.svg +bgImageDark: bg.svg +bgImageStyle: + background-attachment: fixed +heroFullScreen: true +tagline: Apache IoTDB（物联网数据库）是一体化收集、存储、管理与分析物联网时序数据的软件系统。Apache IoTDB 采用轻量式架构，具有高性能和丰富的功能，并与 Apache Hadoop、Spark 和 Flink 等进行了深度集成，可以满足工业物联网领域的海量数据存储、高速数据读取和复杂数据分析需求。 + actions: - text: 下载 link: ./Download/ type: primary - text: 快速上手 - link: ./UserGuide/latest/QuickStart/QuickStart_apache.html + link: ./UserGuide/latest/QuickStart/QuickStart_apache -highlights: - - header: 介绍 - description: Apache IoTDB（物联网数据库）是一体化收集、存储、管理与分析物联网时序数据的软件系统。Apache IoTDB 采用轻量式架构，具有高性能和丰富的功能，并与 Apache Hadoop、Spark 和 Flink 等进行了深度集成，可以满足工业物联网领域的海量数据存储、高速数据读取和复杂数据分析需求。 +# highlights: + # - header: 介绍 + # description: Apache IoTDB（物联网数据库）是一体化收集、存储、管理与分析物联网时序数据的软件系统。Apache IoTDB 采用轻量式架构，具有高性能和丰富的功能，并与 Apache Hadoop、Spark 和 Flink 等进行了深度集成，可以满足工业物联网领域的海量数据存储、高速数据读取和复杂数据分析需求。 +highlights: - header: 主要特点 + bgImage: /bg.svg + bgImageDark: /bg.svg + bgImageStyle: + background-attachment: fixed features: - title: 高吞吐量读写 details: Apache IoTDB 中可以支持数百万个低功耗和智能联网设备的高速写访问。 它还提供数据快速读取访问以查询。 @@ -34,6 +47,8 @@ highlights: - title: 与开源生态系统的紧密集成 details: Apache IoTDB 支持许多大数据软件生态系统，例如Hadoop、Spark、Flink和Grafana（可视化工具） + + ---