diff --git a/build.gradle.kts b/build.gradle.kts index a56c4a261186..15657455d7bc 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -82,6 +82,9 @@ tasks.rat { "website/www/site/themes", "website/www/yarn.lock", "website/www/package.json", + "website/www/site/static/js/hero/lottie-light.min.js", + "website/www/site/static/js/keen-slider.min.js", + "website/www/site/assets/scss/_keen-slider.scss", // Ignore ownership files "ownership/**/*", diff --git a/website/www/site/assets/icons/calendar-icon.svg b/website/www/site/assets/icons/calendar-icon.svg new file mode 100644 index 000000000000..1aa91dd4d3f8 --- /dev/null +++ b/website/www/site/assets/icons/calendar-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/close-icon.svg b/website/www/site/assets/icons/close-icon.svg new file mode 100644 index 000000000000..7a07561031f1 --- /dev/null +++ b/website/www/site/assets/icons/close-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/commercial-icon.svg b/website/www/site/assets/icons/commercial-icon.svg new file mode 100644 index 000000000000..916237de46cc --- /dev/null +++ b/website/www/site/assets/icons/commercial-icon.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/community/bee-icon.svg b/website/www/site/assets/icons/community/bee-icon.svg new file mode 100644 index 000000000000..d04da17d1006 --- /dev/null +++ b/website/www/site/assets/icons/community/bee-icon.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/community/box-icon.svg b/website/www/site/assets/icons/community/box-icon.svg new file mode 100644 index 000000000000..572896e70ec2 --- /dev/null +++ b/website/www/site/assets/icons/community/box-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/community/calendar-icon.svg b/website/www/site/assets/icons/community/calendar-icon.svg new file mode 100644 index 000000000000..18229ffe4836 --- /dev/null +++ b/website/www/site/assets/icons/community/calendar-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/bug.svg b/website/www/site/assets/icons/community/contact-us/bug.svg new file mode 100644 index 000000000000..62267024ea72 --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/bug.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/discussion.svg b/website/www/site/assets/icons/community/contact-us/discussion.svg new file mode 100644 index 000000000000..dc9c94e95d50 --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/discussion.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/gitArrows.svg b/website/www/site/assets/icons/community/contact-us/gitArrows.svg new file mode 100644 index 000000000000..30a857d94adc --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/gitArrows.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/knot.svg b/website/www/site/assets/icons/community/contact-us/knot.svg new file mode 100644 index 000000000000..e47af8cd8ca2 --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/knot.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/messages.svg b/website/www/site/assets/icons/community/contact-us/messages.svg new file mode 100644 index 000000000000..43806ca5bc3a --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/messages.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/notification.svg b/website/www/site/assets/icons/community/contact-us/notification.svg new file mode 100644 index 000000000000..3b2976ad87ff --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/notification.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/question-mark.svg b/website/www/site/assets/icons/community/contact-us/question-mark.svg new file mode 100644 index 000000000000..bb230303a16b --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/question-mark.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/community/envelope-icon.svg b/website/www/site/assets/icons/community/envelope-icon.svg new file mode 100644 index 000000000000..6ced3b9edd59 --- /dev/null +++ b/website/www/site/assets/icons/community/envelope-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/community/message-icon.svg b/website/www/site/assets/icons/community/message-icon.svg new file mode 100644 index 000000000000..466af8040595 --- /dev/null +++ b/website/www/site/assets/icons/community/message-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/beam-logo-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/beam-logo-icon.svg new file mode 100644 index 000000000000..587667d29cc9 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/beam-logo-icon.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/code-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/code-icon.svg new file mode 100644 index 000000000000..338acf8e8de1 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/code-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/diamond-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/diamond-icon.svg new file mode 100644 index 000000000000..50930d56bf94 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/diamond-icon.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/file-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/file-icon.svg new file mode 100644 index 000000000000..a198565b15a4 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/file-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/messages-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/messages-icon.svg new file mode 100644 index 000000000000..0f710d68e9f6 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/messages-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/tool-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/tool-icon.svg new file mode 100644 index 000000000000..46e30c82ab1a --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/tool-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/contributor/become a committer/beam-logo-icon.svg b/website/www/site/assets/icons/contributor/become a committer/beam-logo-icon.svg new file mode 100644 index 000000000000..587667d29cc9 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a committer/beam-logo-icon.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a committer/code-icon.svg b/website/www/site/assets/icons/contributor/become a committer/code-icon.svg new file mode 100644 index 000000000000..338acf8e8de1 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a committer/code-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/contributor/become a committer/diamond-icon.svg b/website/www/site/assets/icons/contributor/become a committer/diamond-icon.svg new file mode 100644 index 000000000000..50930d56bf94 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a committer/diamond-icon.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a committer/file-icon.svg b/website/www/site/assets/icons/contributor/become a committer/file-icon.svg new file mode 100644 index 000000000000..a198565b15a4 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a committer/file-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a committer/messages-icon.svg b/website/www/site/assets/icons/contributor/become a committer/messages-icon.svg new file mode 100644 index 000000000000..0f710d68e9f6 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a committer/messages-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a committer/tool-icon.svg b/website/www/site/assets/icons/contributor/become a committer/tool-icon.svg new file mode 100644 index 000000000000..46e30c82ab1a --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a committer/tool-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/documentation/runners/beam-icon.svg b/website/www/site/assets/icons/documentation/runners/beam-icon.svg new file mode 100644 index 000000000000..a28c653d9d2b --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/beam-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/runners/dataflow-icon.svg b/website/www/site/assets/icons/documentation/runners/dataflow-icon.svg new file mode 100644 index 000000000000..8bf98f238451 --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/dataflow-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/runners/flink-icon.svg b/website/www/site/assets/icons/documentation/runners/flink-icon.svg new file mode 100644 index 000000000000..40c77f112dc1 --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/flink-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/runners/nemo-icon.svg b/website/www/site/assets/icons/documentation/runners/nemo-icon.svg new file mode 100644 index 000000000000..d6ddbc517578 --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/nemo-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/runners/samza-icon.svg b/website/www/site/assets/icons/documentation/runners/samza-icon.svg new file mode 100644 index 000000000000..4627df1be7bf --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/samza-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/runners/spark-icon.svg b/website/www/site/assets/icons/documentation/runners/spark-icon.svg new file mode 100644 index 000000000000..61ee67f363ef --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/spark-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/sdks/go-icon.svg b/website/www/site/assets/icons/documentation/sdks/go-icon.svg new file mode 100644 index 000000000000..46f43820bb3a --- /dev/null +++ b/website/www/site/assets/icons/documentation/sdks/go-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/sdks/java-icon.svg b/website/www/site/assets/icons/documentation/sdks/java-icon.svg new file mode 100644 index 000000000000..a2991e307ca3 --- /dev/null +++ b/website/www/site/assets/icons/documentation/sdks/java-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/sdks/python-icon.svg b/website/www/site/assets/icons/documentation/sdks/python-icon.svg new file mode 100644 index 000000000000..f539aa3a62aa --- /dev/null +++ b/website/www/site/assets/icons/documentation/sdks/python-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/edit-icon.svg b/website/www/site/assets/icons/edit-icon.svg new file mode 100644 index 000000000000..0832bba986b7 --- /dev/null +++ b/website/www/site/assets/icons/edit-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/extensible-icon.svg b/website/www/site/assets/icons/extensible-icon.svg new file mode 100644 index 000000000000..02ba07c0ccd1 --- /dev/null +++ b/website/www/site/assets/icons/extensible-icon.svg @@ -0,0 +1,26 @@ + + + + + + + + + diff --git a/website/www/site/assets/icons/github-icon.svg b/website/www/site/assets/icons/github-icon.svg new file mode 100644 index 000000000000..ba80c8261586 --- /dev/null +++ b/website/www/site/assets/icons/github-icon.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/install-button-icon.svg b/website/www/site/assets/icons/install-button-icon.svg new file mode 100644 index 000000000000..39c3ffcfbd31 --- /dev/null +++ b/website/www/site/assets/icons/install-button-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/navbar-arrow-icon.svg b/website/www/site/assets/icons/navbar-arrow-icon.svg new file mode 100644 index 000000000000..78724e930331 --- /dev/null +++ b/website/www/site/assets/icons/navbar-arrow-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/navbar-documentation-icon.svg b/website/www/site/assets/icons/navbar-documentation-icon.svg new file mode 100644 index 000000000000..11c165b0feba --- /dev/null +++ b/website/www/site/assets/icons/navbar-documentation-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/open-source-icon.svg b/website/www/site/assets/icons/open-source-icon.svg new file mode 100644 index 000000000000..d6afab7898e8 --- /dev/null +++ b/website/www/site/assets/icons/open-source-icon.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/open_source-icon.svg b/website/www/site/assets/icons/open_source-icon.svg new file mode 100644 index 000000000000..1505a32429e5 --- /dev/null +++ b/website/www/site/assets/icons/open_source-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/portable-icon.svg b/website/www/site/assets/icons/portable-icon.svg new file mode 100644 index 000000000000..77189163e141 --- /dev/null +++ b/website/www/site/assets/icons/portable-icon.svg @@ -0,0 +1,27 @@ + + + + + + + + + + diff --git a/website/www/site/assets/icons/quote-icon.svg b/website/www/site/assets/icons/quote-icon.svg new file mode 100644 index 000000000000..0a32eea254ad --- /dev/null +++ b/website/www/site/assets/icons/quote-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/search-icon.svg b/website/www/site/assets/icons/search-icon.svg new file mode 100644 index 000000000000..d01a19658e8e --- /dev/null +++ b/website/www/site/assets/icons/search-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/twitter-icon.svg b/website/www/site/assets/icons/twitter-icon.svg new file mode 100644 index 000000000000..e23e8210ae5b --- /dev/null +++ b/website/www/site/assets/icons/twitter-icon.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/unified-icon.svg b/website/www/site/assets/icons/unified-icon.svg new file mode 100644 index 000000000000..6dc75d26e576 --- /dev/null +++ b/website/www/site/assets/icons/unified-icon.svg @@ -0,0 +1,26 @@ + + + + + + + + + diff --git a/website/www/site/assets/icons/youtube-icon.svg b/website/www/site/assets/icons/youtube-icon.svg new file mode 100644 index 000000000000..3cf47d8631f5 --- /dev/null +++ b/website/www/site/assets/icons/youtube-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/scss/_blog.scss b/website/www/site/assets/scss/_blog.scss new file mode 100644 index 000000000000..697cc8b84a31 --- /dev/null +++ b/website/www/site/assets/scss/_blog.scss @@ -0,0 +1,243 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You 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. + */ + @import "media"; + + .blog-content { + //padding: 0 24px 0 24px; + margin-top: 64px; + .tf-filter-item { + display: none !important; + } + h2 { + text-align: center; + margin-bottom: 70px !important; + padding-top: 57px; + } + + .category-buttons { + display: flex; + align-items: center; + justify-content: center; + + flex-wrap: wrap-reverse; + margin: 0 auto; + margin-bottom: 80px; + + @media (max-width: $tablet) { + max-width: 100%; + flex-wrap: wrap; + } + + .category-button { + margin: 0 6px 12px 6px; + padding: 10px 20px; + border-radius: 100px; + background-color: #f6f6f6; + text-transform: uppercase; + border: 0; + font-weight: bold; + line-height: 1.14; + letter-spacing: 0.6px; + &:focus { + outline: 0; + } + &:hover { + background-color: #f2804d; + color: #fff; + } + } + + .active { + background-color: #f26628; + color: #fff; + &:hover { + background-color: #f2804d; + } + } + } + .category-buttons_center { + max-width: 872px; + margin:initial; + } + .category-buttons_poweredBy { + justify-content: flex-start; + margin-top: 84px; + } + + .restricted { + max-width: 60%; + @media (max-width: $mobile) { + max-width: 100%; + } + } + } + .load-button { + padding: 15px 51px 15px 52px; + border-radius: 100px; + background-color: #f26628; + text-transform: uppercase; + font-weight: bold; + line-height: normal; + letter-spacing: 0.39px; + color: #ffffff; + border: 0; + margin-top: 104px; + width: 184px; + height: 46px; + &:hover { + background-color: #f2804d; + } + } + + .posts-list { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + + .show-item { + display: inline-block !important; + } + + @media (max-width: $tablet) { + justify-content: space-evenly; + } + .post-card { + width: 381px; + height: 468px; + padding: 24px 24px 128.9px; + border-radius: 16px; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + background-color: #ffffff; + margin-bottom: 36px; + color: #333333; + overflow: hidden; + + &:hover { + text-decoration: none; + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), + 0 4px 6px 0 rgba(0, 0, 0, 0.24); + } + @media (max-width: $tablet) { + width: 327px; + height: 216px; + padding: 24px 20px; + margin-bottom: 24px; + display: flex; + flex-direction: column; + justify-content: space-between; + } + + .post-title { + font-size: 24px; + font-weight: 500; + line-height: 1.25; + letter-spacing: normal; + margin-bottom: 24px; + overflow: hidden; + -webkit-box-orient: vertical; + @media (max-width: $tablet) { + font-size: 18px; + font-weight: normal; + line-height: 1.6; + letter-spacing: 0.43px; + } + } + + .post-summary { + overflow: hidden; + line-height: 1.57; + letter-spacing: 0.43px; + display: -webkit-box; + -webkit-line-clamp: 9; + -webkit-box-orient: vertical; + @media (max-width: $tablet) { + display: none; + } + } + } + } + .post-info { + display: flex; + justify-content: space-between; + font-size: 16px; + font-weight: 500; + line-height: 1.63; + letter-spacing: 0.43px; + color: #8c8b8e; + margin-bottom: 38px; + @media (max-width: $tablet) { + margin-bottom: 0; + } + p { + text-transform: uppercase; + } + } + .post-category { + font-size: 14px; + font-weight: normal; + margin-top: 8px; + } + .post { + .post-content { + max-width: 853px; + margin: 0 auto; + margin-bottom: 120px; + padding-top: 55px; + @media (max-width: $tablet) { + padding: 35px 24px; + word-break: break-word; + margin-top: 85px; + } + } + + .post-header { + border-bottom: 2px solid rgba(255, 109, 5, 0.24); + margin-bottom: 24px; + padding-bottom: 26px; + } + .post-card { + width: 381px; + height: 216px; + padding: 24px; + display: flex; + flex-direction: column; + justify-content: space-between; + @media (max-width: $tablet) { + width: 327px; + height: 216px; + padding: 24px 19.2px 24.7px 20px; + } + } + .post-info { + margin: 0; + p { + font-size: 14px; + font-weight: bold; + line-height: normal; + letter-spacing: 2px; + } + } + .post-title { + margin-bottom: 12px !important; + font-size: 18px !important; + line-height: 1.6 !important; + letter-spacing: 0.43px !important; + text-overflow: ellipsis; + max-height: 4.8em; + } + } diff --git a/website/www/site/assets/scss/_calendar.scss b/website/www/site/assets/scss/_calendar.scss new file mode 100644 index 000000000000..824c0312d8e9 --- /dev/null +++ b/website/www/site/assets/scss/_calendar.scss @@ -0,0 +1,292 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You 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. + */ + +@import "media"; + +.calendar { + padding: $pad-l $pad; + + .calendar-title { + @extend .component-title; + + text-align: center; + } + + .calendar-content { + display: flex; + justify-content: center; + align-items: flex-start; + margin-top: 84px; + + a { + text-decoration: none; + } + + // Left card + .calendar-card-big { + width: 100%; + max-width: 381px; + height: 468px; + border-radius: 16px; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + background-color: $color-white; + padding: 32px 24px; + transition: 0.2s; + + .calendar-card-big-title { + @extend .component-large-header; + + margin-top: 48px; + margin-bottom: 24px; + } + } + + .calendar-card-big-left { + padding: 0 !important; + &:hover { + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), + 0 4px 6px 0 rgba(0, 0, 0, 0.24); + } + } + // Middle cards + .calendar-card-box { + margin: 0 37px; + min-height: 468px; + display: flex; + flex-direction: column; + justify-content: space-between; + .show-item { + display: inline-block; + } + .post-card { + width: 381px; + height: 216px; + padding: 24px; + border-radius: 16px; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + background-color: #ffffff; + margin-bottom: 36px; + color: #333333; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: space-between; + @media (max-width: $tablet) { + width: 327px; + height: 216px; + padding: 24px 19.2px 24.7px 20px; + margin-bottom: 24px; + } + &:hover { + text-decoration: none; + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), + 0 4px 6px 0 rgba(0, 0, 0, 0.24); + } + + .post-title { + font-size: 18px; + font-weight: 500; + line-height: 1.6; + letter-spacing: 0.43px; + margin-bottom: 12px; + text-overflow: ellipsis; + word-wrap: break-word; + overflow: hidden; + max-height: 4.8em; + + @media (max-width: $tablet) { + font-size: 18px; + font-weight: normal; + line-height: 1.6; + letter-spacing: 0.43px; + } + } + + .post-summary { + overflow: hidden; + line-height: 1.57; + letter-spacing: 0.43px; + display: -webkit-box; + -webkit-line-clamp: 9; + -webkit-box-orient: vertical; + @media (max-width: $tablet) { + display: none; + } + } + } + + .calendar-card-small:hover { + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), + 0 4px 6px 0 rgba(0, 0, 0, 0.24); + } + } + + // Right card + .calendar-card-big-right { + .calendar-card-event-title { + @extend .component-header; + } + + .calendar-card-events { + margin-top: 30px; + margin-bottom: 70px; + .calendar-desktop { + @media (max-width: $tablet) { + display: none; + } + } + .calendar-mobile { + display: none; + @media (max-width: $tablet) { + display: block; + } + } + .calendar-event { + display: flex; + padding: 14px; + + .calendar-event-icon { + margin-right: 12px; + } + + .calendar-event-description { + .calendar-event-title { + @extend .component-label; + } + + .calendar-event-place { + @extend .component-tag; + } + + .calendar-event-time { + @extend .component-tag; + } + } + } + + .calendar-event:hover { + background-color: rgba(196, 196, 196, 0.16); + border-radius: 16px; + } + + :last-child { + margin-bottom: 0; + } + } + + .calendar-card-events-button { + width: 115px; + height: 36px; + border-radius: 100px; + background-color: $color-sun; + border: none; + outline: none; + float: right; + + span { + @extend .component-label; + + font-size: 14px; + color: $color-white; + } + } + + button:hover { + opacity: 0.84; + } + } + } +} + +// Category for left and middle cards +.calendar-category { + display: flex; + justify-content: space-between; + + .calendar-category-tag { + @extend .component-tag; + + font-size: 14px; + font-weight: 500; + text-transform: uppercase; + } + + .calendar-category-date { + @extend .component-tag; + } +} + +// Author for left and middle cards +.calendar-card-author { + @extend .component-tag; +} + +@media (max-width: $tablet) { + .calendar { + padding: $pad-md $pad-s; + + .calendar-content { + flex-direction: column; + align-items: center; + margin-top: 70px; + + .calendar-card-big { + max-width: 327px; + height: 356px; + padding: 32px 20px; + + .calendar-card-big-title { + margin-top: 35px; + margin-bottom: 16px; + } + } + + .calendar-card-box { + margin-bottom: 0; + margin-top: 24px; + min-height: 456px; + + .calendar-card-small { + max-width: 327px; + height: 216px; + padding: 24px 20px; + + .calendar-card-small-title { + margin-top: 30px; + margin-bottom: 10px; + width: 280px; + } + } + } + + .calendar-card-big-right { + height: 404px; + + .calendar-card-events { + margin-top: 20px; + margin-bottom: 15px; + + .calendar-event { + padding: 14px 5px; + } + } + } + } + } +} diff --git a/website/www/site/assets/scss/_capability-matrix.scss b/website/www/site/assets/scss/_capability-matrix.scss new file mode 100644 index 000000000000..4f0d16b6114f --- /dev/null +++ b/website/www/site/assets/scss/_capability-matrix.scss @@ -0,0 +1,334 @@ +/** + 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. +*/ +@import "media"; + +.back-button { + font-size: 14px; + font-weight: 700; + padding-left: 15px; + line-height: 1.14; + letter-spacing: .6px; + color: #f26628; + text-transform: uppercase; + &:hover { + color: #f2804d; + } + i { + width: 26px; + } +} + +.information-container { + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; + margin-bottom: 84px; + + @media(max-width:$mobile) { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + } + table { + margin: 0; + } + .read-tables { + table-layout: fixed; + position: relative; + th:first-of-type { + width: 22px; + min-width: 22px; + } + span { + font-weight: 500; + } + } + .second-container { + width: 270px; + margin-left: 100px; + @media(max-width:$mobile) { + margin-left: 0; + } + h5 { + margin-bottom: 22px; + } + .row { + display: -webkit-box; + display: flex; + margin-left: 0; + } + .box { + width: 71px; + height: 24px; + margin-bottom: 10px; + text-align: center; + margin-right: 10px; + } + .white { + border: solid 1px #f6f6f6; + background-color: #fff; + } + .partial { + border: solid 1px #d8d8d8; + background-color: #f9f9f9; + } + .gray { + border: solid 1px #bcbcbc; + background-color: #e1e0e0; + } + } + .border-left { + border-left: 3px solid #ff6d05; + padding: 7px; + font-size: 12px; + font-weight: 500; + line-height: 1.83; + letter-spacing: .43px; + } + .border-right { + transform: rotate(270deg); + height: 80px; + text-align: center; + padding: 0 !important; + width: 25px !important; + font-size: 12px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: 1.57; + letter-spacing: .43px; + position: absolute; + top: 55px; + left: 24px; + } + .border-top { + border-top: 3px solid #ff6d05; + font-size: 14px; + font-weight: 400; + font-stretch: normal; + font-style: normal; + line-height: 1.57; + letter-spacing: .43px; + td { + width: 162px; + padding: 7px; + } + } +} +.table-container { + display: -webkit-box; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; + margin-bottom: 32px; + table { + margin: 0; + } + .big-right { + max-width: 1240px; + } + .table-right { + overflow-x: scroll; + padding: 1px; + scrollbar-width: none; + &::-webkit-scrollbar { + width: 0; + background: 0 0; + } + } + .table-headers { + overflow-x: scroll; + border-spacing: 0; + border: solid 1px #d8d8d8; + border-bottom: none; + mix-blend-mode: multiply; + -ms-overflow-style: none; + scrollbar-width: none; + scroll-behavior: auto; + &::-webkit-scrollbar { + width: 0; + background: 0 0; + } + table { + height: 48px; + table-layout: fixed; + width: 710px; + th { + text-align: center; + width: 142px; + font-size: 12px; + font-weight: 500; + line-height: normal; + letter-spacing: normal; + padding-left: 10px; + @media(max-width: $mobile) { + width: 73px; + } + } + } + } + .big-headers table th { + width: 249px; + } + .table-center { + overflow-x: scroll; + border-spacing: 0; + border: solid 1px #d8d8d8; + border-collapse: separate; + transform: rotateX(180deg); + padding-bottom: 8px; + scrollbar-color: #ff6d00; + scroll-behavior: auto; + &::-webkit-scrollbar { + height: 8px; + width: 25px !important; + } + &::-webkit-scrollbar-track { + background-color: #efeded; + background-clip: content-box; + } + &::-webkit-scrollbar-thumb { + border-radius: 8px; + height: 6px !important; + background-color: #ff6d00; + } + table { + transform: rotateX(180deg); + border-collapse: separate; + table-layout: fixed; + width: 710px; + th, td { + width: 142px; + height: 48px; + font-size: 12px; + font-weight: 500; + line-height: normal; + letter-spacing: normal; + border: 1px solid #fff; + @media(max-width:640px) { + width: 73px; + } + } + } + } + .big-center { + table { + tr { + vertical-align: baseline; + th,td { + width: 249px; + height: 352px; + padding: 6px; + font-weight: 400; + p { + font-size: 12px; + font-weight: 500; + line-height: normal; + letter-spacing: normal; + margin: 0; + } + } + } + } + } + .table-left table { + width: 142px; + @media(max-width:640px) { + width: 73px; + } + tr:first-child th { + height: 83px; + border: none; + @media(max-width: $mobile) { + height: 119px; + } + @-moz-document url-prefix() { + height: 77px; + } + } + th { + height: 48px; + font-size: 12px; + font-weight: 500; + line-height: normal; + letter-spacing: normal; + border: solid 1px #f6f6f6; + border-right: none; + padding: 6px; + } + } + .big-left table { + text-align: start; + tr { + vertical-align: baseline; + } + th { + height: 352px; + } + } +} +#table-link { + margin-bottom: 84px; + font-size: 14px; + font-weight: 700; + line-height: 1.14; + letter-spacing: .6px; + color: #f26628; + text-transform: uppercase; + &:hover { + text-decoration: none; + color: #f2804d; + } +} + +[class*=-switcher], +.language-switcher, +nav.version-switcher, +nav.runner-switcher { + ul li{ + margin-bottom: 0 !important; + border: 1px solid #ff6d05; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + border-bottom: none; + padding-left: 0 !important; + &:hover { + cursor: pointer + } + a { + border: none; + margin-right: 0; + color: #333; + &:hover { + background-color: #f2804d; + } + } + .active { + color: #fff; + a { + background-color: #ff6d05; + color: #fff; + border: none + } + } + ::before { + display: none + } + } +} +#copy:hover { + cursor: pointer +} diff --git a/website/www/site/assets/scss/_cards.sass b/website/www/site/assets/scss/_cards.sass deleted file mode 100644 index a1562d0dde1d..000000000000 --- a/website/www/site/assets/scss/_cards.sass +++ /dev/null @@ -1,69 +0,0 @@ -/*! - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You 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. - */ - -.cards - background-image: url(../images/cards_bg.svg) - background-size: cover - background-repeat: no-repeat - background-position: top - text-align: center - margin-bottom: $pad*2 - - .cards__title - +type-h2 - color: #fff - padding-top: $pad-md - margin-bottom: $pad - - .cards__body - max-width: 550px - +type-body - margin: 0 auto - - .cards__cards - margin-bottom: $pad*2 - +md - display: flex - justify-content: center - align-items: center - - .cards__cards__card - background: #fff - box-shadow: $box-shadow - max-width: 300px - margin: 0 auto $pad - padding: $pad*1.5 - +md - margin: 0 $pad/2 - - .cards__cards__card__body - margin-bottom: $pad - +type-h3 - - .cards__cards__card__user - display: flex - justify-content: center - align-items: center - - .cards__cards__card__user__icon - border-radius: 100% - background: #efefef - width: 40px - height: 40px - - .cards__cards__card__user__name - margin-left: $pad/2 diff --git a/website/www/site/assets/scss/_ctas.sass b/website/www/site/assets/scss/_ctas.sass index 325d4f1b07cc..d334a8834a1f 100644 --- a/website/www/site/assets/scss/_ctas.sass +++ b/website/www/site/assets/scss/_ctas.sass @@ -16,13 +16,59 @@ */ .ctas - text-align: center - margin: $pad-xl 0 + display: flex + justify-content: center + align-items: center + width: 100% + height: 96px + position: fixed + z-index: 1020 + bottom: 0 + box-shadow: 0 -4px 16px 0 rgba(0, 0, 0, 0.06); + background-color: #ffffff + margin-top: -5px - .ctas__ctas - &--top - margin-bottom: $pad + @media (max-width: $ak-breakpoint-lg) + flex-wrap: nowrap + width: auto + justify-content: flex-start + left: 0 + right: 0 + overflow-y: hidden + overflow-x: auto - .ctas__title - +type-h2 - margin-bottom: $pad + + &_row + margin: 0 0 0 91px + max-width: 184px + transform: translate3d(0px, 0px, 0px) + &:first-of-type + margin: 0 + @media (max-width: $ak-breakpoint-lg) + margin-left: 24px + &:first-of-type + margin-left: 24px + + &_button + width: 184px + height: 46px + border-radius: 100px + background-color: #f26628 + font-size: 14px + font-weight: bold + line-height: normal + letter-spacing: 0.39px + color: #ffffff + text-transform: uppercase + display: flex + align-items: center + justify-content: center + + img + margin-right: 12px + height: 20px + width: 20px + &:hover + text-decoration: none + color: #ffffff + background-color: #f2804d diff --git a/website/www/site/assets/scss/_footer.sass b/website/www/site/assets/scss/_footer.sass index a52ba8d115a5..ce99da118e58 100644 --- a/website/www/site/assets/scss/_footer.sass +++ b/website/www/site/assets/scss/_footer.sass @@ -17,34 +17,32 @@ .footer background: $color-dark - padding: 40px 0 - margin-top: 70px + padding-top: 40px + margin-top: 128px @at-root .body--index & margin-top: 0 color: #fff .footer__contained +contained - + padding: 0 30px a color: #fff .footer__cols display: flex justify-content: space-around + @media (max-width: $ak-breakpoint-lg) + display: block + .footer__cols__col__logos + padding-right: 120px + @media (max-width: $ak-breakpoint-lg) + display: flex .footer__cols__col padding: 5px box-sizing: border-box - &:first-child - +md - width: 20% - - &--md - +md - width: 20% - .footer__cols__col__title color: #fff font-weight: $font-weight-bold @@ -55,7 +53,46 @@ .footer__cols__col__logo margin-bottom: $pad + @media (max-width: $ak-breakpoint-lg) + margin-right: 50px + + .footer__flex_mobile + display: flex + flex-direction: row + justify-content: space-between + @media (max-width: $ak-breakpoint-lg) + flex-direction: column + + .wrapper-grid + display: grid + padding-bottom: 30px + grid-template-columns: repeat(4, 1fr) + grid-gap: 52px + grid-auto-rows: minmax(200px, auto) + @media (max-width: $ak-breakpoint-lg) + grid-template-columns: repeat(2, 1fr) + + .footer-wrapper + padding: 0 56px + @media (max-width: $ak-breakpoint-lg) + padding: 0 + + .footer__bottom + line-height: 1.57 + letter-spacing: 0.43px + color: #bfbfbf + padding-bottom: 38px + padding-right: 25px + margin-right: 76px + a + color: #bfbfbf + @media (max-width: $ak-breakpoint-lg) + padding-bottom: 77px + padding-right: 0 + margin-right: 0 - .footer__bottom - margin-top: $pad-md - text-align: center +.main-padding + padding-bottom: 48px + background: #37424B; + @media (max-width: $ak-breakpoint-lg) + padding-bottom: 100px diff --git a/website/www/site/assets/scss/_global.sass b/website/www/site/assets/scss/_global.sass index db0deb28e9de..773b4048840a 100644 --- a/website/www/site/assets/scss/_global.sass +++ b/website/www/site/assets/scss/_global.sass @@ -25,18 +25,23 @@ body .body background: #fff - max-width: 1440px margin: 0 auto - padding-top: 130px - + .no__padding + padding: 0 &:not(.body--index) .body__contained + @media (max-width: $ak-breakpoint-lg) + padding: 0 padding: 0 30px max-width: 1280px figure img width: 100% + .center + margin: 0 auto + .content-up + margin-top: -20px !important .section &:not(.section--wide) @@ -52,6 +57,20 @@ body a color: $color-brand +.body__section-no-nav + margin-left: 256px + //width: calc(100% - 380px) + + > [id]:before + content: '' + display: block + height: 82px // fixed header height + margin: -82px 0 0 // negative fixed header height + + @media (max-width: $ak-breakpoint-lg) + margin-left: 0 + width: 100% + .body__section-nav margin-left: 256px width: calc(100% - 492px) @@ -67,5 +86,73 @@ body width: 100% .container-main-content - padding: 0 20px - position: relative \ No newline at end of file + @media (max-width: $ak-breakpoint-lg) + padding: 0 24px + min-height: 100vh + padding: 0 22px + position: relative + background-color: #fff + margin-top: 64px + + @media (min-width: $tablet) + margin-top: 0 +.desktop + @media (max-width: $ak-breakpoint-lg) + display: none !important +.mobile + display: none + @media (max-width: $ak-breakpoint-lg) + display: block + +.code-snippet, pre + background:rgba(255, 109, 0, 0.03) !important + border-radius: 8px + border-top-left-radius: 0; + border: solid 0.6px #ff6d05 + font-family: Menlo + font-size: 16px + font-weight: normal + line-height: 1.63 + letter-spacing: 0.43px + padding: 24px + max-width: 848px + position: relative + + pre + border: none + padding: 0 + margin-top: 36px + background: initial !important + a + float: right + margin-left: 12px + img + &:hover + opacity: 0.7 + filter: alpha(opacity=70) + cursor: pointer + +.snippet + max-width: 848px + margin-bottom: 40px + .git-link + float: right + font-size: 16px + font-weight: normal + line-height: 1.63 + letter-spacing: 0.43px + color: #8c8b8e + .without_switcher + border-top-left-radius: 8px + pre + background: initial !important + +table + margin-top: 24px + margin-bottom: 24px + th + min-width: 80px + padding-right: 12px + +.underline + text-decoration: underline diff --git a/website/www/site/assets/scss/_graphic.sass b/website/www/site/assets/scss/_graphic.sass deleted file mode 100644 index f01c72a12528..000000000000 --- a/website/www/site/assets/scss/_graphic.sass +++ /dev/null @@ -1,27 +0,0 @@ -/*! - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You 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. - */ - -.graphic - .graphic__image - text-align: center - line-height: 0 - - img - max-width: 100% - margin: 0 auto - max-height: 500px - border: 1px solid #efefef diff --git a/website/www/site/assets/scss/_graphic.scss b/website/www/site/assets/scss/_graphic.scss new file mode 100644 index 000000000000..336f1f422516 --- /dev/null +++ b/website/www/site/assets/scss/_graphic.scss @@ -0,0 +1,91 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You 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. + */ +@import "media"; + +.graphic { + text-align: center; + h2 { + @extend .component-title; + } + .images { + max-width: 868px; + margin: 0 auto; + height: 60px; + } + .margin { + margin-top: 84px; + margin-bottom: 84px; + @media (max-width: $mobile) { + margin-top: 0; + margin-bottom: 64px; + } + } + .row { + display: flex; + justify-content: space-between; + @media (max-width: $mobile) { + flex-direction: column; + align-items: center; + } + .logos-row { + display: flex; + align-items: center; + margin-top: 20px; + max-height: 73px; + @media (max-width: $mobile) { + margin-top: 64px; + } + img { + height: auto; + width: 112px; + } + } + .first_logo { + margin-right: 18px; + } + .column { + display: flex; + flex-direction: column; + align-items: center; + max-width: 306px; + + h4 { + margin-top: 32px; + } + .more { + margin-top: 32px; + font-size: 14px; + font-weight: bold; + line-height: 16px; + letter-spacing: 0.6px; + color: #f26628; + } + } + .icon { + width: 34px; + height: 44px; + margin-top: 16px; + @media (max-width: $mobile) { + margin-top: 64px; + } + } + img { + max-width: 306px; + height: 42px; + } + } +} diff --git a/website/www/site/assets/scss/_page-nav.sass b/website/www/site/assets/scss/_hero-mobile.scss similarity index 53% rename from website/www/site/assets/scss/_page-nav.sass rename to website/www/site/assets/scss/_hero-mobile.scss index 542a4222b20a..b3db3d1cd4b9 100644 --- a/website/www/site/assets/scss/_page-nav.sass +++ b/website/www/site/assets/scss/_hero-mobile.scss @@ -15,48 +15,50 @@ * limitations under the License. */ -.page-nav - border-left: 3px solid $color-brand - overflow-y: auto - max-height: calc(100vh - 130px) - padding: 0 15px - position: fixed - width: 240px - - li - display: block - width: 100% - - a - color: $color-dark - display: block - font-size: 12px - padding: 5px - - span - font-size: 12 - - ul - padding-left: 20px - - .nav - > li.active - a - text-decoration: underline - - @media (max-width: $ak-breakpoint-lg) - margin-top: 0 - max-height: initial - right: 0 - padding: 0 30px - position: relative - width: 100% - - #TableOfContents - > ul - padding-left: 0 - margin-bottom: 0 - ul - padding-left: 20 - ul - display: none +@import "media"; + +.hero-mobile { + position: relative; + margin-bottom: 0; + display: none; + width: 100%; + height: calc(100% - 96px); + min-height: 300px; + .hero-content { + position: absolute; + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + width: 100%; + max-width: 506px; + + h3 { + @extend .hero-title; + + text-transform: uppercase; + margin: 0 auto 16px auto; + } + + h1 { + @extend .hero-heading; + + width: 300px; + margin: 0 auto 24px auto; + } + + h2 { + @extend .hero-subheading; + + width: 300px; + margin: 0 auto; + } + } +} + +@media (max-width: $mobile) { + .hero-mobile { + display: inherit; + } +} diff --git a/website/www/site/assets/scss/_hero.sass b/website/www/site/assets/scss/_hero.sass deleted file mode 100644 index 63c22b9282a5..000000000000 --- a/website/www/site/assets/scss/_hero.sass +++ /dev/null @@ -1,156 +0,0 @@ -/*! - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You 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. - */ - -.hero-bg - background-image: url(../images/hero_bg_flat.svg) - background-repeat: no-repeat - background-size: cover - background-position: top center - margin-top: -50px - +md - background-size: 100% - padding-bottom: $pad - -.hero - padding-top: $pad-xl - margin-bottom: $pad-md - position: relative - z-index: 1 - +md - padding-top: $pad-sm - margin-bottom: $pad-xl - - .hero__content - position: relative - z-index: 1 - - .hero__image - bottom: 0 - content: '' - left: 0 - line-height: 0 - position: absolute - right: 0 - top: 0 - z-index: 0 - img - position: absolute - bottom: 0 - width: 100% - - .hero__title - +type-h1 - color: #fff - max-width: 500px - margin: 0 auto $pad - text-align: center - +md - margin: 0 0 $pad - text-align: left - - .hero__ctas - text-align: center - margin-bottom: $pad-md - +md - margin-bottom: 0 - text-align: left - - &--first - margin-bottom: $pad - +md - margin-bottom: $pad-sm - - .hero__subtitle - +type-h3 - color: #fff - max-width: 540px - margin: 0 auto $pad - font-weight: $font-weight-semibold - text-align: center - +md - margin: 0 0 $pad-md - text-align: left - - .hero__blog - .hero__blog__title - +type-h4 - font-weight: $font-weight-bold - margin-bottom: $pad - text-align: center - +md - color: #fff - text-align: left - margin-bottom: $pad/2 - - .hero__blog__cards - +md - display: flex - margin: 0 -10px - - .hero__blog__cards__card - background-color: #fff - color: inherit - box-shadow: $box-shadow - padding: 20px - display: block - transition: transform 300ms ease, box-shadow 300ms ease - position: relative - max-width: 300px - margin: 0 auto $pad - +md - margin: 0 10px - - &:before - background-image: url(../images/card_border.svg) - background-position: top - background-repeat: no-repeat - background-size: cover - content: ' ' - display: block - height: 2px - position: absolute - width: 100% - left: 0 - top: 0 - - &:hover - text-decoration: none - transform: translateY(-8px) - box-shadow: $box-shadow-hover - - .hero__blog__cards__card__title - +type-body - margin-bottom: $pad - - .hero__blog__cards__card__date - +type-body-sm - font-weight: $font-weight-semibold - text-transform: uppercase - letter-spacing: 1px - - .hero__cols - +md - display: flex - min-height: 500px - - .hero__cols__col - width: 50% - display: flex - align-items: flex-end - - &:first-child - align-items: center diff --git a/website/www/site/assets/scss/_hero.scss b/website/www/site/assets/scss/_hero.scss new file mode 100644 index 000000000000..e803db45c09e --- /dev/null +++ b/website/www/site/assets/scss/_hero.scss @@ -0,0 +1,133 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You 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. + */ + + @import "media"; + @import "typography"; + + .hero-desktop { + position: relative; + margin-bottom: 0; + width: 100%; + height: 100%; + display: inherit; + margin-top: -30px; + min-height: 361px; + .hero-content { + position: absolute; + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + + h3 { + @extend .hero-title; + text-transform: uppercase; + margin: 0 auto 24px auto; + } + + h1 { + @extend .hero-heading; + width: 506px; + height: 92px; + font-size: 46px; + margin: 0 auto 36px auto; + } + + h2 { + @extend .hero-subheading; + width: 344px; + margin: 0 auto 56px auto; + } + + a { + text-decoration: none; + } + + button { + width: 184px; + height: 46px; + border-radius: 100px; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + background-color: $color-white; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + border: none; + outline: none; + svg { + width: 14px; + height: 16px; + } + span { + text-transform: uppercase; + font-size: 14px; + font-weight: bold; + letter-spacing: 0.6px; + line-height: 1.14; + color: $color-sun; + margin-left: 12px; + } + } + + button:hover { + background-color: $color-white; + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), + 0 4px 6px 0 rgba(0, 0, 0, 0.24); + } + + button:focus { + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + } + } + } + + @media (max-width: $tablet) { + .hero-desktop { + margin-top: 64px; + + .hero-content { + h3 { + margin: 0 auto 16px auto; + } + + h1 { + width: 300px; + margin: 0 auto 24px auto; + font-size: 32px; + } + + h2 { + width: 300px; + margin: 0 auto; + } + + button { + display: none; + } + } + } + } + +@media (max-width: $mobile) { + .hero-desktop { + display: none; + } +} diff --git a/website/www/site/assets/scss/_keen-slider.scss b/website/www/site/assets/scss/_keen-slider.scss new file mode 100644 index 000000000000..08a4326e0042 --- /dev/null +++ b/website/www/site/assets/scss/_keen-slider.scss @@ -0,0 +1,40 @@ +/** + * 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 + * 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/_layout.scss b/website/www/site/assets/scss/_layout.scss index 0c3b1c3132d0..9f8f2b4de15b 100644 --- a/website/www/site/assets/scss/_layout.scss +++ b/website/www/site/assets/scss/_layout.scss @@ -16,241 +16,235 @@ * Site header */ .site-header { - border-top: 5px solid $grey-color-dark; - border-bottom: 1px solid $grey-color-light; - min-height: 56px; + border-top: 5px solid $grey-color-dark; + border-bottom: 1px solid $grey-color-light; + min-height: 56px; - // Positioning context for the mobile navigation icon - position: relative; + // Positioning context for the mobile navigation icon + position: relative; } .site-title { - font-size: 26px; - font-weight: 300; - line-height: 56px; - letter-spacing: -1px; - margin-bottom: 0; - float: left; - - &, - &:visited { - color: $grey-color-dark; - } + font-size: 26px; + font-weight: 300; + line-height: 56px; + letter-spacing: -1px; + margin-bottom: 0; + float: left; + + &, + &:visited { + color: $grey-color-dark; + } } .site-nav { - float: right; - line-height: 56px; + float: right; + line-height: 56px; - .menu-icon { - display: none; - } + .menu-icon { + display: none; + } - .page-link { - color: $text-color; - line-height: $base-line-height; + .page-link { + color: $text-color; + line-height: $base-line-height; - // Gaps between nav items, but not on the last one - &:not(:last-child) { - margin-right: 20px; - } + // Gaps between nav items, but not on the last one + &:not(:last-child) { + margin-right: 20px; } + } - @include media-query($on-palm) { - position: absolute; - top: 9px; - right: $spacing-unit / 2; - background-color: $background-color; - border: 1px solid $grey-color-light; - border-radius: 5px; - text-align: right; - - .menu-icon { - display: block; - float: right; - width: 36px; - height: 26px; - line-height: 0; - padding-top: 10px; - text-align: center; - - > svg { - width: 18px; - height: 15px; - - path { - fill: $grey-color-dark; - } - } - } + @include media-query($on-palm) { + position: absolute; + top: 9px; + right: $spacing-unit / 2; + background-color: $background-color; + border: 1px solid $grey-color-light; + border-radius: 5px; + text-align: right; - .trigger { - clear: both; - display: none; - } - - &:hover .trigger { - display: block; - padding-bottom: 5px; + .menu-icon { + display: block; + float: right; + width: 36px; + height: 26px; + line-height: 0; + padding-top: 10px; + text-align: center; + + > svg { + width: 18px; + height: 15px; + + path { + fill: $grey-color-dark; } + } + } - .page-link { - display: block; - padding: 5px 10px; + .trigger { + clear: both; + display: none; + } - &:not(:last-child) { - margin-right: 0; - } - margin-left: 20px; - } + &:hover .trigger { + display: block; + padding-bottom: 5px; } -} + .page-link { + display: block; + padding: 5px 10px; + &:not(:last-child) { + margin-right: 0; + } + margin-left: 20px; + } + } +} /** - * Site footer - */ + * Site footer + */ .site-footer { - border-top: 1px solid $grey-color-light; - padding: $spacing-unit 0; + border-top: 1px solid $grey-color-light; + padding: $spacing-unit 0; } .footer-heading { - font-size: 18px; - margin-bottom: $spacing-unit / 2; + font-size: 18px; + margin-bottom: $spacing-unit / 2; } .contact-list, .social-media-list { - list-style: none; - margin-left: 0; + list-style: none; + margin-left: 0; } .footer-col-wrapper { - font-size: 15px; - color: $grey-color; - margin-left: -$spacing-unit / 2; - @extend %clearfix; + font-size: 15px; + color: $grey-color; + margin-left: -$spacing-unit / 2; + @extend %clearfix; } .footer-col { - float: left; - margin-bottom: $spacing-unit / 2; - padding-left: $spacing-unit / 2; + float: left; + margin-bottom: $spacing-unit / 2; + padding-left: $spacing-unit / 2; } .footer-col-1 { - width: -webkit-calc(35% - (#{$spacing-unit} / 2)); - width: calc(35% - (#{$spacing-unit} / 2)); + width: -webkit-calc(35% - (#{$spacing-unit} / 2)); + width: calc(35% - (#{$spacing-unit} / 2)); } .footer-col-2 { - width: -webkit-calc(20% - (#{$spacing-unit} / 2)); - width: calc(20% - (#{$spacing-unit} / 2)); + width: -webkit-calc(20% - (#{$spacing-unit} / 2)); + width: calc(20% - (#{$spacing-unit} / 2)); } .footer-col-3 { - width: -webkit-calc(45% - (#{$spacing-unit} / 2)); - width: calc(45% - (#{$spacing-unit} / 2)); + width: -webkit-calc(45% - (#{$spacing-unit} / 2)); + width: calc(45% - (#{$spacing-unit} / 2)); } @include media-query($on-laptop) { - .footer-col-1, - .footer-col-2 { - width: -webkit-calc(50% - (#{$spacing-unit} / 2)); - width: calc(50% - (#{$spacing-unit} / 2)); - } + .footer-col-1, + .footer-col-2 { + width: -webkit-calc(50% - (#{$spacing-unit} / 2)); + width: calc(50% - (#{$spacing-unit} / 2)); + } - .footer-col-3 { - width: -webkit-calc(100% - (#{$spacing-unit} / 2)); - width: calc(100% - (#{$spacing-unit} / 2)); - } + .footer-col-3 { + width: -webkit-calc(100% - (#{$spacing-unit} / 2)); + width: calc(100% - (#{$spacing-unit} / 2)); + } } @include media-query($on-palm) { - .footer-col { - float: none; - width: -webkit-calc(100% - (#{$spacing-unit} / 2)); - width: calc(100% - (#{$spacing-unit} / 2)); - } + .footer-col { + float: none; + width: -webkit-calc(100% - (#{$spacing-unit} / 2)); + width: calc(100% - (#{$spacing-unit} / 2)); + } } - - /** - * Page content - */ + * Page content + */ .page-content { - padding: $spacing-unit 0; + padding: $spacing-unit 0; } .page-heading { - font-size: 20px; + font-size: 20px; } .post-list { - margin-left: 0; - list-style: none; + margin-left: 0; + list-style: none; - > li { - margin-bottom: $spacing-unit; - } + > li { + margin-bottom: $spacing-unit; + } } .post-meta { - font-size: $small-font-size; - color: $grey-color; + font-size: $small-font-size; + color: $grey-color; } .post-link { - display: block; - font-size: 24px; + display: block; + font-size: 24px; } - - /** - * Posts - */ + * Posts + */ .post-header { - margin-bottom: $spacing-unit; + margin-bottom: $spacing-unit; } .post-title { - font-size: 42px; - letter-spacing: -1px; - line-height: 1; + font-size: 42px; + letter-spacing: -1px; + line-height: 1; - @include media-query($on-laptop) { - font-size: 36px; - } + @include media-query($on-laptop) { + font-size: 36px; + } } .post-content { - margin-bottom: $spacing-unit; + margin-bottom: $spacing-unit; - h2 { - font-size: 32px; + h2 { + font-size: 32px; - @include media-query($on-laptop) { - font-size: 28px; - } + @include media-query($on-laptop) { + font-size: 28px; } + } - h3 { - font-size: 26px; + h3 { + font-size: 26px; - @include media-query($on-laptop) { - font-size: 22px; - } + @include media-query($on-laptop) { + font-size: 22px; } + } - h4 { - font-size: 20px; + h4 { + font-size: 20px; - @include media-query($on-laptop) { - font-size: 18px; - } + @include media-query($on-laptop) { + font-size: 18px; } + } } diff --git a/website/www/site/assets/scss/_lists.scss b/website/www/site/assets/scss/_lists.scss new file mode 100644 index 000000000000..c4a34910c67e --- /dev/null +++ b/website/www/site/assets/scss/_lists.scss @@ -0,0 +1,304 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You 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. + */ + @import "media"; + + .arrow-list { + margin-top: 26px; + h3 { + max-width: 555px; + } + ul { + font-size: 16px; + font-weight: normal; + line-height: 1.63; + letter-spacing: 0.43px; + position: relative; + padding-left: 26px; + li::marker { + content: "\2192"; + color: #ff6d05; + font-size: 24px; + } + li { + list-style-type: none; + list-style-position: outside; + padding-left: 8px; + margin-bottom: -2px; + } + li:last-of-type { + margin-bottom: 25px; + } + } + figure { + width: 112px; + height: 112px; + margin-top: 64px; + } + a { + color: #333333; + text-decoration: underline; + } + } + + .arrow-list-header { + color: #333333; + text-decoration: none !important; + display: flex; + max-height: 40px; + margin-bottom: 74px; + &:hover { + cursor: default; + text-decoration: none; + } + @media (max-width: $mobile) { + margin-bottom: 50px; + &:hover { + cursor: pointer; + text-decoration: underline; + } + h2 { + font-size: 24px; + line-height: 1.25; + font-weight: 500; + letter-spacing: normal; + margin-top: 46px; + } + } + figure { + margin-top: 40px; + margin-right: 5px; + width: auto; + height: auto; + @media (min-width: $mobile) { + display: none; + } + img { + width: 18px; + height: 18px; + padding-right: 16px; + transform: rotate(-90deg); + } + } + } + .rotate { + img { + transform: rotate(0deg) !important; + margin-top: 10px; + } + } + .list { + margin-top: 32px; + max-width: 640px; + } + .icon-list { + .list-item { + display: flex; + margin-bottom: 8px; + position: relative; + @media (max-width: $tablet) { + margin-bottom: 43px; + } + img { + position: absolute; + top: 7px; + z-index: 2; + } + .reverse { + transform: rotate(-180deg); + } + + .cirkle { + width: 24px; + height: 24px; + background: #ff6d05; + border-radius: 50%; + text-align: center; + z-index: 5; + position: relative; + i { + vertical-align: bottom; + color: #fff; + } + } + .list-item-icon { + width: 44px; + height: 44px; + display: block; + margin-right: 25px; + } + .list-item-header { + font-size: 22px; + font-weight: 500; + letter-spacing: normal; + line-height: 1.36; + margin-top: 10px; + a { + color: #333333; + } + @media (max-width: $mobile) { + font-weight: 500; + } + } + .list-item-description { + @media (max-width: $mobile) { + position: absolute; + left: 55px; + } + } + } + .pillars-item { + display: flex; + align-items: center; + margin-bottom: 14px; + .pillars-item-icon { + margin-right: 28px; + } + + .pillars-item-description { + width: 100%; + max-width: 684px; + + .pillars-item-header { + font-size: 16px; + font-weight: bold; + line-height: 1.2; + letter-spacing: 0.43px; + margin-bottom: 6px; + margin-top: 10px; + } + + .pillars-item-text { + font-size: 14px; + font-weight: normal; + line-height: 1.57; + letter-spacing: 0.43px; + } + } + } + } + .documentation-list { + padding-left: 12px; + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + max-width: 855px; + .row { + display: flex; + flex-direction: column; + margin-top: 63px; + @media (max-width: $mobile) { + max-width: 260px; + } + + .item-icon { + height: 93px; + max-width: 260px; + display: flex; + align-items: center; + @media (max-width: $mobile) { + justify-content: center; + } + } + a { + font-size: 16px; + font-weight: bold; + line-height: 1.63; + letter-spacing: 0.43px; + color: #333333; + text-decoration: none; + } + .item-description { + max-width: 260px; + margin-right: 32px; + margin-top: 20px; + @media (max-width: $mobile) { + margin-right: 0; + width: auto; + } + } + } + } + .sdks { + max-width: 855px; + .item-description { + font-size: 16px; + font-weight: bold; + line-height: 1.63; + letter-spacing: 0.43px; + a{ + text-decoration: none; + } + } + } + .collapsable-list { + margin: 52px 0; + a { + font-size: 14px; + font-weight: bold; + font-stretch: normal; + font-style: normal; + line-height: 1.14; + letter-spacing: 0.6px; + color: #f26628; + } + li { + a { + font-size: 16px; + line-height: 1.63; + letter-spacing: 0.43px; + color: #333333; + } + } + } + .mobile-column { + @media (max-width: $mobile) { + flex-direction: column; + align-items: center; + text-align: center; + } + } + .margin-50 { + margin-top: 50px; + } + @media (min-width: 768px) { + .arrow-list { + .collapse.dont-collapse-sm { + display: block; + height: auto !important; + visibility: visible; + } + .collapsing { + position:relative; + height:unset !important; + overflow:hidden; + } + } + } + .beam-list { + margin-top: 32px; + .beam-title { + margin-bottom: 4px; + font-weight: bold; + } + .beam-description { + margin: 0; + font-size: 14px; + line-height: 22px; + height: 44px; + } + } diff --git a/website/www/site/assets/scss/_logos.sass b/website/www/site/assets/scss/_logos.sass deleted file mode 100644 index fd0f6f30058c..000000000000 --- a/website/www/site/assets/scss/_logos.sass +++ /dev/null @@ -1,36 +0,0 @@ -/*! - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You 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. - */ - -.logos - text-align: center - margin: $pad-xl 0 - - .logos__title - +type-h2 - margin-bottom: $pad-md - - .logos__logos - display: flex - justify-content: center - - .logos__logos__logo - line-height: 0 - margin: 0 $pad - +md - margin: 0 $pad-md - img - max-height: 70px diff --git a/website/www/site/assets/scss/_pillars.sass b/website/www/site/assets/scss/_logos.scss similarity index 50% rename from website/www/site/assets/scss/_pillars.sass rename to website/www/site/assets/scss/_logos.scss index 220e7ce8c6a0..33cd632d1fb8 100644 --- a/website/www/site/assets/scss/_pillars.sass +++ b/website/www/site/assets/scss/_logos.scss @@ -15,29 +15,57 @@ * limitations under the License. */ -.pillars - margin: $pad-xl 0 - text-align: center - - .pillars__title - +type-h2 - margin-bottom: $pad - - .pillars__cols - +type-body - +md - display: flex - justify-content: center - - .pillars__cols__col - .pillars__cols__col__title - font-weight: 600 - margin-bottom: $pad/2 - - .pillars__cols__col__body - max-width: 350px - margin: 0 auto $pad-sm - - +md - padding: 0 $pad - margin: 0 auto +@import "media"; + +.logos { + padding: $pad-l $pad; + + .logos-title { + @extend .component-title; + + text-align: center; + } + + .logos-logos { + display: flex; + justify-content: space-between; + width: 100%; + max-width: 1111px; + margin: 70px auto 60px; + + .logos-logo { + line-height: 0; + + img { + max-height: 70px; + } + } + } +} + +@media (max-width: $tablet) { + .logos { + padding: $pad-md $pad-s; + + .logos-logos { + max-width: 360px; + flex-wrap: wrap; + justify-content: center; + margin: 50px auto 20px; + + .logos-logo { + margin-right: 60px; + margin-bottom: 50px; + + img { + max-height: 45px; + } + } + + :nth-child(3), + :last-child { + margin-right: 0; + } + } + } +} diff --git a/website/www/site/assets/scss/_table-wrapper.sass b/website/www/site/assets/scss/_media.scss similarity index 88% rename from website/www/site/assets/scss/_table-wrapper.sass rename to website/www/site/assets/scss/_media.scss index 299b0019f62c..0365663590e7 100644 --- a/website/www/site/assets/scss/_table-wrapper.sass +++ b/website/www/site/assets/scss/_media.scss @@ -15,10 +15,6 @@ * limitations under the License. */ -.table-wrapper - > table - @extend .table - -.table-bordered-wrapper - > table - @extend .table-bordered + $mobile: 640px; + $tablet: 1024px; + $fullhd: 1920px; diff --git a/website/www/site/assets/scss/_navbar-desktop.scss b/website/www/site/assets/scss/_navbar-desktop.scss new file mode 100644 index 000000000000..3ec381905fa1 --- /dev/null +++ b/website/www/site/assets/scss/_navbar-desktop.scss @@ -0,0 +1,205 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You 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. + */ + + @import "media"; + + .navigation-bar-mobile { + display: none; + .arrow-icon { + display: flex; + align-items: baseline; + margin-left: 10px; + } + } + .nav-tabs { + border-bottom: none; + } + .navigation-bar-desktop { + display: flex; + height: 96px; + width: 100%; + align-items: center; + margin-bottom: 30px; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06); + background-color: $color-white; + z-index: 10000; // just to make sure that navbar always on top of other elements + + #iconsBar { + display: flex; + } + + a { + @extend .component-text; + font-weight: 500; + color: $color-dark-gray; + letter-spacing: 0.2px; + line-height: 1.63; + margin-right: 39px; + text-decoration: none; + cursor: pointer; + @media(max-width: 1273px){ + font-size: 14px; + margin-right: 18px; + } + } + + .navbar-logo { + margin-left: 58px; + margin-bottom: 4px; + img { + width: 88px; + } + } + .navbar-bar-left { + display: flex; + justify-content: space-between; + width: 100%; + } + .navbar-links { + display: flex; + align-items: center; + justify-content: space-between; + z-index: 10000; + :last-child { + margin-right: 0; + } + + .navbar-link { + display: inline-block; + position: relative; + margin-bottom: 2px; + } + + .navbar-link::before { + transition: 0.3; + content: ""; + position: absolute; + background-color: $color-sun; + height: 0%; + width: 100%; + bottom: 0px; + border-radius: 5px; + } + + .navbar-link:hover::before { + height: 2px; + } + + .navbar-dropdown-documentation { + list-style-type: none; + ul { + width: 209px; + left: -25%; + text-align: center; + border: none; + box-shadow: none; + padding-top: 34px; + padding-bottom: 0; + border-radius: 0; + li { + height: 36px; + } + a { + @extend .component-text; + line-height: 1.63; + letter-spacing: 0.2px; + @media(max-width: 1273px){ + font-size: 14px; + margin-right: 5px; + } + } + } + } + } + + .navbar-dropdown-apache { + margin-right: 90px; + list-style-type: none; + + .dropdown-toggle { + margin: 0; + } + + ul { + width: 209px; + left: 70%; + transform: translateX(-50%); + text-align: center; + border: none; + box-shadow: none; + padding-top: 35px; + padding-bottom: 0; + border-radius: 0; + li { + height: 36px; + } + a { + @extend .component-text; + + margin-right: 0 !important; + } + } + + .arrow-icon { + position: absolute; + top: 3px; + right: -30px; + } + } + + .navbar-dropdown-apache:hover { + .arrow-icon { + opacity: 0.84; + } + } + .dropdown-menu{ + @media(max-width: 1273px){ + width: 132px !important; + left: -14% !important; + } + } + + .navbar-dropdown { + .dropdown-menu > li > a { + &:hover, + &:focus { + text-decoration: none; + color: $color-dropdown-link-hover-text; + background-color: $color-dropdown-link-hover-bg; + } + } + } + + .dropdown:hover .dropdown-menu { + display: block; + margin-top: 0; + } + } + + @media (max-width: $tablet) { + .navigation-bar-desktop { + display: none; + } + + .navigation-bar-mobile { + display: block; + } + + .page-nav { + margin-top: 30px; + } + } diff --git a/website/www/site/assets/scss/_navbar.sass b/website/www/site/assets/scss/_navbar-mobile.sass similarity index 58% rename from website/www/site/assets/scss/_navbar.sass rename to website/www/site/assets/scss/_navbar-mobile.sass index f4b4ea6bcae7..4c9a2a528808 100644 --- a/website/www/site/assets/scss/_navbar.sass +++ b/website/www/site/assets/scss/_navbar-mobile.sass @@ -16,15 +16,31 @@ */ .navbar - padding: 15px 0 - + padding: 0 !important + min-height: 64px + ::before + display: none + ::after + display: none .navbar-nav > li > a text-transform: uppercase - + .navbar-link + font-size: 16px; + font-weight: 500; + line-height: normal; + letter-spacing: normal .navbar-header - margin-left: $pad + float: none + display: flex + align-items: center + justify-content: space-between + height: 100% + margin-top: 5px .navbar-brand + padding: 0 + display: flex + align-items: center +md margin-right: $pad @@ -40,31 +56,56 @@ color: $color-dark-gray .navbar-toggle - float: left + margin-right: 16px !important .icon-bar - background-color: $color-dark-gray + background-color: $color-sun + height: 3px + width: 20px - @media (max-width: $ak-breakpoint-lg) + @media (max-width: $tablet) display: block .navbar-container - @media (max-width: $ak-breakpoint-lg) + @media (max-width: $tablet) background-color: $color-white bottom: 0 min-height: 100vh - max-width: 256px + max-width: 303px padding: 15px position: fixed top: 0 transition: transform 100ms linear - width: calc(100% - 32px) - + width: calc(100% - 72px) + right: 0 + overflow-y: auto + + .navbar-toggle + margin: 0 + .dropdown-toggle + display: flex + align-items: center + .navbar-nav + margin-top: 58px .navbar-nav > li width: 100% + padding: 5px 0 + + span.navbar-link + padding: 10px 15px + color: #555555 + ul + list-style: none !important + li + padding: 9px 0 + a + letter-spacing: 0.2px + + .navbar-link + text-transform: none &.closed - transform: translateX(-100%) + transform: translateX(100%) &.open transform: translateX(0) @@ -78,7 +119,7 @@ top: 0 transition: opacity 200ms - @media (max-width: $ak-breakpoint-lg) + @media (max-width: $tablet) display: block &.closed @@ -88,7 +129,12 @@ &.open opacity: 0.5 width: 100% + overflow-y: auto - @media (max-width: $ak-breakpoint-lg) + @media (max-width: $tablet) .navbar-right margin-right: -15px + margin-top: 0 !important + +.fixedPosition + position: fixed diff --git a/website/www/site/assets/scss/_page-nav.scss b/website/www/site/assets/scss/_page-nav.scss new file mode 100644 index 000000000000..579da31f2b54 --- /dev/null +++ b/website/www/site/assets/scss/_page-nav.scss @@ -0,0 +1,103 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You 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. + */ + @import "media"; + +.page-nav { + overflow-y: auto; + max-height: calc(100vh - 130px); + position: fixed; + width: 248px; + margin-left: 30px; + li { + display: block; + width: 100%; + min-height: 36px; + a { + color: #37424b; + display: block; + font-size: 12px; + padding: 5px; + letter-spacing: .43px; + } + span { + font-size: 12px; + } + ul { + padding-left: 20px; + } + } + .nav { + img { + height: 14px; + width: 10px; + vertical-align: text-bottom; + transition: .3s; + margin-right: 8px; + } + .rotate { + transform: rotate(-90deg); + transition: .3s; + } + >li { + padding: 0 15px; + border-left: 3px solid #d8d8d8; + } + .chosen { + position: relative; + ::before { + content: ''; + position: absolute; + top: -1px; + left: -18px; + height: 100%; + min-height: 36px; + border-left: 3px solid #ff6d05; + } + a { + text-decoration: underline; + font-weight: 500; + } + } + .active .chosen ::before { + left: -38px; + } + } + #TableOfContents>ul { + margin-bottom: 0; + } +} + +.page-nav .nav>li>:hover { + border-radius: 8px +} + +.page-nav .nav>li>ul>li>:hover { + border-radius: 8px; + background-color: #f2f2f2; + text-decoration: none +} + +@media(max-width: $ak-breakpoint-lg) { + .page-nav { + margin-top: 0; + max-height: initial; + right: 0; + padding: 0 30px; + position: relative; + width: 100% + } +} diff --git a/website/www/site/assets/scss/_pillars.scss b/website/www/site/assets/scss/_pillars.scss new file mode 100644 index 000000000000..4ba7a01895d7 --- /dev/null +++ b/website/www/site/assets/scss/_pillars.scss @@ -0,0 +1,151 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You 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. + */ + +@import "media"; + +.pillars { + padding: $pad-l $pad; + + .pillars-title { + @extend .component-title; + + text-align: center; + border: none; + } + + .pillars-content { + display: grid; + grid-template-columns: 443px 443px; + grid-gap: 50px 89px; + justify-content: center; + margin-top: 84px; + + .pillars-item { + display: flex; + align-items: center; + + .pillars-item-icon { + margin-right: 47px; + } + + .pillars-item-description { + width: 100%; + max-width: 284px; + + .pillars-item-header { + @extend .component-header; + } + + .pillars-item-text { + @extend .component-text; + } + } + } + } + + .pillars-social { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + margin-top: 117px; + + .pillars-social-icons { + display: flex; + align-items: center; + margin-bottom: 45px; + + svg { + height: 41px; + width: auto; + } + + #about-twitter-icon { + height: 45px; + } + + a { + filter: grayscale(100%); + opacity: 0.7; + + &:hover { + filter: grayscale(0); + opacity: 1; + } + } + + .pillars-youtube-icon { + margin: 0 80px; + } + } + + .pillars-social-text { + @extend .component-text; + max-width: 285px; + } + } +} + +@media (max-width: $ak-breakpoint-lg) { + .pillars { + padding: $pad-md $pad-s; + + .pillars-content { + grid-template-columns: 330px; + grid-column-gap: 47px; + margin-top: 62px; + + .pillars-item { + align-items: flex-start; + + .pillars-item-icon { + margin-right: 17px; + margin-top: 12px; + } + + svg { + width: 64px; + height: 64px; + } + } + } + + .pillars-social { + margin-top: 91px; + + .pillars-social-icons { + svg { + height: 34px; + width: auto; + } + + #about-twitter-icon { + height: 37px; + } + + a { + filter: none; + opacity: 1; + } + + .pillars-youtube-icon { + margin: 0 60px; + } + } + } + } +} diff --git a/website/www/site/assets/scss/_powered_by.scss b/website/www/site/assets/scss/_powered_by.scss new file mode 100644 index 000000000000..2a2f67d78a37 --- /dev/null +++ b/website/www/site/assets/scss/_powered_by.scss @@ -0,0 +1,196 @@ +/* + 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. + */ + .powered_by { + display: flex; + flex-wrap: wrap; + margin-top: 74px; + .powered-card { + width: 417px; + height: 413px; + padding: 33px 26px 32px; + border-radius: 16px; + -webkit-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .16), 0 4px 4px 0 rgba(0, 0, 0, .06); + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .16), 0 4px 4px 0 rgba(0, 0, 0, .06); + background-color: #fff; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + justify-content: space-between; + margin-right: 20px; + margin-bottom: 20px; + overflow: hidden; + &:hover { + text-decoration: none; + -webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .24), 0 4px 6px 0 rgba(0, 0, 0, .24); + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .24), 0 4px 6px 0 rgba(0, 0, 0, .24); + } + .load-button { + margin-top: 0; + } + .powered-summary { + font-size: 14px; + font-weight: 400; + line-height: 1.57; + letter-spacing: .43px; + color: #333; + } + .powered-title { + color: #333; + } + } +} +.powered-icon { + width: 153px; + height: 153px; + margin: 0 auto; + svg { + width: 100%; + height: 100%; + } +} +.use_cases { + display: flex; + flex-direction: column; + .use-card { + width: 872px; + max-width: 100%; + height: 278px; + padding: 33px 33px 24px 37px; + border-radius: 16px; + -webkit-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .16), 0 4px 4px 0 rgba(0, 0, 0, .06); + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .16), 0 4px 4px 0 rgba(0, 0, 0, .06); + background-color: #fff; + display: flex; + margin-bottom: 36px; + &:hover { + text-decoration: none; + -webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .24), 0 4px 6px 0 rgba(0, 0, 0, .24); + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .24), 0 4px 6px 0 rgba(0, 0, 0, .24); + } + a { + color: #333; + &:hover { + text-decoration: none; + } + } + .use-icon { + display: flex; + align-items: center; + height: 100%; + margin-right: 48px; + svg, img { + width: 153px; + } + } + .use-body { + display: flex; + width: calc(100% - 200px); + flex-direction: column; + justify-content: space-between; + .use-category { + margin-bottom: 16px; + font-size: 14px; + font-weight: 700; + line-height: normal; + letter-spacing: 2px; + text-align: left; + color: #8c8b8e; + text-transform: uppercase; + } + .read-link { + text-align: end; + color: #f26628; + font-weight: 700; + line-height: 1.14; + letter-spacing: .6px; + } + .use-summary { + max-height: 109px; + display: -webkit-box; + overflow: hidden; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + } + h5 { + margin-top: 0; + } + } + } + .remove { + display: none; + } + .show-item { + display: flex; + } +} +.feedback { + text-align: center; + position: relative; + padding-top: 56px; + margin-top: 48px; + h3 { + max-width: 100%; + } + .update { + color: #8c8b8e; + float: right; + position: absolute; + top: 0; + right: 0; + } + .load-button { + margin-top: 56px; + padding: 15px 31px; + a{ + color: #fff; + text-decoration: none; + } + } + .description { + max-width: 465px; + margin: 0 auto; + margin-top: 24px; + } +} +@media (max-width: $mobile) { + .powered_by { + justify-content: center; + .powered-card { + width: 327px; + margin-right: 0; + } + } + .use_cases { + align-items: center; + .use-card { + width: 327px; + height: 650px; + padding: 27px 25px 24px; + flex-direction: column; + align-items: center; + .use-icon { + margin-right: 0; + height: 153px; + margin-bottom: 32px; + } + .use-body { + width: 100%; + height: 100%; + .use-summary { + max-height: 234px; + -webkit-line-clamp: 9; + } + } + } + } +} diff --git a/website/www/site/assets/scss/_quotes.scss b/website/www/site/assets/scss/_quotes.scss new file mode 100644 index 000000000000..31ef263ae789 --- /dev/null +++ b/website/www/site/assets/scss/_quotes.scss @@ -0,0 +1,155 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You 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. + */ + +@import "media"; + +.quotes { + padding: $pad-l $pad; + background-color: $color-medium-gray; + + .quotes-title { + @extend .component-title; + + text-align: center; + border: none; + } + + .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: 86px 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; + } + } + + // Sliding feature is only displayed on mobile version + .keen-slider { + display: none; + } + + .dots { + display: none; + } + + .keen-slider { + width: 327px; + margin: 0 auto; + 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); + + .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; + } + + img { + width: 172px; + } + } + } + + .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; + } + + .dot:focus { + outline: none; + } + + .dot--active { + background: $color-sun; + } +} + +@media (max-width: $tablet) { + .quotes { + .quotes-title { + margin-bottom: 64px; + } + h2 { + margin-bottom: 0 !important; + } + .quotes-desktop { + display: none; + } + + .keen-slider { + display: flex; + width: 100%; + } + + .dots { + display: flex; + } + } +} diff --git a/website/www/site/assets/scss/_search.scss b/website/www/site/assets/scss/_search.scss new file mode 100644 index 000000000000..3da3c40fdb00 --- /dev/null +++ b/website/www/site/assets/scss/_search.scss @@ -0,0 +1,81 @@ +/** + 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. +*/ +.searchBar { + width: 297px; + margin-right: 30px; + display: flex; + align-items: center; + table { + margin: 0; + } + div { + padding: 0; + svg { + padding-top: 2px; + } + } + .gsc-search-button { + display: none; + } + #__gcse_1 { + max-width: 213px; + } + .gsib_b { + display: none; + } + .gsc-input-box { + border-radius: 100px; + background-color: #f1f1f2; + table { + margin: 0; + } + input { + background-color: #f1f1f2; + min-width: 213px; + font-size: 12px; + font-weight: 400; + line-height: 1.83; + letter-spacing: normal; + } + } +} +.disappear { + display: none !important; +} +.searchBar-mobile { + width: 100%; + table { + margin: 0; + } + .gsc-input-box { + border-radius: 100px; + max-height: 36px; + background-color: #f1f1f2; + padding-top: 2px; + input { + background-color: #f1f1f2; + transform: translateY(-2px); + } + } + .gsc-search-button { + background-color: #fff; + border: none; + svg { + fill: #ff6d00; + } + &:focus { + background-color: #fff; + } + } +} diff --git a/website/www/site/assets/scss/_section-nav.sass b/website/www/site/assets/scss/_section-nav.sass deleted file mode 100644 index 61aff9f462ea..000000000000 --- a/website/www/site/assets/scss/_section-nav.sass +++ /dev/null @@ -1,119 +0,0 @@ -/*! - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You 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. - */ - -.section-nav - max-width: 250px - position: fixed - width: 100% - overflow-y: auto - background-color: #F7F7F7 - - nav - padding: 15px - max-height: calc(100vh - 130px) - - ul - list-style: none - - li - margin-bottom: 5px - - &:last-child - margin-bottom: 0 - - .section-nav-list - padding-left: 16px - - a - font-size: 12px - - @media (max-width: $ak-breakpoint-lg) - background-color: $color-white - max-height: 100vh - - .active - text-decoration: underline - color: #0f3556 - - &-back - display: none - padding: 15px - - @media (max-width: $ak-breakpoint-lg) - display: block - - &-list-title - display: block - font-size: 12px - position: relative - margin-bottom: 5px - - &--collapsible - cursor: pointer - - &-list-main-title - display: block - font-size: 12px - font-weight: bold - margin-bottom: 15px - text-transform: uppercase - - &-item--collapsible - cursor: pointer - - .section-nav-list - display: none - - span:before - content: "" - position: absolute - top: 2px - left: -16px - border-style: solid - border-width: 5px 0 5px 8px - border-color: transparent transparent transparent #3371e3 - transform: rotate(0deg) - transition: 0.3s - - .expanded - > span:before - transform: rotate(90deg) - - - @media (max-width: $ak-breakpoint-lg) - background-color: $color-light-gray - bottom: 0 - left: 0 - max-width: 256px - position: fixed - top: 0 - transition: transform 100ms linear - width: calc(100% - 32px) - z-index: 10000 - - nav - height: calc(100vh - 44px) - overflow-y: auto - - &.closed - transform: translateX(-100%) - - &.open - transform: translateX(0) - - - diff --git a/website/www/site/assets/scss/_section-nav.scss b/website/www/site/assets/scss/_section-nav.scss new file mode 100644 index 000000000000..8e1e897285e8 --- /dev/null +++ b/website/www/site/assets/scss/_section-nav.scss @@ -0,0 +1,144 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You 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. + */ +.section-nav { + max-width: 250px; + position: absolute; + width: 100%; + overflow-y: auto; + background-color: #fbfbfb; + border-radius: 8px; + .section-nav-list-main-title { + margin-top: 33px; + } + .section-nav-back { + padding: 23px 0 23px 31px; + background-color: #fbfbfb; + &:before { + height: 18px; + color: #ff6d00; + } + } + nav { + padding: 15px; + ul { + list-style: none; + } + li { + margin-bottom: 5px; + &:last-child { + margin-bottom: 0; + } + } + .section-nav-list { + padding-left: 16px; + } + a { + font-size: 12px; + color: #757575; + font-weight: 500; + line-height: 1.83; + letter-spacing: .43px; + } + .active { + text-decoration: underline; + border-radius: 8px; + background-color: #f2f2f2; + } + } + .expanded { + >span { + &:before { + transform: rotate(90deg); + } + } + } +} +.section-nav-back { + display: none; + padding: 15px; +} +.section-nav-list-title { + display: block; + font-size: 12px; + position: relative; + margin-bottom: 5px; + font-weight: 700; + line-height: 1.83; + letter-spacing: .43px; +} +.section-nav-list-title--collapsible { + cursor: pointer; +} +.section-nav-list-main-title { + display: block; + font-size: 18px; + font-weight: 700; + line-height: normal; + letter-spacing: 1px; + margin-bottom: 32px; + text-transform: uppercase; +} +.section-nav-item--collapsible { + cursor: pointer; + .section-nav-list { + display: none; + } + span { + &:before { + content: ""; + position: absolute; + top: 4px; + left: -16px; + border-style: solid; + border-width: 5px 0 5px 8px; + border-color: transparent transparent transparent #ff6d00; + transform: rotate(0deg); + transition: .3s; + } + } +} +@media (max-width:1024px) { + .section-nav { + nav { + background-color: #fff; + max-height: 100vh; + height: calc(100vh - 44px); + overflow-y: auto; + } + background-color: #f7f7f7; + bottom: 0; + right: 0; + max-width: 303px; + position: fixed; + top: 0; + transition: transform 100ms linear; + transition: transform 100ms linear, -webkit-transform 100ms linear, -o-transform 100ms linear; + width: calc(100% - 72px); + border-radius: 0; + z-index: 10000; + padding: 0; + } + .section-nav-back { + display: block; + } + .section-nav.closed { + transform: translateX(100%); + } + .section-nav.open { + transform: translateX(0); + } +} diff --git a/website/www/site/assets/scss/_syntax-highlighting.scss b/website/www/site/assets/scss/_syntax-highlighting.scss index ed9f27c32c9a..2d12caf37be6 100644 --- a/website/www/site/assets/scss/_syntax-highlighting.scss +++ b/website/www/site/assets/scss/_syntax-highlighting.scss @@ -16,71 +16,203 @@ * Syntax highlighting styles */ .highlight { - background: #fff; + //background: #fff; - .chroma { - background: #eef; - } + .chroma { + background: #eef; + } - .c { color: #998; font-style: italic } // Comment - .err { color: #a61717 } // Error - .k { font-weight: bold } // Keyword - .o { font-weight: bold } // Operator - .cm { color: #998; font-style: italic } // Comment.Multiline - .cp { color: #999; font-weight: bold } // Comment.Preproc - .c1 { color: #998; font-style: italic } // Comment.Single - .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special - .gd { color: #000; background-color: #fdd } // Generic.Deleted - .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific - .ge { font-style: italic } // Generic.Emph - .gr { color: #a00 } // Generic.Error - .gh { color: #999 } // Generic.Heading - .gi { color: #000; background-color: #dfd } // Generic.Inserted - .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific - .go { color: #888 } // Generic.Output - .gp { color: #555 } // Generic.Prompt - .gs { font-weight: bold } // Generic.Strong - .gu { color: #aaa } // Generic.Subheading - .gt { color: #a00 } // Generic.Traceback - .kc { font-weight: bold } // Keyword.Constant - .kd { font-weight: bold } // Keyword.Declaration - .kp { font-weight: bold } // Keyword.Pseudo - .kr { font-weight: bold } // Keyword.Reserved - .kt { color: #458; font-weight: bold } // Keyword.Type - .m { color: #099 } // Literal.Number - .s { color: #d14 } // Literal.String - .na { color: #008080 } // Name.Attribute - .nb { color: #0086B3 } // Name.Builtin - .nc { color: #458; font-weight: bold } // Name.Class - .no { color: #008080 } // Name.Constant - .ni { color: #800080 } // Name.Entity - .ne { color: #900; font-weight: bold } // Name.Exception - .nf { color: #900; font-weight: bold } // Name.Function - .nn { color: #555 } // Name.Namespace - .nt { color: #000080 } // Name.Tag - .nv { color: #008080 } // Name.Variable - .ow { font-weight: bold } // Operator.Word - .w { color: #bbb } // Text.Whitespace - .mf { color: #099 } // Literal.Number.Float - .mh { color: #099 } // Literal.Number.Hex - .mi { color: #099 } // Literal.Number.Integer - .mo { color: #099 } // Literal.Number.Oct - .sb { color: #d14 } // Literal.String.Backtick - .sc { color: #d14 } // Literal.String.Char - .sd { color: #d14 } // Literal.String.Doc - .s2 { color: #d14 } // Literal.String.Double - .se { color: #d14 } // Literal.String.Escape - .sh { color: #d14 } // Literal.String.Heredoc - .si { color: #d14 } // Literal.String.Interpol - .sx { color: #d14 } // Literal.String.Other - .sr { color: #009926 } // Literal.String.Regex - .s1 { color: #d14 } // Literal.String.Single - .ss { color: #990073 } // Literal.String.Symbol - .bp { color: #999 } // Name.Builtin.Pseudo - .vc { color: #008080 } // Name.Variable.Class - .vg { color: #008080 } // Name.Variable.Global - .vi { color: #008080 } // Name.Variable.Instance - .il { color: #099 } // Literal.Number.Integer.Long + .c { + color: #998; + font-style: italic; + } // Comment + .err { + color: #a61717; + } // Error + .k { + font-weight: bold; + } // Keyword + .o { + font-weight: bold; + } // Operator + .cm { + color: #998; + font-style: italic; + } // Comment.Multiline + .cp { + color: #999; + font-weight: bold; + } // Comment.Preproc + .c1 { + color: #998; + font-style: italic; + } // Comment.Single + .cs { + color: #999; + font-weight: bold; + font-style: italic; + } // Comment.Special + .gd { + color: #000; + background-color: #fdd; + } // Generic.Deleted + .gd .x { + color: #000; + background-color: #faa; + } // Generic.Deleted.Specific + .ge { + font-style: italic; + } // Generic.Emph + .gr { + color: #a00; + } // Generic.Error + .gh { + color: #999; + } // Generic.Heading + .gi { + color: #000; + background-color: #dfd; + } // Generic.Inserted + .gi .x { + color: #000; + background-color: #afa; + } // Generic.Inserted.Specific + .go { + color: #888; + } // Generic.Output + .gp { + color: #555; + } // Generic.Prompt + .gs { + font-weight: bold; + } // Generic.Strong + .gu { + color: #aaa; + } // Generic.Subheading + .gt { + color: #a00; + } // Generic.Traceback + .kc { + font-weight: bold; + } // Keyword.Constant + .kd { + font-weight: bold; + } // Keyword.Declaration + .kp { + font-weight: bold; + } // Keyword.Pseudo + .kr { + font-weight: bold; + } // Keyword.Reserved + .kt { + color: #458; + font-weight: bold; + } // Keyword.Type + .m { + color: #099; + } // Literal.Number + .s { + color: #d14; + } // Literal.String + .na { + color: #008080; + } // Name.Attribute + .nb { + color: #0086b3; + } // Name.Builtin + .nc { + color: #458; + font-weight: bold; + } // Name.Class + .no { + color: #008080; + } // Name.Constant + .ni { + color: #800080; + } // Name.Entity + .ne { + color: #900; + font-weight: bold; + } // Name.Exception + .nf { + color: #900; + font-weight: bold; + } // Name.Function + .nn { + color: #555; + } // Name.Namespace + .nt { + color: #000080; + } // Name.Tag + .nv { + color: #008080; + } // Name.Variable + .ow { + font-weight: bold; + } // Operator.Word + .w { + color: #bbb; + } // Text.Whitespace + .mf { + color: #099; + } // Literal.Number.Float + .mh { + color: #099; + } // Literal.Number.Hex + .mi { + color: #099; + } // Literal.Number.Integer + .mo { + color: #099; + } // Literal.Number.Oct + .sb { + color: #d14; + } // Literal.String.Backtick + .sc { + color: #d14; + } // Literal.String.Char + .sd { + color: #d14; + } // Literal.String.Doc + .s2 { + color: #d14; + } // Literal.String.Double + .se { + color: #d14; + } // Literal.String.Escape + .sh { + color: #d14; + } // Literal.String.Heredoc + .si { + color: #d14; + } // Literal.String.Interpol + .sx { + color: #d14; + } // Literal.String.Other + .sr { + color: #009926; + } // Literal.String.Regex + .s1 { + color: #d14; + } // Literal.String.Single + .ss { + color: #990073; + } // Literal.String.Symbol + .bp { + color: #999; + } // Name.Builtin.Pseudo + .vc { + color: #008080; + } // Name.Variable.Class + .vg { + color: #008080; + } // Name.Variable.Global + .vi { + color: #008080; + } // Name.Variable.Instance + .il { + color: #099; + } // Literal.Number.Integer.Long } .highlighter-custom { @@ -103,3 +235,124 @@ pre { background: #eef; } +[class*="-switcher"] { + ul { + li { + margin-bottom:0 !important; + padding-left: 0 !important; + &:hover { + cursor: pointer; + } + a { + border: none; + margin-right: 0; + color: #333; + text-decoration: none; + &:hover { + background-color: #f2804d; + color: #fff; + } + } + &::before { + display: none; + } + } + li.active { + color: #fff; + a { + background-color: #ff6d05; + color: #fff; + border: none; + } + } + } +} +.language-switcher { + ul.nav-tabs { + padding-left: 0; + border:0; + li { + &:hover { + cursor: pointer; + } + a { + border: none; + margin-right: 0; + color: #333; + &:hover { + background-color: #f2804d; + color: #fff; + } + } + &::before { + display: none; + } + } + li.active { + color: #fff; + a { + background-color: #ff6d05; + color: #fff; + border: none; + } + } + } +} +nav.version-switcher { + ul { + li { + &:hover { + cursor: pointer; + } + a { + border: none; + margin-right: 0; + color: #333; + &:hover { + background-color: #f2804d; + color: #fff; + } + } + &::before { + display: none; + } + } + li.active { + color: #fff; + a { + background-color: #ff6d05; + color: #fff; + border: none; + } + } + } +} +nav.runner-switcher { + ul { + li { + &:hover { + cursor: pointer; + } + a { + border: none; + margin-right: 0; + color: #333; + &:hover { + background-color: #f2804d; + color: #fff; + } + } + &::before { + display: none; + } + } + li.active { + color: #fff; + a { + background-color: #ff6d05; + color: #fff; + border: none; + } + } + } +} diff --git a/website/www/site/assets/scss/_table-wrapper.scss b/website/www/site/assets/scss/_table-wrapper.scss new file mode 100644 index 000000000000..3a7512266b81 --- /dev/null +++ b/website/www/site/assets/scss/_table-wrapper.scss @@ -0,0 +1,107 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You 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. + */ +$padding: 24px; +.table-wrapper { + margin-top: 64px; + + table { + @extend .table; + max-width: 853px; + } + th:nth-child(1) { + @media (max-width: $mobile) { + padding-left: 0 !important; + width: 115px; + } + padding-left: 67px + $padding !important; + width: 491px; + } + th:nth-child(2) { + @media (max-width: $mobile) { + width: 111px; + } + width: 181px; + } + th { + padding: 14px 14px 17px 14px !important; + border: none !important; + border-bottom: 1px solid #ff6d05 !important; + letter-spacing: 2px; + line-height: normal !important; + text-transform: uppercase; + } + td { + @media (max-width: $mobile) { + padding: $padding/4 !important; + } + padding: $padding !important; + border-bottom: 1px solid rgba(255, 109, 5, 0.24); + div { + display: flex; + position: relative; + } + img, + svg { + @media (max-width: $mobile) { + display: none; + } + position: absolute; + top: 50%; + transform: translateY(-60%); + } + p { + @media (max-width: $mobile) { + margin: 0; + } + margin-left: 67px; + font-size: 14px; + line-height: 1.57; + } + } + td:nth-child(3) { + @media (max-width: $mobile) { + padding: $padding/3 !important; + padding-left: $padding/4 !important; + } + padding: $padding/3 !important; + padding-left: $padding !important; + div { + flex-direction: column; + } + a { + text-decoration: underline; + line-height: 2; + letter-spacing: 0.43px; + } + } + td:nth-child(2) { + background-color: rgba(255, 109, 0, 0.04); + padding-left: $padding/2 !important; + padding-right: 0 !important; + line-height: 1.57; + letter-spacing: 0.43px; + } + a { + color: #f26628; + } +} + +.table-bordered-wrapper { + table { + @extend .table-bordered; + } +} diff --git a/website/www/site/assets/scss/_toggler-nav.scss b/website/www/site/assets/scss/_toggler-nav.scss index 34ed4e81e1ce..0cc6ba4f2a61 100644 --- a/website/www/site/assets/scss/_toggler-nav.scss +++ b/website/www/site/assets/scss/_toggler-nav.scss @@ -26,7 +26,7 @@ nav.language-switcher { background-color: #f8f8f8; &.active { - background-color: #222c37; + background-color: #ff6d05; color: #fff; } } diff --git a/website/www/site/assets/scss/_traits.scss b/website/www/site/assets/scss/_traits.scss new file mode 100644 index 000000000000..3e74b8d9831d --- /dev/null +++ b/website/www/site/assets/scss/_traits.scss @@ -0,0 +1,49 @@ +/** + 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. +*/ +@import "media"; +.row_of_traits { + display: flex; + justify-content: space-between; + flex-direction: row; + .traits-item { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + margin-top: 64px; + .traits-item-icon { + width: 112px; + height: 112px; + margin-bottom: 48px; + } + .traits-item-description { + max-width: 228px; + text-align: center; + font-size: 14px; + line-height: 1.57; + letter-spacing: .43px; + .font-weight-bold { + font-weight: 700; + } + a{ + color: #333333; + } + } + } +} +@media (max-width: $mobile) { + .row_of_traits { + flex-direction: column; + } +} diff --git a/website/www/site/assets/scss/_typography.scss b/website/www/site/assets/scss/_typography.scss new file mode 100644 index 000000000000..f030747f70a5 --- /dev/null +++ b/website/www/site/assets/scss/_typography.scss @@ -0,0 +1,201 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You 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. + */ + + @import "media"; + + .component-title { + font-size: 36px; + font-weight: 500; + font-style: normal; + line-height: 1.1; + letter-spacing: normal; + margin: 0; + color: $color-gray; + } + + .component-large-header { + font-size: 30px; + font-weight: 500; + font-style: normal; + line-height: 1.4; + letter-spacing: normal; + margin: 0; + color: $color-gray; + } + + .component-header { + font-size: 22px; + font-weight: 500; + font-style: normal; + line-height: 1.45; + letter-spacing: 0.43px; + margin: 0; + color: $color-gray; + } + + .component-small-header { + font-size: 18px; + font-weight: 500; + font-style: normal; + line-height: 1.56; + letter-spacing: 0.43px; + margin: 0; + color: $color-gray; + } + + .component-text { + font-size: 16px; + font-weight: normal; + font-style: normal; + line-height: 1.63; + letter-spacing: 0.43px; + margin: 0; + color: $color-gray; + } + + .component-label { + font-size: 16px; + font-weight: bold; + font-stretch: normal; + font-style: normal; + line-height: 1.5; + letter-spacing: 0.43px; + margin: 0; + color: $color-gray; + } + + .component-tag { + font-size: 16px; + font-weight: normal; + font-style: normal; + line-height: 1.63; + letter-spacing: 0.43px; + margin: 0; + color: $color-smoke; + } + + .component-quote { + font-size: 20px; + font-weight: normal; + font-stretch: normal; + font-style: italic; + line-height: 1.44; + letter-spacing: 0.43px; + text-align: center; + color: $color-gray; + } + + .hero-title { + font-size: 16px; + font-weight: normal; + font-style: normal; + line-height: 1.88; + letter-spacing: 0.8px; + color: $color-white; + } + + .hero-heading { + font-size: 46px; + font-weight: 500; + font-style: normal; + line-height: 1; + letter-spacing: normal; + color: $color-white; + } + + .hero-subheading { + font-size: 20px; + font-weight: normal; + font-style: normal; + line-height: 1.44; + letter-spacing: normal; + color: $color-white; + } + + @media (max-width: $tablet) { + .component-title { + font-size: 28px; + line-height: 1.29; + } + .component-large-header { + font-size: 24px; + } + } + + h1 { + font-size: 36px; + font-weight: 500; + line-height: 1.1; + letter-spacing: normal; + margin-bottom: 24px; + margin-top: 64px; + } + h2 { + font-size: 30px; + font-weight: 500; + line-height: 1.2; + letter-spacing: normal; + margin-bottom: 24px; + margin-top: 56px; + } + h3 { + font-size: 24px; + font-weight: 500; + line-height: 1.25; + letter-spacing: normal; + margin-bottom: 16px; + margin-top: 48px; + } + h4 { + font-size: 22px; + font-weight: 500; + line-height: 1.36; + letter-spacing: normal; + margin-bottom: 12px; + margin-top: 48px; + } + h5 { + font-size: 18px; + font-weight: 500; + line-height: 1.6; + letter-spacing: 0.43px; + margin-bottom: 12px; + margin-top: 32px; + } + h6 { + font-size: 16px; + font-weight: bold; + line-height: 1.2; + letter-spacing: 0.43px; + margin-bottom: 12px; + margin-top: 32px; + } + + p { + font-size: 16px; + font-weight: normal; + line-height: 1.63; + letter-spacing: 0.43px; + } + .hero-heading { + font-size: 32px; + } + li { + font-size: 16px; + letter-spacing: 0.43px; + line-height: 1.63; + } diff --git a/website/www/site/assets/scss/_vars.sass b/website/www/site/assets/scss/_vars.sass index a5dd998b14c2..626313d993b2 100644 --- a/website/www/site/assets/scss/_vars.sass +++ b/website/www/site/assets/scss/_vars.sass @@ -20,10 +20,20 @@ $color-dark: #37424B $color-white: #FFF $color-light-gray: #F7F7F7 $color-dark-gray: #555 +$color-gray: #333333 +$color-smoke: #8C8B8E +$color-sun: #F26628 +$color-silver: #C4C4C4 +$color-medium-gray: #FBFBFB + +$color-dropdown-link-hover-text: #E65D21 +$color-dropdown-link-hover-bg: #FFEDE5 $pad-sm: 15px +$pad-s: 24px $pad: 30px $pad-md: 60px +$pad-l: 84px $pad-xl: 100px $box-shadow: 0px 3px 20px 0 rgba(0,0,0,0.075) diff --git a/website/www/site/assets/scss/bootstrap/_navbar.scss b/website/www/site/assets/scss/bootstrap/_navbar.scss index 11e5c01c1585..ee2bb17a847b 100755 --- a/website/www/site/assets/scss/bootstrap/_navbar.scss +++ b/website/www/site/assets/scss/bootstrap/_navbar.scss @@ -210,7 +210,7 @@ // Bars .icon-bar { display: block; - width: 22px; + width: 20px; height: 2px; border-radius: 1px; } diff --git a/website/www/site/assets/scss/capability-matrix.scss b/website/www/site/assets/scss/capability-matrix.scss index 6bd629ada529..d5e5fc348aae 100644 --- a/website/www/site/assets/scss/capability-matrix.scss +++ b/website/www/site/assets/scss/capability-matrix.scss @@ -11,131 +11,285 @@ See the License for the specific language governing permissions and limitations under the License. */ +@import "media"; -/* What/Where/When/How colors. */ -.wwwh-what-dark { - color:#ca1; - font-weight:bold; - font-style:italic; +.back-button { + font-size: 14px; + font-weight: 700; + padding-left: 15px; + line-height: 1.14; + letter-spacing: 0.6px; + color: #f26628; + text-transform: uppercase; + &:hover { + color: #f2804d; + } + i { + width: 26px; + } } -.wwwh-where-dark { - color:#37d; - font-weight:bold; - font-style:italic; -} +.information-container { + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; + margin-bottom: 84px; -.wwwh-when-dark { - color:#6a4; - font-weight:bold; - font-style:italic; + @media (max-width: $mobile) { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + } + table { + margin: 0; + } + .read-tables { + table-layout: fixed; + position: relative; + th:first-of-type { + width: 22px; + min-width: 22px; + } + span { + font-weight: 500; + } + } + .second-container { + width: 270px; + margin-left: 100px; + @media (max-width: $mobile) { + margin-left: 0; + } + h5 { + margin-bottom: 22px; + } + .row { + display: -webkit-box; + display: flex; + margin-left: 0; + } + .box { + width: 71px; + height: 24px; + margin-bottom: 10px; + text-align: center; + margin-right: 10px; + } + .white { + border: solid 1px #f6f6f6; + background-color: #fff; + } + .partial { + border: solid 1px #d8d8d8; + background-color: #f9f9f9; + } + .gray { + border: solid 1px #bcbcbc; + background-color: #e1e0e0; + } + } + .border-left { + border-left: 3px solid #ff6d05; + padding: 7px; + font-size: 12px; + font-weight: 500; + line-height: 1.83; + letter-spacing: 0.43px; + } + .border-right { + transform: rotate(270deg); + height: 80px; + text-align: center; + padding: 0 !important; + width: 25px !important; + font-size: 12px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: 1.57; + letter-spacing: 0.43px; + position: absolute; + top: 55px; + left: 24px; + } + .border-top { + border-top: 3px solid #ff6d05; + font-size: 14px; + font-weight: 400; + font-stretch: normal; + font-style: normal; + line-height: 1.57; + letter-spacing: 0.43px; + td { + width: 162px; + padding: 7px; + } + } } - -.wwwh-how-dark { - color:#b55; - font-weight:bold; - font-style:italic; +.table-container { + display: -webkit-box; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; + margin-bottom: 32px; + table { + margin: 0; + } + .big-right { + max-width: 1240px; + } + .table-right { + overflow-x: scroll; + padding: 1px; + scrollbar-width: none; + &::-webkit-scrollbar { + width: 0; + background: 0 0; + } + } + .table-headers { + overflow-x: scroll; + border-spacing: 0; + border: solid 1px #d8d8d8; + border-bottom: none; + mix-blend-mode: multiply; + -ms-overflow-style: none; + scrollbar-width: none; + &::-webkit-scrollbar { + width: 0; + background: 0 0; + } + table { + height: 48px; + table-layout: fixed; + width: 710px; + th { + text-align: center; + width: 142px; + font-size: 12px; + font-weight: 500; + line-height: normal; + letter-spacing: normal; + padding-left: 10px; + @media (max-width: $mobile) { + width: 73px; + } + } + } + } + .big-headers table th { + width: 249px; + } + .table-center { + overflow-x: scroll; + border-spacing: 0; + border: solid 1px #d8d8d8; + border-collapse: separate; + transform: rotateX(180deg); + padding-bottom: 8px; + scrollbar-color: #ff6d00; + &::-webkit-scrollbar { + height: 8px; + width: 25px !important; + } + &::-webkit-scrollbar-track { + background-color: #efeded; + background-clip: content-box; + } + &::-webkit-scrollbar-thumb { + border-radius: 8px; + height: 6px !important; + background-color: #ff6d00; + } + table { + transform: rotateX(180deg); + border-collapse: separate; + table-layout: fixed; + width: 710px; + th, + td { + width: 142px; + height: 48px; + font-size: 12px; + font-weight: 500; + line-height: normal; + letter-spacing: normal; + border: 1px solid #fff; + @media (max-width: 640px) { + width: 73px; + } + } + } + } + .big-center { + table { + tr { + vertical-align: baseline; + th, + td { + width: 249px; + height: 352px; + padding: 6px; + font-weight: 400; + p { + font-size: 12px; + font-weight: 500; + line-height: normal; + letter-spacing: normal; + margin: 0; + } + } + } + } + } + .table-left table { + width: 142px; + @media (max-width: 640px) { + width: 73px; + } + tr:first-child th { + height: 83px; + border: none; + @media (max-width: $mobile) { + height: 119px; + } + @-moz-document url-prefix() { + height: 77px; + } + } + th { + height: 48px; + font-size: 12px; + font-weight: 500; + line-height: normal; + letter-spacing: normal; + border: solid 1px #f6f6f6; + border-right: none; + padding: 6px; + } + } + .big-left table { + text-align: start; + tr { + vertical-align: baseline; + } + th { + height: 352px; + } + } } - -/* Capability matrix general sizing, alignment etc. */ -table.cap { - border-spacing: 0px; - border-collapse: collapse; - padding: 2px; -} - -td.cap { - border-width: 1px; - border-style:solid; - vertical-align:text-top; - padding:0.5ex; -} - -th.cap, tr.cap, table.cap { - border-width: 1px; - border-style:solid; - vertical-align:text-top; - padding:0.5ex; -} - -td.cap-blank { - padding:10px; -} - -/* Capability matrix blog-post sizing, alignment etc. */ -table.cap-summary { - border-spacing: 0px; - border-collapse: collapse; - padding: 2px; - width:600px; -} - -td.cap-summary { - border-width: 1px; - border-style:solid; - vertical-align:text-top; - padding:0.5ex; -} - -th.cap-summary, tr.cap-summary, table.cap-summary { - border-width: 1px; - border-style:solid; - vertical-align:text-top; - padding:0.5ex; -} - -td.cap-summary-blank { - padding:10px; -} - -/* Capability matrix semantic coloring. */ -th.color-metadata, td.color-metadata { - background-color:#fff; - border-color:#fff; - color:#000; -} - -th.color-capability { - background-color:#333; - border-color:#222; -} - -th.color-platform { - background-color:#333; - border-color:#222; -} - -td.color-blank { - background-color:#fff; - color:#fff; -} - -/* Capability matrix semantic formatting */ -th.format-category { - vertical-align:text-top; - font-size:20px; - text-align:center; -} - -th.format-capability { - text-align:right; - white-space:nowrap; -} - -th.format-platform { - text-align:center; -} - -/* Capability matrix expand/collapse details toggle. */ -div.cap-toggle { - border-color:#000; - color:#000; - padding-top:1.5ex; - border-style:solid; - border-width:0px; - text-align:center; - cursor:pointer; - position:absolute; - font-size:16px; - font-weight:normal; +#table-link { + margin-bottom: 84px; + font-size: 14px; + font-weight: 700; + line-height: 1.14; + letter-spacing: 0.6px; + color: #f26628; + text-transform: uppercase; + &:hover { + text-decoration: none; + color: #f2804d; + } } diff --git a/website/www/site/assets/scss/main.scss b/website/www/site/assets/scss/main.scss index a2983ad59473..b72b4085c72a 100644 --- a/website/www/site/assets/scss/main.scss +++ b/website/www/site/assets/scss/main.scss @@ -14,29 +14,39 @@ // Legacy. @import "bootstrap"; -@import "capability-matrix"; +@import "_capability-matrix"; @import "_syntax-highlighting"; @import "_toggler-nav"; // Globals. @import "_vars.sass"; +@import "_media.scss"; @import "_breakpoints.sass"; @import "_type.sass"; @import "_global.sass"; -@import "_navbar.sass"; +@import "_navbar-mobile.sass"; +@import "_typography.scss"; // Components. @import "_button.sass"; // Modules. -@import "_cards.sass"; @import "_ctas.sass"; @import "_footer.sass"; -@import "_graphic.sass"; +@import "_graphic.scss"; @import "_header.sass"; -@import "_hero.sass"; -@import "_logos.sass"; -@import "_pillars.sass"; -@import "_section-nav.sass"; -@import "_page-nav.sass"; -@import "_table-wrapper.sass"; +@import "_hero.scss"; +@import "_hero-mobile.scss"; +@import "_logos.scss"; +@import "_pillars.scss"; +@import "_navbar-desktop.scss"; +@import "_table-wrapper.scss"; +@import "_calendar.scss"; +@import "_section-nav.scss"; +@import "_page-nav.scss"; +@import "_quotes.scss"; +@import "_blog.scss"; +@import "_lists.scss"; +@import "_traits.scss"; +@import "_search.scss"; +@import "_powered_by.scss"; diff --git a/website/www/site/config.toml b/website/www/site/config.toml index b7e6b831d04c..add55d7b4d12 100644 --- a/website/www/site/config.toml +++ b/website/www/site/config.toml @@ -37,7 +37,7 @@ pygmentsUseClassic = false # See https://help.farbox.com/pygments.html pygmentsStyle = "tango" -summaryLength = "unlimited" +summaryLength = "30" canonifyURLs = true diff --git a/website/www/site/content/en/community/_index.md b/website/www/site/content/en/community/_index.md new file mode 100644 index 000000000000..917bc1ef6065 --- /dev/null +++ b/website/www/site/content/en/community/_index.md @@ -0,0 +1,28 @@ +--- +title: "Community Beam" +aliases: + - /use/issue-tracking/ + - /use/mailing-lists/ + - /get-started/support/ +--- + + + +# Welcome to the Beam Community! + +Beam is a tool created by community for community. We tirelessly work to make it better and you can do it too! +If you are a data or software developer this is a place for you. + +{{< community/list_with_icons community_list >}} diff --git a/website/www/site/content/en/community/contact-us.md b/website/www/site/content/en/community/contact-us.md index cca25cda1224..b59cc06662fa 100644 --- a/website/www/site/content/en/community/contact-us.md +++ b/website/www/site/content/en/community/contact-us.md @@ -6,6 +6,7 @@ aliases: - /use/mailing-lists/ - /get-started/support/ --- + -# Contact Us +# Contact us! + +The Apache Beam community is friendly and welcoming. We are glad to help with any +question, suggestion or idea you have. Contact us in the following channels: + +## Available contact channels + +{{< community/table_with_icons contact_us >}} + +## Mailing list, what are they and how they work -There are many ways to reach the Beam user and developer communities - use -whichever one seems best. +The official communication channels for Apache projects are their mailing lists, and Apache Beam has two main lists: [user@beam.apache.org](user@beam.apache.org) and [dev@beam.apache.org](dev@beam.apache.org). The topics for each of them can be seen in the section above. - -
+### Subsribe and Unsubscribe: -| How to contact us | When to use it | -| ----------------- | ---------------| -| [user@](https://lists.apache.org/list.html?user@beam.apache.org) mailing list | User support and questions ([Subscribe](mailto:user-subscribe@beam.apache.org)[^1], [Unsubscribe](mailto:user-unsubscribe@beam.apache.org)[^1], [Archives](https://lists.apache.org/list.html?user@beam.apache.org)) | -| [dev@](https://lists.apache.org/list.html?dev@beam.apache.org) mailing list | Development discussions ([Subscribe](mailto:dev-subscribe@beam.apache.org)[^1], [Unsubscribe](mailto:dev-unsubscribe@beam.apache.org)[^1], [Archives](https://lists.apache.org/list.html?dev@beam.apache.org)) | -| [commits@](https://lists.apache.org/list.html?commits@beam.apache.org) mailing list | Firehose of commits, bugs, pull requests, etc. ([Subscribe](mailto:commits-subscribe@beam.apache.org)[^1], [Unsubscribe](mailto:commits-unsubscribe@beam.apache.org)[^1], [Archives](https://lists.apache.org/list.html?commits@beam.apache.org)) | -| [builds@](https://lists.apache.org/list.html?builds@beam.apache.org) mailing list | Firehose of build notifications from Jenkins ([Subscribe](mailto:builds-subscribe@beam.apache.org)[^1], [Unsubscribe](mailto:builds-unsubscribe@beam.apache.org)[^1], [Archives](https://lists.apache.org/list.html?builds@beam.apache.org)) | -| [JIRA bug tracker](https://issues.apache.org/jira/browse/BEAM) | Report bugs / discover known issues | -| [StackOverflow](https://stackoverflow.com/questions/tagged/apache-beam) | Ask and answer user support questions | -| [Slack](https://s.apache.org/beam-slack-channel) | Chat with users and developers in the ASF Slack. Note: Please [join the #beam channel](https://s.apache.org/beam-slack-channel) after you [created an account](https://s.apache.org/slack-invite). Please do not ask Beam questions in #general. | +Prior to sending emails to these lists, you need to subscribe. To subscribe, send a blank email to [user-subscribe@beam.apache.org](user-subscribe@beam.apache.org) or [dev-subscribe@beam.apache.org](dev-subscribe@beam.apache.org) depending on the list you want to write to. -
+### Useful Tips for Sending Emails -If you have questions about how to use Apache Beam, we recommend you try out the [user@](https://lists.apache.org/list.html?user@beam.apache.org) mailing list, and [StackOverflow](https://stackoverflow.com/questions/tagged/apache-beam). +Tip 1: Use tags in your subject line. +A tag is a word within a pair of brackets [] that indicate the type of message you’re sending. For example: [Bug] or [Proposal] or [Question] or [Idea]. Tags help folks navigate emails easier. -[^1]: To subscribe or unsubscribe, a blank email is fine. +Tip 2: If you’re asking a troubleshooting question, provide as much information as possible to help others replicate your issue or find possible solutions. -If you wish to report a security vulnerability, please contact [security@apache.org](mailto:security@apache.org). Apache Beam follows the typical [Apache vulnerability handling process](https://apache.org/security/committers.html#vulnerability-handling). +Tip 3: Share complete links instead of hyperlinks. A common practice in Apache is adding a number tag like [1] to indicate a word is a link or an attachment, and use the tag as a footnote to add the complete link at the end of your message. diff --git a/website/www/site/content/en/community/join-beam.md b/website/www/site/content/en/community/join-beam.md new file mode 100644 index 000000000000..db65498f1307 --- /dev/null +++ b/website/www/site/content/en/community/join-beam.md @@ -0,0 +1,46 @@ +--- +title: "Join Beam Community" +aliases: + - /community/ + - /use/issue-tracking/ + - /use/mailing-lists/ + - /get-started/support/ +--- + + + +# Join Beam Community! + +We’re so glad you want to join the Apache Beam community. Here’s a pathway you can follow to help you get started. This is not the only way to join, but it’s the recommended progression so you’re successful at reaching your objectives. + +## Join the Conversation + +{{< community/join_beam_columns number-of-data="0" >}} + +## Contribute to the Project + +{{< community/join_beam_columns number-of-data="1" >}} + +## Become a committer + +{{< community/join_beam_columns number-of-data="2" >}} + +## Become a PMC member + +{{< community/join_beam_columns number-of-data="3" >}} + +## Still have questions? + +Send us a note at user@beam.apache.org OR mention @ApacheBeam on Twitter OR ask us in the #beam slack channel. We look forward to seeing you in the community! diff --git a/website/www/site/content/en/community/powered-by.md b/website/www/site/content/en/community/powered-by.md deleted file mode 100644 index dd45ece15b4b..000000000000 --- a/website/www/site/content/en/community/powered-by.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: 'Powered by Apache Beam' ---- - -# Projects and Products Powered by Apache Beam - -To add yourself to the list, please open a [pull request](https://github.com/apache/beam/edit/master/website/www/site/content/en/community/powered_by.md) adding your organization name, URL, a list of which Beam components you are using, and a short description of your use case. - -* **[Cloud Dataflow](https://cloud.google.com/dataflow):** Google Cloud Dataflow is a fully managed service for executing - Apache Beam pipelines within the Google Cloud Platform ecosystem. -* **[TensorFlow Extended (TFX)](https://www.tensorflow.org/tfx):** TensorFlow Extended (TFX) is an end-to-end platform - for deploying production ML pipelines. -* **[Apache Hop (incubating)](http://hop.apache.org):** Hop provides a complete data orchestration (ETL / DI) toolset with visual pipeline development. It supports execution on the main Apache Beam runners. - - diff --git a/website/www/site/content/en/contribute/_index.md b/website/www/site/content/en/contribute/_index.md index 333039f39a4f..a3a6c972d5bf 100644 --- a/website/www/site/content/en/contribute/_index.md +++ b/website/www/site/content/en/contribute/_index.md @@ -1,12 +1,15 @@ --- title: "Beam Contribution Guide" +type: "contribute" +layout: "arrow_template" aliases: - - /contribution-guide/ - - /contribute/contribution-guide/ - - /docs/contribute/ - - /contribute/source-repository/ - - /contribute/design-principles/ + - /contribution-guide/ + - /contribute/contribution-guide/ + - /docs/contribute/ + - /contribute/source-repository/ + - /contribute/design-principles/ --- + -# Apache Beam Contribution Guide +# Contribution guide + + -If you have questions, please [reach out to the Beam community](/contribute/get-help). +
-There are lots of opportunities to contribute: +There are lots of opportunities to contribute. You can for example: - - ask or answer questions on [user@beam.apache.org](/community/contact-us/) or +- ask or answer questions on [user@beam.apache.org](/community/contact-us/) or [stackoverflow](https://stackoverflow.com/questions/tagged/apache-beam) - review proposed design ideas on [dev@beam.apache.org](/community/contact-us/) - improve the documentation @@ -49,17 +57,22 @@ There are lots of opportunities to contribute: https://cwiki.apache.org/confluence/display/BEAM/Contributor+FAQ) - organize local meetups of users or contributors to Apache Beam -Most importantly, if you have an idea of how to contribute, then do it! +
+ + + +
+ Below is a tutorial for contributing code to Beam, covering our tools and typical process in detail. ### Prerequisites -To contribute code, you need - - a GitHub account - a Linux, macOS, or Microsoft Windows development environment with Java JDK 8 installed - [Docker](https://www.docker.com/) installed for some tasks including building worker containers and testing this website @@ -71,6 +84,8 @@ To contribute code, you need Agreement](https://www.apache.org/licenses/icla.pdf) (ICLA) to the Apache Software Foundation (ASF). + + To install these in a Debian-based distribution: ``` @@ -127,8 +142,7 @@ script which is part of the Beam repo: 1. Assign the issue to yourself. To get the permission to do so, email the [dev@ mailing list](/community/contact-us) to introduce yourself and to be added as a contributor in the Beam issue tracker including your - ASF Jira Username. For example [this welcome email]( - https://lists.apache.org/thread.html/e6018c2aaf7dc7895091434295e5b0fafe192b975e3e3761fcf0cda7@%3Cdev.beam.apache.org%3E). + ASF Jira Username. For example [this welcome email](https://lists.apache.org/thread.html/e6018c2aaf7dc7895091434295e5b0fafe192b975e3e3761fcf0cda7@%3Cdev.beam.apache.org%3E). 1. If your change is large or it is your first change, it is a good idea to [discuss it on the dev@ mailing list](/community/contact-us/). 1. For large changes create a design doc @@ -233,6 +247,8 @@ script which is part of the Beam repo: all commits in the PR during merge, however if a PR has a mixture of independent changes that should not be squashed, and fixup commits, then the PR author should help squashing fixup commits to maintain a clean commmit history. +
+ ## When will my change show up in an Apache Beam release? Apache Beam makes minor releases every 6 weeks. Apache Beam has a diff --git a/website/www/site/content/en/contribute/runner-guide.md b/website/www/site/content/en/contribute/runner-guide.md index 57457a68fa8b..6bc65ecd6eb5 100644 --- a/website/www/site/content/en/contribute/runner-guide.md +++ b/website/www/site/content/en/contribute/runner-guide.md @@ -27,183 +27,6 @@ Topics covered: {{< toc >}} -## Basics of the Beam model - -Suppose you have a data processing engine that can pretty easily process graphs -of operations. You want to integrate it with the Beam ecosystem to get access -to other languages, great event time processing, and a library of connectors. -You need to know the core vocabulary: - - * [_Pipeline_](#pipeline) - A pipeline is a graph of transformations that a user constructs - that defines the data processing they want to do. - * [_PCollection_](#pcollections) - Data being processed in a pipeline is part of a PCollection. - * [_PTransforms_](#ptransforms) - The operations executed within a pipeline. These are best - thought of as operations on PCollections. - * _SDK_ - A language-specific library for pipeline authors (we often call them - "users" even though we have many kinds of users) to build transforms, - construct their pipelines and submit them to a runner - * _Runner_ - You are going to write a piece of software called a runner that - takes a Beam pipeline and executes it using the capabilities of your data - processing engine. - -These concepts may be very similar to your processing engine's concepts. Since -Beam's design is for cross-language operation and reusable libraries of -transforms, there are some special features worth highlighting. - -### Pipeline - -A pipeline in Beam is a graph of PTransforms operating on PCollections. A -pipeline is constructed by a user in their SDK of choice, and makes its way to -your runner either via the SDK directly or via the Runner API's (forthcoming) -RPC interfaces. - -### PTransforms - -In Beam, a PTransform can be one of the five primitives or it can be a -composite transform encapsulating a subgraph. The primitives are: - - * [_Read_](#implementing-the-read-primitive) - parallel connectors to external - systems - * [_ParDo_](#implementing-the-pardo-primitive) - per element processing - * [_GroupByKey_](#implementing-the-groupbykey-and-window-primitive) - - aggregating elements per key and window - * [_Flatten_](#implementing-the-flatten-primitive) - union of PCollections - * [_Window_](#implementing-the-window-primitive) - set the windowing strategy - for a PCollection - -When implementing a runner, these are the operations you need to implement. -Composite transforms may or may not be important to your runner. If you expose -a UI, maintaining some of the composite structure will make the pipeline easier -for a user to understand. But the result of processing is not changed. - -### PCollections - -A PCollection is an unordered bag of elements. Your runner will be responsible -for storing these elements. There are some major aspects of a PCollection to -note: - -#### Bounded vs Unbounded - -A PCollection may be bounded or unbounded. - - - _Bounded_ - it is finite and you know it, as in batch use cases - - _Unbounded_ - it may be never end, you don't know, as in streaming use cases - -These derive from the intuitions of batch and stream processing, but the two -are unified in Beam and bounded and unbounded PCollections can coexist in the -same pipeline. If your runner can only support bounded PCollections, you'll -need to reject pipelines that contain unbounded PCollections. If your -runner is only really targeting streams, there are adapters in our support code -to convert everything to APIs targeting unbounded data. - -#### Timestamps - -Every element in a PCollection has a timestamp associated with it. - -When you execute a primitive connector to some storage system, that connector -is responsible for providing initial timestamps. Your runner will need to -propagate and aggregate timestamps. If the timestamp is not important, as with -certain batch processing jobs where elements do not denote events, they will be -the minimum representable timestamp, often referred to colloquially as -"negative infinity". - -#### Watermarks - -Every PCollection has to have a watermark that estimates how complete the -PCollection is. - -The watermark is a guess that "we'll never see an element with an earlier -timestamp". Sources of data are responsible for producing a watermark. Your -runner needs to implement watermark propagation as PCollections are processed, -merged, and partitioned. - -The contents of a PCollection are complete when a watermark advances to -"infinity". In this manner, you may discover that an unbounded PCollection is -finite. - -#### Windowed elements - -Every element in a PCollection resides in a window. No element resides in -multiple windows (two elements can be equal except for their window, but they -are not the same). - -When elements are read from the outside world they arrive in the global window. -When they are written to the outside world, they are effectively placed back -into the global window (any writing transform that doesn't take this -perspective probably risks data loss). - -A window has a maximum timestamp, and when the watermark exceeds this plus -user-specified allowed lateness the window is expired. All data related -to an expired window may be discarded at any time. - -#### Coder - -Every PCollection has a coder, a specification of the binary format of the elements. - -In Beam, the user's pipeline may be written in a language other than the -language of the runner. There is no expectation that the runner can actually -deserialize user data. So the Beam model operates principally on encoded data - -"just bytes". Each PCollection has a declared encoding for its elements, called -a coder. A coder has a URN that identifies the encoding, and may have -additional sub-coders (for example, a coder for lists may contain a coder for -the elements of the list). Language-specific serialization techniques can, and -frequently are used, but there are a few key formats - such as key-value pairs -and timestamps - that are common so your runner can understand them. - -#### Windowing Strategy - -Every PCollection has a windowing strategy, a specification of essential -information for grouping and triggering operations. - -The details will be discussed below when we discuss the -[Window](#implementing-the-window-primitive) primitive, which sets up the -windowing strategy, and -[GroupByKey](#implementing-the-groupbykey-and-window-primitive) primitive, -which has behavior governed by the windowing strategy. - -### User-Defined Functions (UDFs) - -Beam has seven varieties of user-defined function (UDF). A Beam pipeline -may contain UDFs written in a language other than your runner, or even multiple -languages in the same pipeline (see the [Runner API](#the-runner-api)) so the -definitions are language-independent (see the [Fn API](#the-fn-api)). - -The UDFs of Beam are: - - * _DoFn_ - per-element processing function (used in ParDo) - * _WindowFn_ - places elements in windows and merges windows (used in Window - and GroupByKey) - * _Source_ - emits data read from external sources, including initial and - dynamic splitting for parallelism (used in Read) - * _ViewFn_ - adapts a materialized PCollection to a particular interface (used - in side inputs) - * _WindowMappingFn_ - maps one element's window to another, and specifies - bounds on how far in the past the result window will be (used in side - inputs) - * _CombineFn_ - associative and commutative aggregation (used in Combine and - state) - * _Coder_ - encodes user data; some coders have standard formats and are not really UDFs - -The various types of user-defined functions will be described further alongside -the primitives that use them. - -### Runner - -The term "runner" is used for a couple of things. It generally refers to the -software that takes a Beam pipeline and executes it somehow. Often, this is the -translation code that you write. It usually also includes some customized -operators for your data processing engine, and is sometimes used to refer to -the full stack. - -A runner has just a single method `run(Pipeline)`. From here on, I will often -use code font for proper nouns in our APIs, whether or not the identifiers -match across all SDKs. - -The `run(Pipeline)` method should be asynchronous and results in a -PipelineResult which generally will be a job descriptor for your data -processing engine, providing methods for checking its status, canceling it, and -waiting for it to terminate. - ## Implementing the Beam Primitives Aside from encoding and persisting data - which presumably your engine already diff --git a/website/www/site/content/en/documentation/_index.md b/website/www/site/content/en/documentation/_index.md index ffd6c21e7989..36812d53b630 100644 --- a/website/www/site/content/en/documentation/_index.md +++ b/website/www/site/content/en/documentation/_index.md @@ -4,6 +4,7 @@ aliases: - /learn/ - /docs/learn/ --- + + +# Basics of the Beam model + +Suppose you have a data processing engine that can pretty easily process graphs +of operations. You want to integrate it with the Beam ecosystem to get access +to other languages, great event time processing, and a library of connectors. +You need to know the core vocabulary: + + * [_Pipeline_](#pipeline) - A pipeline is a graph of transformations that a user constructs + that defines the data processing they want to do. + * [_PCollection_](#pcollections) - Data being processed in a pipeline is part of a PCollection. + * [_PTransforms_](#ptransforms) - The operations executed within a pipeline. These are best + thought of as operations on PCollections. + * _SDK_ - A language-specific library for pipeline authors (we often call them + "users" even though we have many kinds of users) to build transforms, + construct their pipelines and submit them to a runner + * _Runner_ - You are going to write a piece of software called a runner that + takes a Beam pipeline and executes it using the capabilities of your data + processing engine. + +These concepts may be very similar to your processing engine's concepts. Since +Beam's design is for cross-language operation and reusable libraries of +transforms, there are some special features worth highlighting. + +### Pipeline + +A pipeline in Beam is a graph of PTransforms operating on PCollections. A +pipeline is constructed by a user in their SDK of choice, and makes its way to +your runner either via the SDK directly or via the Runner API's (forthcoming) +RPC interfaces. + +### PTransforms + +In Beam, a PTransform can be one of the five primitives or it can be a +composite transform encapsulating a subgraph. The primitives are: + + * [_Read_](#implementing-the-read-primitive) - parallel connectors to external + systems + * [_ParDo_](#implementing-the-pardo-primitive) - per element processing + * [_GroupByKey_](#implementing-the-groupbykey-and-window-primitive) - + aggregating elements per key and window + * [_Flatten_](#implementing-the-flatten-primitive) - union of PCollections + * [_Window_](#implementing-the-window-primitive) - set the windowing strategy + for a PCollection + +When implementing a runner, these are the operations you need to implement. +Composite transforms may or may not be important to your runner. If you expose +a UI, maintaining some of the composite structure will make the pipeline easier +for a user to understand. But the result of processing is not changed. + +### PCollections + +A PCollection is an unordered bag of elements. Your runner will be responsible +for storing these elements. There are some major aspects of a PCollection to +note: + +#### Bounded vs Unbounded + +A PCollection may be bounded or unbounded. + + - _Bounded_ - it is finite and you know it, as in batch use cases + - _Unbounded_ - it may be never end, you don't know, as in streaming use cases + +These derive from the intuitions of batch and stream processing, but the two +are unified in Beam and bounded and unbounded PCollections can coexist in the +same pipeline. If your runner can only support bounded PCollections, you'll +need to reject pipelines that contain unbounded PCollections. If your +runner is only really targeting streams, there are adapters in our support code +to convert everything to APIs targeting unbounded data. + +#### Timestamps + +Every element in a PCollection has a timestamp associated with it. + +When you execute a primitive connector to some storage system, that connector +is responsible for providing initial timestamps. Your runner will need to +propagate and aggregate timestamps. If the timestamp is not important, as with +certain batch processing jobs where elements do not denote events, they will be +the minimum representable timestamp, often referred to colloquially as +"negative infinity". + +#### Watermarks + +Every PCollection has to have a watermark that estimates how complete the +PCollection is. + +The watermark is a guess that "we'll never see an element with an earlier +timestamp". Sources of data are responsible for producing a watermark. Your +runner needs to implement watermark propagation as PCollections are processed, +merged, and partitioned. + +The contents of a PCollection are complete when a watermark advances to +"infinity". In this manner, you may discover that an unbounded PCollection is +finite. + +#### Windowed elements + +Every element in a PCollection resides in a window. No element resides in +multiple windows (two elements can be equal except for their window, but they +are not the same). + +When elements are read from the outside world they arrive in the global window. +When they are written to the outside world, they are effectively placed back +into the global window (any writing transform that doesn't take this +perspective probably risks data loss). + +A window has a maximum timestamp, and when the watermark exceeds this plus +user-specified allowed lateness the window is expired. All data related +to an expired window may be discarded at any time. + +#### Coder + +Every PCollection has a coder, a specification of the binary format of the elements. + +In Beam, the user's pipeline may be written in a language other than the +language of the runner. There is no expectation that the runner can actually +deserialize user data. So the Beam model operates principally on encoded data - +"just bytes". Each PCollection has a declared encoding for its elements, called +a coder. A coder has a URN that identifies the encoding, and may have +additional sub-coders (for example, a coder for lists may contain a coder for +the elements of the list). Language-specific serialization techniques can, and +frequently are used, but there are a few key formats - such as key-value pairs +and timestamps - that are common so your runner can understand them. + +#### Windowing Strategy + +Every PCollection has a windowing strategy, a specification of essential +information for grouping and triggering operations. + +The details will be discussed below when we discuss the +[Window](#implementing-the-window-primitive) primitive, which sets up the +windowing strategy, and +[GroupByKey](#implementing-the-groupbykey-and-window-primitive) primitive, +which has behavior governed by the windowing strategy. + +### User-Defined Functions (UDFs) + +Beam has seven varieties of user-defined function (UDF). A Beam pipeline +may contain UDFs written in a language other than your runner, or even multiple +languages in the same pipeline (see the [Runner API](#the-runner-api)) so the +definitions are language-independent (see the [Fn API](#the-fn-api)). + +The UDFs of Beam are: + + * _DoFn_ - per-element processing function (used in ParDo) + * _WindowFn_ - places elements in windows and merges windows (used in Window + and GroupByKey) + * _Source_ - emits data read from external sources, including initial and + dynamic splitting for parallelism (used in Read) + * _ViewFn_ - adapts a materialized PCollection to a particular interface (used + in side inputs) + * _WindowMappingFn_ - maps one element's window to another, and specifies + bounds on how far in the past the result window will be (used in side + inputs) + * _CombineFn_ - associative and commutative aggregation (used in Combine and + state) + * _Coder_ - encodes user data; some coders have standard formats and are not really UDFs + +The various types of user-defined functions will be described further alongside +the primitives that use them. + +### Runner + +The term "runner" is used for a couple of things. It generally refers to the +software that takes a Beam pipeline and executes it somehow. Often, this is the +translation code that you write. It usually also includes some customized +operators for your data processing engine, and is sometimes used to refer to +the full stack. + +A runner has just a single method `run(Pipeline)`. From here on, I will often +use code font for proper nouns in our APIs, whether or not the identifiers +match across all SDKs. + +The `run(Pipeline)` method should be asynchronous and results in a +PipelineResult which generally will be a job descriptor for your data +processing engine, providing methods for checking its status, canceling it, and +waiting for it to terminate. diff --git a/website/www/site/content/en/documentation/runners/capability-matrix.md b/website/www/site/content/en/documentation/runners/capability-matrix/_index.md similarity index 55% rename from website/www/site/content/en/documentation/runners/capability-matrix.md rename to website/www/site/content/en/documentation/runners/capability-matrix/_index.md index 52cfd34aaa24..2897829ec9ec 100644 --- a/website/www/site/content/en/documentation/runners/capability-matrix.md +++ b/website/www/site/content/en/documentation/runners/capability-matrix/_index.md @@ -1,6 +1,7 @@ --- type: runners title: "Apache Beam Capability Matrix" +layout: arrow_template aliases: - /learn/runners/capability-matrix/ - /capability-matrix/ @@ -22,21 +23,17 @@ limitations under the License. # Beam Capability Matrix Apache Beam provides a portable API layer for building sophisticated data-parallel processing pipelines that may be executed across a diversity of execution engines, or runners. The core concepts of this layer are based upon the Beam Model (formerly referred to as the [Dataflow Model](https://www.vldb.org/pvldb/vol8/p1792-Akidau.pdf)), and implemented to varying degrees in each Beam runner. To help clarify the capabilities of individual runners, we've created the capability matrix below. -Individual capabilities have been grouped by their corresponding What / Where / When / How question: +Individual capabilities have been grouped by their corresponding What / Where / When / How question: -- What results are being calculated? -- Where in event time? -- When in processing time? -- How do refinements of results relate? +- What results are being calculated? +- Where in event time? +- When in processing time? +- How do refinements of results relate? -For more details on the What / Where / When / How breakdown of concepts, we recommend reading through the Streaming 102 post on O'Reilly Radar. +For more details on the What / Where / When / How breakdown of concepts, we recommend reading through the Streaming 102 post on O'Reilly Radar. Note that in the future, we intend to add additional tables beyond the current set, for things like runtime characterstics (e.g. at-least-once vs exactly-once), performance, etc. -{{< capability-matrix-common >}} - -{{< capability-matrix cap-data="capability-matrix" cap-style="cap-summary" cap-view="summary" cap-other-view="full" cap-toggle-details=1 cap-display="block" >}} +{{< documentation/capability-matrix-single cap-data="capability-matrix" cap-style="cap-summary" cap-view="summary" cap-toggle-details=1 cap-display="block" >}} - -{{< capability-matrix cap-data="capability-matrix" cap-style="cap" cap-view="full" cap-other-view="summary" cap-toggle-details=0 cap-display="none" >}} diff --git a/website/www/site/content/en/documentation/runners/capability-matrix/additional-common-features-not-yet-part-of-the-beam-model.md b/website/www/site/content/en/documentation/runners/capability-matrix/additional-common-features-not-yet-part-of-the-beam-model.md new file mode 100644 index 000000000000..525e3def6f86 --- /dev/null +++ b/website/www/site/content/en/documentation/runners/capability-matrix/additional-common-features-not-yet-part-of-the-beam-model.md @@ -0,0 +1,21 @@ +--- +type: runners +title: "Additional common features not yet part of the Beam model" +layout: "capability-template" +--- + + + +{{< documentation/capability-matrix-big cap-data="capability-matrix" cap-view="full" cap-index=6 >}} diff --git a/website/www/site/content/en/documentation/runners/capability-matrix/bounded-splittable-dofn-support-status.md b/website/www/site/content/en/documentation/runners/capability-matrix/bounded-splittable-dofn-support-status.md new file mode 100644 index 000000000000..0163d270dae5 --- /dev/null +++ b/website/www/site/content/en/documentation/runners/capability-matrix/bounded-splittable-dofn-support-status.md @@ -0,0 +1,21 @@ +--- +type: runners +title: "Bounded Splittable DoFn Support Status" +layout: "capability-template" +--- + + + +{{< documentation/capability-matrix-big cap-data="capability-matrix" cap-view="full" cap-index=1 >}} diff --git a/website/www/site/content/en/documentation/runners/capability-matrix/how-do-refinements-relate.md b/website/www/site/content/en/documentation/runners/capability-matrix/how-do-refinements-relate.md new file mode 100644 index 000000000000..7e5fd22e62aa --- /dev/null +++ b/website/www/site/content/en/documentation/runners/capability-matrix/how-do-refinements-relate.md @@ -0,0 +1,21 @@ +--- +type: runners +title: "How do refinements relate?" +layout: "capability-template" +--- + + + +{{< documentation/capability-matrix-big cap-data="capability-matrix" cap-view="full" cap-index=5 >}} diff --git a/website/www/site/content/en/documentation/runners/capability-matrix/unbounded-splittable-dofn-support-status.md b/website/www/site/content/en/documentation/runners/capability-matrix/unbounded-splittable-dofn-support-status.md new file mode 100644 index 000000000000..9a1395b4cdf2 --- /dev/null +++ b/website/www/site/content/en/documentation/runners/capability-matrix/unbounded-splittable-dofn-support-status.md @@ -0,0 +1,21 @@ +--- +type: runners +title: "Unbounded Splittable DoFn Support Status" +layout: "capability-template" +--- + + + +{{< documentation/capability-matrix-big cap-data="capability-matrix" cap-view="full" cap-index=2 >}} diff --git a/website/www/site/content/en/documentation/runners/capability-matrix/what-is-being-computed.md b/website/www/site/content/en/documentation/runners/capability-matrix/what-is-being-computed.md new file mode 100644 index 000000000000..cb15ebaea1d4 --- /dev/null +++ b/website/www/site/content/en/documentation/runners/capability-matrix/what-is-being-computed.md @@ -0,0 +1,21 @@ +--- +type: runners +title: "What is being computed?" +layout: "capability-template" +--- + + + +{{< documentation/capability-matrix-big cap-data="capability-matrix" cap-view="full" cap-index=0 >}} diff --git a/website/www/site/content/en/documentation/runners/capability-matrix/when-in-processing-time.md b/website/www/site/content/en/documentation/runners/capability-matrix/when-in-processing-time.md new file mode 100644 index 000000000000..a6b319501059 --- /dev/null +++ b/website/www/site/content/en/documentation/runners/capability-matrix/when-in-processing-time.md @@ -0,0 +1,21 @@ +--- +type: runners +title: "When in processing time?" +layout: "capability-template" +--- + + + +{{< documentation/capability-matrix-big cap-data="capability-matrix" cap-view="full" cap-index=4 >}} diff --git a/website/www/site/content/en/documentation/runners/capability-matrix/where-in-event-time.md b/website/www/site/content/en/documentation/runners/capability-matrix/where-in-event-time.md new file mode 100644 index 000000000000..cf8c5c7cbee3 --- /dev/null +++ b/website/www/site/content/en/documentation/runners/capability-matrix/where-in-event-time.md @@ -0,0 +1,21 @@ +--- +type: runners +title: "Where in event time?" +layout: "capability-template" +--- + + + +{{< documentation/capability-matrix-big cap-data="capability-matrix" cap-view="full" cap-index=3 >}} diff --git a/website/www/site/content/en/documentation/transforms/python/aggregation/cogroupbykey.md b/website/www/site/content/en/documentation/transforms/python/aggregation/cogroupbykey.md index f80c3b20affe..d5dac4ed9d73 100644 --- a/website/www/site/content/en/documentation/transforms/python/aggregation/cogroupbykey.md +++ b/website/www/site/content/en/documentation/transforms/python/aggregation/cogroupbykey.md @@ -38,7 +38,7 @@ Then, we apply `CoGroupByKey` to join both `PCollection`s using their keys. `CoGroupByKey` expects a dictionary of named keyed `PCollection`s, and produces elements joined by their keys. The values of each output element are dictionaries where the names correspond to the input dictionary, with lists of all the values found for that key. -{{< highlight py >}} +{{< highlight language="py" py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/cogroupbykey.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/cogroupbykey.py" cogroupbykey >}} {{< /highlight >}} @@ -50,9 +50,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/cogroupbykey_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/cogroupbykey.py" >}} - ## Related transforms * [CombineGlobally](/documentation/transforms/python/aggregation/combineglobally) to combine elements. diff --git a/website/www/site/content/en/documentation/transforms/python/aggregation/combineglobally.md b/website/www/site/content/en/documentation/transforms/python/aggregation/combineglobally.md index 75db253f32e7..1b27e1844bb8 100644 --- a/website/www/site/content/en/documentation/transforms/python/aggregation/combineglobally.md +++ b/website/www/site/content/en/documentation/transforms/python/aggregation/combineglobally.md @@ -36,7 +36,7 @@ Then, we apply `CombineGlobally` in multiple ways to combine all the elements in We define a function `get_common_items` which takes an `iterable` of sets as an input, and calculates the intersection (common items) of those sets. -{{< highlight py >}} +{{< highlight language="py" py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineglobally.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineglobally.py" combineglobally_function >}} {{< /highlight >}} @@ -48,14 +48,11 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineglobally_test.py" common_items >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineglobally.py" >}} - ### Example 2: Combining with a lambda function We can also use lambda functions to simplify **Example 1**. -{{< highlight py >}} +{{< highlight language="py" py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineglobally.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineglobally.py" combineglobally_lambda >}} {{< /highlight >}} @@ -67,9 +64,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineglobally_test.py" common_items >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineglobally.py" >}} - ### Example 3: Combining with multiple arguments You can pass functions with multiple arguments to `CombineGlobally`. @@ -77,7 +71,7 @@ They are passed as additional positional arguments or keyword arguments to the f In this example, the lambda function takes `sets` and `exclude` as arguments. -{{< highlight py >}} +{{< highlight language="py" py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineglobally.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineglobally.py" combineglobally_multiple_arguments >}} {{< /highlight >}} @@ -89,9 +83,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineglobally_test.py" common_items_with_exceptions >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineglobally.py" >}} - ### Example 4: Combining with a `CombineFn` The more general way to combine elements, and the most flexible, is with a class that inherits from `CombineFn`. @@ -110,7 +101,7 @@ The more general way to combine elements, and the most flexible, is with a class * [`CombineFn.extract_output()`](https://beam.apache.org/releases/pydoc/current/apache_beam.transforms.core.html#apache_beam.transforms.core.CombineFn.extract_output): It allows to do additional calculations before extracting a result. -{{< highlight py >}} +{{< highlight language="py" py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineglobally.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineglobally.py" combineglobally_combinefn >}} {{< /highlight >}} @@ -122,9 +113,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineglobally_test.py" percentages >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineglobally.py" >}} - ## Related transforms You can use the following combiner transforms: diff --git a/website/www/site/content/en/documentation/transforms/python/aggregation/combineperkey.md b/website/www/site/content/en/documentation/transforms/python/aggregation/combineperkey.md index f139619a1f4a..b79c183286ef 100644 --- a/website/www/site/content/en/documentation/transforms/python/aggregation/combineperkey.md +++ b/website/www/site/content/en/documentation/transforms/python/aggregation/combineperkey.md @@ -38,7 +38,7 @@ We use the function [`sum`](https://docs.python.org/3/library/functions.html#sum) which takes an `iterable` of numbers and adds them together. -{{< highlight py >}} +{{< highlight language="py" py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey.py" combineperkey_simple >}} {{< /highlight >}} @@ -50,14 +50,11 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey_test.py" total >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey.py" >}} - ### Example 2: Combining with a function We define a function `saturated_sum` which takes an `iterable` of numbers and adds them together, up to a predefined maximum number. -{{< highlight py >}} +{{< highlight language="py" py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey.py" combineperkey_function >}} {{< /highlight >}} @@ -69,14 +66,11 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey_test.py" saturated_total >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey.py" >}} - ### Example 3: Combining with a lambda function We can also use lambda functions to simplify **Example 2**. -{{< highlight py >}} +{{< highlight language="py" py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey.py" combineperkey_lambda >}} {{< /highlight >}} @@ -88,9 +82,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey_test.py" saturated_total >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey.py" >}} - ### Example 4: Combining with multiple arguments You can pass functions with multiple arguments to `CombinePerKey`. @@ -98,7 +89,7 @@ They are passed as additional positional arguments or keyword arguments to the f In this example, the lambda function takes `values` and `max_value` as arguments. -{{< highlight py >}} +{{< highlight language="py" py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey.py" combineperkey_multiple_arguments >}} {{< /highlight >}} @@ -110,9 +101,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey_test.py" saturated_total >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey.py" >}} - ### Example 5: Combining with a `CombineFn` The more general way to combine elements, and the most flexible, is with a class that inherits from `CombineFn`. @@ -131,7 +119,7 @@ The more general way to combine elements, and the most flexible, is with a class * [`CombineFn.extract_output()`](https://beam.apache.org/releases/pydoc/current/apache_beam.transforms.core.html#apache_beam.transforms.core.CombineFn.extract_output): It allows to do additional calculations before extracting a result. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey.py" combineperkey_combinefn >}} {{< /highlight >}} @@ -143,9 +131,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey_test.py" average >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combineperkey.py" >}} - ## Related transforms You can use the following combiner transforms: diff --git a/website/www/site/content/en/documentation/transforms/python/aggregation/combinevalues.md b/website/www/site/content/en/documentation/transforms/python/aggregation/combinevalues.md index 1698a428d711..64c1e7f7ccb0 100644 --- a/website/www/site/content/en/documentation/transforms/python/aggregation/combinevalues.md +++ b/website/www/site/content/en/documentation/transforms/python/aggregation/combinevalues.md @@ -39,7 +39,7 @@ We use the function [`sum`](https://docs.python.org/3/library/functions.html#sum) which takes an `iterable` of numbers and adds them together. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues.py" combinevalues_simple >}} {{< /highlight >}} @@ -51,9 +51,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues_test.py" total >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues.py" >}} - ### Example 2: Combining with a function We want the sum to be bounded up to a maximum value, so we use @@ -61,7 +58,7 @@ We want the sum to be bounded up to a maximum value, so we use We define a function `saturated_sum` which takes an `iterable` of numbers and adds them together, up to a predefined maximum number. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues.py" combinevalues_function >}} {{< /highlight >}} @@ -73,14 +70,11 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues_test.py" saturated_total >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues.py" >}} - ### Example 3: Combining with a lambda function We can also use lambda functions to simplify **Example 2**. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues.py" combinevalues_lambda >}} {{< /highlight >}} @@ -92,9 +86,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues_test.py" saturated_total >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues.py" >}} - ### Example 4: Combining with multiple arguments You can pass functions with multiple arguments to `CombineValues`. @@ -102,7 +93,7 @@ They are passed as additional positional arguments or keyword arguments to the f In this example, the lambda function takes `values` and `max_value` as arguments. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues.py" combinevalues_multiple_arguments >}} {{< /highlight >}} @@ -114,9 +105,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues_test.py" saturated_total >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues.py" >}} - ### Example 5: Combining with a `CombineFn` The more general way to combine elements, and the most flexible, is with a class that inherits from `CombineFn`. @@ -135,7 +123,7 @@ The more general way to combine elements, and the most flexible, is with a class * [`CombineFn.extract_output()`](https://beam.apache.org/releases/pydoc/current/apache_beam.transforms.core.html#apache_beam.transforms.core.CombineFn.extract_output): It allows to do additional calculations before extracting a result. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues.py" combinevalues_combinefn >}} {{< /highlight >}} @@ -147,9 +135,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues_test.py" percentages_per_season >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/combinevalues.py" >}} - ## Related transforms You can use the following combiner transforms: diff --git a/website/www/site/content/en/documentation/transforms/python/aggregation/count.md b/website/www/site/content/en/documentation/transforms/python/aggregation/count.md index f4d332ed2fc9..5aa6e1b8252f 100644 --- a/website/www/site/content/en/documentation/transforms/python/aggregation/count.md +++ b/website/www/site/content/en/documentation/transforms/python/aggregation/count.md @@ -32,7 +32,7 @@ Then, we apply `Count` to get the total number of elements in different ways. We use `Count.Globally()` to count *all* elements in a `PCollection`, even if there are duplicate elements. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/count.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/count.py" count_globally >}} {{< /highlight >}} @@ -44,14 +44,11 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/count_test.py" total_elements >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/count.py" >}} - ### Example 2: Counting elements for each key We use `Count.PerKey()` to count the elements for each unique key in a `PCollection` of key-values. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/count.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/count.py" count_per_key >}} {{< /highlight >}} @@ -63,14 +60,11 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/count_test.py" total_elements_per_key >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/count.py" >}} - ### Example 3: Counting all unique elements We use `Count.PerElement()` to count the only the unique elements in a `PCollection`. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/count.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/count.py" count_per_element >}} {{< /highlight >}} @@ -82,9 +76,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/count_test.py" total_unique_elements >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/count.py" >}} - ## Related transforms N/A diff --git a/website/www/site/content/en/documentation/transforms/python/aggregation/distinct.md b/website/www/site/content/en/documentation/transforms/python/aggregation/distinct.md index e0abca48ee7a..08db6bd987c5 100644 --- a/website/www/site/content/en/documentation/transforms/python/aggregation/distinct.md +++ b/website/www/site/content/en/documentation/transforms/python/aggregation/distinct.md @@ -29,7 +29,7 @@ In the following example, we create a pipeline with two `PCollection`s of produc We use `Distinct` to get rid of duplicate elements, which outputs a `PCollection` of all the unique elements. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/distinct.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/distinct.py" distinct >}} {{< /highlight >}} @@ -41,9 +41,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/distinct_test.py" unique_elements >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/distinct.py" >}} - ## Related transforms * [Count](/documentation/transforms/python/aggregation/count) counts the number of elements within each aggregation. diff --git a/website/www/site/content/en/documentation/transforms/python/aggregation/groupby.md b/website/www/site/content/en/documentation/transforms/python/aggregation/groupby.md index ad6c17b8ec3f..df281bdabe0a 100644 --- a/website/www/site/content/en/documentation/transforms/python/aggregation/groupby.md +++ b/website/www/site/content/en/documentation/transforms/python/aggregation/groupby.md @@ -32,7 +32,7 @@ In the following example, we create a pipeline with a `PCollection` of fruits. We use `GroupBy` to group all fruits by the first letter of their name. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" groupby_expr >}} {{< /highlight >}} @@ -44,13 +44,9 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" groupby_expr_result >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" >}} - - We can group by a composite key consisting of multiple properties if desired. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" groupby_two_exprs >}} {{< /highlight >}} @@ -65,10 +61,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" groupby_two_exprs_result >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" >}} - - In the case that the property one wishes to group by is an attribute, a string may be passed to `GroupBy` in the place of a callable expression. For example, suppose I have the following data @@ -79,7 +71,7 @@ suppose I have the following data We can then do -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" groupby_attr >}} {{< /highlight >}} @@ -91,12 +83,9 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" groupby_attr_result >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" >}} - It is possible to mix and match attributes and expressions, for example -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" groupby_attr_expr >}} {{< /highlight >}} @@ -108,9 +97,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" groupby_attr_expr_result >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" >}}. - ## Aggregation Grouping is often used in conjunction with aggregation, and the @@ -122,7 +108,7 @@ by, and finally a field name in which to store the result. For example, suppose one wanted to compute the amount of each fruit to buy. One could write -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" simple_aggregate >}} {{< /highlight >}} @@ -134,13 +120,10 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" simple_aggregate_result >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" >}}. - Similar to the parameters in `GroupBy`, one can also aggregate multiple fields and by expressions. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" expr_aggregate >}} {{< /highlight >}} @@ -152,13 +135,10 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" expr_aggregate_result >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" >}}. - One can, of course, aggregate the same field multiple times as well. This example also illustrates a global grouping, as the grouping key is empty. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" global_aggregate >}} {{< /highlight >}} @@ -170,10 +150,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" global_aggregate_result >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupby_test.py" >}}. - - ## Related transforms * [CombinePerKey](/documentation/transforms/python/aggregation/combineperkey) for combining with a single CombineFn. diff --git a/website/www/site/content/en/documentation/transforms/python/aggregation/groupbykey.md b/website/www/site/content/en/documentation/transforms/python/aggregation/groupbykey.md index f313e9d0dbf4..06ff183f833b 100644 --- a/website/www/site/content/en/documentation/transforms/python/aggregation/groupbykey.md +++ b/website/www/site/content/en/documentation/transforms/python/aggregation/groupbykey.md @@ -32,7 +32,7 @@ In the following example, we create a pipeline with a `PCollection` of produce k We use `GroupByKey` to group all the produce for each season. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupbykey.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupbykey.py" groupbykey >}} {{< /highlight >}} @@ -44,9 +44,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupbykey_test.py" produce_counts >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupbykey.py" >}} - ## Related transforms * [GroupBy](/documentation/transforms/python/aggregation/groupby) for grouping by arbitrary properties of the elements. diff --git a/website/www/site/content/en/documentation/transforms/python/aggregation/groupintobatches.md b/website/www/site/content/en/documentation/transforms/python/aggregation/groupintobatches.md index d9917fd5ae4b..a7c9cd9b2348 100644 --- a/website/www/site/content/en/documentation/transforms/python/aggregation/groupintobatches.md +++ b/website/www/site/content/en/documentation/transforms/python/aggregation/groupintobatches.md @@ -29,7 +29,7 @@ In the following example, we create a pipeline with a `PCollection` of produce b We use `GroupIntoBatches` to get fixed-sized batches for every key, which outputs a list of elements for every key. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupintobatches.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupintobatches.py" groupintobatches >}} {{< /highlight >}} @@ -41,9 +41,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupintobatches_test.py" batches_with_keys >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/groupintobatches.py" >}} - ## Related transforms diff --git a/website/www/site/content/en/documentation/transforms/python/aggregation/latest.md b/website/www/site/content/en/documentation/transforms/python/aggregation/latest.md index f9692b10f73a..613858c44752 100644 --- a/website/www/site/content/en/documentation/transforms/python/aggregation/latest.md +++ b/website/www/site/content/en/documentation/transforms/python/aggregation/latest.md @@ -33,7 +33,7 @@ We use `Latest` to get the element with the latest timestamp from the `PCollecti We use `Latest.Globally()` to get the element with the latest timestamp in the entire `PCollection`. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/latest.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/latest.py" latest_globally >}} {{< /highlight >}} @@ -45,14 +45,11 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/latest_test.py" latest_element >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/latest.py" >}} - ### Example 2: Latest elements for each key We use `Latest.PerKey()` to get the elements with the latest timestamp for each key in a `PCollection` of key-values. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/latest.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/latest.py" latest_per_key >}} {{< /highlight >}} @@ -64,9 +61,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/latest_test.py" latest_elements_per_key >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/latest.py" >}} - ## Related transforms * [Sample](/documentation/transforms/python/aggregation/sample) randomly takes some number of elements in a collection. diff --git a/website/www/site/content/en/documentation/transforms/python/aggregation/max.md b/website/www/site/content/en/documentation/transforms/python/aggregation/max.md index 7769b814517c..37210888226c 100644 --- a/website/www/site/content/en/documentation/transforms/python/aggregation/max.md +++ b/website/www/site/content/en/documentation/transforms/python/aggregation/max.md @@ -32,7 +32,7 @@ Then, we get the element with the maximum value in different ways. We use `Combine.Globally()` to get the maximum element from the *entire* `PCollection`. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/max.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/max.py" max_globally >}} {{< /highlight >}} @@ -44,14 +44,11 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/max_test.py" max_element >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/max.py" >}} - ### Example 2: Maximum elements for each key We use `Combine.PerKey()` to get the maximum element for each unique key in a `PCollection` of key-values. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/max.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/max.py" max_per_key >}} {{< /highlight >}} @@ -63,9 +60,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/max_test.py" elements_with_max_value_per_key >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/max.py" >}} - ## Related transforms * [CombineGlobally](/documentation/transforms/python/aggregation/combineglobally) diff --git a/website/www/site/content/en/documentation/transforms/python/aggregation/mean.md b/website/www/site/content/en/documentation/transforms/python/aggregation/mean.md index 69fa5ade447d..76a2d0082ed1 100644 --- a/website/www/site/content/en/documentation/transforms/python/aggregation/mean.md +++ b/website/www/site/content/en/documentation/transforms/python/aggregation/mean.md @@ -34,7 +34,7 @@ Then, we get the element with the average value in different ways. We use `Mean.Globally()` to get the average of the elements from the *entire* `PCollection`. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/mean.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/mean.py" mean_globally >}} {{< /highlight >}} @@ -46,14 +46,11 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/mean_test.py" mean_element >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/mean.py" >}} - ### Example 2: Mean of elements for each key We use `Mean.PerKey()` to get the average of the elements for each unique key in a `PCollection` of key-values. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/mean.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/mean.py" mean_per_key >}} {{< /highlight >}} @@ -65,9 +62,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/mean_test.py" elements_with_mean_value_per_key >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/mean.py" >}} - ## Related transforms * [CombineGlobally](/documentation/transforms/python/aggregation/combineglobally) diff --git a/website/www/site/content/en/documentation/transforms/python/aggregation/min.md b/website/www/site/content/en/documentation/transforms/python/aggregation/min.md index 8f385d20af69..62f9d15d4904 100644 --- a/website/www/site/content/en/documentation/transforms/python/aggregation/min.md +++ b/website/www/site/content/en/documentation/transforms/python/aggregation/min.md @@ -32,7 +32,7 @@ Then, we get the element with the minimum value in different ways. We use `Combine.Globally()` to get the minimum element from the *entire* `PCollection`. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/min.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/min.py" min_globally >}} {{< /highlight >}} @@ -44,14 +44,11 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/min_test.py" min_element >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/min.py" >}} - ### Example 2: Minimum elements for each key We use `Combine.PerKey()` to get the minimum element for each unique key in a `PCollection` of key-values. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/min.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/min.py" min_per_key >}} {{< /highlight >}} @@ -63,9 +60,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/min_test.py" elements_with_min_value_per_key >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/min.py" >}} - ## Related transforms * [CombineGlobally](/documentation/transforms/python/aggregation/combineglobally) diff --git a/website/www/site/content/en/documentation/transforms/python/aggregation/sample.md b/website/www/site/content/en/documentation/transforms/python/aggregation/sample.md index 33fc8f60235b..bd822ea89d4e 100644 --- a/website/www/site/content/en/documentation/transforms/python/aggregation/sample.md +++ b/website/www/site/content/en/documentation/transforms/python/aggregation/sample.md @@ -34,7 +34,7 @@ Then, we get a random sample of elements in different ways. We use `Sample.FixedSizeGlobally()` to get a fixed-size random sample of elements from the *entire* `PCollection`. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/sample.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/sample.py" sample_fixed_size_globally >}} {{< /highlight >}} @@ -46,14 +46,11 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/sample_test.py" sample >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/sample.py" >}} - ### Example 2: Sample elements for each key We use `Sample.FixedSizePerKey()` to get fixed-size random samples for each unique key in a `PCollection` of key-values. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/sample.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/sample.py" sample_fixed_size_per_key >}} {{< /highlight >}} @@ -65,9 +62,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/sample_test.py" samples_per_key >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/sample.py" >}} - ## Related transforms * [Top](/documentation/transforms/python/aggregation/top) finds the largest or smallest element. diff --git a/website/www/site/content/en/documentation/transforms/python/aggregation/sum.md b/website/www/site/content/en/documentation/transforms/python/aggregation/sum.md index a9aef38d4c21..9ceda5cbb084 100644 --- a/website/www/site/content/en/documentation/transforms/python/aggregation/sum.md +++ b/website/www/site/content/en/documentation/transforms/python/aggregation/sum.md @@ -32,7 +32,7 @@ Then, we get the sum of all the element values in different ways. We use `Combine.Globally()` to get sum of all the element values from the *entire* `PCollection`. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/sum.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/sum.py" sum_globally >}} {{< /highlight >}} @@ -44,14 +44,11 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/sum_test.py" total >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/sum.py" >}} - ### Example 2: Sum of the elements for each key We use `Combine.PerKey()` to get the sum of all the element values for each unique key in a `PCollection` of key-values. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/sum.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/sum.py" sum_per_key >}} {{< /highlight >}} @@ -63,9 +60,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/sum_test.py" totals_per_key >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/sum.py" >}} - ## Related transforms * [CombineGlobally](/documentation/transforms/python/aggregation/combineglobally) diff --git a/website/www/site/content/en/documentation/transforms/python/aggregation/top.md b/website/www/site/content/en/documentation/transforms/python/aggregation/top.md index 419c0f81fb58..8c93499d049b 100644 --- a/website/www/site/content/en/documentation/transforms/python/aggregation/top.md +++ b/website/www/site/content/en/documentation/transforms/python/aggregation/top.md @@ -34,7 +34,7 @@ Then, we get the largest or smallest elements in different ways. We use `Top.Largest()` to get the largest elements from the *entire* `PCollection`. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" top_largest >}} {{< /highlight >}} @@ -46,14 +46,11 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/top_test.py" largest_elements >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" >}} - ### Example 2: Largest elements for each key We use `Top.LargestPerKey()` to get the largest elements for each unique key in a `PCollection` of key-values. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" top_largest_per_key >}} {{< /highlight >}} @@ -65,14 +62,11 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/top_test.py" largest_elements_per_key >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" >}} - ### Example 3: Smallest elements from a PCollection We use `Top.Smallest()` to get the smallest elements from the *entire* `PCollection`. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" top_smallest >}} {{< /highlight >}} @@ -84,14 +78,11 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/top_test.py" smallest_elements >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" >}} - ### Example 4: Smallest elements for each key We use `Top.SmallestPerKey()` to get the smallest elements for each unique key in a `PCollection` of key-values. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" top_smallest_per_key >}} {{< /highlight >}} @@ -103,9 +94,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/top_test.py" smallest_elements_per_key >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" >}} - ### Example 5: Custom elements from a PCollection We use `Top.Of()` to get elements with customized rules from the *entire* `PCollection`. @@ -113,7 +101,7 @@ We use `Top.Of()` to get elements with customized rules from the *entire* `PColl You can change how the elements are compared with `key`. By default you get the largest elements, but you can get the smallest by setting `reverse=True`. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" top_of >}} {{< /highlight >}} @@ -125,9 +113,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/top_test.py" shortest_elements >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" >}} - ### Example 6: Custom elements for each key We use `Top.PerKey()` to get elements with customized rules for each unique key in a `PCollection` of key-values. @@ -135,7 +120,7 @@ We use `Top.PerKey()` to get elements with customized rules for each unique key You can change how the elements are compared with `key`. By default you get the largest elements, but you can get the smallest by setting `reverse=True`. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" top_per_key >}} {{< /highlight >}} @@ -147,9 +132,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/aggregation/top_test.py" shortest_elements_per_key >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/aggregation/top.py" >}} - ## Related transforms * [Sample](/documentation/transforms/python/aggregation/sample) to combine elements. Takes samples of the elements in a collection. diff --git a/website/www/site/content/en/documentation/transforms/python/elementwise/filter.md b/website/www/site/content/en/documentation/transforms/python/elementwise/filter.md index 3f602441932b..3b1b46e35239 100644 --- a/website/www/site/content/en/documentation/transforms/python/elementwise/filter.md +++ b/website/www/site/content/en/documentation/transforms/python/elementwise/filter.md @@ -36,7 +36,7 @@ Then, we apply `Filter` in multiple ways to filter out produce by their duration We define a function `is_perennial` which returns `True` if the element's duration equals `'perennial'`, and `False` otherwise. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" notebook="examples/notebooks/documentation/transforms/python/elementwise/filter" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" filter_function >}} {{< /highlight >}} @@ -48,15 +48,12 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter_test.py" perennials >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/filter" >}} - ### Example 2: Filtering with a lambda function We can also use lambda functions to simplify **Example 1**. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/filter" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" filter_lambda >}} {{< /highlight >}} @@ -68,10 +65,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter_test.py" perennials >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/filter" >}} - ### Example 3: Filtering with multiple arguments You can pass functions with multiple arguments to `Filter`. @@ -79,7 +72,8 @@ They are passed as additional positional arguments or keyword arguments to the f In this example, `has_duration` takes `plant` and `duration` as arguments. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/filter" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" filter_multiple_arguments >}} {{< /highlight >}} @@ -91,10 +85,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter_test.py" perennials >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/filter" >}} - ### Example 4: Filtering with side inputs as singletons If the `PCollection` has a single value, such as the average from another computation, @@ -103,7 +93,8 @@ passing the `PCollection` as a *singleton* accesses that value. In this example, we pass a `PCollection` the value `'perennial'` as a singleton. We then use that value to filter out perennials. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/filter" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" filter_side_inputs_singleton >}} {{< /highlight >}} @@ -115,17 +106,14 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter_test.py" perennials >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/filter" >}} - ### Example 5: Filtering with side inputs as iterators If the `PCollection` has multiple values, pass the `PCollection` as an *iterator*. This accesses elements lazily as they are needed, so it is possible to iterate over large `PCollection`s that won't fit into memory. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/filter" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" filter_side_inputs_iter >}} {{< /highlight >}} @@ -137,10 +125,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter_test.py" valid_plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/filter" >}} - > **Note**: You can pass the `PCollection` as a *list* with `beam.pvalue.AsList(pcollection)`, > but this requires that all the elements fit into memory. @@ -151,7 +135,8 @@ Each element must be a `(key, value)` pair. Note that all the elements of the `PCollection` must fit into memory for this. If the `PCollection` won't fit into memory, use `beam.pvalue.AsIter(pcollection)` instead. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/filter" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" filter_side_inputs_dict >}} {{< /highlight >}} @@ -163,10 +148,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter_test.py" perennials >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/filter.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/filter" >}} - ## Related transforms * [FlatMap](/documentation/transforms/python/elementwise/flatmap) behaves the same as `Map`, but for diff --git a/website/www/site/content/en/documentation/transforms/python/elementwise/flatmap.md b/website/www/site/content/en/documentation/transforms/python/elementwise/flatmap.md index 7c7baa117b76..15648b986e2f 100644 --- a/website/www/site/content/en/documentation/transforms/python/elementwise/flatmap.md +++ b/website/www/site/content/en/documentation/transforms/python/elementwise/flatmap.md @@ -37,7 +37,8 @@ where each of the output `iterable`'s elements is an element of the resulting `P We use the function `str.split` which takes a single `str` element and outputs a `list` of `str`s. This pipeline splits the input element using whitespaces, creating a list of zero or more elements. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" flatmap_simple >}} {{< /highlight >}} @@ -49,15 +50,12 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} - ### Example 2: FlatMap with a function We define a function `split_words` which splits an input `str` element using the delimiter `','` and outputs a `list` of `str`s. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" flatmap_function >}} {{< /highlight >}} @@ -69,17 +67,14 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} - ### Example 3: FlatMap with a lambda function For this example, we want to flatten a `PCollection` of lists of `str`s into a `PCollection` of `str`s. Each input element is already an `iterable`, where each element is what we want in the resulting `PCollection`. We use a lambda function that returns the same input element it received. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" flatmap_lambda >}} {{< /highlight >}} @@ -91,17 +86,14 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} - ### Example 4: FlatMap with a generator For this example, we want to flatten a `PCollection` of lists of `str`s into a `PCollection` of `str`s. We use a generator to iterate over the input list and yield each of the elements. Each yielded result in the generator is an element in the resulting `PCollection`. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" flatmap_generator >}} {{< /highlight >}} @@ -113,16 +105,13 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} - ### Example 5: FlatMapTuple for key-value pairs If your `PCollection` consists of `(key, value)` pairs, you can use `FlatMapTuple` to unpack them into different function arguments. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" flatmap_tuple >}} {{< /highlight >}} @@ -134,10 +123,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} - ### Example 6: FlatMap with multiple arguments You can pass functions with multiple arguments to `FlatMap`. @@ -145,7 +130,8 @@ They are passed as additional positional arguments or keyword arguments to the f In this example, `split_words` takes `text` and `delimiter` as arguments. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" flatmap_multiple_arguments >}} {{< /highlight >}} @@ -157,10 +143,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} - ### Example 7: FlatMap with side inputs as singletons If the `PCollection` has a single value, such as the average from another computation, @@ -169,7 +151,8 @@ passing the `PCollection` as a *singleton* accesses that value. In this example, we pass a `PCollection` the value `','` as a singleton. We then use that value as the delimiter for the `str.split` method. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" flatmap_side_inputs_singleton >}} {{< /highlight >}} @@ -181,17 +164,14 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} - ### Example 8: FlatMap with side inputs as iterators If the `PCollection` has multiple values, pass the `PCollection` as an *iterator*. This accesses elements lazily as they are needed, so it is possible to iterate over large `PCollection`s that won't fit into memory. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" flatmap_side_inputs_iter >}} {{< /highlight >}} @@ -203,10 +183,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap_test.py" valid_plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} - > **Note**: You can pass the `PCollection` as a *list* with `beam.pvalue.AsList(pcollection)`, > but this requires that all the elements fit into memory. @@ -217,7 +193,8 @@ Each element must be a `(key, value)` pair. Note that all the elements of the `PCollection` must fit into memory for this. If the `PCollection` won't fit into memory, use `beam.pvalue.AsIter(pcollection)` instead. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" flatmap_side_inputs_dict >}} {{< /highlight >}} @@ -229,10 +206,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap_test.py" valid_plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/flatmap.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/flatmap" >}} - ## Related transforms * [Filter](/documentation/transforms/python/elementwise/filter) is useful if the function is just diff --git a/website/www/site/content/en/documentation/transforms/python/elementwise/keys.md b/website/www/site/content/en/documentation/transforms/python/elementwise/keys.md index 1bfac3bb94ce..d30717d3e814 100644 --- a/website/www/site/content/en/documentation/transforms/python/elementwise/keys.md +++ b/website/www/site/content/en/documentation/transforms/python/elementwise/keys.md @@ -28,7 +28,8 @@ Takes a collection of key-value pairs and returns the key of each element. In the following example, we create a pipeline with a `PCollection` of key-value pairs. Then, we apply `Keys` to extract the keys and discard the values. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/keys.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/keys" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/keys.py" keys >}} {{< /highlight >}} @@ -40,10 +41,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/keys_test.py" icons >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/keys.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/keys" >}} - ## Related transforms * [KvSwap](/documentation/transforms/python/elementwise/kvswap) swaps the key and value of each element. diff --git a/website/www/site/content/en/documentation/transforms/python/elementwise/kvswap.md b/website/www/site/content/en/documentation/transforms/python/elementwise/kvswap.md index 259fe8902587..3c3a25518c82 100644 --- a/website/www/site/content/en/documentation/transforms/python/elementwise/kvswap.md +++ b/website/www/site/content/en/documentation/transforms/python/elementwise/kvswap.md @@ -29,7 +29,8 @@ which has each key and value swapped. In the following example, we create a pipeline with a `PCollection` of key-value pairs. Then, we apply `KvSwap` to swap the keys and values. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/kvswap.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/kvswap" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/kvswap.py" kvswap >}} {{< /highlight >}} @@ -41,10 +42,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/kvswap_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/kvswap.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/kvswap" >}} - ## Related transforms * [Keys](/documentation/transforms/python/elementwise/keys) for extracting the key of each component. diff --git a/website/www/site/content/en/documentation/transforms/python/elementwise/map.md b/website/www/site/content/en/documentation/transforms/python/elementwise/map.md index a6f3bdab9f52..d31bbabea2e2 100644 --- a/website/www/site/content/en/documentation/transforms/python/elementwise/map.md +++ b/website/www/site/content/en/documentation/transforms/python/elementwise/map.md @@ -35,7 +35,8 @@ Then, we apply `Map` in multiple ways to transform every element in the `PCollec We use the function `str.strip` which takes a single `str` element and outputs a `str`. It strips the input element's whitespaces, including newlines and tabs. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/map" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" map_simple >}} {{< /highlight >}} @@ -47,15 +48,12 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/map_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/map" >}} - ### Example 2: Map with a function We define a function `strip_header_and_newline` which strips any `'#'`, `' '`, and `'\n'` characters from each element. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/map" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" map_function >}} {{< /highlight >}} @@ -67,15 +65,12 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/map_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/map" >}} - ### Example 3: Map with a lambda function We can also use lambda functions to simplify **Example 2**. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/map" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" map_lambda >}} {{< /highlight >}} @@ -87,10 +82,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/map_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/map" >}} - ### Example 4: Map with multiple arguments You can pass functions with multiple arguments to `Map`. @@ -98,7 +89,8 @@ They are passed as additional positional arguments or keyword arguments to the f In this example, `strip` takes `text` and `chars` as arguments. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/map" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" map_multiple_arguments >}} {{< /highlight >}} @@ -110,16 +102,13 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/map_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/map" >}} - ### Example 5: MapTuple for key-value pairs If your `PCollection` consists of `(key, value)` pairs, you can use `MapTuple` to unpack them into different function arguments. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/map" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" map_tuple >}} {{< /highlight >}} @@ -131,10 +120,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/map_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/map" >}} - ### Example 6: Map with side inputs as singletons If the `PCollection` has a single value, such as the average from another computation, @@ -143,7 +128,8 @@ passing the `PCollection` as a *singleton* accesses that value. In this example, we pass a `PCollection` the value `'# \n'` as a singleton. We then use that value as the characters for the `str.strip` method. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/map" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" map_side_inputs_singleton >}} {{< /highlight >}} @@ -155,17 +141,14 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/map_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/map" >}} - ### Example 7: Map with side inputs as iterators If the `PCollection` has multiple values, pass the `PCollection` as an *iterator*. This accesses elements lazily as they are needed, so it is possible to iterate over large `PCollection`s that won't fit into memory. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/map" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" map_side_inputs_iter >}} {{< /highlight >}} @@ -177,10 +160,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/map_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/map" >}} - > **Note**: You can pass the `PCollection` as a *list* with `beam.pvalue.AsList(pcollection)`, > but this requires that all the elements fit into memory. @@ -191,7 +170,8 @@ Each element must be a `(key, value)` pair. Note that all the elements of the `PCollection` must fit into memory for this. If the `PCollection` won't fit into memory, use `beam.pvalue.AsIter(pcollection)` instead. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/map" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" map_side_inputs_dict >}} {{< /highlight >}} @@ -203,10 +183,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/map_test.py" plant_details >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/map.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/map" >}} - ## Related transforms * [FlatMap](/documentation/transforms/python/elementwise/flatmap) behaves the same as `Map`, but for diff --git a/website/www/site/content/en/documentation/transforms/python/elementwise/pardo.md b/website/www/site/content/en/documentation/transforms/python/elementwise/pardo.md index 16089701b5fd..5021e577a4c4 100644 --- a/website/www/site/content/en/documentation/transforms/python/elementwise/pardo.md +++ b/website/www/site/content/en/documentation/transforms/python/elementwise/pardo.md @@ -41,7 +41,8 @@ which stores the `delimiter` as an object field. The `process` method is called once per element, and it can yield zero or more output elements. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/pardo.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/pardo" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/pardo.py" pardo_dofn >}} {{}} @@ -53,10 +54,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/pardo_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/pardo.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/pardo" >}} - ### Example 2: ParDo with timestamp and window information In this example, we add new parameters to the `process` method to bind parameter values at runtime. @@ -70,7 +67,8 @@ In this example, we add new parameters to the `process` method to bind parameter [`apache_beam.transforms.window.*Window`](https://beam.apache.org/releases/pydoc/current/apache_beam.transforms.window.html) object. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/pardo.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/pardo" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/pardo.py" pardo_dofn_params >}} {{}} @@ -82,10 +80,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/pardo_test.py" dofn_params >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/pardo.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/pardo" >}} - ### Example 3: ParDo with DoFn methods A [`DoFn`](https://beam.apache.org/releases/pydoc/current/apache_beam.transforms.core.html#apache_beam.transforms.core.DoFn) @@ -131,7 +125,8 @@ starts and finishes with `start_bundle` and `finish_bundle`. Note that `teardown` is called as a *best effort* and is *not guaranteed*. For example, if the worker crashes, `teardown` might not be called. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/pardo.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/pardo" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/pardo.py" pardo_dofn_methods >}} {{}} @@ -143,10 +138,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/pardo_test.py" results >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/pardo.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/pardo" >}} - > *Known issues:* > > * [[BEAM-7885]](https://issues.apache.org/jira/browse/BEAM-7885) diff --git a/website/www/site/content/en/documentation/transforms/python/elementwise/partition.md b/website/www/site/content/en/documentation/transforms/python/elementwise/partition.md index 05897053455e..fbfe8a99ac52 100644 --- a/website/www/site/content/en/documentation/transforms/python/elementwise/partition.md +++ b/website/www/site/content/en/documentation/transforms/python/elementwise/partition.md @@ -46,7 +46,8 @@ and it must return an integer in the range `0` to `num_partitions-1`. In the following example, we have a known list of durations. We partition the `PCollection` into one `PCollection` for every duration type. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/partition.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/partition" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/partition.py" partition_function >}} {{< /highlight >}} @@ -58,15 +59,12 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/partition_test.py" partitions >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/partition.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/partition" >}} - ### Example 2: Partition with a lambda function We can also use lambda functions to simplify **Example 1**. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/partition.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/partition" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/partition.py" partition_lambda >}} {{< /highlight >}} @@ -78,10 +76,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/partition_test.py" partitions >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/partition.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/partition" >}} - ### Example 3: Partition with multiple arguments You can pass functions with multiple arguments to `Partition`. @@ -114,7 +108,8 @@ identify the partition index to which that bucket corresponds. This `split_dataset` function is generic enough to support any number of partitions by any ratio. You might want to adapt the bucket assignment to use a more appropriate or randomized hash for your dataset. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/partition.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/partition" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/partition.py" partition_multiple_arguments >}} {{< /highlight >}} @@ -126,10 +121,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/partition_test.py" train_test >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/partition.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/partition" >}} - ## Related transforms * [Filter](/documentation/transforms/python/elementwise/filter) is useful if the function is just diff --git a/website/www/site/content/en/documentation/transforms/python/elementwise/regex.md b/website/www/site/content/en/documentation/transforms/python/elementwise/regex.md index c31fa452e571..6947fd18252a 100644 --- a/website/www/site/content/en/documentation/transforms/python/elementwise/regex.md +++ b/website/www/site/content/en/documentation/transforms/python/elementwise/regex.md @@ -61,7 +61,8 @@ To match until the end of the string, add `'$'` at the end of the regular expres To start matching at any point instead of the beginning of the string, use [`Regex.find(regex)`](#example-4-regex-find). -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" regex_matches >}} {{< /highlight >}} @@ -73,10 +74,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex_test.py" plants_matches >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} - ### Example 2: Regex match with all groups `Regex.all_matches` keeps only the elements that match the regular expression, @@ -90,7 +87,8 @@ To match until the end of the string, add `'$'` at the end of the regular expres To start matching at any point instead of the beginning of the string, use [`Regex.find_all(regex, group=Regex.ALL, outputEmpty=False)`](#example-5-regex-find-all). -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" regex_all_matches >}} {{< /highlight >}} @@ -102,10 +100,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex_test.py" plants_all_matches >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} - ### Example 3: Regex match into key-value pairs `Regex.matches_kv` keeps only the elements that match the regular expression, @@ -120,7 +114,8 @@ To match until the end of the string, add `'$'` at the end of the regular expres To start matching at any point instead of the beginning of the string, use [`Regex.find_kv(regex, keyGroup)`](#example-6-regex-find-as-key-value-pairs). -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" regex_matches_kv >}} {{< /highlight >}} @@ -132,10 +127,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex_test.py" plants_matches_kv >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} - ### Example 4: Regex find `Regex.find` keeps only the elements that match the regular expression, @@ -150,7 +141,8 @@ To match until the end of the string, add `'$'` at the end of the regular expres If you need to match from the start only, consider using [`Regex.matches(regex)`](#example-1-regex-match). -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" regex_find >}} {{< /highlight >}} @@ -162,10 +154,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex_test.py" plants_matches >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} - ### Example 5: Regex find all `Regex.find_all` returns a list of all the matches of the regular expression, @@ -180,7 +168,8 @@ To match until the end of the string, add `'$'` at the end of the regular expres If you need to match all groups from the start only, consider using [`Regex.all_matches(regex)`](#example-2-regex-match-with-all-groups). -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" regex_find_all >}} {{< /highlight >}} @@ -192,10 +181,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex_test.py" plants_find_all >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} - ### Example 6: Regex find as key-value pairs `Regex.find_kv` returns a list of all the matches of the regular expression, @@ -211,7 +196,8 @@ To match until the end of the string, add `'$'` at the end of the regular expres If you need to match as key-value pairs from the start only, consider using [`Regex.matches_kv(regex)`](#example-3-regex-match-into-key-value-pairs). -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" regex_find_kv >}} {{< /highlight >}} @@ -223,10 +209,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex_test.py" plants_find_kv >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} - ### Example 7: Regex replace all `Regex.replace_all` returns the string with all the occurrences of the regular expression replaced by another string. @@ -234,7 +216,8 @@ You can also use [backreferences](https://docs.python.org/3/library/re.html?highlight=backreference#re.sub) on the `replacement`. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" regex_replace_all >}} {{< /highlight >}} @@ -246,10 +229,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex_test.py" plants_replace_all >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} - ### Example 8: Regex replace first `Regex.replace_first` returns the string with the first occurrence of the regular expression replaced by another string. @@ -257,7 +236,8 @@ You can also use [backreferences](https://docs.python.org/3/library/re.html?highlight=backreference#re.sub) on the `replacement`. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" regex_replace_first >}} {{< /highlight >}} @@ -269,16 +249,13 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex_test.py" plants_replace_first >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} - ### Example 9: Regex split `Regex.split` returns the list of strings that were delimited by the specified regular expression. The argument `outputEmpty` is set to `False` by default, but can be set to `True` to keep empty items in the output list. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" regex_split >}} {{< /highlight >}} @@ -290,10 +267,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex_test.py" plants_split >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/regex.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/regex" >}} - ## Related transforms * [FlatMap](/documentation/transforms/python/elementwise/flatmap) behaves the same as `Map`, but for diff --git a/website/www/site/content/en/documentation/transforms/python/elementwise/tostring.md b/website/www/site/content/en/documentation/transforms/python/elementwise/tostring.md index 2409524dcd2d..4b3d79acada0 100644 --- a/website/www/site/content/en/documentation/transforms/python/elementwise/tostring.md +++ b/website/www/site/content/en/documentation/transforms/python/elementwise/tostring.md @@ -35,7 +35,8 @@ expect their input elements to be strings. The following example converts a `(key, value)` pair into a string delimited by `','`. You can specify a different delimiter using the `delimiter` argument. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/tostring.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/tostring" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/tostring.py" tostring_kvs >}} {{< /highlight >}} @@ -47,16 +48,13 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/tostring_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/tostring.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/tostring" >}} - ### Example 2: Elements to string The following example converts a dictionary into a string. The string output will be equivalent to `str(element)`. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/tostring.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/tostring" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/tostring.py" tostring_element >}} {{< /highlight >}} @@ -68,10 +66,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/tostring_test.py" plant_lists >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/tostring.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/tostring" >}} - ### Example 3: Iterables to string The following example converts an iterable, in this case a list of strings, @@ -79,7 +73,8 @@ into a string delimited by `','`. You can specify a different delimiter using the `delimiter` argument. The string output will be equivalent to `iterable.join(delimiter)`. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/tostring.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/tostring" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/tostring.py" tostring_iterables >}} {{< /highlight >}} @@ -91,10 +86,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/tostring_test.py" plants_csv >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/tostring.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/tostring" >}} - ## Related transforms * [Map](/documentation/transforms/python/elementwise/map) applies a simple 1-to-1 mapping function over each element in the collection diff --git a/website/www/site/content/en/documentation/transforms/python/elementwise/values.md b/website/www/site/content/en/documentation/transforms/python/elementwise/values.md index 90f706ee8c7d..63e324c10eb4 100644 --- a/website/www/site/content/en/documentation/transforms/python/elementwise/values.md +++ b/website/www/site/content/en/documentation/transforms/python/elementwise/values.md @@ -28,7 +28,8 @@ Takes a collection of key-value pairs, and returns the value of each element. In the following example, we create a pipeline with a `PCollection` of key-value pairs. Then, we apply `Values` to extract the values and discard the keys. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/values.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/values" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/values.py" values >}} {{< /highlight >}} @@ -40,10 +41,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/values_test.py" plants >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/values.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/values" >}} - ## Related transforms * [Keys](/documentation/transforms/python/elementwise/keys) for extracting the key of each component. diff --git a/website/www/site/content/en/documentation/transforms/python/elementwise/withtimestamps.md b/website/www/site/content/en/documentation/transforms/python/elementwise/withtimestamps.md index 6fa4702ee636..51c9c64abc23 100644 --- a/website/www/site/content/en/documentation/transforms/python/elementwise/withtimestamps.md +++ b/website/www/site/content/en/documentation/transforms/python/elementwise/withtimestamps.md @@ -33,7 +33,8 @@ The elements themselves often already contain a timestamp field. [Unix timestamp](https://en.wikipedia.org/wiki/Unix_time) in the form of seconds. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/withtimestamps.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/withtimestamps" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/withtimestamps.py" withtimestamps_event_time >}} {{< /highlight >}} @@ -45,10 +46,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/withtimestamps_test.py" plant_timestamps >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/withtimestamps.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/withtimestamps" >}} - To convert from a [`time.struct_time`](https://docs.python.org/3/library/time.html#time.struct_time) to `unix_time` you can use @@ -75,7 +72,8 @@ If each element has a chronological number, these numbers can be used as a [logical clock](https://en.wikipedia.org/wiki/Logical_clock). These numbers have to be converted to a *"seconds"* equivalent, which can be especially important depending on your windowing and late data rules. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/withtimestamps.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/withtimestamps" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/withtimestamps.py" withtimestamps_logical_clock >}} {{< /highlight >}} @@ -87,10 +85,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/withtimestamps_test.py" plant_events >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/withtimestamps.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/withtimestamps" >}} - ### Example 3: Timestamp by processing time If the elements do not have any time data available, you can also use the current processing time for each element. @@ -99,7 +93,8 @@ Workers might have time deltas, so using this method is not a reliable way to do By using processing time, there is no way of knowing if data is arriving late because the timestamp is attached when the element *enters* into the pipeline. -{{< highlight py >}} +{{< highlight language="py" file="sdks/python/apache_beam/examples/snippets/transforms/elementwise/withtimestamps.py" + notebook="examples/notebooks/documentation/transforms/python/elementwise/withtimestamps" >}} {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/withtimestamps.py" withtimestamps_processing_time >}} {{< /highlight >}} @@ -111,10 +106,6 @@ Output: {{< code_sample "sdks/python/apache_beam/examples/snippets/transforms/elementwise/withtimestamps_test.py" plant_processing_times >}} {{< /highlight >}} -{{< buttons-code-snippet - py="sdks/python/apache_beam/examples/snippets/transforms/elementwise/withtimestamps.py" - notebook="examples/notebooks/documentation/transforms/python/elementwise/withtimestamps" >}} - ## Related transforms * [Reify](/documentation/transforms/python/elementwise/reify) converts between explicit and implicit forms of Beam values. diff --git a/website/www/site/content/en/get-started/beam-overview.md b/website/www/site/content/en/get-started/beam-overview.md index 40aacb01bc37..946d87177455 100644 --- a/website/www/site/content/en/get-started/beam-overview.md +++ b/website/www/site/content/en/get-started/beam-overview.md @@ -44,13 +44,13 @@ The Beam Pipeline Runners translate the data processing pipeline you define with Beam currently supports the following runners: - [Direct Runner](/documentation/runners/direct) -- [Apache Flink Runner](/documentation/runners/flink) ![Apache Flink logo](/images/logos/runners/flink.png) +- [Apache Flink Runner](/documentation/runners/flink) Apache Flink logo - [Apache Nemo Runner](/documentation/runners/nemo) -- [Apache Samza Runner](/documentation/runners/samza) Apache Samza logo -- [Apache Spark Runner](/documentation/runners/spark) ![Apache Spark logo](/images/logos/runners/spark.png) -- [Google Cloud Dataflow Runner](/documentation/runners/dataflow) ![Google Cloud Dataflow logo](/images/logos/runners/dataflow.png) -- [Hazelcast Jet Runner](/documentation/runners/jet) ![Hazelcast Jet logo](/images/logos/runners/jet.png) -- [Twister2 Runner](/documentation/runners/twister2) ![Twister2 logo](/images/logos/runners/twister2.png) +- [Apache Samza Runner](/documentation/runners/samza) Apache Samza logo +- [Apache Spark Runner](/documentation/runners/spark) Apache Spark logo +- [Google Cloud Dataflow Runner](/documentation/runners/dataflow) Google Cloud Dataflow logo +- [Hazelcast Jet Runner](/documentation/runners/jet) Hazelcast Jet logo +- [Twister2 Runner](/documentation/runners/twister2) Twister2 logo **Note:** You can always execute your pipeline locally for testing and debugging purposes. diff --git a/website/www/site/content/en/powered-by/_index.md b/website/www/site/content/en/powered-by/_index.md new file mode 100644 index 000000000000..92836bef00c0 --- /dev/null +++ b/website/www/site/content/en/powered-by/_index.md @@ -0,0 +1,24 @@ +--- +title: "Projects and Products Powered by Apache Beam" +layout: main +--- + + + +# Projects and Products Powered by Apache Beam + +To add yourself to the list, please open a pull request adding your organization name, URL, a list of which Beam components you are using, and a short description of your use case. + +{{< powered-by/powered-by-cards powered-by >}} diff --git a/website/www/site/content/en/powered-by/commercial/_index.md b/website/www/site/content/en/powered-by/commercial/_index.md new file mode 100644 index 000000000000..d3c86cacc178 --- /dev/null +++ b/website/www/site/content/en/powered-by/commercial/_index.md @@ -0,0 +1,19 @@ +--- +title: "Commercial projects" +type: commercial +icon: images/github-icon.svg +--- + + diff --git a/website/www/site/content/en/powered-by/commercial/eBay.md b/website/www/site/content/en/powered-by/commercial/eBay.md new file mode 100644 index 000000000000..feae3418fa93 --- /dev/null +++ b/website/www/site/content/en/powered-by/commercial/eBay.md @@ -0,0 +1,22 @@ +--- +title: "Feature Powered by Apache Beam - Beyond Lambda" +type: commercial +categories: + - Online & Traditional Retail +icon: /images/logos/powered-by/eBay.png +--- + + +eBay is an American e-commerce company that provides business-to-consumer and consumer-to-consumer sales through the online website. They build feature pipelines with Apache Beam: unify feature extraction and selection in online and offline, speed up E2E iteration for model training, evaluation and serving, support different types (streaming, runtime, batch) of features, etc. eBay leverages Apache Beam for the streaming feature SDK as a foundation to integrate with Kafka, Hadoop, Flink, Airflow and others in eBay. diff --git a/website/www/site/content/en/powered-by/commercial/goga.md b/website/www/site/content/en/powered-by/commercial/goga.md new file mode 100644 index 000000000000..ad83555b3f7b --- /dev/null +++ b/website/www/site/content/en/powered-by/commercial/goga.md @@ -0,0 +1,22 @@ +--- +title: "Beam and Geocoding" +type: commercial +categories: + - Machine Learning +icon: /images/logos/powered-by/goga.png +--- + + +GOGA Data Analysis and Consulting is a company based in Japan that specializes in analytics of geospatial and mapping data. They use Apache Beam and Cloud Dataflow for a smooth data transformation process for analytical purposes. This use case focuses on handling multiple extractions, geocoding, and insertion process by wrangling and requesting API call of each data based on the location provided. diff --git a/website/www/site/content/en/powered-by/commercial/mozilla.md b/website/www/site/content/en/powered-by/commercial/mozilla.md new file mode 100644 index 000000000000..5ee0dfd4f550 --- /dev/null +++ b/website/www/site/content/en/powered-by/commercial/mozilla.md @@ -0,0 +1,22 @@ +--- +title: "The Nitty-Gritty of Moving Data with Beam" +type: commercial +categories: + - Enterprise +icon: /images/logos/powered-by/mozilla.png +--- + + +Mozilla is the non-profit Firefox browser. This use case focuses on complexity that comes from moving data from one system to another safely, modeling data as it passes from one transform to another, handling errors, testing the system, and organizing the code to make the pipeline configurable for different source and destination systems in their open source codebase for ingesting telemetry data from Firefox clients. diff --git a/website/www/site/content/en/powered-by/commercial/neo4j.md b/website/www/site/content/en/powered-by/commercial/neo4j.md new file mode 100644 index 000000000000..0f9f8500757c --- /dev/null +++ b/website/www/site/content/en/powered-by/commercial/neo4j.md @@ -0,0 +1,23 @@ +--- +title: "Beam visual pipeline development with Hop" +type: commercial +categories: + - BI & Analytics +icon: /images/logos/powered-by/neo4j.png +--- + + +Neo4j is a graph database management system that leverages data relationships between data records to enable fast queries. They use Apache Beam support in Kettle to do everything and more in project Hop. The various Apache Beam runners are now directly supported as Hop pipeline engines. +[Apache Hop (incubating)](http://hop.apache.org): Hop provides a complete data orchestration (ETL / DI) toolset with visual pipeline development. It supports execution on the main Apache Beam runners. diff --git a/website/www/site/content/en/powered-by/commercial/oriel.md b/website/www/site/content/en/powered-by/commercial/oriel.md new file mode 100644 index 000000000000..0827c3f2bc91 --- /dev/null +++ b/website/www/site/content/en/powered-by/commercial/oriel.md @@ -0,0 +1,23 @@ +--- +title: "From Apache Beam to Leukemia early detection" +type: commercial +categories: + - Machine Learning +icon: /images/logos/powered-by/oriel.png +--- + + +Oriel Research Therapeutics (ORT) is a startup company in the greater Boston area that provides early detection services for +multiple medical conditions, utilizing cutting edge Artificial Intelligence technologies and Next Generation Sequencing (NGS). ORT utilizes Apache Beam pipelines to process over 1 million samples of genomics and clinical information. The processed data is used by ORT in detecting Leukemia, Sepsis and other medical conditions. diff --git a/website/www/site/content/en/powered-by/commercial/ricardo.md b/website/www/site/content/en/powered-by/commercial/ricardo.md new file mode 100644 index 000000000000..09e34c53ed3a --- /dev/null +++ b/website/www/site/content/en/powered-by/commercial/ricardo.md @@ -0,0 +1,23 @@ +--- +title: "Four Apache Technologies Combined for Fun and Profit" +type: commercial +categories: + - Online & Traditional Retail +icon: /images/logos/powered-by/ricardo.png +--- + + +Ricardo, the largest online marketplace in Switzerland, uses Apache Beam to stream-process platform data and enables the +Data Intelligence team to provide scalable data integration, analytics, and smart services. diff --git a/website/www/site/content/en/powered-by/open-source/_index.md b/website/www/site/content/en/powered-by/open-source/_index.md new file mode 100644 index 000000000000..bae5f3a50cbb --- /dev/null +++ b/website/www/site/content/en/powered-by/open-source/_index.md @@ -0,0 +1,17 @@ +--- +title: "Open source projects" +type: open-source +--- + diff --git a/website/www/site/content/en/powered-by/open-source/klio.md b/website/www/site/content/en/powered-by/open-source/klio.md new file mode 100644 index 000000000000..9c45ba1efaa2 --- /dev/null +++ b/website/www/site/content/en/powered-by/open-source/klio.md @@ -0,0 +1,22 @@ +--- +title: "Klio" +type: open-source +categories: + - Open Source Projects Powered by Apache Beam +icon: /images/logos/powered-by/klio.png +--- + + +Developed at Spotify and built on top of Apache Beam for Python, Klio is an open source framework that lets researchers and engineers build smarter data pipelines for processing audio and other media files, easily and at scale. diff --git a/website/www/site/content/en/powered-by/open-source/scio.md b/website/www/site/content/en/powered-by/open-source/scio.md new file mode 100644 index 000000000000..549b5bbbab8e --- /dev/null +++ b/website/www/site/content/en/powered-by/open-source/scio.md @@ -0,0 +1,20 @@ +--- +title: "Scio" +type: open-source +categories: + - Open Source Projects Powered by Apache Beam +icon: /images/logos/powered-by/scio.png +--- + diff --git a/website/www/site/data/authors.yml b/website/www/site/data/authors.yml index 24e90c5999f3..6f97254bc04a 100644 --- a/website/www/site/data/authors.yml +++ b/website/www/site/data/authors.yml @@ -213,4 +213,4 @@ ilyakozyrev: alexkosolapov: name: Alex Kosolapov email: alex.kosolapov@akvelon.com - twitter: \ No newline at end of file + twitter: diff --git a/website/www/site/data/capability_matrix.yaml b/website/www/site/data/capability_matrix.yaml index dacddee82022..9b10feba3017 100644 --- a/website/www/site/data/capability_matrix.yaml +++ b/website/www/site/data/capability_matrix.yaml @@ -44,10 +44,12 @@ capability-matrix: categories: - description: What is being computed? anchor: what - color-b: "ca1" - color-y: "ec3" - color-p: "fe5" - color-n: "ddd" + color-y: "fff" + color-yb: "f6f6f6" + color-p: "f9f9f9" + color-pb: "d8d8d8" + color-n: "e1e0e0" + color-nb: "bcbcbc" rows: - name: ParDo values: @@ -573,10 +575,12 @@ capability-matrix: l3: "" - description: Bounded Splittable DoFn Support Status anchor: what - color-b: "ca1" - color-y: "ec3" - color-p: "fe5" - color-n: "ddd" + color-y: "fff" + color-yb: "f6f6f6" + color-p: "f9f9f9" + color-pb: "d8d8d8" + color-n: "e1e0e0" + color-nb: "bcbcbc" rows: - name: Base values: @@ -870,10 +874,12 @@ capability-matrix: l3: - description: Unbounded Splittable DoFn Support Status anchor: what - color-b: "ca1" - color-y: "ec3" - color-p: "fe5" - color-n: "ddd" + color-y: "fff" + color-yb: "f6f6f6" + color-p: "f9f9f9" + color-pb: "d8d8d8" + color-n: "e1e0e0" + color-nb: "bcbcbc" rows: - name: Base values: @@ -1167,10 +1173,12 @@ capability-matrix: l3: - description: Where in event time? anchor: where - color-b: "37d" - color-y: "59f" - color-p: "8cf" - color-n: "ddd" + color-y: "fff" + color-yb: "f6f6f6" + color-p: "f9f9f9" + color-pb: "d8d8d8" + color-n: "e1e0e0" + color-nb: "bcbcbc" rows: - name: Global windows values: @@ -1525,10 +1533,12 @@ capability-matrix: - description: When in processing time? anchor: when - color-b: "6a4" - color-y: "8c6" - color-p: "ae8" - color-n: "ddd" + color-y: "fff" + color-yb: "f6f6f6" + color-p: "f9f9f9" + color-pb: "d8d8d8" + color-n: "e1e0e0" + color-nb: "bcbcbc" rows: - name: Configurable triggering values: @@ -1941,10 +1951,12 @@ capability-matrix: - description: How do refinements relate? anchor: how - color-b: "b55" - color-y: "d77" - color-p: "faa" - color-n: "ddd" + color-y: "fff" + color-yb: "f6f6f6" + color-p: "f9f9f9" + color-pb: "d8d8d8" + color-n: "e1e0e0" + color-nb: "bcbcbc" rows: - name: Discarding values: @@ -2101,10 +2113,12 @@ capability-matrix: l3: "" - description: Additional common features not yet part of the Beam model anchor: misc - color-b: "aaa" - color-y: "bbb" - color-p: "ccc" - color-n: "ddd" + color-y: "fff" + color-yb: "f6f6f6" + color-p: "f9f9f9" + color-pb: "d8d8d8" + color-n: "e1e0e0" + color-nb: "bcbcbc" rows: - name: Drain values: diff --git a/website/www/site/data/capability_matrix_snapshot.yaml b/website/www/site/data/capability_matrix_snapshot.yaml index 74f5601c5e2a..9da8a705fc2c 100644 --- a/website/www/site/data/capability_matrix_snapshot.yaml +++ b/website/www/site/data/capability_matrix_snapshot.yaml @@ -23,10 +23,12 @@ capability-matrix-snapshot: categories: - description: What is being computed? anchor: what - color-b: "ca1" - color-y: "ec3" - color-p: "fe5" - color-n: "ddd" + color-y: "fff" + color-yb: "f6f6f6" + color-p: "f9f9f9" + color-pb: "d8d8d8" + color-n: "e1e0e0" + color-nb: "bcbcbc" rows: - name: ParDo values: @@ -202,10 +204,12 @@ capability-matrix-snapshot: - description: Where in event time? anchor: where - color-b: "37d" - color-y: "59f" - color-p: "8cf" - color-n: "ddd" + color-y: "fff" + color-yb: "f6f6f6" + color-p: "f9f9f9" + color-pb: "d8d8d8" + color-n: "e1e0e0" + color-nb: "bcbcbc" rows: - name: Global windows values: @@ -342,10 +346,12 @@ capability-matrix-snapshot: - description: When in processing time? anchor: when - color-b: "6a4" - color-y: "8c6" - color-p: "ae8" - color-n: "ddd" + color-y: "fff" + color-yb: "f6f6f6" + color-p: "f9f9f9" + color-pb: "d8d8d8" + color-n: "e1e0e0" + color-nb: "bcbcbc" rows: - name: Configurable triggering values: @@ -503,10 +509,12 @@ capability-matrix-snapshot: - description: How do refinements relate? anchor: how - color-b: "b55" - color-y: "d77" - color-p: "faa" - color-n: "ddd" + color-y: "fff" + color-yb: "f6f6f6" + color-p: "f9f9f9" + color-pb: "d8d8d8" + color-n: "e1e0e0" + color-nb: "bcbcbc" rows: - name: Discarding values: diff --git a/website/www/site/data/en/cards.yaml b/website/www/site/data/en/calendar_events.yaml similarity index 60% rename from website/www/site/data/en/cards.yaml rename to website/www/site/data/en/calendar_events.yaml index a2981e7fba86..865542f9c637 100644 --- a/website/www/site/data/en/cards.yaml +++ b/website/www/site/data/en/calendar_events.yaml @@ -10,9 +10,18 @@ # See the License for the specific language governing permissions and # limitations under the License. -- quote: "A framework that delivers the flexibility and advanced functionality our customers need." - name: –Talend -- quote: "Apache Beam has powerful semantics that solve real-world challenges of stream processing." - name: –PayPal -- quote: "Apache Beam represents a principled approach for analyzing data streams." - name: –data Artisans +- title: This is the title + place: Data Con LA + time: 2020/02/21 + icon: icons/calendar-icon.svg + url: # +- title: This is the title + place: Data Con LA + time: 2020/02/21 + icon: icons/calendar-icon.svg + url: # +- title: This is the title + place: Data Con LA + time: 2020/02/21 + icon: icons/calendar-icon.svg + url: # \ No newline at end of file diff --git a/website/www/site/data/en/committer_traits.yaml b/website/www/site/data/en/committer_traits.yaml new file mode 100644 index 000000000000..b9c83621f3fd --- /dev/null +++ b/website/www/site/data/en/committer_traits.yaml @@ -0,0 +1,21 @@ +# 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. + +- body: { text: "Learn more.", link: /contribute/attributes#knows-upholds-and-reinforces-the-apache-software-foundation-code-of-conduct } + bolded: Knows, upholds, and reinforces the Apache Software Foundation code of conduct. + icon: icons/contributor/become a committer/messages-icon.svg +- body: { text: "Learn more.", link: /contribute/attributes#knows-upholds-and-reinforces-the-responsibilities-of-an-apache-software-foundation-committer } + bolded: Knows, upholds, and reinforces the responsibilities of an Apache Software Foundation committer. + icon: icons/contributor/become a committer/beam-logo-icon.svg +- body: { text: "Learn more.", link: /contribute/attributes/#knows-upholds-and-reinforces-the-beam-communitys-practices } + bolded: Knows, upholds, and reinforces the Beam community’s practices. + icon: icons/contributor/become a committer/diamond-icon.svg diff --git a/website/www/site/data/en/community_list.yaml b/website/www/site/data/en/community_list.yaml new file mode 100644 index 000000000000..9a6b9e787489 --- /dev/null +++ b/website/www/site/data/en/community_list.yaml @@ -0,0 +1,27 @@ +# 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. + +- title: Join Beam Community + body: Learn more about the contribution pathway you can take to become a committer or PMC member. + icon: icons/community/bee-icon.svg +- title: Contact us + body: Here’s a list of channels that the Apache Beam community and Project Management Committee (PMC) monitor and interact in. We look forward to seeing you! + icon: icons/community/envelope-icon.svg +- title: Keep up with Beam news and updates + body: Follow our official Twitter account and subscribe to our YouTube channel to stay up-to-date with project updates and the latest training. + icon: icons/community/message-icon.svg +- title: Meet with the community + body: Check out our calendar of events in the homepage, we update it frequently so you know where to meet us. + icon: icons/community/calendar-icon.svg +- title: Promotional assets + body: Looking for some marketing material for your next Beam talk or pitch? Here’s a list of our brand assets including logos, presentations, and the firefly mascot! + icon: icons/community/box-icon.svg diff --git a/website/www/site/data/en/contact_us.yaml b/website/www/site/data/en/contact_us.yaml new file mode 100644 index 000000000000..c5e09e35411f --- /dev/null +++ b/website/www/site/data/en/contact_us.yaml @@ -0,0 +1,114 @@ +# 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. + +- columns: + - purpose + - channel + - action + data: + - purpose: Get user support, ask general questions and stay up-to-date with project news + contact: + { + email: user@beam.apache.org, + link: "https://lists.apache.org/list.html?user@beam.apache.org", + add: "User mailing list:" + } + icon: icons/community/contact-us/question-mark.svg + actions: + [ + { + action: Subscribe, + link: "mailto:user-subscribe@beam.apache.org" + }, + { + action: Archives, + link: "https://lists.apache.org/list.html?user@beam.apache.org", + }, + { + action: Read tips below, + } + ] + - purpose: Developer and contributor discussions + contact: + { + email: dev@beam.apache.org, + link: "https://lists.apache.org/list.html?dev@beam.apache.org", + add: "Developer mailing list:" + } + icon: icons/community/contact-us/discussion.svg + actions: + [ + { + action: Subscribe, + link: "mailto:dev-subscribe@beam.apache.org" + }, + { + action: Archives, + link: "https://lists.apache.org/list.html?dev@beam.apache.org", + }, + { + action: Read tips below, + } + ] + - purpose: Report bugs, request features, follow known issues + contact: + { + email: Apache Beam Jira Tracker, + link: "https://issues.apache.org/jira/browse/BEAM", + } + icon: icons/community/contact-us/bug.svg + actions: + [ + { + action: To create an issue you need a Jira account. Open one here., + link: "https://issues.apache.org/jira/secure/Signup!default.jspa", + }, + ] + - purpose: Ask and answer community questions + contact: + { + email: "Apache Beam category in Stackoverflow.", + link: "https://stackoverflow.com/questions/tagged/apache-beam", + } + icon: icons/community/contact-us/messages.svg + actions: [{ action: "‐" }] + - purpose: Contact users and contributors in real time through the ASF slack workspace. + contact: + { + email: The ASF slack workspace, + link: "https://s.apache.org/beam-slack-channel", + } + icon: icons/community/contact-us/knot.svg + actions: [{ action: "Join the #beam chanel and browse other available channels. Don’t ask Beam questions in #general, we don’t monitor it." }] + - purpose: Firehose of commits, bugs, pull requests, etc. + contact: + { + email: builds@beam.apache.org, + link: "https://lists.apache.org/list.html?builds@beam.apache.org", + add: Build mailing list, + } + icon: icons/community/contact-us/gitArrows.svg + actions: [{ + action: Archives, + link: "https://lists.apache.org/list.html?commits@beam.apache.org", + }] + - purpose: 'Firehose of build notifications from Jenkins' + contact: { + email: commits@beam.apache.org, + link: "https://s.apache.org/beam-slack-channel", + add: Commits mailing list + } + icon: icons/community/contact-us/notification.svg + actions: [{ + action: Archives, + link: "https://lists.apache.org/list.html?commits@beam.apache.org", + }] diff --git a/website/www/site/data/en/documentation_runners.yaml b/website/www/site/data/en/documentation_runners.yaml new file mode 100644 index 000000000000..0d5901a45253 --- /dev/null +++ b/website/www/site/data/en/documentation_runners.yaml @@ -0,0 +1,34 @@ +# 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. + +- name: { text: "DirectRunner:", link: /documentation/runners/direct/ } + icon: icons/documentation/runners/beam-icon.svg + description: Runs locally on your machine – great for developing, testing, and debugging. +- name: { text: "FlinkRunner:", link: /documentation/runners/flink/ } + icon: icons/documentation/runners/flink-icon.svg + description: Runs on Apache Flink. +- name: { text: "SparkRunner:", link: /documentation/runners/spark/ } + icon: icons/documentation/runners/spark-icon.svg + description: Runs on Apache Spark. +- name: { text: "DataflowRunner:", link: /documentation/runners/dataflow/ } + icon: icons/documentation/runners/dataflow-icon.svg + description: Runs on Google Cloud Dataflow, a fully managed service within Google Cloud Platform. +- name: { text: "SamzaRunner:", link: /documentation/runners/samza/ } + icon: icons/documentation/runners/samza-icon.svg + description: Runs on Apache Samza. +- name: { text: "NemoRunner:", link: /documentation/runners/nemo/ } + icon: icons/documentation/runners/nemo-icon.svg + description: Runs on Apache Nemo. +- name: { text: "JetRunner:", link: /documentation/runners/jet/ } + description: Runs on Hazelcast Jet. +- name: { text: "Twister2Runner:", link: /documentation/runners/twister2/ } + description: Runs on Twister2. diff --git a/website/www/site/data/en/documentation_sdks.yaml b/website/www/site/data/en/documentation_sdks.yaml new file mode 100644 index 000000000000..6086ed757be7 --- /dev/null +++ b/website/www/site/data/en/documentation_sdks.yaml @@ -0,0 +1,18 @@ +# 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. + +- name: { text: Java SDK, link: /documentation/sdks/java/ } + icon: icons/documentation/sdks/java-icon.svg +- name: { text: Python SDK, link: /documentation/sdks/python/ } + icon: icons/documentation/sdks/python-icon.svg +- name: { text: Go SDK, link: /documentation/sdks/go/ } + icon: icons/documentation/sdks/go-icon.svg diff --git a/website/www/site/data/en/graphic.yaml b/website/www/site/data/en/graphic.yaml new file mode 100644 index 000000000000..03468d23dd68 --- /dev/null +++ b/website/www/site/data/en/graphic.yaml @@ -0,0 +1,22 @@ +# 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. + +- title: Sources + body: Beam reads your data from a diverse set of supported sources, no matter if it’s on-prem or in the cloud. + icon: /images/model-sources-icon.svg +- title: Processing + body: Beam executes your business logic for Batch and Streaming use cases. + icon: /images/model-processing-icon.svg +- title: Sinks + body: Beam writes the results of your data processing logic to the most popular data destinations in the industry. + icon: /images/model-sinks-icon.svg + diff --git a/website/www/site/data/en/join_beam.yaml b/website/www/site/data/en/join_beam.yaml new file mode 100644 index 000000000000..380b4d92b1ff --- /dev/null +++ b/website/www/site/data/en/join_beam.yaml @@ -0,0 +1,29 @@ +# 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. + +- list: + - { title: Mailing Lists, description: 'Join the official Apache Beam user and developer mailing lists. Learn how here' } + - { title: Slack Channel, description: 'For real-time communication, join us on the #beam channel in the ASF workspace.' } + - { title: Twitter account, description: 'Follow @ApacheBeam on Twitter for the most recent news on the project and community!' } + - { title: YouTube channel, description: 'Follow our YouTube channel for the latest training and use cases.' } + - { title: StackOverflow, description: 'Ask your Beam questions in StackOverflow using the apache-beam tag.' } + - { title: Events, description: 'Follow our calendar in the homepage which has the latest events organized by the community.' } +- list: + - { title: Read our Contribution Guide and Policies, description: 'Get familiar with our contribution guide and policies.' } + - { title: Create a Jira account, description: 'Create a Jira account and send an email to dev@beam.apache.org to request comitter permissions.' } + - { title: Find an area to contribute, description: 'Beam recognizes code and non-code contributions. Check out this Jira board for some inspiration.' } + - { title: Contribute, description: 'To contribute code, you need to sign an Individual Contributor License Agreement (ICLA). Learn more here.' } + - { title: Stay engaged!, description: Finds ways to stay engaged in the project and community and help us shape it’s strategy and vision. } +- list: + - { title: Learn about Apache Beam Committers, description: 'Read how to become a committer to learn about ways to get nominated for committership.' } +- list: + - { title: Learn about the Project Management Committee (PMC), description: 'The Project Management Committee (PMC) is the highest recognition in Apache projects. If you’re interested in becoming part of it, learn more about it here.' } diff --git a/website/www/site/data/en/pillars.yaml b/website/www/site/data/en/pillars.yaml index d2138bdd8b38..f6e0d2383b89 100644 --- a/website/www/site/data/en/pillars.yaml +++ b/website/www/site/data/en/pillars.yaml @@ -12,7 +12,13 @@ - title: Unified body: Use a single programming model for both batch and streaming use cases. -- title: Portable - body: Execute pipelines on multiple execution environments. + icon: icons/unified-icon.svg - title: Extensible body: Write and share new SDKs, IO connectors, and transformation libraries. + icon: icons/extensible-icon.svg +- title: Portable + body: Execute pipelines on multiple execution environments. + icon: icons/portable-icon.svg +- title: Open Source + body: Use a single programming model for both batch and streaming use cases. + icon: icons/open-source-icon.svg diff --git a/website/www/site/data/en/pillars_social.yaml b/website/www/site/data/en/pillars_social.yaml new file mode 100644 index 000000000000..2ed3ff6c03a9 --- /dev/null +++ b/website/www/site/data/en/pillars_social.yaml @@ -0,0 +1,21 @@ +# 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. + +- name: pillars-github-icon + icon: icons/github-icon.svg + url: https://github.com/apache/beam +- name: pillars-youtube-icon + icon: icons/youtube-icon.svg + url: https://www.youtube.com/channel/UChNnb_YO_7B0HlW6FhAXZZQ +- name: pillars-twitter-icon + icon: icons/twitter-icon.svg + url: https://twitter.com/apachebeam \ No newline at end of file diff --git a/website/www/site/data/en/powered-by.yaml b/website/www/site/data/en/powered-by.yaml new file mode 100644 index 000000000000..be4df14da1ec --- /dev/null +++ b/website/www/site/data/en/powered-by.yaml @@ -0,0 +1,20 @@ +# 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. + +- title: Commercial projects + body: Learn how these companies use Apache Beam to make their work easier. + icon: /icons/commercial-icon.svg + link: /powered-by/commercial +- title: Open source projects + body: Find other open source projects that use Apache Beam. + icon: /icons/open_source-icon.svg + link: /powered-by/open-source diff --git a/website/www/site/data/en/quotes.yaml b/website/www/site/data/en/quotes.yaml new file mode 100644 index 000000000000..38700e5099c6 --- /dev/null +++ b/website/www/site/data/en/quotes.yaml @@ -0,0 +1,21 @@ +# 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. + +- 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. + 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. + icon: icons/quote-icon.svg + logoUrl: images/logos/powered-by/scio.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. + icon: icons/quote-icon.svg + logoUrl: images/logos/powered-by/oriel.png diff --git a/website/www/site/data/en/ways_of_contribution.yaml b/website/www/site/data/en/ways_of_contribution.yaml new file mode 100644 index 000000000000..ccf870682608 --- /dev/null +++ b/website/www/site/data/en/ways_of_contribution.yaml @@ -0,0 +1,28 @@ +# 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. + +- title: Code contributions + body: "Ways you can contribute code to the project include:" + list: + - Building a new feature like a new IO connector or PTransform + - Fixing a Bug + - Sharing a code example or template with the community + - Testing a release candidate + icon: icons/contributor/become a committer/code-icon.svg +- title: Non-code contributions + body: "Non-code contributions are ways to add value to the projects outside code, here are some examples of things that you can contribute:" + list: + - Organize a meetup + - Give a talk about Beam at a conference + - Update a typo in the documentation + - Write a blog post with useful tips about Beam + icon: icons/contributor/become a committer/file-icon.svg diff --git a/website/www/site/i18n/blog/en.yaml b/website/www/site/i18n/blog/en.yaml index 4eef374dc95c..98492abf9a2a 100644 --- a/website/www/site/i18n/blog/en.yaml +++ b/website/www/site/i18n/blog/en.yaml @@ -9,10 +9,12 @@ # 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. - + - id: blog-title - translation: "Apache Beam Blog" + translation: "Blog" - id: blog-subtitle translation: "This is the blog for the Apache Beam project. This blog contains news and updates for the project." - id: blog-readmore translation: "Read more" +- id: blog-loadmore + translation: "Load more" diff --git a/website/www/site/i18n/capability/en.yaml b/website/www/site/i18n/capability/en.yaml new file mode 100644 index 000000000000..24d608145865 --- /dev/null +++ b/website/www/site/i18n/capability/en.yaml @@ -0,0 +1,16 @@ +# 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. + +- id: capability-back + translation: "back to collapsed details" +- id: capability-go-big + translation: "SEE DETAILS AND FULL VERSION HERE." diff --git a/website/www/site/i18n/feedback/en.yaml b/website/www/site/i18n/feedback/en.yaml new file mode 100644 index 000000000000..70b9dbfbc135 --- /dev/null +++ b/website/www/site/i18n/feedback/en.yaml @@ -0,0 +1,19 @@ +# 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. + +- id: feedback-title + translation: "Have you found everything you were looking for?" +- id: feedback-description + translation: "Was it all useful and clear? Is there anything that you would like to change? Let us know!" +- id: feedback-button + translation: "SEND FEEDBACK" + diff --git a/website/www/site/i18n/footer/en.yaml b/website/www/site/i18n/footer/en.yaml index 5ebd5554db48..e89f539957c2 100644 --- a/website/www/site/i18n/footer/en.yaml +++ b/website/www/site/i18n/footer/en.yaml @@ -9,7 +9,7 @@ # 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. - + - id: footer-start translation: "Start" - id: footer-overview diff --git a/website/www/site/i18n/home/calendar/en.yaml b/website/www/site/i18n/home/calendar/en.yaml new file mode 100644 index 000000000000..cb1e5f95d2ec --- /dev/null +++ b/website/www/site/i18n/home/calendar/en.yaml @@ -0,0 +1,17 @@ +# 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. + +- id: home-calendar-title + translation: "Stay up to date with Beam" +- id: home-calendar-card-events-title + translation: "Upcoming events" + diff --git a/website/www/site/i18n/home/en.yaml b/website/www/site/i18n/home/en.yaml index cbb3f23a78c3..2d9157be2c1a 100644 --- a/website/www/site/i18n/home/en.yaml +++ b/website/www/site/i18n/home/en.yaml @@ -9,11 +9,7 @@ # 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. - -- id: home-hero-title - translation: "Apache Beam: An advanced unified programming model" -- id: home-hero-subtitle - translation: "Implement batch and streaming data processing jobs that run on any execution engine." + - id: home-learn-more translation: "Learn more" - id: home-try-beam @@ -28,10 +24,6 @@ translation: "Go Quickstart" - id: home-hero-blog-title translation: "The latest from the blog" -- id: home-pillars-title - translation: "All about Apache Beam" -- id: home-logos-title - translation: "Works with" - id: home-cards-title translation: "Testimonials" - id: home-cards-body @@ -41,4 +33,18 @@ - id: home-section translation: "section" - id: home-ctas-title - translation: "Get started" \ No newline at end of file + translation: "Get started" +- id: home-model-title1 + translation: "How Does it work?" +- id: home-model-title2 + translation: "Write it in your language of choice - run it anywhere" +- id: home-graphic-more + translation: "& MORE" +- id: home-graphic-runner-title + translation: "Choose your runner" +- id: home-graphic-runner-body + translation: "A Beam pipeline can execute in the most popular distributed data processing systems such as Spark, Flink or Samza." +- id: home-graphic-language-title + translation: "Choose your language" +- id: home-graphic-language-body + translation: "You can write Apache Beam pipelines in your programming language of choice: Java, Python and Go. Learn More." diff --git a/website/www/site/i18n/home/hero/en.yaml b/website/www/site/i18n/home/hero/en.yaml new file mode 100644 index 000000000000..85f4728d86be --- /dev/null +++ b/website/www/site/i18n/home/hero/en.yaml @@ -0,0 +1,20 @@ +# 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. + +- id: home-hero-title + translation: Introducing Apache Beam +- id: home-hero-heading + translation: An advanced unified programming model +- id: home-hero-subheading + translation: Implement batch and streaming data processing jobs that run on any execution engine. +- id: home-hero-button + translation: Install Beam diff --git a/website/www/site/i18n/home/logos/en.yaml b/website/www/site/i18n/home/logos/en.yaml new file mode 100644 index 000000000000..7ed599a42ab5 --- /dev/null +++ b/website/www/site/i18n/home/logos/en.yaml @@ -0,0 +1,14 @@ +# 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. + +- id: home-logos-title + translation: "Supported runners" \ No newline at end of file diff --git a/website/www/site/i18n/home/pillars/en.yaml b/website/www/site/i18n/home/pillars/en.yaml new file mode 100644 index 000000000000..ab8a6d1ff002 --- /dev/null +++ b/website/www/site/i18n/home/pillars/en.yaml @@ -0,0 +1,16 @@ +# 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. + +- id: home-pillars-title + translation: "All about Apache Beam" +- id: home-pillars-social-text + translation: "Check out our social media to learn more about the community!" \ No newline at end of file diff --git a/website/www/site/i18n/home/quotes/en.yaml b/website/www/site/i18n/home/quotes/en.yaml new file mode 100644 index 000000000000..95c8e85b6453 --- /dev/null +++ b/website/www/site/i18n/home/quotes/en.yaml @@ -0,0 +1,14 @@ +# 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. + +- id: home-quotes-title + translation: "They tried it out" \ No newline at end of file diff --git a/website/www/site/i18n/navbar/en.yaml b/website/www/site/i18n/navbar/en.yaml index fd22c3a73821..74cc78caf1f3 100644 --- a/website/www/site/i18n/navbar/en.yaml +++ b/website/www/site/i18n/navbar/en.yaml @@ -9,17 +9,19 @@ # 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. - + - id: nav-toggle-navigation translation: "Toggle navigation" - id: nav-get-started translation: "Get Started" - id: nav-documentation translation: "Documentation" +- id: nav-documentation-general + translation: "General" - id: nav-languages translation: "Languages" - id: nav-runners - translation: "RUNNERS" + translation: "Runners" - id: nav-roadmap translation: "Roadmap" - id: nav-contribute @@ -40,3 +42,5 @@ translation: "Sponsorship" - id: nav-code-of-conduct translation: "Code of Conduct" +- id: nav-powered-by + translation: "Powered by" diff --git a/website/www/site/i18n/powered-by/en.yaml b/website/www/site/i18n/powered-by/en.yaml new file mode 100644 index 000000000000..8cd24f3a7f81 --- /dev/null +++ b/website/www/site/i18n/powered-by/en.yaml @@ -0,0 +1,16 @@ +# 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. + +- id: powered-read + translation: "READ MORE" +- id: powered-check + translation: "CHECK OUT" diff --git a/website/www/site/layouts/_default/baseof.html b/website/www/site/layouts/_default/baseof.html index f8fbfb6c04b1..2a75558f5d85 100644 --- a/website/www/site/layouts/_default/baseof.html +++ b/website/www/site/layouts/_default/baseof.html @@ -17,14 +17,19 @@ {{ partial "header.html" . }} -
+
{{ block "hero-section" . }}{{ end }} + {{ block "ctas-section" . }}{{ end }} {{ block "pillars-section" . }}{{ end }} {{ block "graphic-section" . }}{{ end }} + {{ block "calendar-section" . }}{{ end }} + {{ block "quotes-section" . }}{{ end }} + {{ block "quotes-mobile-section" . }}{{ end }} {{ block "logos-section" . }}{{ end }} - {{ block "cards-section" . }}{{ end }} - {{ block "ctas-section" . }}{{ end }}
- {{ partial "footer.html" . }} +
+ {{ partial "footer.html" . }} +
+ {{ partial "hooks/body-end.html"}} diff --git a/website/www/site/layouts/blog/baseof.html b/website/www/site/layouts/blog/baseof.html index fc90318588ca..4086e1fb82c8 100644 --- a/website/www/site/layouts/blog/baseof.html +++ b/website/www/site/layouts/blog/baseof.html @@ -17,7 +17,7 @@ {{ partial "header.html" . }} -
+
{{ block "main" . }}{{ end }}
{{ partial "footer.html" . }} diff --git a/website/www/site/layouts/blog/list.html b/website/www/site/layouts/blog/list.html index 9680f9c977d2..6694866e640f 100644 --- a/website/www/site/layouts/blog/list.html +++ b/website/www/site/layouts/blog/list.html @@ -10,41 +10,113 @@ limitations under the License. See accompanying LICENSE file. */}} + {{ define "main" }} -

