This is an automated email from the ASF dual-hosted git repository. critas pushed a commit to branch wx_home in repository https://gitbox.apache.org/repos/asf/iotdb-docs.git
commit 50980bba1a010c75f426ff3b2b4403a1924237a0 Author: CritasWang <[email protected]> AuthorDate: Fri Dec 20 18:19:48 2024 +0800 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(-) diff --git a/src/.vuepress/components/HomeCarousel.vue b/src/.vuepress/components/HomeCarousel.vue index 6b76572c..107473a9 100644 --- a/src/.vuepress/components/HomeCarousel.vue +++ b/src/.vuepress/components/HomeCarousel.vue @@ -77,26 +77,30 @@ const slidesData = useLocaleConfig({ </script> <template> - <h2 class="vp-feature-header"> - {{ title }} - </h2> - <Carousel v-bind="config"> - <Slide v-for="item in slidesData" :key="item.title"> - <div> - <img class="slide-image" :src="item.src" alt=""> - <h3 class="slide-title"> - {{ item.title }} - </h3> - <p class="slide-description"> - {{ item.detail }} - </p> - </div> - </Slide> + <div class="vp-feature-bg light" style="background-image: url('/bg.svg'); background-attachment: fixed;" /> + <div class="vp-feature-bg dark" style="background-image: url('/bg.svg'); background-attachment: fixed;" /> + <div class="vp-feature" style="max-width: unset;"> + <h2 class="vp-feature-header" style="margin-top: 0 !important; padding-top: 0 !important; color: var(--vp-c-accent-bg) !important;"> + {{ title }} + </h2> + <Carousel v-bind="config"> + <Slide v-for="item in slidesData" :key="item.title"> + <div> + <img class="slide-image" :src="item.src" alt=""> + <h3 class="slide-title"> + {{ item.title }} + </h3> + <p class="slide-description"> + {{ item.detail }} + </p> + </div> + </Slide> - <template #addons> - <Navigation /> - </template> - </Carousel> + <template #addons> + <Navigation /> + </template> + </Carousel> + </div> </template> <style lang="scss"> .slide-image { @@ -106,7 +110,6 @@ const slidesData = useLocaleConfig({ .slide-title { font-size: 30px; - color: #fcac45; text-align: center; line-height: normal; } @@ -117,5 +120,12 @@ const slidesData = useLocaleConfig({ line-height: 22px; text-align: justify !important; padding: 15px; + padding: 0 30rem; +} +@media screen and (max-width: 768px) { + .slide-description { + padding: 0 1rem; + } + } </style> diff --git a/src/.vuepress/public/bg.svg b/src/.vuepress/public/bg.svg new file mode 100644 index 00000000..b481e2b7 --- /dev/null +++ b/src/.vuepress/public/bg.svg @@ -0,0 +1,33 @@ +<svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; width="1920" height="1020" viewBox="0 0 1920 1020" fill="none"> +<g opacity="0.5"> +<g clip-path="url(#clip-path-0_111)"> +<rect x="0" y="0" width="1920" height="1020" fill="url(#linear_fill_0_159)" > +</rect> +<path d="M1472.74 902.34C1518.27 904.168 1551.84 944.909 1544.45 989.546C1537.07 1034.18 1489.06 1069.96 1445.59 1063.52C1393.86 1051.56 1362.92 1000.93 1305.84 1005.02C1248.07 1010.65 1210.72 1058.54 1179.08 1101.61C1124.02 1169.27 1002.63 1157.65 970.289 1086.11C937.618 1027.34 973.099 943.594 1042.62 915.546C1092.47 891.648 1153 903.836 1187.25 943.038C1219.21 979.377 1264.89 1008.92 1317.95 993.823C1380.51 977.422 1402.84 895.196 1472.74 902.34Z" fill-rule="evenodd" fill="#DDBCEB" > +</path> +<path d="M637.818 363.09C715.373 357.049 768.902 449.067 718.067 511.234C660.264 585.048 628.92 683.535 655.101 768.913C678.305 852.967 768.056 907.65 859.33 894.812C928.761 886.998 988.314 845.299 1035.16 796.102C1071.26 755.027 1086.54 704.683 1115.2 660.298C1156.09 608.453 1242.58 606.384 1279.35 655.927C1317.38 698.654 1298.48 773.186 1244.4 802.577C1208.51 827.156 1163.42 816.31 1124.65 819.333C1058.07 824.729 994.385 851.686 940.782 896.033C908.551 920.399 893.608 957.987 869.619 9 [...] +</path> +<path d="M657.893 209.819C696.104 212.076 711.486 257.628 683.718 283.98C660.413 312.317 610.179 301.024 604.766 269.124C595.692 237.438 627.687 205.594 657.893 209.819Z" fill-rule="evenodd" fill="#DDBCEB" > +</path> +<path d="M-95.5843 665.286C-57.3728 667.543 -41.3066 711.557 -69.76 739.447C-93.0643 767.784 -143.298 756.491 -148.027 723.053C-159.958 693.782 -127.278 660.399 -95.5843 665.286Z" fill-rule="evenodd" fill="#DDBCEB" > +</path> +<path d="M1405.76 548.127C1443.29 551.923 1459.35 595.936 1430.9 623.827C1408.28 650.626 1357.36 640.871 1352.63 607.432C1343.56 575.746 1373.38 544.779 1405.76 548.127Z" fill-rule="evenodd" fill="#DDBCEB" > +</path> +<path d="M148.564 385.006C179.847 330.727 270.793 330.644 293.733 383.246C314.473 412.75 292.893 449.228 289.498 480.895C279.019 520.469 300.234 564.93 337.432 581.482C382.992 607.284 448.405 588.469 487 625.918C550.206 676.16 532.369 784.346 455.883 824.04C384.663 867.922 286.697 831.703 272.539 755.36C255.998 696.39 313.707 642.811 301.512 582.088C296.071 526.213 239.648 504.793 191.021 497.901C139.537 493.424 119.098 427.191 148.564 385.006Z" fill-rule="evenodd" fill="#DDBCEB" > +</path> +<path d="M1040.51 271.322C1102.62 263.939 1145.94 334.826 1108.71 386.457C1092.96 421.844 1051.33 427.28 1021.03 443.29C979.752 459.944 953.262 503.453 955.252 543.046C954.742 596.272 1000.78 637.031 987.796 690.238C972.789 772.035 869.547 823.786 798.692 786.728C726.587 756.486 709.425 654.845 769.991 598.851C813.862 548.33 889.838 561.862 935.315 515.742C982.519 477.763 971.126 419.241 955.06 375.227C941.166 330.337 987.775 273.662 1040.51 271.322Z" fill-rule="evenodd" fill="#FFFFFF" > +</path> +<path d="M1699.99 339.33C1681.36 339.644 1670.73 317.424 1682.99 303.943C1688.59 294.256 1700.96 294.282 1710.18 290.642C1722.65 287.3 1731.74 275.674 1732.02 264.235C1733.44 248.979 1721.16 235.559 1726.35 220.63C1733.05 197.61 1764.62 186.311 1784.49 199.369C1805 210.419 1807.3 240.218 1787.81 254.799C1773.97 267.367 1751.85 260.925 1737.25 272.527C1722.37 281.862 1724.1 298.945 1727.47 312.75C1731.17 325.962 1715.88 340.59 1699.99 339.33Z" fill-rule="evenodd" fill="#BF529D" > +</path> +</g> +</g> +<defs> +<clipPath id="clip-path-0_111"> +<path d="M0 1020L1920 1020L1920 0L0 0L0 1020Z" fill="white"/> +</clipPath> +<radialGradient id="linear_fill_0_159" cx="0" cy="0" r="1" gradientTransform="translate(577.3824 490.4262) rotate(-180) scale(1358.7648, 721.8438)" gradientUnits="userSpaceOnUse"> +<stop offset="0" stop-color="#E3E5FF" /> +<stop offset="1" stop-color="#CECDFA" /> +</radialGradient> +</defs> +</svg> diff --git a/src/.vuepress/styles/config.scss b/src/.vuepress/styles/config.scss index e828ad19..e30f0107 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 e36ad3a3..15244633 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 6b209388..697bade6 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 1b9fe14e..bee23099 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 02e31bfe..bfe4867a 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（可视化工具） + + --- <!--
