You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@beam.apache.org by pa...@apache.org on 2022/05/03 18:56:56 UTC
[beam] branch master updated: Merge pull request #17205 from [BEAM-14145] [Website] add carousel to homepage
This is an automated email from the ASF dual-hosted git repository.
pabloem pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/beam.git
The following commit(s) were added to refs/heads/master by this push:
new f83ced3b8a3 Merge pull request #17205 from [BEAM-14145] [Website] add carousel to homepage
f83ced3b8a3 is described below
commit f83ced3b8a336bd583fea5d0c352b419bfb0899b
Author: bullet03 <bu...@akvelon.com>
AuthorDate: Wed May 4 00:56:50 2022 +0600
Merge pull request #17205 from [BEAM-14145] [Website] add carousel to homepage
* [BEAM-14145] [Website] add slider to quotes desktop
* [BEAM-14145] [Website] fix styles, js and html for slider
* [BEAM-14145] [Website] delete unused scss
* [BEAM-14145] [Website] add 2 quotes, change styles
* [BEAM-14145] [Website] reduce number of dots
* [BEAM-14145] [Website] fix slider
* [BEAM-14145] [Website] delete and add comments, change css and html quote img
* [BEAM-14145] [Website] change js, css and compress data-flow logo
* [BEAM-14145] [Website] delete unused var
* [BEAM-14145] [Website] change forEach variable name
* [BEAM-14145] [Website] transfer function
* [BEAM-14145] [Website] delete keen-slider, add slicker, change css, html structure
* [BEAM-14145] [Website] delete slick-slider, add swiper, change css, html structure
* [BEAM-14145] [Website] set loop to false on desktop, add css props to fix flickering
* [BEAM-14145] [Website] delete set loop false
* [BEAM-14145] [Website] delete loop
* [BEAM-14145] [Website] delete unused variable
* [BEAM-14145] [Website] add changes from PR17390 (BEAM14322)
* [BEAM-14145] [Website] add image for last card
* [BEAM-14145] [Website] change breakpoint
* [BEAM-14145] [Website] add comment for swiper 1024px breakpoint
* [BEAM-14145] [Website] add comment for swiper 1024px breakpoint
* [BEAM-14145] [Website] add slider to quotes desktop
* [BEAM-14145] [Website] fix styles, js and html for slider
* [BEAM-14145] [Website] delete unused scss
* [BEAM-14145] [Website] add 2 quotes, change styles
* [BEAM-14145] [Website] reduce number of dots
* [BEAM-14145] [Website] fix slider
* [BEAM-14145] [Website] delete and add comments, change css and html quote img
* [BEAM-14145] [Website] change js, css and compress data-flow logo
* [BEAM-14145] [Website] delete unused var
* [BEAM-14145] [Website] change forEach variable name
* [BEAM-14145] [Website] transfer function
* [BEAM-14145] [Website] delete keen-slider, add slicker, change css, html structure
* [BEAM-14145] [Website] delete slick-slider, add swiper, change css, html structure
* [BEAM-14145] [Website] set loop to false on desktop, add css props to fix flickering
* [BEAM-14145] [Website] delete set loop false
* [BEAM-14145] [Website] delete loop
* [BEAM-14145] [Website] delete unused variable
* [BEAM-14145] [Website] add changes from PR17390 (BEAM14322)
* [BEAM-14145] [Website] add image for last card
* [BEAM-14145] [Website] change breakpoint
* [BEAM-14145] [Website] add comment for swiper 1024px breakpoint
* [BEAM-14145] [Website] add comment for swiper 1024px breakpoint
---
website/www/site/assets/js/keen-slider.min.js | 15 -
website/www/site/assets/js/quotes-slider.js | 42 +--
website/www/site/assets/js/swiper-bundle.min.js | 14 +
website/www/site/assets/scss/_keen-slider.scss | 40 ---
website/www/site/assets/scss/_quotes.scss | 207 ++++++------
website/www/site/data/en/quotes.yaml | 28 +-
website/www/site/layouts/index.html | 370 ++++++++++-----------
website/www/site/layouts/partials/head.html | 2 +-
.../www/site/layouts/partials/hooks/body-end.html | 4 +-
.../site/layouts/partials/quotes/quote-mobile.html | 21 --
.../www/site/layouts/partials/quotes/quote.html | 49 ++-
.../site/static/images/logos/powered-by/blank.jpg | Bin 0 -> 631 bytes
.../static/images/logos/powered-by/dataflow.png | Bin 0 -> 5065 bytes
13 files changed, 384 insertions(+), 408 deletions(-)
diff --git a/website/www/site/assets/js/keen-slider.min.js b/website/www/site/assets/js/keen-slider.min.js
deleted file mode 100644
index ca5f65459ed..00000000000
--- a/website/www/site/assets/js/keen-slider.min.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Skipped minification because the original files appears to be already minified.
- * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
- */
-/**
- * keen-slider 5.3.2
- * The HTML touch slider carousel with the most native feeling you will get.
- * https://keen-slider.io
- * Copyright 2020-2020 Eric Beyer <co...@ericbeyer.de>
- * License: MIT
- * Released on: 2020-11-10
- */
-
-!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).KeenSlider=n()}(this,(function(){"use strict";function t(t,n,e){return n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}function n(t,n){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(t,n) [...]
-//# sourceMappingURL=keen-slider.js.map
\ No newline at end of file
diff --git a/website/www/site/assets/js/quotes-slider.js b/website/www/site/assets/js/quotes-slider.js
index 27f2d931308..35615718a95 100644
--- a/website/www/site/assets/js/quotes-slider.js
+++ b/website/www/site/assets/js/quotes-slider.js
@@ -10,33 +10,21 @@
// License for the specific language governing permissions and limitations under
// the License.
-var slider = new KeenSlider("#my-keen-slider", {
- loop: true,
- created: function (instance) {
- var dots_wrapper = document.getElementById("dots");
- var slides = document.querySelectorAll(".keen-slider__slide");
- slides.forEach(function (t, idx) {
- var dot = document.createElement("button");
- dot.classList.add("dot");
- dots_wrapper.appendChild(dot);
- dot.addEventListener("click", function () {
- instance.moveToSlide(idx);
- });
- });
- updateClasses(instance);
+new Swiper('.swiper', {
+ loop: false,
+ slidesPerView: 1,
+ slidesPerGroup: 1,
+ pagination: {
+ el: ".swiper-pagination",
+ clickable: true,
+ bulletClass: "bullet-class-custom",
+ bulletActiveClass: "bullet-active-class-custom",
},
- slideChanged(instance) {
- updateClasses(instance);
+ breakpoints: {
+ // switches from mobile to desktop when window width is > 1024px
+ 1025: {
+ slidesPerView: 3,
+ slidesPerGroup: 3,
+ },
}
});
-
-function updateClasses(instance) {
- var slide = instance.details().relativeSlide;
-
- var dots = document.querySelectorAll(".dot");
- dots.forEach(function (dot, idx) {
- idx === slide
- ? dot.classList.add("dot--active")
- : dot.classList.remove("dot--active");
- });
-}
\ No newline at end of file
diff --git a/website/www/site/assets/js/swiper-bundle.min.js b/website/www/site/assets/js/swiper-bundle.min.js
new file mode 100644
index 00000000000..77510291aa5
--- /dev/null
+++ b/website/www/site/assets/js/swiper-bundle.min.js
@@ -0,0 +1,14 @@
+/**
+ * Swiper 8.1.0
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * https://swiperjs.com
+ *
+ * Copyright 2014-2022 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: April 8, 2022
+ */
+
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Swiper=t()}(this,(function(){"use strict";function e(e){return null!==e&&"object"==typeof e&&"constructor"in e&&e.constructor===Object}function t(s,a){void 0===s&&(s={}),void 0===a&&(a={}),Object.keys(a).forEach((i=>{void 0===s[i]?s[i]=a[i]:e(a[i])&&e(s[i])&&Object.keys(a[i]).length>0&&t(s[i],a[i])}))} [...]
+//# sourceMappingURL=swiper-bundle.min.js.map
diff --git a/website/www/site/assets/scss/_keen-slider.scss b/website/www/site/assets/scss/_keen-slider.scss
deleted file mode 100644
index 08a4326e004..00000000000
--- a/website/www/site/assets/scss/_keen-slider.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * keen-slider 5.3.2
- * The HTML touch slider carousel with the most native feeling you will get.
- * https://keen-slider.io
- * Copyright 2020-2020 Eric Beyer <co...@ericbeyer.de>
- * License: MIT
- * Released on: 2020-11-10
- */
-
-/*# sourceMappingURL=keen-slider.min.css.map */
-// This is pulled from "https://cdn.jsdelivr.net/npm/keen-slider@5.3.2/keen-slider.min.css" to serve the consistency
-.keen-slider {
- display: flex;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- -webkit-touch-callout: none;
- -khtml-user-select: none;
- touch-action: pan-y;
- -webkit-tap-highlight-color: transparent;
-}
-.keen-slider,
-.keen-slider__slide {
- overflow: hidden;
- position: relative;
-}
-.keen-slider__slide {
- width: 100%;
- min-height: 100%;
-}
-.keen-slider[data-keen-slider-v] {
- flex-wrap: wrap;
-}
-.keen-slider[data-keen-slider-v] .keen-slider__slide {
- width: 100%;
-}
-.keen-slider[data-keen-slider-moves] * {
- pointer-events: none;
-}
diff --git a/website/www/site/assets/scss/_quotes.scss b/website/www/site/assets/scss/_quotes.scss
index ec5f87f6cf6..96667a79931 100644
--- a/website/www/site/assets/scss/_quotes.scss
+++ b/website/www/site/assets/scss/_quotes.scss
@@ -17,9 +17,42 @@
@import "media";
+.quote-img-container {
+ display: flex;
+ flex: 1;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+}
+
+.quote-img {
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ img {
+ height: 100%;
+ object-fit: contain;
+ }
+}
+
+.wrap-slide {
+ padding: 20px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+}
+
+.quotes-inner {
+ max-width: 1200px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
.quotes {
padding: 40px 30px 10px;
background-color: $color-medium-gray;
+ width: 100%;
.quotes-title {
@extend .component-title;
@@ -31,104 +64,50 @@
.quotes-desktop {
display: flex;
- justify-content: center;
-
- .quote-card {
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- width: 100%;
- max-width: 381px;
- height: 474px;
- margin: 40px 36px 0 0;
- padding: 55px 20px 24px 20px;
- border-radius: 16px;
- background-color: $color-white;
- box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16),
- 0 4px 4px 0 rgba(0, 0, 0, 0.06);
- margin-right: 36px;
-
- .quote-text {
- @extend .component-quote;
-
- margin: 108px 0 20px 0;
- }
-
- img {
- max-height: 118px;
- max-width: 320px;
- }
- }
-
- :last-child {
- margin-right: 0;
- }
+ justify-content: space-between;
+ width: 100%;
+ overflow: hidden;
}
- // Sliding feature is only displayed on mobile version
- .keen-slider {
- display: none;
- }
-
- .dots {
- display: none;
- }
-
- .keen-slider {
- width: 327px;
- margin: 0 auto;
+ .quote-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ width: 100%;
+ overflow: hidden;
+ height: 600px;
+ margin: 76px 0 20px 0;
+ padding: 55px 20px 24px 20px;
border-radius: 16px;
background-color: $color-white;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16),
- 0 4px 4px 0 rgba(0, 0, 0, 0.06);
+ 0 4px 4px 0 rgba(0, 0, 0, 0.06);
- .keen-slider__slide {
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- width: 100%;
- max-width: 327px;
- height: 468px;
- padding: 55px 24px 24px 24px;
-
- .quote-text {
- @extend .component-quote;
-
- margin: 108px 0 20px 0;
- }
+ .quote-text {
+ @extend .component-quote;
- img {
- width: 172px;
- }
+ min-height: 260px;
+ height: 260px;
+ margin: 40px 0 20px 0;
+ overflow: hidden;
}
- }
- .dots {
- display: none;
- padding: 10px 0;
- justify-content: center;
- margin-top: 46px;
- }
-
- .dot {
- border: none;
- width: 13px;
- height: 13px;
- background: $color-smoke;
- border-radius: 50%;
- margin: 0 5px;
- padding: 4px;
- cursor: pointer;
- }
+ img {
+ display: block;
+ max-height: 118px;
+ }
- .dot:focus {
- outline: none;
- }
+ .quote-card-link {
+ color: #E74D1A;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
- .dot--active {
- background: $color-sun;
+ span {
+ padding-right: 10px;
+ }
+ }
}
}
@@ -137,20 +116,60 @@
.quotes-title {
margin-bottom: 64px;
}
+
h2 {
margin-bottom: 0 !important;
}
- .quotes-desktop {
- display: none;
- }
+ }
+}
- .keen-slider {
+
+.bullet-class-custom {
+ display: inline-block;
+ border: none;
+ width: 13px;
+ height: 13px;
+ background: $color-smoke;
+ border-radius: 50%;
+ margin: 0 5px;
+ padding: 4px;
+ cursor: pointer;
+ bottom: 0;
+}
+
+.bullet-active-class-custom {
+ background: $color-sun;
+}
+
+#swiper-pagination-id {
+ bottom: -5px;
+}
+
+.swiper-slide {
+ -webkit-backface-visibility: hidden;
+ -webkit-transform: translate3d(0, 0, 0);
+
+ .case-study-row-button-container {
+ display: none;
+ }
+
+ .quote-card-link-container {
+ display: block;
+ }
+
+ &:last-child {
+ .quote-text {
display: flex;
- width: 100%;
+ align-items: center;
}
- .dots {
- display: flex;
+ .quote-card-link-container {
+ display: none;
+ }
+
+ .case-study-row-button-container {
+ display: block;
+ margin: 0;
}
}
}
diff --git a/website/www/site/data/en/quotes.yaml b/website/www/site/data/en/quotes.yaml
index 16766feb4b3..93823113678 100644
--- a/website/www/site/data/en/quotes.yaml
+++ b/website/www/site/data/en/quotes.yaml
@@ -10,12 +10,28 @@
# See the License for the specific language governing permissions and
# limitations under the License.
-- text: eBay, an e-commerce company, uses Apache Beam in their streaming pipelines to integrate with other OSS services such as Apache Kafka and Apache Airflow.
+- text: Seznam, a Czech search engine, has been an early contributor and adopter of Apache Beam, and they migrated several petabyte-scale workloads to Apache Beam pipelines.
icon: icons/quote-icon.svg
- logoUrl: images/logos/powered-by/eBay.png
-- text: Developed at Spotify and built on top of Apache Beam, Klio is an open source framework for data processing pipelines for audio and other media files.
+ logoUrl: images/logos/powered-by/seznam.png
+ linkUrl: https://beam.apache.org/case-studies/seznam/
+ linkText: Learn more
+- text: Palo Alto Networks, Inc. is a global cybersecurity leader that uses Apache Beam to process ~10 millions of security log events per second for their real-time streaming infrastructure.
icon: icons/quote-icon.svg
- logoUrl: images/logos/powered-by/klio.png
-- text: Oriel Research Therapeutics (ORT) is a startup company that utilizes Apache Beam to process over 1 million samples of genomic data to detect Leukemia, Sepsis and other medical conditions.
+ logoUrl: images/logos/powered-by/paloalto.png
+ linkUrl: https://beam.apache.org/case-studies/paloalto/
+ linkText: Learn more
+- text: Apache Beam provides Ricardo, a leading Swiss second hand marketplace, with a scalable and reliable data processing framework that supports fundamental business scenarios and enables real-time and ML data processing.
icon: icons/quote-icon.svg
- logoUrl: images/logos/powered-by/oriel.png
+ logoUrl: images/logos/powered-by/ricardo.png
+ linkUrl: https://beam.apache.org/case-studies/ricardo/
+ linkText: Learn more
+- text: Apache Hop, an open-source data orchestration platform, uses Apache Beam to "design once, run anywhere" and creates a value-add for Apache Beam users by enabling visual pipeline development and lifecycle management.
+ icon: icons/quote-icon.svg
+ logoUrl: images/logos/powered-by/hop.svg
+ linkUrl: https://beam.apache.org/case-studies/hop/
+ linkText: Learn more
+- text: Have a story to share? Your logo could be here.
+ icon: icons/quote-icon.svg
+ logoUrl: images/logos/powered-by/blank.jpg
+ linkUrl: mailto:dev@beam.apache.org?subject=Beam
+ linkText: Share your story
diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html
index 257ccc5c79c..397ad93f214 100644
--- a/website/www/site/layouts/index.html
+++ b/website/www/site/layouts/index.html
@@ -1,63 +1,63 @@
{{/*
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License. See accompanying LICENSE file.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. See accompanying LICENSE file.
*/}}
{{ define "hero-section" }}
- <div id="hero-desktop" class="hero-desktop">
- <div class="hero-content">
- <h3>{{ T "home-hero-title" }}</h3>
- <h1>{{ T "home-hero-heading" }}</h1>
- <h2>{{ T "home-hero-subheading" }}</h2>
- <a href={{ "https://github.com/apache/beam" | relLangURL }}>
- <button>
- {{ with resources.Get "icons/install-button-icon.svg" }}
- {{ .Content | safeHTML }}
- {{ end }}
- <span>{{ T "home-hero-button" }}</span>
- </button>
- </a>
- </div>
+<div id="hero-desktop" class="hero-desktop">
+ <div class="hero-content">
+ <h3>{{ T "home-hero-title" }}</h3>
+ <h1>{{ T "home-hero-heading" }}</h1>
+ <h2>{{ T "home-hero-subheading" }}</h2>
+ <a href={{ "https://github.com/apache/beam" | relLangURL }}>
+ <button>
+ {{ with resources.Get "icons/install-button-icon.svg" }}
+ {{ .Content | safeHTML }}
+ {{ end }}
+ <span>{{ T "home-hero-button" }}</span>
+ </button>
+ </a>
</div>
- <div id="hero-mobile" class="hero-mobile">
- <div class="hero-content">
- <h3>{{ T "home-hero-title" }}</h3>
- <h1>{{ T "home-hero-heading" }}</h1>
- <h2>{{ T "home-hero-subheading" }}</h2>
- </div>
+</div>
+<div id="hero-mobile" class="hero-mobile">
+ <div class="hero-content">
+ <h3>{{ T "home-hero-title" }}</h3>
+ <h1>{{ T "home-hero-heading" }}</h1>
+ <h2>{{ T "home-hero-subheading" }}</h2>
</div>
+</div>
{{ end }}
{{ define "pillars-section" }}
- <div class="pillars">
- <h2 class="pillars-title">
- {{ T "home-pillars-title" }}
- </h2>
- <div class="pillars-content">
+<div class="pillars">
+ <h2 class="pillars-title">
+ {{ T "home-pillars-title" }}
+ </h2>
+ <div class="pillars-content">
+ {{ $data := index $.Site.Data .Site.Language.Lang }}
+ {{ range $pillar := $data.pillars }}
+ {{ partial "pillars/pillars-item" (dict "logo" $pillar.icon "header" $pillar.title "text" $pillar.body) }}
+ {{ end }}
+ </div>
+ <div class="pillars-social">
+ <div class="pillars-social-icons">
{{ $data := index $.Site.Data .Site.Language.Lang }}
- {{ range $pillar := $data.pillars }}
- {{ partial "pillars/pillars-item" (dict "logo" $pillar.icon "header" $pillar.title "text" $pillar.body) }}
+ {{ range $pillars_social := $data.pillars_social }}
+ {{ partial "pillars/pillars-social" (dict "icon" $pillars_social.icon "url" $pillars_social.url "name" $pillars_social.name) }}
{{ end }}
</div>
- <div class="pillars-social">
- <div class="pillars-social-icons">
- {{ $data := index $.Site.Data .Site.Language.Lang }}
- {{ range $pillars_social := $data.pillars_social }}
- {{ partial "pillars/pillars-social" (dict "icon" $pillars_social.icon "url" $pillars_social.url "name" $pillars_social.name) }}
- {{ end }}
- </div>
- <p class="pillars-social-text">
- {{ T "home-pillars-social-text" }}
- </p>
- </div>
+ <p class="pillars-social-text">
+ {{ T "home-pillars-social-text" }}
+ </p>
</div>
+</div>
{{ end }}
{{ define "playground-section" }}
@@ -85,180 +85,178 @@
{{ end }}
{{ define "graphic-section" }}
- <div class="graphic">
- <div class="quotes">
- <h2 class="margin">{{ T "home-model-title1" }}</h2>
- <div class="margin section">
- <div class="row images desktop">
- <img src="/images/model-sources-icon.svg" class='icon'/>
- <img src="/images/model-ellipse.svg"/>
- <img src="/images/model-processing-icon.svg" class='icon'/>
- <img src="/images/model-ellipse.svg"/>
- <img src="/images/model-sinks-icon.svg" class='icon'/>
- </div>
- <div class="row">
- {{ $data := index $.Site.Data .Site.Language.Lang }}
- {{ range $item := $data.graphic }}
- <div class="column">
- <img src="{{ .icon }}" class='icon mobile'/>
- <h4>{{ .title }}</h4>
- <p>{{ .body }}</p>
- </div>
- {{ end }}
+<div class="graphic">
+ <div class="quotes">
+ <h2 class="margin">{{ T "home-model-title1" }}</h2>
+ <div class="margin section">
+ <div class="row images desktop">
+ <img src="/images/model-sources-icon.svg" class='icon'/>
+ <img src="/images/model-ellipse.svg"/>
+ <img src="/images/model-processing-icon.svg" class='icon'/>
+ <img src="/images/model-ellipse.svg"/>
+ <img src="/images/model-sinks-icon.svg" class='icon'/>
+ </div>
+ <div class="row">
+ {{ $data := index $.Site.Data .Site.Language.Lang }}
+ {{ range $item := $data.graphic }}
+ <div class="column">
+ <img src="{{ .icon }}" class='icon mobile'/>
+ <h4>{{ .title }}</h4>
+ <p>{{ .body }}</p>
</div>
+ {{ end }}
</div>
</div>
- <div class="section">
- <h2 class="margin">{{ T "home-model-title2" }}</h2>
- <div class="row margin">
- <div class="column">
- <div class="logos-row">
- <img class="first_logo" src="/images/logos/runners/flink.png"/>
- <img src="/images/logos/runners/spark.png"/>
- <img id="last_logo" src="/images/logos/runners/amazon_kinesis.png"/>
- </div>
- <p class="more">{{ T "home-graphic-more" }}</p>
- <div>
- <h4>{{ T "home-graphic-runner-title" }}</h4>
- <p>{{ T "home-graphic-runner-body" }}</p>
- </div>
+ </div>
+ <div class="section">
+ <h2 class="margin">{{ T "home-model-title2" }}</h2>
+ <div class="row margin">
+ <div class="column">
+ <div class="logos-row">
+ <img class="first_logo" src="/images/logos/runners/flink.png"/>
+ <img src="/images/logos/runners/spark.png"/>
+ <img id="last_logo" src="/images/logos/runners/amazon_kinesis.png"/>
</div>
- <div class="column">
- <div class="logos-row">
- <img class="first_logo" src="/images/logos/sdks/python-logo.png"/>
- <img src="/images/logos/sdks/go.png"/>
- </div>
- <p class="more">{{ T "home-graphic-more" }}</p>
- <div>
- <h4>{{ T "home-graphic-language-title" }}</h4>
- <p>{{ T "home-graphic-language-body" }}</p>
- </div>
+ <p class="more">{{ T "home-graphic-more" }}</p>
+ <div>
+ <h4>{{ T "home-graphic-runner-title" }}</h4>
+ <p>{{ T "home-graphic-runner-body" }}</p>
+ </div>
+ </div>
+ <div class="column">
+ <div class="logos-row">
+ <img class="first_logo" src="/images/logos/sdks/python-logo.png"/>
+ <img src="/images/logos/sdks/go.png"/>
+ </div>
+ <p class="more">{{ T "home-graphic-more" }}</p>
+ <div>
+ <h4>{{ T "home-graphic-language-title" }}</h4>
+ <p>{{ T "home-graphic-language-body" }}</p>
</div>
</div>
</div>
</div>
+</div>
{{ end }}
{{ define "calendar-section" }}
- <div class="calendar">
- <h2 class="calendar-title">
- {{ T "home-calendar-title" }}
- </h2>
- <div class="calendar-content">
- <div class="calendar-card-big calendar-card-big-left">
- <div class="desktop">
- <a class="twitter-timeline" data-width="381" data-height="460" href="https://twitter.com/ApacheBeam?ref_src=twsrc%5Etfw">Tweets by ApacheBeam</a>
- </div>
- <div class="mobile">
- <a class="twitter-timeline" data-width="381" data-height="348" href="https://twitter.com/ApacheBeam?ref_src=twsrc%5Etfw">Tweets by ApacheBeam</a>
- </div>
+<div class="calendar">
+ <h2 class="calendar-title">
+ {{ T "home-calendar-title" }}
+ </h2>
+ <div class="calendar-content">
+ <div class="calendar-card-big calendar-card-big-left">
+ <div class="desktop">
+ <a class="twitter-timeline" data-width="381" data-height="460" href="https://twitter.com/ApacheBeam?ref_src=twsrc%5Etfw">Tweets by ApacheBeam</a>
+ </div>
+ <div class="mobile">
+ <a class="twitter-timeline" data-width="381" data-height="348" href="https://twitter.com/ApacheBeam?ref_src=twsrc%5Etfw">Tweets by ApacheBeam</a>
</div>
- <div class="calendar-card-box post">
- {{ range first 2 (after 1 (where .Site.Pages.ByPublishDate.Reverse "Section" "blog")) }}
- <a class="post-card" href="{{ .RelPermalink }}" data-categories="{{ with .Params.categories }}{{ if eq ( printf "%T" . ) "string" }}{{ . | replaceRE "[.]" "_" | urlize }}{{ else if eq ( printf "%T" . ) "[]string" }}{{ range . }}{{ . | replaceRE "[.]" "_" | urlize }} {{end}}{{end}}{{else}}no-author{{end}}"
- >
- <div class="post-info post-category">
- <p>
- {{ if .Params.categories }}
- {{ delimit .Params.categories ", " " & " }}
- {{ end }}
- </p>
- <p>{{ .Date.Format "2006/01/02" }}</p>
- </div>
- <div>
- <p class="post-title">{{ .Title }}</p>
- <p class="post-info">
- {{ $authors := .Params.authors }}
- {{ with $authors }}
- {{ range $i, $item := $authors }}
- {{ if not (isset $.Site.Data.authors $item) }} {{ errorf "Author '%s' is not defined. Please add them to 'website/www/site/data/authors.yml'" $item }} {{end}}
- {{ $author := index $.Site.Data.authors $item }}
- {{ if eq $i (sub (len $authors) 1) }}
- {{ $author.name }}
- {{ else if eq $i (sub (len $authors) 2) }}
- {{ $author.name }} &
- {{ else }}
- {{ $author.name }},
- {{ end }}
- {{ end }}
- {{ end }}
- </p>
- </div>
- </a>
+ </div>
+ <div class="calendar-card-box post">
+ {{ range first 2 (after 1 (where .Site.Pages.ByPublishDate.Reverse "Section" "blog")) }}
+ <a class="post-card" href="{{ .RelPermalink }}" data-categories="{{ with .Params.categories }}{{ if eq ( printf "%T" . ) "string" }}{{ . | replaceRE "[.]" "_" | urlize }}{{ else if eq ( printf "%T" . ) "[]string" }}{{ range . }}{{ . | replaceRE "[.]" "_" | urlize }} {{end}}{{end}}{{else}}no-author{{end}}"
+ >
+ <div class="post-info post-category">
+ <p>
+ {{ if .Params.categories }}
+ {{ delimit .Params.categories ", " " & " }}
+ {{ end }}
+ </p>
+ <p>{{ .Date.Format "2006/01/02" }}</p>
+ </div>
+ <div>
+ <p class="post-title">{{ .Title }}</p>
+ <p class="post-info">
+ {{ $authors := .Params.authors }}
+ {{ with $authors }}
+ {{ range $i, $item := $authors }}
+ {{ if not (isset $.Site.Data.authors $item) }} {{ errorf "Author '%s' is not defined. Please add them to 'website/www/site/data/authors.yml'" $item }} {{end}}
+ {{ $author := index $.Site.Data.authors $item }}
+ {{ if eq $i (sub (len $authors) 1) }}
+ {{ $author.name }}
+ {{ else if eq $i (sub (len $authors) 2) }}
+ {{ $author.name }} &
+ {{ else }}
+ {{ $author.name }},
+ {{ end }}
{{ end }}
+ {{ end }}
+ </p>
</div>
- <div class="calendar-card-big calendar-card-big-right">
- <p class="calendar-card-event-title">{{ T "home-calendar-card-events-title" }}</p>
- <div class="calendar-card-events">
- <div class="calendar-desktop">
- <iframe id='calendar' src="https://calendar.google.com/calendar/embed?src=r24up18ne2ddgl0t93flk0hsj8%40group.calendar.google.com" style="border: 0" width="333" height="320" frameborder="0" scrolling="no"></iframe>
- </div>
- <div class="calendar-mobile">
- <iframe id='calendar' src="https://calendar.google.com/calendar/embed?src=r24up18ne2ddgl0t93flk0hsj8%40group.calendar.google.com" style="border: 0" width="287" height="300" frameborder="0" scrolling="no"></iframe>
- </div>
+ </a>
+ {{ end }}
+ </div>
+ <div class="calendar-card-big calendar-card-big-right">
+ <p class="calendar-card-event-title">{{ T "home-calendar-card-events-title" }}</p>
+ <div class="calendar-card-events">
+ <div class="calendar-desktop">
+ <iframe id='calendar' src="https://calendar.google.com/calendar/embed?src=r24up18ne2ddgl0t93flk0hsj8%40group.calendar.google.com" style="border: 0" width="333" height="320" frameborder="0" scrolling="no"></iframe>
+ </div>
+ <div class="calendar-mobile">
+ <iframe id='calendar' src="https://calendar.google.com/calendar/embed?src=r24up18ne2ddgl0t93flk0hsj8%40group.calendar.google.com" style="border: 0" width="287" height="300" frameborder="0" scrolling="no"></iframe>
</div>
</div>
</div>
</div>
+</div>
{{ end }}
{{ define "quotes-section" }}
- <div class="quotes">
+<div class="quotes">
+ <div class="quotes-inner">
<div class="quotes-title">
{{ T "home-quotes-title" }}
</div>
- <div class="quotes-desktop">
- {{ $data := index $.Site.Data .Site.Language.Lang }}
- {{ range $quote := $data.quotes }}
- {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text "logoUrl" $quote.logoUrl) }}
- {{ end }}
+ <div class="quotes-desktop swiper">
+ <div class="swiper-wrapper">
+ {{ $data := index $.Site.Data .Site.Language.Lang }}
+ {{ range $quote := $data.quotes }}
+ <div class="swiper-slide">
+ {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text "logoUrl" $quote.logoUrl "linkUrl" $quote.linkUrl "linkText" $quote.linkText) }}
+ </div>
+ {{ end }}
+ </div>
+ <div id="swiper-pagination-id" class="swiper-pagination"></div>
</div>
- {{/*
- The id "my-keen-slider" and "dots" should be named as defaults to make the external library (Keen Slider) works well
- */}}
- <div id="my-keen-slider" class="keen-slider quote-mobile">
- {{ $data := index $.Site.Data .Site.Language.Lang }}
- {{ range $quote := $data.quotes }}
- {{ partial "quotes/quote-mobile.html" (dict "icon" $quote.icon "text" $quote.text "logoUrl" $quote.logoUrl) }}
- {{ end }}
- </div>
- <div id="dots" class="dots"></div>
</div>
+</div>
{{ end }}
{{ define "logos-section" }}
- <div class="logos">
- <div class="logos-title">
- {{ T "home-logos-title" }}
- </div>
- <div class="logos-logos">
- {{ range $logo := $.Site.Data.works_with }}
- <div class="logos-logo">
- <a href="{{ $logo.url }}"><img src="{{ $logo.image_url }}" alt="{{ $logo.title }}"></a>
- </div>
- {{ end }}
+<div class="logos">
+ <div class="logos-title">
+ {{ T "home-logos-title" }}
+ </div>
+ <div class="logos-logos">
+ {{ range $logo := $.Site.Data.works_with }}
+ <div class="logos-logo">
+ <a href="{{ $logo.url }}"><img src="{{ $logo.image_url }}" alt="{{ $logo.title }}"></a>
</div>
+ {{ end }}
</div>
+</div>
{{ end }}
{{ define "ctas-section" }}
- <div class="ctas">
- <div class='ctas_row'>
- <a class="ctas_button" href={{ "/get-started/beam-overview/" | relLangURL }}><img src="images/info_icon.svg" /> {{ T "home-learn-more" }}</a>
- </div>
- <div class='ctas_row'>
- <a class="ctas_button" href={{ "/get-started/quickstart-java/" | relLangURL }}>{{ T "home-java-quickstart" }}</a>
- </div>
- <div class='ctas_row'>
- <a class="ctas_button" href={{ "/get-started/quickstart-py/" | relLangURL }}>{{ T "home-python-quickstart" }}</a>
- </div>
- <div class='ctas_row'>
- <a class="ctas_button" href={{ "/get-started/quickstart-go/" | relLangURL }}>{{ T "home-go-quickstart" }}</a>
- </div>
- <div class='ctas_row'>
- <a class="ctas_button" href={{ "https://play.beam.apache.org/" | relLangURL }}>{{ T "home-playground" }}</a>
- </div>
+<div class="ctas">
+ <div class='ctas_row'>
+ <a class="ctas_button" href={{ "/get-started/beam-overview/" | relLangURL }}><img src="images/info_icon.svg" /> {{ T "home-learn-more" }}</a>
+ </div>
+ <div class='ctas_row'>
+ <a class="ctas_button" href={{ "/get-started/quickstart-java/" | relLangURL }}>{{ T "home-java-quickstart" }}</a>
+ </div>
+ <div class='ctas_row'>
+ <a class="ctas_button" href={{ "/get-started/quickstart-py/" | relLangURL }}>{{ T "home-python-quickstart" }}</a>
</div>
+ <div class='ctas_row'>
+ <a class="ctas_button" href={{ "/get-started/quickstart-go/" | relLangURL }}>{{ T "home-go-quickstart" }}</a>
+ </div>
+ <div class='ctas_row'>
+ <a class="ctas_button" href={{ "https://play.beam.apache.org/" | relLangURL }}>{{ T "home-playground" }}</a>
+ </div>
+</div>
{{ end }}
+
diff --git a/website/www/site/layouts/partials/head.html b/website/www/site/layouts/partials/head.html
index a23eb6a166e..3ef2f37c1cf 100644
--- a/website/www/site/layouts/partials/head.html
+++ b/website/www/site/layouts/partials/head.html
@@ -64,8 +64,8 @@
<link rel="canonical" href="{{ .Site.Params.hostName }}{{ .Permalink | absURL }}" data-proofer-ignore>
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
+<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/keen-slider@5.3.2/keen-slider.min.css"/>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
diff --git a/website/www/site/layouts/partials/hooks/body-end.html b/website/www/site/layouts/partials/hooks/body-end.html
index b2500f98cd9..3b1d7eb1252 100644
--- a/website/www/site/layouts/partials/hooks/body-end.html
+++ b/website/www/site/layouts/partials/hooks/body-end.html
@@ -16,8 +16,8 @@
<script src="{{ $heroDesktop.RelPermalink }}"></script>
{{ $heroMobile := resources.Get "js/hero/hero-mobile.js" | minify | fingerprint }}
<script src="{{ $heroMobile.RelPermalink }}"></script>
-{{ $keenSlider := resources.Get "js/keen-slider.min.js" | minify | fingerprint }}
-<script src="{{ $keenSlider.RelPermalink }}"></script>
+{{ $swiperSlider := resources.Get "js/swiper-bundle.min.js" | minify | fingerprint }}
+<script src="{{ $swiperSlider.RelPermalink }}"></script>
{{ $quotesSlider := resources.Get "js/quotes-slider.js" | minify | fingerprint }}
<script src="{{ $quotesSlider.RelPermalink }}"></script>
{{ $fixPlaygroundNestedScroll := resources.Get "js/fix-playground-nested-scroll.js" | minify | fingerprint }}
diff --git a/website/www/site/layouts/partials/quotes/quote-mobile.html b/website/www/site/layouts/partials/quotes/quote-mobile.html
deleted file mode 100644
index 756fe3be39c..00000000000
--- a/website/www/site/layouts/partials/quotes/quote-mobile.html
+++ /dev/null
@@ -1,21 +0,0 @@
-{{/*
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License. See accompanying LICENSE file.
-*/}}
-
-<div class="keen-slider__slide">
- <div class="quote-icon">
- {{ with resources.Get .icon }}
- {{ .Content | safeHTML }}
- {{ end }}
- </div>
- <h5 class="quote-text">{{ .text | markdownify }}</h5>
- <img src="{{ .logoUrl }}" alt="Quote Logo" />
-</div>
\ No newline at end of file
diff --git a/website/www/site/layouts/partials/quotes/quote.html b/website/www/site/layouts/partials/quotes/quote.html
index 45f7ccdd34c..a9d3933da0c 100644
--- a/website/www/site/layouts/partials/quotes/quote.html
+++ b/website/www/site/layouts/partials/quotes/quote.html
@@ -1,21 +1,38 @@
{{/*
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License. See accompanying LICENSE file.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. See accompanying LICENSE file.
*/}}
-<div class="quote-card">
- <div class="quote-icon">
- {{ with resources.Get .icon }}
+<div class="wrap-slide">
+ <div class="quote-card">
+ <div class="quote-icon">
+ {{ with resources.Get .icon }}
{{ .Content | safeHTML }}
- {{ end }}
+ {{ end }}
+ </div>
+ <h5 class="quote-text">{{ .text | markdownify }}</h5>
+ <div class="quote-card-link-container">
+ <a class="quote-card-link" href="{{ .linkUrl }}">
+ <span>{{ .linkText }}</span>
+ <img src="/images/arrow-right.svg" alt="Go to the case study">
+ </a>
+ </div>
+ <div class="case-study-row-button-container">
+ <a href="mailto:dev@beam.apache.org?subject=Beam Website Add New Case Study" class="case-study-primary-button">
+ Share your story
+ </a>
+ </div>
+ <div class="quote-img-container">
+ <div class="quote-img">
+ <img src="{{ .logoUrl }}" alt="Quote Logo" />
+ </div>
+ </div>
</div>
- <h5 class="quote-text">{{ .text | markdownify }}</h5>
- <img src="{{ .logoUrl }}" alt="Quote Logo" />
-</div>
\ No newline at end of file
+</div>
diff --git a/website/www/site/static/images/logos/powered-by/blank.jpg b/website/www/site/static/images/logos/powered-by/blank.jpg
new file mode 100644
index 00000000000..1cda9a53dc3
Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/blank.jpg differ
diff --git a/website/www/site/static/images/logos/powered-by/dataflow.png b/website/www/site/static/images/logos/powered-by/dataflow.png
new file mode 100644
index 00000000000..076bcfe8bef
Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/dataflow.png differ