{{ T "blog-title" }}

- -

{{ T "blog-subtitle" }}

- - {{ range .Pages }} - {{ $authors := .Params.authors }} - -

{{ .Title }}

-

- {{ .Date.Format "Jan 2, 2006" }} - {{ with $authors }} • - {{ $count := len . }} - {{ range $index, $authorId := . }} - {{ if and (ne $index 0) (gt $count 2) }},{{ end }} - {{ if and (eq $index (sub $count 1)) (gt $count 1) }} &{{ end }} - {{ with index $.Site.Data.authors $authorId }} - {{ .name }} {{ with .twitter }}[@{{ . }}]{{ end }} - {{ else }} - {{ $authorId }} - {{ end }} +

+

{{ T "blog-title" }}

+ {{ $data := index $.Site.Data.authors }} + {{ $pages := .Pages }} + {{ $.Scratch.Set "categories" (slice ) }} + {{ $.Scratch.Set "noCategories" 0 }} + + {{ range .Pages}} + {{ with .Params.categories }} + {{ if eq ( printf "%T" . ) "string" }} + {{ if ( not ( in ($.Scratch.Get "categories") . ) ) }} + {{ $.Scratch.Add "categories" . }} + {{ end }} + {{ else if eq ( printf "%T" . ) "[]string" }} + {{ range . }} + {{ if ( not ( in ($.Scratch.Get "categories") . ) ) }} + {{ $.Scratch.Add "categories" . }} {{ end }} {{ end }} -

