Skip to content

Commit 50980bb

Browse files
CritasWangCritasWang
committed
feat: update homepage
1 parent 9e1eb77 commit 50980bb

File tree

7 files changed

+134
-36
lines changed

7 files changed

+134
-36
lines changed

‎src/.vuepress/components/HomeCarousel.vue‎

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -77,26 +77,30 @@ const slidesData = useLocaleConfig({
7777
</script>
7878

7979
<template>
80-
<h2 class="vp-feature-header">
81-
{{ title }}
82-
</h2>
83-
<Carousel v-bind="config">
84-
<Slide v-for="item in slidesData" :key="item.title">
85-
<div>
86-
<img class="slide-image" :src="item.src" alt="">
87-
<h3 class="slide-title">
88-
{{ item.title }}
89-
</h3>
90-
<p class="slide-description">
91-
{{ item.detail }}
92-
</p>
93-
</div>
94-
</Slide>
80+
<div class="vp-feature-bg light" style="background-image: url('/bg.svg'); background-attachment: fixed;" />
81+
<div class="vp-feature-bg dark" style="background-image: url('/bg.svg'); background-attachment: fixed;" />
82+
<div class="vp-feature" style="max-width: unset;">
83+
<h2 class="vp-feature-header" style="margin-top: 0 !important; padding-top: 0 !important; color: var(--vp-c-accent-bg) !important;">
84+
{{ title }}
85+
</h2>
86+
<Carousel v-bind="config">
87+
<Slide v-for="item in slidesData" :key="item.title">
88+
<div>
89+
<img class="slide-image" :src="item.src" alt="">
90+
<h3 class="slide-title">
91+
{{ item.title }}
92+
</h3>
93+
<p class="slide-description">
94+
{{ item.detail }}
95+
</p>
96+
</div>
97+
</Slide>
9598

96-
<template #addons>
97-
<Navigation />
98-
</template>
99-
</Carousel>
99+
<template #addons>
100+
<Navigation />
101+
</template>
102+
</Carousel>
103+
</div>
100104
</template>
101105
<style lang="scss">
102106
.slide-image {
@@ -106,7 +110,6 @@ const slidesData = useLocaleConfig({
106110
107111
.slide-title {
108112
font-size: 30px;
109-
color: #fcac45;
110113
text-align: center;
111114
line-height: normal;
112115
}
@@ -117,5 +120,12 @@ const slidesData = useLocaleConfig({
117120
line-height: 22px;
118121
text-align: justify !important;
119122
padding: 15px;
123+
padding: 0 30rem;
124+
}
125+
@media screen and (max-width: 768px) {
126+
.slide-description {
127+
padding: 0 1rem;
128+
}
129+
120130
}
121131
</style>

‎src/.vuepress/public/bg.svg‎

Lines changed: 33 additions & 0 deletions
Loading

‎src/.vuepress/styles/config.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
* limitations under the License.
1717
*/
1818

19-
$theme-color: #495ad4;
19+
$theme-color: #9E2878;
2020
$colors: #c0392b, #d35400, #f39c12, #27ae60, #16a085, #2980b9, #8e44ad, #2c3e50,
2121
#7f8c8d;
2222
$code-bg-color: #282c34;

‎src/.vuepress/styles/index.scss‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@
1616
* limitations under the License.
1717
*/
1818

19-
// #main-description {
20-
// max-width: 55rem;
21-
// }
19+
#main-description {
20+
max-width: 55rem;
21+
}
22+
2223
.vp-skip-link {
2324
z-index: 1;
2425
}
@@ -31,11 +32,15 @@
3132
}
3233

3334
.vp-highlight-header,
34-
.vp-feature-header {
35-
color: #ffa500;
35+
.vp-feature-header,
36+
.slide-title {
37+
color: var(--vp-c-accent-bg);
3638
text-align: center;
3739
}
40+
.vp-feature-title{
41+
color: var(--vp-c-accent-bg);
3842

43+
}
3944
// FIXME: Should be an upstream bug
4045
.vp-highlight-info-wrapper:only-child {
4146
flex-basis: 0;
@@ -90,6 +95,28 @@ div[class*='language-'] pre code {
9095
}
9196

9297
.home {
98+
.vp-hero-title {
99+
background: linear-gradient(90deg, rgb(158, 40, 120) 0%, rgb(103, 56, 189) 100%);
100+
background-clip: text;
101+
display: inline-block;
102+
}
103+
104+
.vp-feature-item {
105+
&:hover {
106+
background-color: transparent;
107+
box-shadow: 0 2px 12px 0 var(--vp-c-shadow);
108+
transform: translate(-2px, -2px);
109+
transform: scale(1.05);
110+
}
111+
}
112+
113+
.vp-hero-action.default {
114+
background: var(--vp-c-bg);
115+
color: var(--vp-c-accent);
116+
&:hover {
117+
background: var(--vp-c-bg-alt);
118+
}
119+
}
93120
.theme-hope-content {
94121
inset: 0;
95122
z-index: 0;

‎src/.vuepress/theme.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default hopeTheme(
2929
docsRepo: 'https://github.com/apache/iotdb-docs',
3030
docsDir: 'src',
3131

32-
pure: true,
32+
focus: false,
3333
darkmode: 'toggle',
3434
breadcrumb: false,
3535
contributors: false,

‎src/README.md‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
---
2+
containerClass: home
23
home: true
4+
icon: home
35
heroText: Apache IoTDB
46
heroImage: /img/logo.svg
5-
tagline: Database for Internet of Things
7+
bgImage: bg.svg
8+
bgImageDark: bg.svg
9+
bgImageStyle:
10+
background-attachment: fixed
11+
heroFullScreen: true
12+
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.
13+
614
actions:
715
- text: Download
816
link: ./Download/
@@ -11,11 +19,16 @@ actions:
1119
- text: Quick Start
1220
link: ./UserGuide/latest/QuickStart/QuickStart_apache.html
1321

14-
highlights:
15-
- header: Introduction
16-
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.
22+
# highlights:
23+
# - header: Introduction
24+
# 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.
1725

26+
highlights:
1827
- header: Main Features
28+
bgImage: /bg.svg
29+
bgImageDark: /bg.svg
30+
bgImageStyle:
31+
background-attachment: fixed
1932
features:
2033
- title: High-throughput read and write
2134
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.

‎src/zh/README.md‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,34 @@
11
---
2+
containerClass: home
23
home: true
4+
icon: home
35
heroText: Apache IoTDB
46
heroImage: /img/logo.svg
5-
tagline: 物联网数据库
7+
bgImage: bg.svg
8+
bgImageDark: bg.svg
9+
bgImageStyle:
10+
background-attachment: fixed
11+
heroFullScreen: true
12+
tagline: Apache IoTDB（物联网数据库）是一体化收集、存储、管理与分析物联网时序数据的软件系统。Apache IoTDB 采用轻量式架构，具有高性能和丰富的功能，并与 Apache Hadoop、Spark 和 Flink 等进行了深度集成，可以满足工业物联网领域的海量数据存储、高速数据读取和复杂数据分析需求。
13+
614
actions:
715
- text: 下载
816
link: ./Download/
917
type: primary
1018

1119
- text: 快速上手
12-
link: ./UserGuide/latest/QuickStart/QuickStart_apache.html
20+
link: ./UserGuide/latest/QuickStart/QuickStart_apache
1321

14-
highlights:
15-
- header: 介绍
16-
description: Apache IoTDB（物联网数据库）是一体化收集、存储、管理与分析物联网时序数据的软件系统。Apache IoTDB 采用轻量式架构，具有高性能和丰富的功能，并与 Apache Hadoop、Spark 和 Flink 等进行了深度集成，可以满足工业物联网领域的海量数据存储、高速数据读取和复杂数据分析需求。
22+
# highlights:
23+
# - header: 介绍
24+
# description: Apache IoTDB（物联网数据库）是一体化收集、存储、管理与分析物联网时序数据的软件系统。Apache IoTDB 采用轻量式架构，具有高性能和丰富的功能，并与 Apache Hadoop、Spark 和 Flink 等进行了深度集成，可以满足工业物联网领域的海量数据存储、高速数据读取和复杂数据分析需求。
1725

26+
highlights:
1827
- header: 主要特点
28+
bgImage: /bg.svg
29+
bgImageDark: /bg.svg
30+
bgImageStyle:
31+
background-attachment: fixed
1932
features:
2033
- title: 高吞吐量读写
2134
details: Apache IoTDB 中可以支持数百万个低功耗和智能联网设备的高速写访问。 它还提供数据快速读取访问以查询。
@@ -34,6 +47,8 @@ highlights:
3447

3548
- title: 与开源生态系统的紧密集成
3649
details: Apache IoTDB 支持许多大数据软件生态系统，例如Hadoop、Spark、Flink和Grafana（可视化工具）
50+
51+
3752
---
3853

3954
<!--

0 commit comments

Comments
 (0)