+ * 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 >}}
{{ highlight >}}
@@ -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 >}}
{{ highlight >}}
@@ -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 >}}
{{ highlight >}}
@@ -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 Runner](/documentation/runners/flink)
- [Apache Nemo Runner](/documentation/runners/nemo)
-- [Apache Samza Runner](/documentation/runners/samza)
-- [Apache Spark Runner](/documentation/runners/spark) 
-- [Google Cloud Dataflow Runner](/documentation/runners/dataflow) 
-- [Hazelcast Jet Runner](/documentation/runners/jet) 
-- [Twister2 Runner](/documentation/runners/twister2) 
+- [Apache Samza Runner](/documentation/runners/samza)
+- [Apache Spark Runner](/documentation/runners/spark)
+- [Google Cloud Dataflow Runner](/documentation/runners/dataflow)
+- [Hazelcast Jet Runner](/documentation/runners/jet)
+- [Twister2 Runner](/documentation/runners/twister2)
**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"}}