+ {{ end }} + {{ else }} + {{ $.Scratch.Add "noCategories" 1 }} + {{ end }} + {{ end }} - {{ .Summary | markdownify }} +
+ {{ range $.Scratch.Get "categories" }} + + {{ end }} + {{ if gt ( $.Scratch.Get "noCategories") 0 }} + + {{ end }} +
- {{ if .Truncated }} -

- - {{ T "blog-readmore" }}  - -

+ +
+ +
+ +
+ + -
- {{ end }} {{ end }} diff --git a/website/www/site/layouts/blog/single.html b/website/www/site/layouts/blog/single.html index cf5dedadc8ac..eb4cd02aa64f 100644 --- a/website/www/site/layouts/blog/single.html +++ b/website/www/site/layouts/blog/single.html @@ -12,26 +12,76 @@ {{ define "main" }} {{ $authors := .Params.authors }} + {{ $data := index $.Site.Data.authors }}
- +
+
-

{{ .Title }}

-

{{ .Title }}

+
-
+
{{ .Content }}
+
+
+

Latest from the blog

+
+
{{ end }} diff --git a/website/www/site/layouts/commercial/baseof.html b/website/www/site/layouts/commercial/baseof.html new file mode 100644 index 000000000000..05d15d4f133b --- /dev/null +++ b/website/www/site/layouts/commercial/baseof.html @@ -0,0 +1,35 @@ +{{/* + 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. +*/}} + + + + + {{ partial "head.html" . }} + + + {{ partial "header.html" . }} +
+
+ + +
+
+ {{ block "main" . }}{{ end }} +
+
+ {{ partial "footer.html" . }} + + diff --git a/website/www/site/layouts/commercial/list.html b/website/www/site/layouts/commercial/list.html new file mode 100644 index 000000000000..a6e004286f1c --- /dev/null +++ b/website/www/site/layouts/commercial/list.html @@ -0,0 +1,111 @@ +{{/* + 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 "main" }} +
+

Commercial Projects

+

Check out how the commercial projects are using Apache Beam.

+ {{ $pages := .Pages }} + {{ $.Scratch.Set "categories" (slice ) }} + {{ $.Scratch.Set "noCategories" 0 }} + + {{ range .Pages}} + {{ with .Params.categories }} + {{ if eq ( printf "%T" . ) "string" }} + {{ if ( not ( in ($.Scratch.Get "categories") . ) ) }} + {{ $.Scratch.Add "categories" . }} + {{ end }} + {{ else if eq ( printf "%T" . ) "[]string" }} + {{ range . }} + {{ if ( not ( in ($.Scratch.Get "categories") . ) ) }} + {{ $.Scratch.Add "categories" . }} + {{ end }} + {{ end }} + {{ end }} + {{ else }} + {{ $.Scratch.Add "noCategories" 1 }} + {{ end }} + {{ end }} + +
+ {{ range $.Scratch.Get "categories" }} + + {{ end }} + {{ if gt ( $.Scratch.Get "noCategories") 0 }} + + {{ end }} +
+ + +
+ +
+ +
+ + + +{{ end }} diff --git a/website/www/site/layouts/commercial/single.html b/website/www/site/layouts/commercial/single.html new file mode 100644 index 000000000000..622281e374ca --- /dev/null +++ b/website/www/site/layouts/commercial/single.html @@ -0,0 +1,30 @@ +{{/* +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 "main" }} +
+
+ +
+

{{ .Title }}

+
+ +
+ {{ .Content }} +
+
+
+{{ end }} diff --git a/website/www/site/layouts/community/baseof.html b/website/www/site/layouts/community/baseof.html index f6b0664dd3d4..e62571d5ecb9 100644 --- a/website/www/site/layouts/community/baseof.html +++ b/website/www/site/layouts/community/baseof.html @@ -33,6 +33,7 @@
{{ .Content }} + {{ partial "feedback.html" . }}
{{ partial "footer.html" . }} diff --git a/website/www/site/layouts/contribute/arrow_template.html b/website/www/site/layouts/contribute/arrow_template.html new file mode 100644 index 000000000000..45b6431b8726 --- /dev/null +++ b/website/www/site/layouts/contribute/arrow_template.html @@ -0,0 +1,41 @@ +{{/* + 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. +*/}} + + + + + {{ partial "head.html" . }} + + + {{ partial "header.html" . }} +
+
+ + +
+ + + +
+ {{ .Content }} + {{ partial "feedback.html" . }} +
+
+{{ partial "footer.html" . }} + + diff --git a/website/www/site/layouts/contribute/baseof.html b/website/www/site/layouts/contribute/baseof.html index 141cdfba5b71..b07f0ea7331e 100644 --- a/website/www/site/layouts/contribute/baseof.html +++ b/website/www/site/layouts/contribute/baseof.html @@ -33,6 +33,7 @@
{{ .Content }} + {{ partial "feedback.html" . }}
{{ partial "footer.html" . }} diff --git a/website/www/site/layouts/documentation/baseof.html b/website/www/site/layouts/documentation/baseof.html index 971aeeddc322..9568c5fde3db 100644 --- a/website/www/site/layouts/documentation/baseof.html +++ b/website/www/site/layouts/documentation/baseof.html @@ -31,8 +31,9 @@ {{ .TableOfContents }} -
+
{{ .Content }} + {{ partial "feedback.html" . }}
{{ partial "footer.html" . }} diff --git a/website/www/site/layouts/get-started/baseof.html b/website/www/site/layouts/get-started/baseof.html index 5640611272f1..99025b379285 100644 --- a/website/www/site/layouts/get-started/baseof.html +++ b/website/www/site/layouts/get-started/baseof.html @@ -33,6 +33,7 @@
{{ .Content }} + {{ partial "feedback.html" . }}
{{ partial "footer.html" . }} diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html index e1f69be4c2f2..10a9f213d916 100644 --- a/website/www/site/layouts/index.html +++ b/website/www/site/layouts/index.html @@ -11,44 +11,165 @@ */}} {{ define "hero-section" }} -
-
-
-
-
-
- {{ T "home-hero-title" }} -
-
- {{ T "home-hero-subtitle" }} -
- -
- {{ T "home-java-quickstart" }} - {{ T "home-python-quickstart" }} - {{ T "home-go-quickstart" }} +
+
+

