This is an automated email from the ASF dual-hosted git repository.
lidongdai pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler-website.git
The following commit(s) were added to refs/heads/master by this push:
new c727588 Add events&news to the home page. (#348)
c727588 is described below
commit c7275884f3d78c65585516df6646ad1d240d7ce2
Author: GaoTianDuo <[email protected]>
AuthorDate: Fri Apr 30 18:20:21 2021 +0800
Add events&news to the home page. (#348)
---
site_config/home.jsx | 94 ++++++++++++++++++++++++++++++++++++++++++----
src/pages/home/index.jsx | 18 +++++----
src/pages/home/index.scss | 96 +++++++++++++++++++++++++++++------------------
3 files changed, 157 insertions(+), 51 deletions(-)
diff --git a/site_config/home.jsx b/site_config/home.jsx
index 28ebcd3..6df7dce 100644
--- a/site_config/home.jsx
+++ b/site_config/home.jsx
@@ -37,12 +37,12 @@ export default {
{
img: '/img/easyuse.png',
title: '简单易用',
- content: 'DAG监控界面，所有流程定义都是可视化，通过拖拽任务定制DAG，通过API方式与第三方系统对接, 一键部署',
+ content: 'DAG监控界面，所有流程定义都是可视化，通过拖拽任务完成定制DAG，通过API方式与第三方系统集成, 一键部署',
},
{
img: '/img/scene.png',
title: '丰富的使用场景',
- content: '支持暂停恢复操作. 支持多租户，更好的应对大数据的使用场景. 支持更多的任务类型，如 spark, hive,
mr, python, sub_process, shell',
+ content: '支持暂停恢复操作. 支持多租户，更好的应对大数据的使用场景. 支持更多的任务类型，如:Spark, Hive,
M/R, Python, Sub_process, Shell',
},
{
img: '/img/scaleout.png',
@@ -51,8 +51,45 @@ export default {
},
],
},
- news:{
- title: '事件&新闻',
+ events: {
+ title: '事件 & 新闻',
+ list: [
+ {
+ img: '/img/2020-05-26/live_online_20200526.jpeg',
+ title: 'Apache DolphinScheduler(Incubating) 1.3.0新特性及Roadmap路线直播',
+ content: 'Apache DolphinScheduler(Incubating)
1.3.0新特性及Roadmap路线在线直播，700多人在线',
+ dateStr: '2020-05-26',
+ link: '/zh-cn/blog/live_online_2020_05_26.html',
+ },
+ {
+ img: '/img/2019-12-08/941576036700_.pic_hd.jpg',
+ title: 'Apache ShardingSphere & DolphinScheduler联合Meetup成功举行',
+ content: 'Apache ShardingSphere & DolphinScheduler联合Meetup
2019年12月8日在北京成功举行。',
+ dateStr: '2019-12-13',
+ link: '/zh-cn/blog/meetup_2019_12_08.html',
+ },
+ {
+ img: '/img/meetup_20191026.jpg',
+ title: 'Apache Dolphin Scheduler(Incubating) Meetup 成功举行',
+ content: 'Apache Dolphin Scheduler(Incubating) Meetup
2019年10月26日在上海成功举行。',
+ dateStr: '2019-9-27',
+ link: '/zh-cn/blog/meetup_2019_10_26.html',
+ },
+ {
+ img: '/img/architecture.jpg',
+ title: '一个分布式易扩展的可视化DAG工作流任务调度系统',
+ content: '一个分布式易扩展的可视化DAG工作流任务调度系统',
+ dateStr: 'May 12nd，2018',
+ link: '/zh-cn/blog/architecture-design.html',
+ },
+ {
+ img: '/img/review_img4.png',
+ title: 'DolphinScheduler 开发者大会在北京成功举行',
+ content: 'DolphinScheduler 开发者大会在北京成功举行',
+ dateStr: 'May 12nd，2018',
+ link: '/zh-cn/development/architecture-design.html',
+ },
+ ],
},
},
'en-us': {
@@ -107,9 +144,52 @@ export default {
},
],
},
- news:{
- title: '事件&新闻',
- desc: 'Apache
DolphinScheduler是一个分布式去中心化，易扩展的可视化DAG工作流任务调度系统。致力于解决数据处理流程中错综复杂的依赖关系，使调度系统在数据处理流程中开箱即用。',
+ events: {
+ title: 'Events & News',
+ list: [
+ {
+ img: '/img/2021-03-16/boyi.png',
+ title: '[ANNOUNCE] Welcome to our new committer: BoYiZhang',
+ content: '[ANNOUNCE] Welcome to our new committer: BoYiZhang',
+ dateStr: '2021-03-16',
+ link:
'https://lists.apache.org/thread.html/rbd018b05da88d98f403dcd18098fa622c0c4c6db8d2b28c84028a818%40%3Cdev.dolphinscheduler.apache.org%3E',
+ },
+ {
+ img: '/img/2020-05-26/live_online_20200526.jpeg',
+ title: 'live online: Apache DolphinScheduler(Incubating) 1.3.0 new
feature and Roadmap',
+ content: 'live online: Apache DolphinScheduler(Incubating) 1.3.0 new
feature and Roadmap，more than 700 people online',
+ dateStr: '2020-05-26',
+ link: '/zh-cn/blog/live_online_2020_05_26.html',
+ },
+ {
+ img: '/img/2019-12-08/941576036700_.pic_hd.jpg',
+ title: 'Apache ShardingSphere & DolphinScheduler joint Meetup',
+ content: 'Apache ShardingSphere & DolphinScheduler Meetup
successfully held in Beijing on December 8, 2019',
+ dateStr: '2019-12-13',
+ link: '/en-us/blog/meetup_2019_12_08.html',
+ },
+ {
+ img: '/img/meetup_20191026.jpg',
+ title: 'Apache Dolphin Scheduler(Incubating) Meetup has been held
successfully',
+ content: 'Apache Dolphin Scheduler(Incubating) Meetup has been held
successfully in Shanghai 2019.10.26.',
+ dateStr: '2019-9-27',
+ link: '/en-us/blog/meetup_2019_10_26.html',
+ },
+ {
+ img: '/img/architecture.jpg',
+ title: 'A distributed and easy-to-extend visual workflow scheduler
system.',
+ content: 'A distributed and easy-to-extend visual workflow scheduler
system.',
+ dateStr: 'May 12nd，2018',
+ link: '/en-us/blog/architecture-design.html',
+ },
+ {
+ img: '/img/review_img4.png',
+ title: 'DolphinScheduler beijing meetup has been held successfully',
+ content: 'DolphinScheduler beijing meetup has been held
successfully',
+ dateStr: 'May 12nd，2018',
+ link: '/en-us/development/architecture-design.html',
+ },
+ ],
},
},
};
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 471feee..80262c8 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -8,6 +8,8 @@ import Language from '../../components/language';
import Item from './featureItem';
import homeConfig from '../../../site_config/home';
import './index.scss';
+import Slider from '../../components/slider';
+import EventCard from '../community/eventCard';
class Home extends Language {
constructor(props) {
@@ -119,14 +121,14 @@ class Home extends Language {
}
</ul>
</section>
- {/* <section className="news-section">
- <div className="news-body">
- <div className="news">
- <h3>{dataSource.news.title}</h3>
- <p>{dataSource.news.desc}</p>
- </div>
- </div>
- </section> */}
+ <section className="events-section">
+ <h3>{dataSource.events.title}</h3>
+ <Slider>
+ {dataSource.events.list.map((event, i) => (
+ <EventCard event={event} key={i} />
+ ))}
+ </Slider>
+ </section>
<Footer logo="/img/ds_gray.svg" language={language} />
</div>
);
diff --git a/src/pages/home/index.scss b/src/pages/home/index.scss
index eb5405a..7bd492a 100644
--- a/src/pages/home/index.scss
+++ b/src/pages/home/index.scss
@@ -148,36 +148,6 @@
text-align: center;
}
}
- .news-section {
- background: #F9FAFA;
- position: relative;
- .news-body {
- height: 600px;
- text-align: center;
- display: flex;
- justify-content: center;
- }
- .news{
- position: relative;
- color: #333;
- margin: 80px auto;
- h3 {
- font-family: Avenir-Heavy;
- font-size: 36px;
- color: #333;
- width: 940px;
- height: 54px;
- }
- p {
- font-family: Avenir-Heavy;
- font-size: 36px;
- color: #333;
- width: 940px;
- height: 54px;
- }
- }
-
- }
.introduction-section {
background: #F9FAFA;
.introduction-body {
@@ -208,10 +178,7 @@
background-image: linear-gradient(0deg, $startColor 0%,
$intermediateColor 51%, $endColor 100%);
}
.introduction {
- //display: inline-block;
- //width: calc(100% - 726px);
min-width: 300px;
- //max-width: 790px;
margin: 80px auto 0px auto;
h3 {
font-family: Avenir-Heavy;
@@ -289,7 +256,7 @@
margin: 0;
li {
width: 240px;
- height: 430px;
+ height: 360px;
text-align: center;
vertical-align: top;
display: inline-block;
@@ -301,10 +268,8 @@
}
img {
margin: 20px auto;
- // vertical-align: top;
width: 74px;
height: 74px;
- // margin-right: 20px;
display: block;
}
div {
@@ -339,6 +304,65 @@
}
}
}
+ .events-section {
+ max-width: $contentWidth;
+ margin: 0 auto 50px;
+ box-sizing: border-box;
+ @media screen and (max-width: $mobileWidth) {
+ padding: 0;
+ }
+ h3 {
+ font-family: Avenir-Heavy;
+ font-size: 36px;
+ color: #333;
+ text-align: center;
+ margin: 0 0 80px;
+ }
+ .event-card {
+ width: 373px;
+ font-size: 0;
+ img {
+ width: 373px;
+ height: 209px;
+ }
+ @media screen and (max-width: $mobileWidth / 2) {
+ width: 320px;
+ img {
+ width: 320px;
+ height: 179px;
+ }
+ }
+ .event-introduction {
+ padding: 20px;
+ background: #F8F8F8;
+ h4 {
+ font-family: Avenir-Heavy;
+ font-size: 20px;
+ color: #333;
+ margin: 0 0 10px;
+ }
+ p {
+ font-family: Avenir-Medium;
+ font-size: 14px;
+ color: #666;
+ margin: 0;
+ }
+ a {
+ display: inline-block;
+ width: 100%;
+ font-family: Avenir-Medium;
+ font-size: 12px;
+ color: #999;
+ margin-top: 10px;
+ .arrow {
+ width: 8px;
+ height: 13px;
+ float: right;
+ }
+ }
+ }
+ }
+ }
.start-section {
background-image: linear-gradient(0deg, $startColor 0%, $intermediateColor
51%, $endColor 100%);
.start-body {