{{ T "home-hero-title" }}

+

{{ T "home-hero-heading" }}

+

{{ T "home-hero-subheading" }}

+ + + +
+
+
+
+

{{ T "home-hero-title" }}

+

{{ T "home-hero-heading" }}

+

{{ T "home-hero-subheading" }}

+
+
+{{ end }} + +{{ define "pillars-section" }} +
+

+ {{ T "home-pillars-title" }} +

+
+ {{ $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 }} +
+
+
+ {{ $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 }} +
+

+ {{ T "home-pillars-social-text" }} +

+
+
+{{ end }} + +{{ define "graphic-section" }} +
+
+

{{ T "home-model-title1" }}

+
+
+ + + + + +
+
+ {{ $data := index $.Site.Data .Site.Language.Lang }} + {{ range $item := $data.graphic }} +
+ +

{{ .title }}

+

{{ .body }}

+ {{ end }} +
+
+
+
+

{{ T "home-model-title2" }}

+
+
+
+ + +
+

{{ T "home-graphic-more" }}

+
+

{{ T "home-graphic-runner-title" }}

+

{{ T "home-graphic-runner-body" }}

-
-
-
- {{ T "home-hero-blog-title" }} -
-
+
+
+ + +
+

{{ T "home-graphic-more" }}

+
+

{{ T "home-graphic-language-title" }}

+

{{ T "home-graphic-language-body" }}

+
+
+
+
+
+{{ end }} - {{ range ( where site.RegularPages "Section" "blog" | first 3 ) }} - -
{{ .Title }}
-
{{ .Date.Format "Jan 2, 2006" }}
-
+{{ define "calendar-section" }} +
+

+ {{ T "home-calendar-title" }} +

+ {{ end }} -{{ define "pillars-section" }} -
-
- {{ T "home-pillars-title" }} +{{ define "quotes-section" }} +
+
+ {{ T "home-quotes-title" }}
-
+ +
{{ $data := index $.Site.Data .Site.Language.Lang }} - {{ range $pillar := $data.pillars }} -
-
- {{ $pillar.title }} -
-
- {{ $pillar.body }} -
-
+ {{ range $quote := $data.quotes }} + {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text "logoUrl" $quote.logoUrl) }} {{ end }}
-
-{{ end }} -{{ define "graphic-section" }} -
-
- Beam architecture + {{/* + The id "my-keen-slider" and "dots" should be named as defaults to make the external library (Keen Slider) works well + */}} +
+ {{ $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 }}
+
{{ end }} {{ define "logos-section" }} -
-
+
+
{{ T "home-logos-title" }}
-
+
{{ range $logo := $.Site.Data.works_with }} - {{ end }} -{{ define "cards-section" }} -
-
-
- {{ T "home-cards-title" }} -
-
- {{ $data := index $.Site.Data .Site.Language.Lang }} - {{ range $card := $data.cards }} -
-
- {{ $card.quote }} -
-
- {{/* TODO: Implement icons (Original comment from Jekyll) -
-
- */}} -
- {{ $card.name }} -
-
-
- {{ end }} -
-
- {{ T "home-cards-body" }} {{ T "home-contribute" }} {{ T "home-section" }}. -
-
-
-{{ end }} - {{ define "ctas-section" }} -
-
- {{ T "home-ctas-title" }} -
- -
- {{ T "home-java-quickstart" }} - {{ T "home-python-quickstart" }} - {{ T "home-go-quickstart" }} + {{ end }} diff --git a/website/www/site/layouts/open-source/baseof.html b/website/www/site/layouts/open-source/baseof.html new file mode 100644 index 000000000000..05d15d4f133b --- /dev/null +++ b/website/www/site/layouts/open-source/baseof.html @@ -0,0 +1,35 @@ +{{/* + 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. +*/}} + + + + + {{ partial "head.html" . }} + + + {{ partial "header.html" . }} +
+
+ + +
+
+ {{ block "main" . }}{{ end }} +
+
+ {{ partial "footer.html" . }} + + diff --git a/website/www/site/layouts/open-source/list.html b/website/www/site/layouts/open-source/list.html new file mode 100644 index 000000000000..53655658c125 --- /dev/null +++ b/website/www/site/layouts/open-source/list.html @@ -0,0 +1,111 @@ +{{/* + 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 "main" }} +
+

Open Source Projects

+

Check out how the open source projects are using Apache Beam.

+ {{ $pages := .Pages }} + {{ $.Scratch.Set "categories" (slice ) }} + {{ $.Scratch.Set "noCategories" 0 }} + + {{ range .Pages}} + {{ with .Params.categories }} + {{ if eq ( printf "%T" . ) "string" }} + {{ if ( not ( in ($.Scratch.Get "categories") . ) ) }} + {{ $.Scratch.Add "categories" . }} + {{ end }} + {{ else if eq ( printf "%T" . ) "[]string" }} + {{ range . }} + {{ if ( not ( in ($.Scratch.Get "categories") . ) ) }} + {{ $.Scratch.Add "categories" . }} + {{ end }} + {{ end }} + {{ end }} + {{ else }} + {{ $.Scratch.Add "noCategories" 1 }} + {{ end }} + {{ end }} + +
+ {{ range $.Scratch.Get "categories" }} + + {{ end }} + {{ if gt ( $.Scratch.Get "noCategories") 0 }} + + {{ end }} +
+ + +
+ +
+ +
+ + + +{{ end }} diff --git a/website/www/site/layouts/open-source/single.html b/website/www/site/layouts/open-source/single.html new file mode 100644 index 000000000000..622281e374ca --- /dev/null +++ b/website/www/site/layouts/open-source/single.html @@ -0,0 +1,30 @@ +{{/* +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 "main" }} +
+
+ +
+

{{ .Title }}

+
+ +
+ {{ .Content }} +
+
+
+{{ end }} diff --git a/website/www/site/layouts/partials/calendar/calendar-events.html b/website/www/site/layouts/partials/calendar/calendar-events.html new file mode 100644 index 000000000000..055b1b12a98c --- /dev/null +++ b/website/www/site/layouts/partials/calendar/calendar-events.html @@ -0,0 +1,33 @@ +{{/* + 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. +*/}} + + +
+
+ {{ with resources.Get .icon }} + {{ .Content | safeHTML }} + {{ end }} +
+
+

+ {{ .title | markdownify }} +

+ + {{ .place | markdownify }} +   â€¢   + + + {{ .time | markdownify }} + +
+
+
\ No newline at end of file diff --git a/website/www/site/layouts/partials/cards/powered-by.html b/website/www/site/layouts/partials/cards/powered-by.html new file mode 100644 index 000000000000..e2c7f5ef693f --- /dev/null +++ b/website/www/site/layouts/partials/cards/powered-by.html @@ -0,0 +1,25 @@ +{{/* + 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. + */}} + diff --git a/website/www/site/layouts/partials/documentation/capability-matrix-row.html b/website/www/site/layouts/partials/documentation/capability-matrix-row.html new file mode 100644 index 000000000000..d502c9d4426c --- /dev/null +++ b/website/www/site/layouts/partials/documentation/capability-matrix-row.html @@ -0,0 +1,39 @@ +{{/* + 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. + */}} + +{{ if or (eq .type "blog") (eq .type "summary") }} +
+ + {{ if eq .val.l1 "Yes" }} + ✓ + {{ else if eq .val.l1 "Partially" }} + ~ + {{ else }} + ✕ + {{ end }} + +
+ {{ else if eq .type "full" }} + + {{ if and (ne .val.l2 "") (ne .val.l1 "") }} +

{{ .val.l1 }} : {{ .val.l2 }}

+ {{ else }} +

{{ .val.l1 }}

+ {{ end }} + {{ with .val.jira }} +
+ ({{ . }}) + {{ end }} +
+
+ {{ .val.l3 }} + {{ end }} diff --git a/website/www/site/layouts/partials/documentation/icon-row.html b/website/www/site/layouts/partials/documentation/icon-row.html new file mode 100644 index 000000000000..f71d45d7b618 --- /dev/null +++ b/website/www/site/layouts/partials/documentation/icon-row.html @@ -0,0 +1,27 @@ +{{/* + 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. + */}} + +
+
+ {{ if .logo }} +
+ {{ with resources.Get .logo }} + {{ .Content | safeHTML }} + {{ end }} +
+ {{ end }} +
+ {{ .header.text | markdownify }} +

{{ .text | safeHTML }}

+
+
+
diff --git a/website/www/site/layouts/partials/feedback.html b/website/www/site/layouts/partials/feedback.html new file mode 100644 index 000000000000..cfc236032f58 --- /dev/null +++ b/website/www/site/layouts/partials/feedback.html @@ -0,0 +1,22 @@ +{{/* + 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. + */}} + + diff --git a/website/www/site/layouts/partials/footer.html b/website/www/site/layouts/partials/footer.html index 260a38062025..ef6604f5557e 100644 --- a/website/www/site/layouts/partials/footer.html +++ b/website/www/site/layouts/partials/footer.html @@ -1,63 +1,68 @@ {{/* - 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. + */}} - + + diff --git a/website/www/site/layouts/partials/head.html b/website/www/site/layouts/partials/head.html index 1430d9ad4dfa..8030193120b0 100644 --- a/website/www/site/layouts/partials/head.html +++ b/website/www/site/layouts/partials/head.html @@ -1,4 +1,4 @@ -{{/* +{{/* 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 @@ -9,16 +9,16 @@ See the License for the specific language governing permissions and limitations under the License. See accompanying LICENSE file. */}} - + {{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }} - - - + + + {{ $scssMain := "scss/main.scss"}} {{ if .Site.IsServer }} {{ $css := resources.Get $scssMain | toCSS (dict "enableSourceMap" true) | postCSS }} @@ -40,12 +40,17 @@ + + + - + + + \ No newline at end of file + + + + diff --git a/website/www/site/layouts/partials/header.html b/website/www/site/layouts/partials/header.html index 73c9867acffc..6aa4a54ffd63 100644 --- a/website/www/site/layouts/partials/header.html +++ b/website/www/site/layouts/partials/header.html @@ -1,94 +1,223 @@ {{/* - 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. + */}} - + + + diff --git a/website/www/site/layouts/partials/hooks/body-end.html b/website/www/site/layouts/partials/hooks/body-end.html new file mode 100644 index 000000000000..1e8c61c86692 --- /dev/null +++ b/website/www/site/layouts/partials/hooks/body-end.html @@ -0,0 +1,17 @@ +{{/* + 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. +*/}} + + + + + + diff --git a/website/www/site/layouts/partials/pillars/pillars-item.html b/website/www/site/layouts/partials/pillars/pillars-item.html new file mode 100644 index 000000000000..fe54e415cbf7 --- /dev/null +++ b/website/www/site/layouts/partials/pillars/pillars-item.html @@ -0,0 +1,30 @@ +{{/* + 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. +*/}} + +
+
+ {{ with resources.Get .logo }} + {{ .Content | safeHTML }} + {{ end }} +
+
+
{{ .header | markdownify }}
+

{{ .text | markdownify }}

+ {{ if .list }} +
    + {{ range .list }} +
  • {{ . }}
  • + {{ end }} +
+ {{ end }} +
+
diff --git a/website/www/site/layouts/partials/pillars/pillars-social.html b/website/www/site/layouts/partials/pillars/pillars-social.html new file mode 100644 index 000000000000..17f0e61ab649 --- /dev/null +++ b/website/www/site/layouts/partials/pillars/pillars-social.html @@ -0,0 +1,19 @@ +{{/* + 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. +*/}} + + diff --git a/website/www/site/layouts/partials/quotes/quote-mobile.html b/website/www/site/layouts/partials/quotes/quote-mobile.html new file mode 100644 index 000000000000..756fe3be39cb --- /dev/null +++ b/website/www/site/layouts/partials/quotes/quote-mobile.html @@ -0,0 +1,21 @@ +{{/* + 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. +*/}} + +
+
+ {{ with resources.Get .icon }} + {{ .Content | safeHTML }} + {{ end }} +
+
{{ .text | markdownify }}
+ Quote Logo +
\ 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 new file mode 100644 index 000000000000..45f7ccdd34cf --- /dev/null +++ b/website/www/site/layouts/partials/quotes/quote.html @@ -0,0 +1,21 @@ +{{/* + 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. +*/}} + +
+
+ {{ with resources.Get .icon }} + {{ .Content | safeHTML }} + {{ end }} +
+
{{ .text | markdownify }}
+ Quote Logo +
\ No newline at end of file diff --git a/website/www/site/layouts/partials/section-menu/en/community.html b/website/www/site/layouts/partials/section-menu/en/community.html index cbefd010143a..2abb3b98f955 100644 --- a/website/www/site/layouts/partials/section-menu/en/community.html +++ b/website/www/site/layouts/partials/section-menu/en/community.html @@ -9,12 +9,11 @@ See the License for the specific language governing permissions and limitations under the License. See accompanying LICENSE file. */}} -
  • Community
  • +
  • Join Beam Communnity
  • Integrations
  • Contact Us
  • Policies
  • -
  • Powered by Apache Beam
  • YouTube channel
  • Twitter Handle
  • In Person
  • @@ -31,3 +30,4 @@ width="14" height="14" alt="External link to Beam roster"> + diff --git a/website/www/site/layouts/partials/section-menu/en/documentation.html b/website/www/site/layouts/partials/section-menu/en/documentation.html index bba2ff7f660e..3f063827874e 100644 --- a/website/www/site/layouts/partials/section-menu/en/documentation.html +++ b/website/www/site/layouts/partials/section-menu/en/documentation.html @@ -13,317 +13,330 @@
  • Documentation
  • Using the Documentation
  • - Pipeline development lifecycle + How-to guides -
  • -
  • - Beam programming guide - - +
  • - - -
  • - Windowing +
  • + Concepts - -
  • -
  • - Triggers + -
  • + + +
  • + Data encoding and type safety -
  • - Transform catalog + +
  • +
  • + Windowing - + +
  • +
  • + Triggers -
  • + + +
  • + Metrics -
  • - Common pipeline patterns + +
  • +
  • + State and Timers - +
  • @@ -331,25 +344,9 @@ Runtime systems -
  • - Learning resources - - -
  • Beam Wiki
  • diff --git a/website/www/site/layouts/partials/section-menu/en/get-started.html b/website/www/site/layouts/partials/section-menu/en/get-started.html index 2c6c850a307b..37ae0f154692 100644 --- a/website/www/site/layouts/partials/section-menu/en/get-started.html +++ b/website/www/site/layouts/partials/section-menu/en/get-started.html @@ -17,18 +17,33 @@ -
  • From Apache Spark
  • +
  • Install the SDK
  • - Example Walkthroughs + Tutorials +
  • -
  • Downloads
  • +
  • + Learning resources + + +
  • Security
  • diff --git a/website/www/site/layouts/partials/section-menu/en/powered-by.html b/website/www/site/layouts/partials/section-menu/en/powered-by.html new file mode 100644 index 000000000000..082f308952f1 --- /dev/null +++ b/website/www/site/layouts/partials/section-menu/en/powered-by.html @@ -0,0 +1,16 @@ +{{/* + 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. +*/}} + +
  • Powered by
  • +
  • Overview
  • +
  • Commercial projects
  • +
  • Open source projects
  • diff --git a/website/www/site/layouts/partials/traits/traits-item.html b/website/www/site/layouts/partials/traits/traits-item.html new file mode 100644 index 000000000000..3b174fa7e76e --- /dev/null +++ b/website/www/site/layouts/partials/traits/traits-item.html @@ -0,0 +1,23 @@ +{{/* + 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. + */}} + +
    +
    + {{ with resources.Get .logo }} + {{ .Content | safeHTML }} + {{ end }} +
    +
    + {{ .bolded | markdownify }} + {{ .text.text | markdownify }} +
    +
    diff --git a/website/www/site/layouts/powered-by/main.html b/website/www/site/layouts/powered-by/main.html new file mode 100644 index 000000000000..d83bf3cc4029 --- /dev/null +++ b/website/www/site/layouts/powered-by/main.html @@ -0,0 +1,36 @@ +{{/* + 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. +*/}} + + + + + {{ partial "head.html" . }} + + + {{ partial "header.html" . }} +
    +
    + + +
    +
    + {{ .Content }} + {{ partial "feedback.html" . }} +
    +
    +{{ partial "footer.html" . }} + + diff --git a/website/www/site/layouts/roadmap/baseof.html b/website/www/site/layouts/roadmap/baseof.html index c1328c573b6b..3927bd118804 100644 --- a/website/www/site/layouts/roadmap/baseof.html +++ b/website/www/site/layouts/roadmap/baseof.html @@ -33,6 +33,7 @@
    {{ .Content }} + {{ partial "feedback.html" . }}
    {{ partial "footer.html" . }} diff --git a/website/www/site/layouts/runners/arrow_template.html b/website/www/site/layouts/runners/arrow_template.html new file mode 100644 index 000000000000..1396a71863a6 --- /dev/null +++ b/website/www/site/layouts/runners/arrow_template.html @@ -0,0 +1,41 @@ +{{/* + 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. +*/}} + + + + + {{ partial "head.html" . }} + + + {{ partial "header.html" . }} +
    +
    + + +
    + + + +
    + {{ .Content }} + {{ partial "feedback.html" . }} +
    +
    +{{ partial "footer.html" . }} + + diff --git a/website/www/site/layouts/runners/baseof.html b/website/www/site/layouts/runners/baseof.html index 532387ed4ba0..9ca7ead74435 100644 --- a/website/www/site/layouts/runners/baseof.html +++ b/website/www/site/layouts/runners/baseof.html @@ -33,6 +33,7 @@
    {{ .Content }} + {{ partial "feedback.html" . }}
    {{ partial "footer.html" . }} diff --git a/website/www/site/layouts/runners/capability-template.html b/website/www/site/layouts/runners/capability-template.html new file mode 100644 index 000000000000..3efcf39129fd --- /dev/null +++ b/website/www/site/layouts/runners/capability-template.html @@ -0,0 +1,26 @@ +{{/* + 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. +*/}} + + + + + {{ partial "head.html" . }} + + + {{ partial "header.html" . }} +
    + {{ .Content }} + {{ partial "feedback.html" . }} +
    +{{ partial "footer.html" . }} + + diff --git a/website/www/site/layouts/security/baseof.html b/website/www/site/layouts/security/baseof.html index 0b6bcc8dad73..b6d2c5253e19 100644 --- a/website/www/site/layouts/security/baseof.html +++ b/website/www/site/layouts/security/baseof.html @@ -9,7 +9,7 @@ See the License for the specific language governing permissions and limitations under the License. See accompanying LICENSE file. */}} - + @@ -26,16 +26,16 @@
    - + - +
    {{ .Content }} + {{ partial "feedback.html" . }}
    {{ partial "footer.html" . }} - \ No newline at end of file diff --git a/website/www/site/layouts/shortcodes/buttons-code-snippet.html b/website/www/site/layouts/shortcodes/buttons-code-snippet.html deleted file mode 100644 index 875cf1219e68..000000000000 --- a/website/www/site/layouts/shortcodes/buttons-code-snippet.html +++ /dev/null @@ -1,32 +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. -*/}} - -{{ $colab_logo := "https://github.com/googlecolab/open_in_colab/raw/master/images/icon32.png" }} -{{ $github_logo := "https://www.tensorflow.org/images/GitHub-Mark-32px.png" }} - -{{ $ctx := . }} -{{ with (.Get "py") }} - {{ with ($ctx.Get "notebook") }} - - -
    - Run code now Run code now -
    - {{ end }} - - -
    - View source code View source code -
    -{{ end }} - -




    diff --git a/website/www/site/layouts/shortcodes/community/join_beam_columns.html b/website/www/site/layouts/shortcodes/community/join_beam_columns.html new file mode 100644 index 000000000000..bc0d7a091d91 --- /dev/null +++ b/website/www/site/layouts/shortcodes/community/join_beam_columns.html @@ -0,0 +1,44 @@ +{{/* + 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. + */}} + {{ $index := .Get "number-of-data" }} + {{ $data := index $.Site.Data .Site.Language.Lang }} +
    + {{ range $i, $array := $data.join_beam }} + {{ if eq ( int $index) $i }} +
    + {{ $count := len $array.list }} + {{ range $index, $item := $array.list }} +
    +
    +
    + +
    + {{ if ne $index (sub $count 1) }} + {{ if modBool $index 2 }} + elipse icon + elipse icon + {{ else }} + elipse icon + elipse icon + {{ end }} + {{ end }} +
    +
    +

    {{ .title | markdownify }}

    +

    {{ .description | safeHTML }}

    +
    +
    + {{ end }} +
    + {{ end }} + {{ end }} +
    diff --git a/website/www/site/layouts/shortcodes/community/list_with_icons.html b/website/www/site/layouts/shortcodes/community/list_with_icons.html new file mode 100644 index 000000000000..fe0ca575c210 --- /dev/null +++ b/website/www/site/layouts/shortcodes/community/list_with_icons.html @@ -0,0 +1,28 @@ +{{/* + 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. + */}} + +{{ $data := index $.Site.Data .Site.Language.Lang (.Get 0) }} +
    + {{ range $item := $data }} +
    +
    + {{ with resources.Get .icon }} + {{ .Content | safeHTML }} + {{ end }} +
    +
    +

    {{ .title }}

    +

    {{ .body | safeHTML }}

    +
    +
    + {{ end }} +
    diff --git a/website/www/site/layouts/shortcodes/community/table_with_icons.html b/website/www/site/layouts/shortcodes/community/table_with_icons.html new file mode 100644 index 000000000000..d136493e2c1f --- /dev/null +++ b/website/www/site/layouts/shortcodes/community/table_with_icons.html @@ -0,0 +1,53 @@ +{{/* + 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. +*/}} +{{ $data := index $.Site.Data .Site.Language.Lang (.Get 0) }} +{{ range $list := $data }} +
    + + + {{ range $item := $list.columns }} + + {{ end }} + + {{ range $item := $list.data }} + + + + + + {{ end }} +
    {{ . }}
    +
    + {{ with resources.Get .icon }} + {{ .Content | safeHTML }} + {{ end }} +

    {{.purpose | safeHTML}}

    +
    +
    + + {{ if .contact.add }} + {{ .contact.add }} + {{end}} + {{.contact.email}} + +
    + {{ range .actions }} + {{ if .link }} + {{.action |safeHTML }} + {{ else }} + {{ .action | safeHTML }} + {{end}} + {{ end }} +
    +
    +
    +{{ end }} diff --git a/website/www/site/layouts/shortcodes/contributor/list_with_icons.html b/website/www/site/layouts/shortcodes/contributor/list_with_icons.html new file mode 100644 index 000000000000..f6c9735b7541 --- /dev/null +++ b/website/www/site/layouts/shortcodes/contributor/list_with_icons.html @@ -0,0 +1,18 @@ +{{/* + 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. + */}} + + {{ $data := index $.Site.Data .Site.Language.Lang (.Get 0) }} +
    + {{ range $item := $data }} + {{ partial "pillars/pillars-item" (dict "logo" .icon "header" .title "text" .body "list" .list) }} + {{ end }} +
    diff --git a/website/www/site/layouts/shortcodes/contributor/row_of_traits.html b/website/www/site/layouts/shortcodes/contributor/row_of_traits.html new file mode 100644 index 000000000000..7cf112a17530 --- /dev/null +++ b/website/www/site/layouts/shortcodes/contributor/row_of_traits.html @@ -0,0 +1,18 @@ +{{/* + 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. + */}} + + {{ $data := index $.Site.Data .Site.Language.Lang (.Get 0) }} +
    + {{ range $item := $data }} + {{ partial "traits/traits-item" (dict "logo" .icon "text" .body "bolded" .bolded) }} + {{ end }} +
    diff --git a/website/www/site/layouts/shortcodes/documentation/capability-matrix-big.html b/website/www/site/layouts/shortcodes/documentation/capability-matrix-big.html new file mode 100644 index 000000000000..95166f0e04d9 --- /dev/null +++ b/website/www/site/layouts/shortcodes/documentation/capability-matrix-big.html @@ -0,0 +1,74 @@ +{{/* + 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. +*/}} +{{ $cap_view := .Get "cap-view" }} +{{ $index := .Get "cap-index" }} +{{ $cap_data := index $.Site.Data.capability_matrix (.Get "cap-data") }} +{{ if eq (.Get "cap-data") "capability-matrix-snapshot" }} + {{ $cap_data = index $.Site.Data.capability_matrix_snapshot (.Get "cap-data") }} +{{ end }} + +{{ range $i, $category := $cap_data.categories }} + {{ if eq $i $index}} + + + {{ T "capability-back" }} + +

    {{ $category.description }}

    +
    +
    + + + + + {{ range $row := $category.rows }} + + + + {{ end }} +
    {{ $row.name }}
    +
    +
    +
    + + + {{ range $column := $cap_data.columns }} + + {{ end }} + +
    {{ $column.name }}
    +
    +
    + + {{ range $row := $category.rows }} + + {{ range $val := $row.values }} + + {{ end }} + + {{ end }} +
    + {{ partial "documentation/capability-matrix-row" (dict "type" $cap_view "val" $val) }} +
    +
    +
    +
    + {{ end }} +{{ end }} + + diff --git a/website/www/site/layouts/shortcodes/documentation/capability-matrix-single.html b/website/www/site/layouts/shortcodes/documentation/capability-matrix-single.html new file mode 100644 index 000000000000..604624a28816 --- /dev/null +++ b/website/www/site/layouts/shortcodes/documentation/capability-matrix-single.html @@ -0,0 +1,102 @@ +{{/* + 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. +*/}} +{{ $cap_view := .Get "cap-view" }} +{{ $cap_data := index $.Site.Data.capability_matrix (.Get "cap-data") }} +{{ if eq (.Get "cap-data") "capability-matrix-snapshot" }} + {{ $cap_data = index $.Site.Data.capability_matrix_snapshot (.Get "cap-data") }} +{{ end }} + + +
    +
    +
    How to read the tables
    + + + + + + + + + +
    Tools we are comparing
    Properties + Does this tool have this property?Yes/Partially/No +
    +
    +
    +
    What do those signs mean?
    +
    +
    +
    Yes
    +
    +
    +
    ~
    +
    Partially
    +
    +
    +
    +
    No
    +
    +
    +
    +{{ range $category := $cap_data.categories }} +

    {{ $category.description }}

    +
    +
    + + + + + {{ range $row := $category.rows }} + + + + {{ end }} +
    {{ $row.name }}
    +
    +
    +
    + + + {{ range $column := $cap_data.columns }} + + {{ end }} + +
    {{ $column.name }}
    +
    +
    + + {{ range $row := $category.rows }} + + {{ range $val := $row.values }} + + {{ end }} + + {{ end }} +
    + {{ partial "documentation/capability-matrix-row" (dict "type" $cap_view "val" $val) }} +
    +
    +
    +
    + {{ T "capability-go-big" }} +{{ end }} + + diff --git a/website/www/site/layouts/shortcodes/documentation/runners.html b/website/www/site/layouts/shortcodes/documentation/runners.html new file mode 100644 index 000000000000..3393b6ef5abc --- /dev/null +++ b/website/www/site/layouts/shortcodes/documentation/runners.html @@ -0,0 +1,45 @@ +{{/* + 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. + */}} + + {{ $data := index $.Site.Data .Site.Language.Lang }} +
    + {{ range first 6 ($item := $data.documentation_runners) }} + {{ if .icon }} + {{ partial "documentation/icon-row" (dict "logo" .icon "header" .name "text" .description) }} + {{ else }} + {{ partial "documentation/icon-row" (dict "header" .name "text" .description) }} + {{ end }} + {{ end }}
    + {{ if gt (len $data.documentation_runners) 6 }} +
    +
    +
      + {{ range last 2 ($item := $data.documentation_runners) }} +
    • {{ .name.text}} {{ .description | safeHTML }}
    • + {{ end }} +
    +
    + + {{ end }} +
    + + diff --git a/website/www/site/layouts/shortcodes/documentation/sdks.html b/website/www/site/layouts/shortcodes/documentation/sdks.html new file mode 100644 index 000000000000..57e7a35cb130 --- /dev/null +++ b/website/www/site/layouts/shortcodes/documentation/sdks.html @@ -0,0 +1,21 @@ +{{/* + 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. + */}} + + {{ $data := index $.Site.Data .Site.Language.Lang }} +
    + {{ range $item := $data.documentation_sdks }} +
    + {{ .name.text | markdownify }} +

    {{ .text | safeHTML }}

    +
    + {{ end }} +
    diff --git a/website/www/site/layouts/shortcodes/highlight.html b/website/www/site/layouts/shortcodes/highlight.html index 7e3533ef45fb..9f0bb2252703 100644 --- a/website/www/site/layouts/shortcodes/highlight.html +++ b/website/www/site/layouts/shortcodes/highlight.html @@ -12,20 +12,50 @@ {{ $content := (trim .Inner "\n\r") | htmlUnescape | safeHTML }} {{ $ctx := . }} -{{ with (.Get "class") }} -
    - {{ with ($ctx.Get "lang") }} +{{ $language := .Get 0 }} +{{ $file := .Get "file" }} +{{ $notebook := .Get "notebook" }} +{{ with (.Get "language") }} +
    +
    + {{ with $file }} + {{ with $notebook }} + + + + {{ end }} + + + + + + + {{ else }} + + + + {{ end }} {{ highlight $content . "" }} - {{ else }} - {{ highlight $content "" "" }} - {{ end }} +
    {{ else }} - {{ with (.Get 0) }} -
    - {{ highlight $content . "" }} + {{ with $language }} +
    +
    + + + + {{ highlight $content . "" }} +
    {{ else }} - {{ highlight $content "" "" }} +
    +
    + + + + {{ highlight $content "" "" }} +
    +
    {{ end }} {{ end }} diff --git a/website/www/site/layouts/shortcodes/powered-by/powered-by-cards.html b/website/www/site/layouts/shortcodes/powered-by/powered-by-cards.html new file mode 100644 index 000000000000..fdfd841811ca --- /dev/null +++ b/website/www/site/layouts/shortcodes/powered-by/powered-by-cards.html @@ -0,0 +1,18 @@ +{{/* + 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. + */}} + + {{ $data := index $.Site.Data .Site.Language.Lang (.Get 0) }} +
    + {{ range $item := $data }} + {{ partial "cards/powered-by" (dict "title" .title "body" .body "icon" .icon "link" .link) }} + {{ end }} +
    diff --git a/website/www/site/static/images/arrow-expandable.svg b/website/www/site/static/images/arrow-expandable.svg new file mode 100644 index 000000000000..6bcef73bfa12 --- /dev/null +++ b/website/www/site/static/images/arrow-expandable.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/static/images/arrow-icon_list.svg b/website/www/site/static/images/arrow-icon_list.svg new file mode 100644 index 000000000000..6d2566b351d8 --- /dev/null +++ b/website/www/site/static/images/arrow-icon_list.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/static/images/beam_logo_navbar_mobile.png b/website/www/site/static/images/beam_logo_navbar_mobile.png new file mode 100644 index 000000000000..51a3bd91ad59 Binary files /dev/null and b/website/www/site/static/images/beam_logo_navbar_mobile.png differ diff --git a/website/www/site/static/images/code-icon.svg b/website/www/site/static/images/code-icon.svg new file mode 100644 index 000000000000..4fc8d4cfedce --- /dev/null +++ b/website/www/site/static/images/code-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/static/images/community/beam-logo-icon.svg b/website/www/site/static/images/community/beam-logo-icon.svg new file mode 100644 index 000000000000..587667d29cc9 --- /dev/null +++ b/website/www/site/static/images/community/beam-logo-icon.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/www/site/static/images/community/diamond-icon.svg b/website/www/site/static/images/community/diamond-icon.svg new file mode 100644 index 000000000000..50930d56bf94 --- /dev/null +++ b/website/www/site/static/images/community/diamond-icon.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/www/site/static/images/community/messages-icon.svg b/website/www/site/static/images/community/messages-icon.svg new file mode 100644 index 000000000000..0f710d68e9f6 --- /dev/null +++ b/website/www/site/static/images/community/messages-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/static/images/copy-icon.svg b/website/www/site/static/images/copy-icon.svg new file mode 100644 index 000000000000..6ca68a74562d --- /dev/null +++ b/website/www/site/static/images/copy-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/static/images/elipse.svg b/website/www/site/static/images/elipse.svg new file mode 100644 index 000000000000..5e0b429aeca9 --- /dev/null +++ b/website/www/site/static/images/elipse.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/static/images/ellipse-mobile.svg b/website/www/site/static/images/ellipse-mobile.svg new file mode 100644 index 000000000000..015a1720ee9f --- /dev/null +++ b/website/www/site/static/images/ellipse-mobile.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/static/images/ellipse.svg b/website/www/site/static/images/ellipse.svg new file mode 100644 index 000000000000..5e0b429aeca9 --- /dev/null +++ b/website/www/site/static/images/ellipse.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/static/images/github-icon.svg b/website/www/site/static/images/github-icon.svg new file mode 100644 index 000000000000..f5429eb423dc --- /dev/null +++ b/website/www/site/static/images/github-icon.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + diff --git a/website/www/site/static/images/info_icon.svg b/website/www/site/static/images/info_icon.svg new file mode 100644 index 000000000000..1828e45fcd90 --- /dev/null +++ b/website/www/site/static/images/info_icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/static/images/logos/full-color/nameless/eBay.png b/website/www/site/static/images/logos/full-color/nameless/eBay.png new file mode 100644 index 000000000000..95df6eb4b2d4 Binary files /dev/null and b/website/www/site/static/images/logos/full-color/nameless/eBay.png differ diff --git a/website/www/site/static/images/logos/full-color/nameless/klio.png b/website/www/site/static/images/logos/full-color/nameless/klio.png new file mode 100644 index 000000000000..2ddab743d9b4 Binary files /dev/null and b/website/www/site/static/images/logos/full-color/nameless/klio.png differ diff --git a/website/www/site/static/images/logos/full-color/nameless/mozilla.png b/website/www/site/static/images/logos/full-color/nameless/mozilla.png new file mode 100644 index 000000000000..e07961378c89 Binary files /dev/null and b/website/www/site/static/images/logos/full-color/nameless/mozilla.png differ diff --git a/website/www/site/static/images/logos/powered-by/eBay.png b/website/www/site/static/images/logos/powered-by/eBay.png new file mode 100644 index 000000000000..95df6eb4b2d4 Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/eBay.png differ diff --git a/website/www/site/static/images/logos/powered-by/goga.png b/website/www/site/static/images/logos/powered-by/goga.png new file mode 100644 index 000000000000..278d4190ccf8 Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/goga.png differ diff --git a/website/www/site/static/images/logos/powered-by/klio.png b/website/www/site/static/images/logos/powered-by/klio.png new file mode 100644 index 000000000000..2ddab743d9b4 Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/klio.png differ diff --git a/website/www/site/static/images/logos/powered-by/mozilla.png b/website/www/site/static/images/logos/powered-by/mozilla.png new file mode 100644 index 000000000000..e07961378c89 Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/mozilla.png differ diff --git a/website/www/site/static/images/logos/powered-by/neo4j.png b/website/www/site/static/images/logos/powered-by/neo4j.png new file mode 100644 index 000000000000..58c25b633fa5 Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/neo4j.png differ diff --git a/website/www/site/static/images/logos/powered-by/oriel.png b/website/www/site/static/images/logos/powered-by/oriel.png new file mode 100644 index 000000000000..e158bbcbd448 Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/oriel.png differ diff --git a/website/www/site/static/images/logos/powered-by/ricardo.png b/website/www/site/static/images/logos/powered-by/ricardo.png new file mode 100644 index 000000000000..7ed17b925673 Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/ricardo.png differ diff --git a/website/www/site/static/images/logos/powered-by/scio.png b/website/www/site/static/images/logos/powered-by/scio.png new file mode 100644 index 000000000000..cb9c0737c6b1 Binary files /dev/null and b/website/www/site/static/images/logos/powered-by/scio.png differ diff --git a/website/www/site/static/images/logos/runners/flink.png b/website/www/site/static/images/logos/runners/flink.png index e847bfa2337b..33d51a8fbb84 100644 Binary files a/website/www/site/static/images/logos/runners/flink.png and b/website/www/site/static/images/logos/runners/flink.png differ diff --git a/website/www/site/static/images/logos/runners/gray-logos-1.svg b/website/www/site/static/images/logos/runners/gray-logos-1.svg new file mode 100644 index 000000000000..3b81db34b391 --- /dev/null +++ b/website/www/site/static/images/logos/runners/gray-logos-1.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/static/images/logos/runners/spark.png b/website/www/site/static/images/logos/runners/spark.png index 113c316e9d91..f39302913cb2 100644 Binary files a/website/www/site/static/images/logos/runners/spark.png and b/website/www/site/static/images/logos/runners/spark.png differ diff --git a/website/www/site/static/images/logos/sdks/java-gray.svg b/website/www/site/static/images/logos/sdks/java-gray.svg new file mode 100644 index 000000000000..4fe438f0a632 --- /dev/null +++ b/website/www/site/static/images/logos/sdks/java-gray.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/static/images/logos/sdks/python-gray.svg b/website/www/site/static/images/logos/sdks/python-gray.svg new file mode 100644 index 000000000000..8a1c59c83955 --- /dev/null +++ b/website/www/site/static/images/logos/sdks/python-gray.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/static/images/logos/sdks/python-logo.png b/website/www/site/static/images/logos/sdks/python-logo.png new file mode 100644 index 000000000000..aec7e448fcc0 Binary files /dev/null and b/website/www/site/static/images/logos/sdks/python-logo.png differ diff --git a/website/www/site/static/images/model-ellipse.svg b/website/www/site/static/images/model-ellipse.svg new file mode 100644 index 000000000000..b9c8e39d7c8c --- /dev/null +++ b/website/www/site/static/images/model-ellipse.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/static/images/model-processing-icon.svg b/website/www/site/static/images/model-processing-icon.svg new file mode 100644 index 000000000000..ee9950ddced8 --- /dev/null +++ b/website/www/site/static/images/model-processing-icon.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/www/site/static/images/model-sinks-icon.svg b/website/www/site/static/images/model-sinks-icon.svg new file mode 100644 index 000000000000..c814061153c7 --- /dev/null +++ b/website/www/site/static/images/model-sinks-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/static/images/model-sources-icon.svg b/website/www/site/static/images/model-sources-icon.svg new file mode 100644 index 000000000000..2fc344867d3b --- /dev/null +++ b/website/www/site/static/images/model-sources-icon.svg @@ -0,0 +1,25 @@ + + + + + + + + diff --git a/website/www/site/static/images/quote-paypal-logo.png b/website/www/site/static/images/quote-paypal-logo.png new file mode 100644 index 000000000000..0bf48f2bfd81 Binary files /dev/null and b/website/www/site/static/images/quote-paypal-logo.png differ diff --git a/website/www/site/static/images/run-icon.svg b/website/www/site/static/images/run-icon.svg new file mode 100644 index 000000000000..f976e01a31e3 --- /dev/null +++ b/website/www/site/static/images/run-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/static/js/calendar.js b/website/www/site/static/js/calendar.js new file mode 100644 index 000000000000..7c5588ca9f6d --- /dev/null +++ b/website/www/site/static/js/calendar.js @@ -0,0 +1,21 @@ +// 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. + +$(document).ready(function() { + function setSize() { + var height = $('.calendar-card-big-right').height(); + var width = $('.calendar-card-big-right').width(); + $('#calendar').height = height-100; + $('#calendar').width = width-100; + } + setSize(); +}); diff --git a/website/www/site/static/js/categories-filter.js b/website/www/site/static/js/categories-filter.js new file mode 100644 index 000000000000..339ceb4bd7c5 --- /dev/null +++ b/website/www/site/static/js/categories-filter.js @@ -0,0 +1,292 @@ +// 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. + +/** + * Copyright (c) + * @name 'Hugo Tags Filter' + * @version 1.2.2 + * @license MIT + * @author PointyFar + */ + +class CategoriesFilter { + constructor(config) { + var defaultFilters = [ + { + name: 'categories', + prefix: 'category-', + buttonClass: 'category-button', + allSelector: '#selectAllAuthors', + attrName: 'data-categories', + } + ] + this.FILTERS = (config && config.filters) ? config.filters : defaultFilters; + this.showItemClass = (config && config.showItemClass) ? config.showItemClass : "tf-show"; + this.activeButtonClass = (config && config.activeButtonClass) ? config.activeButtonClass : "active"; + this.filterItemClass = (config && config.filterItemClass) ? config.filterItemClass : "tf-filter-item"; + this.populateCount = (config && config.populateCount) ? config.populateCount : false; + this.setDisabledButtonClass = (config && config.setDisabledButtonClass) ? config.setDisabledButtonClass : false; + this.longList = 1; + this.numberToView = (config && config.numberToView) ? config.numberToView : 6; + this.filterItems = document.getElementsByClassName(this.filterItemClass); + this.numberOfItems = 0; + this.filterValues = {}; + for( var i = 0; i < this.FILTERS.length; i++) { + this.FILTERS[i]['buttonTotal'] = document.getElementsByClassName(this.FILTERS[i]['buttonClass']).length; + this.FILTERS[i]['selected'] = []; + this.FILTERS[i]['values'] = []; + var fv = document.getElementsByClassName(this.FILTERS[i]['buttonClass']); + + /** + * Build index of all filter values and their counts + */ + this.filterValues[this.FILTERS[i]['name']] = []; + for( var j = 0; j < fv.length; j++ ){ + var v = fv[j].id.replace(this.FILTERS[i]["prefix"], ''); + this.filterValues[this.FILTERS[i]['name']][v] = {count:0, selected:0}; + } + } + this.showCheck(this.FILTERS[0]['name'], true); + } + + initFilterCount(fvc, isInitial){ + + /** + * Initialise count = selected + */ + if(isInitial) { + for( var k in fvc ) { + for( var x = 0; x < this.filterItems.length; x++) { + var attrs = this.getAttrs(k, this.filterItems[x]); + if(attrs !== undefined){ + for(var l = 0; l 0 + }); + return response; + } + catch{ + return elem.getAttribute('data-'+ attr ) + .filter(function(el){ + return el.length > 0 + }); + }} +} + + + showAll(filter) { + for( var i = 0; i < this.FILTERS.length; i++) { + if(filter) { + if(this.FILTERS[i]['name'] === filter) { + this.FILTERS[i]['selected'] = []; + } + } else { + this.FILTERS[i]['selected'] = []; + } + } + this.showCheck(filter) + } + + checkFilter(tag, tagType) { + /* Selects clicked button.*/ + var selectedBtn = document.querySelector(`#${tagType}${tag}`); + this.numberOfItems=0; + for ( var i = 0; i < this.FILTERS.length; i++ ) { + if ( this.FILTERS[i]['prefix'] === tagType ) { + if ( this.FILTERS[i]['selected'].indexOf(tag) >= 0 || selectedBtn.classList.contains(this.activeButtonClass)) { + /* already selected, deselect tag */ + this.FILTERS[i]['selected'].splice(tag,1); + this.delClassIfPresent(selectedBtn, this.activeButtonClass); + } else { + /* add tag to selected list */ + this.FILTERS[i]['selected'].push(tag); + this.addClassIfMissing(selectedBtn, this.activeButtonClass); + } + //this.delClassIfPresent(document.querySelector(this.FILTERS[i]['allSelector']), this.activeButtonClass); + this.showCheck(this.FILTERS[i]['name']); + } + } + this.checkButton(); + + } + checkButton(){ + var button = document.getElementById("load-button"); + if( this.numberOfItems>this.numberToView*this.longList ){ + this.delClassIfPresent(button, this.filterItemClass); + } + else{ + this.addClassIfMissing(button, this.filterItemClass); + } + } + showMore(){ + this.longList ++; + this.numberOfItems = 0; + } + resetCount(){ + this.longList = 1; + } + /** + * showCheck - Applies "show" class to items containing selected tags + */ + showCheck(filter, isInitial) { + + /* If no tags/licenses selected, or all tags selected, SHOW ALL and DESELECT ALL BUTTONS. */ + for ( var i = 0; i < this.FILTERS.length; i++ ) { + if( this.FILTERS[i]['name'] === filter ) { + if( (this.FILTERS[i]['selected'].length === 0) || + (this.FILTERS[i]['selected'].length === this.FILTERS[i]['buttonTotal']) ) + { + var iBtns = document.getElementsByClassName(this.FILTERS[i]['buttonClass']); + for ( var j = 0; j < iBtns.length; j++ ) { + this.delClassIfPresent(iBtns[j], this.activeButtonClass) + } + //this.addClassIfMissing(document.querySelector(this.FILTERS[i]['allSelector']), this.activeButtonClass) + } + } + } + for ( var i = 0; i < this.filterItems.length; i++ ) { + /* First remove "show" class */ + this.delClassIfPresent(this.filterItems[i], this.showItemClass); + + var visibility = 0; + /* show item only if visibility is true for all filters */ + for ( var j = 0; j < this.FILTERS.length; j++ ) { + if ( this.checkVisibility(this.FILTERS[j]['selected'], this.filterItems[i].getAttribute(this.FILTERS[j]['attrName'])) ) { + visibility++; + } + } + /* Then check if "show" class should be applied */ + if ( visibility === this.FILTERS.length ) { + + if ( !this.filterItems[i].classList.contains(this.showItemClass) ) { + this.numberOfItems++; + if(this.numberOfItems<=this.numberToView*this.longList) + this.addClassIfMissing(this.filterItems[i], this.showItemClass); + } + + } + } + this.checkButton(); + this.checkButtonCounts(isInitial) + } + + + checkButtonCounts(isInitial){ + this.filterValues = this.initFilterCount(this.filterValues, isInitial); + this.populateCounters(this.filterValues); + + } + + + /** + * checkVisibility - Tests if attribute is included in list. + */ + checkVisibility(list, dataAttr) { + /* Returns TRUE if list is empty or attribute is in list */ + if (list.length > 0) { + for(var v = 0; v < list.length; v++){ + if(dataAttr){ + try{ + var arr = dataAttr.split(" ") + .filter(function(el){return el.length > 0}); + } + catch{ + var arr = dataAttr.filter(function(el){return el.length > 0}); + } + + if(arr.indexOf(list[v]) >=0 ) { + return true + } + } + else + return false + } + return false + } else { + return true + } + } + + addClassIfMissing(el, cn) { + if(!el.classList.contains(cn)) { + el.classList.add(cn); + } + } + + delClassIfPresent(el, cn) { + if(el.classList.contains(cn)) { + el.classList.remove(cn) + } + } +} + +window['CategoriesFilter'] = CategoriesFilter; diff --git a/website/www/site/static/js/copy-to-clipboard.js b/website/www/site/static/js/copy-to-clipboard.js new file mode 100644 index 000000000000..fad14d02e82c --- /dev/null +++ b/website/www/site/static/js/copy-to-clipboard.js @@ -0,0 +1,42 @@ +// 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. + +$(document).ready(function() { + function copy() { + $(".copy").click(function(){ + var text=$(this).siblings()[$(this).siblings().length-1].childNodes[0].innerHTML; + const el=document.createElement('textarea'); + el.value=text;document.body.appendChild(el); + el.select();document.execCommand('copy'); + document.body.removeChild(el); + alert('copied to clipboard'); + }) + $(".just-copy").click(function(){ + var text=$(this).parent().siblings()[0].innerHTML; + const el=document.createElement('textarea'); + el.value=text;document.body.appendChild(el); + el.select();document.execCommand('copy'); + document.body.removeChild(el); + alert('copied to clipboard'); + }) + } + let code = document.querySelectorAll('pre'), + copyIcon = document.createElement('span'); + copyIcon.innerHTML = ''; + + code.forEach((hl) => { + if( !hl.parentElement.classList.contains('code-snippet') && !hl.parentElement.classList.contains('highlight')) { + hl.prepend(copyIcon.cloneNode([true])); + } + }) + copy(); +}); diff --git a/website/www/site/static/js/expandable-list.js b/website/www/site/static/js/expandable-list.js new file mode 100644 index 000000000000..740ad8fd1405 --- /dev/null +++ b/website/www/site/static/js/expandable-list.js @@ -0,0 +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. + +$(document).ready(function() { + function expandable(){ + function stop(){ + var w = $(window).width(); + $('.arrow-list-header').click(function(e){ + if (w <= 768) { + e.preventDefault(); + e.stopPropagation(); + } + }) + } + } + $(window).resize(function(){ + stop(); + }); + function rotate() { + $(".arrow-list-header").click(function(){ + $(this).find('figure').toggleClass('rotate'); + }); + $('#apache-dropdown').click(function(){ + $(this).find('span').toggleClass('rotate'); + }); + } + rotate(); + expandable(); +}); diff --git a/website/www/site/static/js/fix-menu.js b/website/www/site/static/js/fix-menu.js index b74aa0c8fc65..eeb4298ae501 100644 --- a/website/www/site/static/js/fix-menu.js +++ b/website/www/site/static/js/fix-menu.js @@ -71,6 +71,5 @@ $(document).ready(function() { } } - FixMenu({"classNameMenu":"section-nav"}).init(); FixMenu({ "classNameMenu":"page-nav" }).init(); }); diff --git a/website/www/site/static/js/hero/hero-desktop.js b/website/www/site/static/js/hero/hero-desktop.js new file mode 100644 index 000000000000..4833284937ec --- /dev/null +++ b/website/www/site/static/js/hero/hero-desktop.js @@ -0,0 +1,21 @@ +// 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. + +var animationData = {"v":"5.7.1","fr":30,"ip":0,"op":120,"w":1440,"h":536,"nm":"opt2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[62.997],"e":[20]},{"t":77}],"ix":10},"p":{"a":0,"k":[2112,250,0],"ix":2},"a":{"a":0,"k":[1228.201,-1.163,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":0,"k":82,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-35],"e":[-20]},{"t":56}],"ix":10},"p":{"a":0,"k":[-1802,346,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.341176470588,0.043137254902,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 7","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-53],"e":[-34]},{"t":76}],"ix":10},"p":{"a":0,"k":[-1690,996,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-6,"s":[-46],"e":[20]},{"t":67}],"ix":10},"p":{"a":0,"k":[1436,1008,0],"ix":2},"a":{"a":0,"k":[1171.735,-35.884,0],"ix":1},"s":{"a":0,"k":[100,78.683,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":20,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[0.759]},"t":-5,"s":[2],"e":[-27]},{"t":56}],"ix":10},"p":{"a":0,"k":[-188,1280,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Shape Layer 8","sr":1,"ks":{"o":{"a":0,"k":57,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-7,"s":[2],"e":[-43]},{"t":56}],"ix":10},"p":{"a":0,"k":[-66,1694,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,81.692,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-152.112,163.925],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":9,"ty":1,"nm":"Orange Solid 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[720,268,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#ff570b","ip":0,"op":720,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":1,"nm":"Medium Orange Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[720,268,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#f87924","ip":0,"op":720,"st":0,"bm":0}],"markers":[]}; + +var animation = bodymovin.loadAnimation({ + container: document.getElementById("hero-desktop"), + renderer: "svg", + loop: false, + autoplay: true, + animationData: animationData, +}); diff --git a/website/www/site/static/js/hero/hero-mobile.js b/website/www/site/static/js/hero/hero-mobile.js new file mode 100644 index 000000000000..212e984214ea --- /dev/null +++ b/website/www/site/static/js/hero/hero-mobile.js @@ -0,0 +1,39 @@ +// 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. +var height = window.innerHeight- 96; +var width = window.innerWidth; +if(height<900 && height>200 && width<800 && width>200&& $("#hero-mobile svg").length===0){ + var animationData = {"v":"5.7.1","fr":30,"ip":0,"op":120,"w":width,"h":height,"nm":"opt2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[62.997],"e":[20]},{"t":77}],"ix":10},"p":{"a":0,"k":[1649,406,0],"ix":2},"a":{"a":0,"k":[1228.201,-1.163,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":0,"k":82,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-35],"e":[-20]},{"t":56}],"ix":10},"p":{"a":0,"k":[-1947,378,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.341176470588,0.043137254902,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 7","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-53],"e":[-34]},{"t":76}],"ix":10},"p":{"a":0,"k":[-1857,994,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-6,"s":[-46],"e":[20]},{"t":67}],"ix":10},"p":{"a":0,"k":[1119,1224,0],"ix":2},"a":{"a":0,"k":[1171.735,-35.884,0],"ix":1},"s":{"a":0,"k":[100,78.683,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":20,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[0.759]},"t":-5,"s":[2],"e":[-27]},{"t":56}],"ix":10},"p":{"a":0,"k":[-463,1308,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Shape Layer 8","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-7,"s":[2],"e":[-43]},{"t":56}],"ix":10},"p":{"a":0,"k":[-505,1530,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,81.692,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-152.112,163.925],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":9,"ty":1,"nm":"Orange Solid 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[207,448,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[152,152,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#ff570b","ip":0,"op":720,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":1,"nm":"Medium Orange Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[207,448,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[152,152,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#f87924","ip":0,"op":720,"st":0,"bm":0}],"markers":[]} + var animation = bodymovin.loadAnimation({ + container: document.getElementById("hero-mobile"), + renderer: "svg", + loop: false, + autoplay: true, + animationData: animationData, + }); +} +$(window).resize(function(){ + height = window.innerHeight - 96; + width = window.innerWidth; + if(height<900 && height>200 && width<800 && width>200 && $("#hero-mobile svg").length===0){ + animationData = {"v":"5.7.1","fr":30,"ip":0,"op":120,"w":width,"h":height,"nm":"opt2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[62.997],"e":[20]},{"t":77}],"ix":10},"p":{"a":0,"k":[1649,406,0],"ix":2},"a":{"a":0,"k":[1228.201,-1.163,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":0,"k":82,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-35],"e":[-20]},{"t":56}],"ix":10},"p":{"a":0,"k":[-1947,378,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.341176470588,0.043137254902,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 7","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-5,"s":[-53],"e":[-34]},{"t":76}],"ix":10},"p":{"a":0,"k":[-1857,994,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":24,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-6,"s":[-46],"e":[20]},{"t":67}],"ix":10},"p":{"a":0,"k":[1119,1224,0],"ix":2},"a":{"a":0,"k":[1171.735,-35.884,0],"ix":1},"s":{"a":0,"k":[100,78.683,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72.266,-33.656],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":20,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[0.759]},"t":-5,"s":[2],"e":[-27]},{"t":56}],"ix":10},"p":{"a":0,"k":[-463,1308,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,135.77,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-5.792,59.506],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Shape Layer 8","sr":1,"ks":{"o":{"a":0,"k":66,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.34],"y":[1]},"o":{"x":[0.22],"y":[1]},"t":-7,"s":[2],"e":[-43]},{"t":56}],"ix":10},"p":{"a":0,"k":[-505,1530,0],"ix":2},"a":{"a":0,"k":[-1078.126,-3.829,0],"ix":1},"s":{"a":0,"k":[154.688,81.692,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2315.531,506.688],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.76862745098,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-152.112,163.925],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-6,"op":714,"st":-6,"bm":0},{"ddd":0,"ind":9,"ty":1,"nm":"Orange Solid 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[207,448,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[152,152,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#ff570b","ip":0,"op":720,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":1,"nm":"Medium Orange Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[207,448,0],"ix":2},"a":{"a":0,"k":[741.5,447,0],"ix":1},"s":{"a":0,"k":[152,152,100],"ix":6}},"ao":0,"sw":1483,"sh":894,"sc":"#f87924","ip":0,"op":720,"st":0,"bm":0}],"markers":[]} + animation = bodymovin.loadAnimation({ + container: document.getElementById("hero-mobile"), + renderer: "svg", + loop: false, + autoplay: true, + animationData: animationData, + }); +} +}); + + diff --git a/website/www/site/static/js/hero/lottie-light.min.js b/website/www/site/static/js/hero/lottie-light.min.js new file mode 100644 index 000000000000..feb17961b669 --- /dev/null +++ b/website/www/site/static/js/hero/lottie-light.min.js @@ -0,0 +1,18 @@ +// TODO [website-revamp]: +// License header should be added + +(typeof navigator !== "undefined") && (function(root, factory) { + if (typeof define === "function" && define.amd) { + define(function() { + return factory(root); + }); + } else if (typeof module === "object" && module.exports) { + module.exports = factory(root); + } else { + root.lottie = factory(root); + root.bodymovin = root.lottie; + } +}((window || {}), function(window) { + "use strict";var h,e="http://www.w3.org/2000/svg",A="",s=-999999,i=!0,b=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent),Math.round,Math.pow),k=Math.sqrt,f=(Math.abs,Math.floor),m=(Math.max,Math.min),a={};!function(){var t,e=["abs","acos","acosh","asin","asinh","atan","atanh","atan2","ceil","cbrt","expm1","clz32","cos","cosh","exp","floor","fround","hypot","imul","log","log1p","log2","log10","max","min","pow","random","round","sign","sin","sinh","sqrt","tan","tanh","trunc","E","LN10","LN2","LOG10E","LOG2E","PI","SQRT1_2","SQRT2"],s=e.length;for(t=0;t>>=1;return(t+s)/e};return n.int32=function(){return 0|r.g(4)},n.quick=function(){return r.g(4)/4294967296},n.double=n,b(k(r.S),h),(e.pass||s||function(t,e,s,i){return i&&(i.S&&_(i,r),t.state=function(){return _(r,{})}),s?(o[d]=t,e):t})(n,a,"global"in e?e.global:this==o,e.state)},b(o.random(),h)}([],a);var W=function(){var t={getBezierEasing:function(t,e,s,i,a){var r=a||("bez_"+t+"_"+e+"_"+s+"_"+i).replace(/\./g,"p");if(h[r])return h[r];var n=new o([t,e,s,i]);return h[r]=n}},h={};var l=11,p=1/(l-1),e="function"==typeof Float32Array;function i(t,e){return 1-3*e+3*t}function a(t,e){return 3*e-6*t}function r(t){return 3*t}function f(t,e,s){return((i(e,s)*t+a(e,s))*t+r(e))*t}function m(t,e,s){return 3*i(e,s)*t*t+2*a(e,s)*t+r(e)}function o(t){this._p=t,this._mSampleValues=e?new Float32Array(l):new Array(l),this._precomputed=!1,this.get=this.get.bind(this)}return o.prototype={get:function(t){var e=this._p[0],s=this._p[1],i=this._p[2],a=this._p[3];return this._precomputed||this._precompute(),e===s&&i===a?t:0===t?0:1===t?1:f(this._getTForX(t),s,a)},_precompute:function(){var t=this._p[0],e=this._p[1],s=this._p[2],i=this._p[3];this._precomputed=!0,t===e&&s===i||this._calcSampleValues()},_calcSampleValues:function(){for(var t=this._p[0],e=this._p[2],s=0;sn?-1:1,l=!0;l;)if(i[r]<=n&&i[r+1]>n?(h=(n-i[r])/(i[r+1]-i[r]),l=!1):r+=o,r<0||a-1<=r){if(r===a-1)return s[r];l=!1}return s[r]+(s[r+1]-s[r])*h}var M=j("float32",8);return{getSegmentsLength:function(t){var e,s=Ct.newElement(),i=t.c,a=t.v,r=t.o,n=t.i,h=t._length,o=s.lengths,l=0;for(e=0;es[0]||!(s[0]>t[0])&&(t[1]>s[1]||!(s[1]>t[1])&&(t[2]>s[2]||!(s[2]>t[2])&&void 0))}var o,s=function(){var i=[4,4,14];function a(t){var e,s,i,a=t.length;for(e=0;e=r.t-i){a.h&&(a=r),m=0;break}if(r.t-i>t){m=d;break}d=s&&s<=t||this._caching.lastFrame=t&&(this._caching._lastKeyframeIndex=-1,this._caching.lastIndex=0);var i=this.interpolateValue(t,this._caching);this.pv=i}return this._caching.lastFrame=t,this.pv}function c(t){var e;if("unidimensional"===this.propType)e=t*this.mult,1e-5=this.p.keyframes[this.p.keyframes.length-1].t?(e=this.p.getValueAtTime(this.p.keyframes[this.p.keyframes.length-1].t/i,0),this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length-1].t-.05)/i,0)):(e=this.p.pv,this.p.getValueAtTime((this.p._caching.lastFrame+this.p.offsetTime-.01)/i,this.p.offsetTime));else if(this.px&&this.px.keyframes&&this.py.keyframes&&this.px.getValueAtTime&&this.py.getValueAtTime){e=[],s=[];var a=this.px,r=this.py;a._caching.lastFrame+a.offsetTime<=a.keyframes[0].t?(e[0]=a.getValueAtTime((a.keyframes[0].t+.01)/i,0),e[1]=r.getValueAtTime((r.keyframes[0].t+.01)/i,0),s[0]=a.getValueAtTime(a.keyframes[0].t/i,0),s[1]=r.getValueAtTime(r.keyframes[0].t/i,0)):a._caching.lastFrame+a.offsetTime>=a.keyframes[a.keyframes.length-1].t?(e[0]=a.getValueAtTime(a.keyframes[a.keyframes.length-1].t/i,0),e[1]=r.getValueAtTime(r.keyframes[r.keyframes.length-1].t/i,0),s[0]=a.getValueAtTime((a.keyframes[a.keyframes.length-1].t-.01)/i,0),s[1]=r.getValueAtTime((r.keyframes[r.keyframes.length-1].t-.01)/i,0)):(e=[a.pv,r.pv],s[0]=a.getValueAtTime((a._caching.lastFrame+a.offsetTime-.01)/i,a.offsetTime),s[1]=r.getValueAtTime((r._caching.lastFrame+r.offsetTime-.01)/i,r.offsetTime))}else e=s=n;this.v.rotate(-Math.atan2(e[1]-s[1],e[0]-s[0]))}this.data.p&&this.data.p.s?this.data.p.z?this.v.translate(this.px.v,this.py.v,-this.pz.v):this.v.translate(this.px.v,this.py.v,0):this.v.translate(this.p.v[0],this.p.v[1],-this.p.v[2])}this.frameId=this.elem.globalData.frameId}},precalculateMatrix:function(){if(!this.a.k&&(this.pre.translate(-this.a.v[0],-this.a.v[1],this.a.v[2]),this.appliedTransformations=1,!this.s.effectsSequence.length)){if(this.pre.scale(this.s.v[0],this.s.v[1],this.s.v[2]),this.appliedTransformations=2,this.sk){if(this.sk.effectsSequence.length||this.sa.effectsSequence.length)return;this.pre.skewFromAxis(-this.sk.v,this.sa.v),this.appliedTransformations=3}if(this.r){if(this.r.effectsSequence.length)return;this.pre.rotate(-this.r.v),this.appliedTransformations=4}else this.rz.effectsSequence.length||this.ry.effectsSequence.length||this.rx.effectsSequence.length||this.or.effectsSequence.length||(this.pre.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]),this.appliedTransformations=4)}},autoOrient:function(){}},F([w],i),i.prototype.addDynamicProperty=function(t){this._addDynamicProperty(t),this.elem.addDynamicProperty(t),this._isDirty=!0},i.prototype._addDynamicProperty=w.prototype.addDynamicProperty,{getTransformProperty:function(t,e,s){return new i(t,e,s)}}}();function z(){this.c=!1,this._length=0,this._maxLength=8,this.v=x(this._maxLength),this.o=x(this._maxLength),this.i=x(this._maxLength)}z.prototype.setPathData=function(t,e){this.c=t,this.setLength(e);for(var s=0;s=this._maxLength&&this.doubleArrayLength(),s){case"v":r=this.v;break;case"i":r=this.i;break;case"o":r=this.o}(!r[i]||r[i]&&!a)&&(r[i]=Pt.newElement()),r[i][0]=t,r[i][1]=e},z.prototype.setTripleAt=function(t,e,s,i,a,r,n,h){this.setXYAt(t,e,"v",n,h),this.setXYAt(s,i,"o",n,h),this.setXYAt(a,r,"i",n,h)},z.prototype.reverse=function(){var t=new z;t.setPathData(this.c,this._length);var e=this.v,s=this.o,i=this.i,a=0;this.c&&(t.setTripleAt(e[0][0],e[0][1],i[0][0],i[0][1],s[0][0],s[0][1],0,!1),a=1);var r,n=this._length-1,h=this._length;for(r=a;r=d[d.length-1].t-this.offsetTime)i=d[d.length-1].s?d[d.length-1].s[0]:d[d.length-2].e[0],r=!0;else{for(var c,u,g=m,y=d.length-1,v=!0;v&&(c=d[g],!((u=d[g+1]).t-this.offsetTime>t));)g=u.t-this.offsetTime)p=1;else if(ti+s);else p=h.s*a<=i?0:(h.s*a-i)/s,f=h.e*a>=i+s?1:(h.e*a-i)/s,o.push([p,f])}return o.length||o.push([0,0]),o},G.prototype.releasePathsData=function(t){var e,s=t.length;for(e=0;ee.e){s.c=!1;break}e.s<=c&&e.e>=c+n.addedLength?(this.addSegment(m[i].v[a-1],m[i].o[a-1],m[i].i[a],m[i].v[a],s,h,g),g=!1):(l=mt.getNewSegment(m[i].v[a-1],m[i].v[a],m[i].o[a-1],m[i].i[a],(e.s-c)/n.addedLength,(e.e-c)/n.addedLength,o[a-1]),this.addSegmentFromArray(l,s,h,g),g=!1,s.c=!1),c+=n.addedLength,h+=1}if(m[i].c&&o.length){if(n=o[a-1],c<=e.e){var y=o[a-1].addedLength;e.s<=c&&e.e>=c+y?(this.addSegment(m[i].v[a-1],m[i].o[a-1],m[i].i[0],m[i].v[0],s,h,g),g=!1):(l=mt.getNewSegment(m[i].v[a-1],m[i].v[0],m[i].o[a-1],m[i].i[0],(e.s-c)/y,(e.e-c)/y,o[a-1]),this.addSegmentFromArray(l,s,h,g),g=!1,s.c=!1)}else s.c=!1;c+=n.addedLength,h+=1}if(s._length&&(s.setXYAt(s.v[p][0],s.v[p][1],"i",p),s.setXYAt(s.v[s._length-1][0],s.v[s._length-1][1],"o",s._length-1)),c>e.e)break;i=c.length&&(f=0,c=u[m+=1]?u[m].points:b.v.c?u[m=f=0].points:(l-=o.partialLength,null)),c&&(d=o,g=(o=c[f]).partialLength));z=D[a].an/2-D[a].add,S.translate(-z,0,0)}else z=D[a].an/2-D[a].add,S.translate(-z,0,0),S.translate(-k[0]*D[a].an/200,-k[1]*L/100,0);for(D[a].l/2,F=0;Fe));)s+=1;return this.keysIndex!==s&&(this.keysIndex=s),this.data.d.k[this.keysIndex].s},ct.prototype.buildFinalText=function(t){for(var e,s=L.getCombinedCharacterCodes(),i=[],a=0,r=t.length;athis.minimumFontSize&&M=u(h)&&(n=d(0,c(t-h<0?c(o,1)-(h-t):o-t,1))),r(n));return n*this.a.v},getValue:function(t){this.iterateDynamicProperties(),this._mdf=t||this._mdf,this._currentTextLength=this.elem.textProperty.currentData.l.length||0,t&&2===this.data.r&&(this.e.v=this._currentTextLength);var e=2===this.data.r?1:100/this.data.totalChars,s=this.o.v/e,i=this.s.v/e+s,a=this.e.v/e+s;if(at-this.layers[e].st&&this.buildItem(e),this.completeLayers=!!this.elements[e]&&this.completeLayers;this.checkPendingElements()},wt.prototype.createItem=function(t){switch(t.ty){case 2:return this.createImage(t);case 0:return this.createComp(t);case 1:return this.createSolid(t);case 3:return this.createNull(t);case 4:return this.createShape(t);case 5:return this.createText(t);case 6:return this.createAudio(t);case 13:return this.createCamera(t)}return this.createNull(t)},wt.prototype.createCamera=function(){throw new Error("You're using a 3d camera. Try the html renderer.")},wt.prototype.createAudio=function(t){return new te(t,this.globalData,this)},wt.prototype.buildAllItems=function(){var t,e=this.layers.length;for(t=0;tt?!0!==this.isInRange&&(this.globalData._mdf=!0,this._mdf=!0,this.isInRange=!0,this.show()):!1!==this.isInRange&&(this.globalData._mdf=!0,this.isInRange=!1,this.hide())},renderRenderable:function(){var t,e=this.renderableComponents.length;for(t=0;tthis.animationData.op&&(this.animationData.op=t.op,this.totalFrames=Math.floor(t.op-this.animationData.ip));var e,s,i=this.animationData.layers,a=i.length,r=t.layers,n=r.length;for(s=0;sthis.timeCompleted&&(this.currentFrame=this.timeCompleted),this.trigger("enterFrame"),this.renderFrame()},he.prototype.renderFrame=function(){if(!1!==this.isLoaded)try{this.renderer.renderFrame(this.currentFrame+this.firstFrame)}catch(t){this.triggerRenderFrameError(t)}},he.prototype.play=function(t){t&&this.name!=t||!0===this.isPaused&&(this.isPaused=!1,this.audioController.resume(),this._idle&&(this._idle=!1,this.trigger("_active")))},he.prototype.pause=function(t){t&&this.name!=t||!1===this.isPaused&&(this.isPaused=!0,this._idle=!0,this.trigger("_idle"),this.audioController.pause())},he.prototype.togglePause=function(t){t&&this.name!=t||(!0===this.isPaused?this.play():this.pause())},he.prototype.stop=function(t){t&&this.name!=t||(this.pause(),this.playCount=0,this._completedLoop=!1,this.setCurrentRawFrameValue(0))},he.prototype.goToAndStop=function(t,e,s){s&&this.name!=s||(e?this.setCurrentRawFrameValue(t):this.setCurrentRawFrameValue(t*this.frameModifier),this.pause())},he.prototype.goToAndPlay=function(t,e,s){this.goToAndStop(t,e,s),this.play()},he.prototype.advanceTime=function(t){if(!0!==this.isPaused&&!1!==this.isLoaded){var e=this.currentRawFrame+t*this.frameModifier,s=!1;e>=this.totalFrames-1&&0=this.totalFrames?(this.playCount+=1,this.checkSegments(e%this.totalFrames)||(this.setCurrentRawFrameValue(e%this.totalFrames),this._completedLoop=!0,this.trigger("loopComplete"))):this.setCurrentRawFrameValue(e):this.checkSegments(e>this.totalFrames?e%this.totalFrames:0)||(s=!0,e=this.totalFrames-1):e<0?this.checkSegments(e%this.totalFrames)||(!this.loop||this.playCount--<=0&&!0!==this.loop?(s=!0,e=0):(this.setCurrentRawFrameValue(this.totalFrames+e%this.totalFrames),this._completedLoop?this.trigger("loopComplete"):this._completedLoop=!0)):this.setCurrentRawFrameValue(e),s&&(this.setCurrentRawFrameValue(e),this.pause(),this.trigger("complete"))}},he.prototype.adjustSegment=function(t,e){this.playCount=0,t[1]t[0]&&(this.frameModifier<0&&(this.playSpeed<0?this.setSpeed(-this.playSpeed):this.setDirection(1)),this.timeCompleted=this.totalFrames=t[1]-t[0],this.firstFrame=t[0],this.setCurrentRawFrameValue(.001+e)),this.trigger("segmentStart")},he.prototype.setSegment=function(t,e){var s=-1;this.isPaused&&(this.currentRawFrame+this.firstFramee&&(s=e-t)),this.firstFrame=t,this.timeCompleted=this.totalFrames=e-t,-1!==s&&this.goToAndStop(s,!0)},he.prototype.playSegments=function(t,e){if(e&&(this.segments.length=0),"object"==typeof t[0]){var s,i=t.length;for(s=0;s + * 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).enumerable}))),e.push.apply(e,r)}return e}function e(e){for(var r=1;rt.length)&&(n=t.length);for(var e=0,r=new Array(n);e1&&void 0!==arguments[1]?arguments[1]:document;return"function"==typeof t?o(t()):"string"==typeof t?o(n.querySelectorAll(t)):t instanceof HTMLElement!=!1?[t]:t instanceof NodeList!=!1?t:[]}function u(t,n,e){return Math.min(Math.max(t,n),e)}return Math.sign||(Math.sign=function(t){return(t>0)-(t<0)||+t}),function(t){var n,i,o,c,f,s,l,d,h,v,p,m,b,g,y,w,M,O,S,j,A,x,k,E,P,T,D,C,L,X,Y,z,H=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},I="data-keen-slider-moves",V="data-keen-slider-v",q=[],F=null,W=!1,_=!1,K=0,N=[];function R(t,n,e){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};t.addEventListener(n,e,r),q.push([t,n,e,r])}function U(t){if(O&&S===J(t)&&ut()){var e=Z(t).x;if(!nt(t)&&E)return B(t);E&&(Wt(),j=e,n.setAttribute(I,!0),E=!1),t.cancelable&&t.preventDefault(),Xt(k(j-e,$t),t.timeStamp),j=e}}function $(t){O||!ut()||tt(t.target)||(O=!0,E=!0,S=J(t),nt(t),ht(),M=v,j=Z(t).x,Xt(0,t.timeStamp),ot("dragStart"))}function B(t){O&&S===J(t,!0)&&ut()&&(n.removeAttribute(I),O=!1,mt(),ot("dragEnd"))}function G(t){return t.changedTouches}function J(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],e=n?G(t):Q(t);return e?e[0]?e[0].identifier:"error":"default"}function Q(t){return t.targetTouches}function Z(t){var n=Q(t);return{x:lt()?n?n[0].screenY:t.pageY:n?n[0].screenX:t.pageX,timestamp:t.timeStamp}}function tt(t){return t.hasAttribute(w.preventEvent)}function nt(t){var n=Q(t);if(!n)return!0;var e=n[0],r=lt()?e.clientY:e.clientX,i=lt()?e.clientX:e.clientY,o=void 0!==A&&void 0!==x&&Math.abs(x-i)<=Math.abs(A-r);return A=r,x=i,o}function et(t){ut()&&O&&t.preventDefault()}function rt(){R(window,"orientationchange",Pt),R(window,"resize",(function(){return Et()})),R(n,"dragstart",(function(t){ut()&&t.preventDefault()})),R(n,"mousedown",$),R(n,"mousemove",U),R(n,"mouseleave",B),R(n,"mouseup",B),R(n,"touchstart",$,{passive:!0}),R(n,"touchmove",U,{passive:!1}),R(n,"touchend",B,{passive:!0}),R(n,"touchcancel",B,{passive:!0}),R(window,"wheel",et,{passive:!1})}function it(){q.forEach((function(t){t[0].removeEventListener(t[1],t[2],t[3])})),q=[]}function ot(t){w[t]&&w[t]($t)}function at(){return w.centered}function ut(){return void 0!==i?i:w.controls}function ct(){return w.loop}function ft(){return w.rtl}function st(){return!w.loop&&w.rubberband}function lt(){return!!w.vertical}function dt(){P=window.requestAnimationFrame(vt)}function ht(){P&&(window.cancelAnimationFrame(P),P=null),T=null}function vt(t){T||(T=t);var n=t-T,e=pt(n);if(n>=C)return Xt(D-X,!1),z?z():void ot("afterChange");var r=Yt(e);if(0===r||ct()||st()||Y){if(0!==r&&st()&&!Y)return Mt();X+=e,Xt(e,!1),dt()}else Xt(e-r,!1)}function pt(t){return D*L(t/C)-X}function mt(){switch(ot("beforeChange"),w.mode){case"free":yt();break;case"free-snap":wt();break;case"snap":default:bt()}}function bt(){gt((1===l&&0!==p?M:v)+Math.sign(p))}function gt(t,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:w.duration,r=arguments.length>3&&void 0!==arguments[3]&&arguments[3],i=arguments.length>4&&void 0!==arguments[4]&&arguments[4],o=function(t){return 1+--t*t*t*t*t};Ot(Vt(t=It(t,r,i)),e,o,n)}function yt(){if(0===b)return!(!Yt(0)||ct())&>(v);var t=w.friction/Math.pow(Math.abs(b),-.5);Ot(Math.pow(b,2)/t*Math.sign(b),6*Math.abs(b/t),(function(t){return 1-Math.pow(1-t,5)}))}function wt(){if(0===b)return gt(v);var t=w.friction/Math.pow(Math.abs(b),-.5),n=Math.pow(b,2)/t*Math.sign(b),e=6*Math.abs(b/t),r=(K+n)/(s/l);Ot((-1===p?Math.floor(r):Math.ceil(r))*(s/l)-K,e,(function(t){return 1-Math.pow(1-t,5)}))}function Mt(){if(ht(),0===b)return gt(v,!0);var t=.04/Math.pow(Math.abs(b),-.5),n=Math.pow(b,2)/t*Math.sign(b),e=function(t){return--t*t*t+1},r=b;Ot(n,3*Math.abs(r/t),e,!0,(function(){Ot(Vt(It(v)),500,e,!0)}))}function Ot(t,n,e,r,i){ht(),D=t,X=0,C=n,L=e,Y=r,z=i,T=null,dt()}function St(e){var r=a(t);r.length&&(n=r[0],Et(e),rt(),ot("mounted"))}function jt(){var t,n=H.breakpoints||[];for(var r in n)window.matchMedia(r).matches&&(t=r);if(t===F)return!0;var i=(F=t)?n[F]:H;i.breakpoints&&F&&delete i.breakpoints,w=e(e(e({},Ut),H),i),W=!0,h=null,kt()}function At(t){return"function"==typeof t?t():u(t,1,Math.max(ct()?o-1:o,1))}function xt(){jt(),_=!0,ot("created")}function kt(t,n){t&&(H=t),n&&(F=null),Tt(),St(n)}function Et(t){var e=window.innerWidth;if(jt()&&(e!==h||t)){h=e;var r=w.slides;"number"==typeof r?(f=null,o=r):(f=a(r,n),o=f?f.length:0);var i=w.dragSpeed*(ft()?-1:1);k="function"==typeof i?i:function(t){return t*i},s=lt()?n.offsetHeight:n.offsetWidth,l=At(w.slidesPerView),d=u(w.spacing,0,s/(l-1)-1),s+=d,c=at()?(s/2-s/l/2)/s:0,Ct();var p=!_||W&&w.resetSlide?w.initial:v;Rt(ct()?p:zt(p)),lt()&&n.setAttribute(V,!0),W=!1}}function Pt(t){Et(),setTimeout(Et,500),setTimeout(Et,2e3)}function Tt(){it(),Lt(),n&&n.hasAttribute(V)&&n.removeAttribute(V),ot("destroyed")}function Dt(){f&&f.forEach((function(t,n){var e=g[n].distance*s-n*(s/l-d/l-d/l*(l-1)),r=lt()?0:e,i=lt()?e:0,o="translate3d(".concat(r,"px, ").concat(i,"px, 0)");t.style.transform=o,t.style["-webkit-transform"]=o}))}function Ct(){f&&f.forEach((function(t){var n="calc(".concat(100/l,"% - ").concat(d/l*(l-1),"px)");lt()?(t.style["min-height"]=n,t.style["max-height"]=n):(t.style["min-width"]=n,t.style["max-width"]=n)}))}function Lt(){if(f){var t=["transform","-webkit-transform"];t=[].concat(r(t),lt?["min-height","max-height"]:["min-width","max-width"]),f.forEach((function(n){t.forEach((function(t){n.style.removeProperty(t)}))}))}}function Xt(t){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:Date.now();Ft(t,e),n&&(t=Kt(t)),K+=t,_t()}function Yt(t){var n=s*(o-1*(at()?1:l))/l,e=K+t;return e>n?e-n:e<0?e:0}function zt(t){return u(t,0,o-1-(at()?0:l-1))}function Ht(){var t=Math.abs(y),n=K<0?1-t:t;return{direction:p,progressTrack:n,progressSlides:n*o/(o-1),positions:g,position:K,speed:b,relativeSlide:(v%o+o)%o,absoluteSlide:v,size:o,slidesPerView:l,widthOrHeight:s}}function It(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],e=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return ct()?n?qt(t,e):t:zt(t)}function Vt(t){return-(-s/l*t+K)}function qt(t,n){var e=(v%o+o)%o,r=e<(t=(t%o+o)%o)?-e-o+t:-(e-t),i=e>t?o-e+t:t-e,a=n?Math.abs(r)<=i?r:i:t(o-1)/l?-o/l:e<-o/l+1?o/l:0);var r=1/l,i=e+r,a=i1?1-(i-1)*l/1:1;t.push({portion:a<0||a>1?0:a,distance:ft()?-1*e+1-r:e})}g=t,Dt(),ot("move")}function Kt(t){if(ct())return t;var n=Yt(t);if(!st())return t-n;if(0===n)return t;var e;return t*(e=n/s,(1-Math.abs(e))*(1-Math.abs(e)))}function Nt(){var t=Math.round(K/(s/l));t!==v&&(v=t,ot("slideChanged"))}function Rt(t){ot("beforeChange"),Xt(Vt(t),!1),ot("afterChange")}var Ut={centered:!1,breakpoints:null,controls:!0,dragSpeed:1,friction:.0025,loop:!1,initial:0,duration:500,preventEvent:"data-keen-slider-pe",slides:".keen-slider__slide",vertical:!1,resetSlide:!1,slidesPerView:1,spacing:0,mode:"snap",rtl:!1,rubberband:!0},$t={controls:function(t){i=t},destroy:Tt,refresh:function(t){kt(t,!0)},next:function(){gt(v+1,!0)},prev:function(){gt(v-1,!0)},moveToSlide:function(t,n){gt(t,!0,n)},moveToSlideRelative:function(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],e=arguments.length>2?arguments[2]:void 0;gt(t,!0,e,!0,n)},resize:function(){Et(!0)},details:function(){return Ht()}};return xt(),$t}})); +//# sourceMappingURL=keen-slider.js.map \ No newline at end of file diff --git a/website/www/site/static/js/page-nav.js b/website/www/site/static/js/page-nav.js index 1e8f6eaa1843..c31a1bd60867 100644 --- a/website/www/site/static/js/page-nav.js +++ b/website/www/site/static/js/page-nav.js @@ -17,9 +17,33 @@ $(document).ready(function() { var CONST = { DESKTOP_BREAKPOINT: 1024, - PAGENAV_WIDTH: 240 + PAGENAV_WIDTH: 248 + }; + function checkList () { + var items = $(".page-nav > #TableOfContents li"); + if (items && items.length > 0) { + for(var i=0; i a',items[i]).length>0){ + if(!items[i].querySelector('a').getAttribute('aria-expanded') || items[i].querySelector('a').getAttribute('aria-expanded') == 'false'){ + items[i].classList.add('chosen'); + } + } + } + } + if($('#TableOfContents .active').length === 0 || $('#TableOfContents .chosen').length===0){ + if($('#TableOfContents li').first().children('a').length === 0){ + $('#TableOfContents li').first().children('ul').children('li')[0].classList.add('chosen'); + $('#TableOfContents li')[0].classList.add('active'); + } + else + $('#TableOfContents li')[0].classList.add('chosen'); + } + } }; - return { "idPageNav": idPageNav, "idMainContainer": idMainContainer, @@ -39,6 +63,14 @@ $(document).ready(function() { left: 0 }); } + if($('#TableOfContents .active').length === 0){ + if($('#TableOfContents li').first().children('a').length === 0){ + $('#TableOfContents li').first().children('ul').children('li')[0].classList.add('chosen'); + $('#TableOfContents li')[0].classList.add('active'); + } + else + $('#TableOfContents li')[0].classList.add('chosen'); + } }, "bindEvents": function() { @@ -48,10 +80,44 @@ $(document).ready(function() { _self.setPageNav(); }); }, + "setActiveItemClassEvent": function () { + $("." + idSectionNav + " a").click(function (e) { + var currentItem = document.querySelector(classNavActiveItem); + if (currentItem) + currentItem.classList.remove(CONST.ACTIVE_CLASS); + e.target.classList.add(CONST.ACTIVE_CLASS); + }); + }, + + "displayActiveItem": function () { + document.querySelector(".page-nav > #TableOfContents").addEventListener('click', function(){ + setTimeout(checkList,50) + }); + document.addEventListener('scroll', checkList); + var items = $(".page-nav > #TableOfContents li"); + var img = document.createElement("img"); + img.src = "/images/arrow-expandable.svg"; + img.classList="rotate"; + for(i=0; i CONST.DESKTOP_BREAKPOINT) { var sectionNavHeight = $(sectionNavEl).height(); - $(".container-main-content").css({"min-height": sectionNavHeight}); } else { - $(".container-main-content").css({"min-height": ''}); + $(".container-main-content").css({"min-height": '100vh'}); } }); @@ -133,9 +143,20 @@ $(document).ready(function () { $("." + _self.idNavMask).click(function (el) { $("." + _self.idNavMask).removeClass(CONST.OPEN_CLASS); $("." + _self.idContainer).removeClass(CONST.OPEN_CLASS); + $("body").removeClass("fixedPosition"); + if (_self.hasSectionNav) { + $("." + _self.idSectionNav).removeClass(CONST.OPEN_CLASS); + $("body").removeClass("fixedPosition"); + } + }); + $("#closeMenu").click(function (el) { + $("." + _self.idNavMask).removeClass(CONST.OPEN_CLASS); + $("." + _self.idContainer).removeClass(CONST.OPEN_CLASS); + $("body").removeClass("fixedPosition"); if (_self.hasSectionNav) { $("." + _self.idSectionNav).removeClass(CONST.OPEN_CLASS); + $("body").removeClass("fixedPosition"); } }); @@ -166,7 +187,7 @@ $(document).ready(function () { "classNameContainer": "navbar-container", "classNameSectionNav": "section-nav", "classNameBackCTA": "section-nav-back", - "classNameCTA": "navbar-toggle", + "classNameCTA": "menu-open", "classNameMask": "navbar-mask", "classNameNavItemTitleCollapsible": "section-nav-item--collapsible span", "classNameNavItemCollapsible": ".section-nav-item--collapsible",