From d32c6d44c6b14a98a485b318182a743fb5a3528a Mon Sep 17 00:00:00 2001 From: Jakub Sadowski Date: Tue, 22 Dec 2020 20:42:03 +0100 Subject: [PATCH 01/24] all changes --- .../icons/documentation/runners/beam-icon.svg | 28 ++ .../documentation/runners/dataflow-icon.svg | 28 ++ .../documentation/runners/flink-icon.svg | 28 ++ .../icons/documentation/runners/nemo-icon.svg | 28 ++ .../documentation/runners/samza-icon.svg | 28 ++ .../documentation/runners/spark-icon.svg | 28 ++ .../icons/documentation/sdks/go-icon.svg | 28 ++ .../icons/documentation/sdks/java-icon.svg | 28 ++ .../icons/documentation/sdks/python-icon.svg | 28 ++ .../site/assets/icons/install-button-icon.svg | 22 ++ .../site/assets/icons/navbar-arrow-icon.svg | 23 ++ .../icons/navbar-documentation-icon.svg | 22 ++ website/www/site/assets/icons/quote-icon.svg | 22 ++ website/www/site/assets/scss/_blog.scss | 190 ++++++++++++ website/www/site/assets/scss/_calendar.scss | 2 +- website/www/site/assets/scss/_cards.sass | 69 ----- website/www/site/assets/scss/_ctas.sass | 57 +++- website/www/site/assets/scss/_footer.sass | 42 ++- website/www/site/assets/scss/_global.sass | 9 +- website/www/site/assets/scss/_graphic.sass | 2 + .../www/site/assets/scss/_hero-mobile.scss | 62 ++++ website/www/site/assets/scss/_hero.sass | 156 ---------- website/www/site/assets/scss/_hero.scss | 128 ++++++++ .../www/site/assets/scss/_keen-slider.scss | 40 +++ website/www/site/assets/scss/_lists.scss | 203 ++++++++++++ .../www/site/assets/scss/_navbar-desktop.scss | 174 +++++++++++ .../{_navbar.sass => _navbar-mobile.sass} | 17 +- website/www/site/assets/scss/_quotes.scss | 151 +++++++++ .../www/site/assets/scss/_section-nav.sass | 4 +- website/www/site/assets/scss/_typography.scss | 47 ++- website/www/site/assets/scss/_vars.sass | 4 + website/www/site/assets/scss/main.scss | 14 +- website/www/site/config.toml | 2 +- .../site/content/en/community/powered-by.md | 2 + .../www/site/content/en/contribute/_index.md | 16 +- .../site/content/en/documentation/_index.md | 31 +- .../sql/extensions/create-external-table.md | 132 ++++++++ .../en/documentation/io/developing-io-java.md | 3 + .../io/developing-io-overview.md | 80 +++-- .../documentation/io/developing-io-python.md | 3 + .../en/documentation/programming-guide.md | 2 +- .../documentation/sdks/python-dependencies.md | 12 +- .../content/en/get-started/quickstart-py.md | 4 +- .../en/get-started/wordcount-example.md | 2 +- .../site/data/en/documentation_runners.yaml | 34 +++ .../{cards.yaml => documentation_sdks.yaml} | 12 +- website/www/site/data/en/quotes.yaml | 23 ++ website/www/site/i18n/blog/en.yaml | 11 +- website/www/site/i18n/home/en.yaml | 4 - website/www/site/i18n/home/hero/en.yaml | 20 ++ website/www/site/i18n/home/quotes/en.yaml | 14 + website/www/site/i18n/navbar/en.yaml | 4 +- website/www/site/layouts/_default/baseof.html | 6 +- website/www/site/layouts/blog/baseof.html | 22 +- website/www/site/layouts/blog/list.html | 157 +++++++--- website/www/site/layouts/blog/single.html | 83 +++-- .../site/layouts/documentation/baseof.html | 2 +- website/www/site/layouts/index.html | 147 ++++----- .../partials/documentation/icon-row.html | 27 ++ website/www/site/layouts/partials/footer.html | 125 ++++---- website/www/site/layouts/partials/header.html | 58 +++- .../site/layouts/partials/hooks/body-end.html | 17 ++ .../layouts/partials/quotes/quote-mobile.html | 21 ++ .../site/layouts/partials/quotes/quote.html | 21 ++ .../shortcodes/documentation/runners.html | 45 +++ .../shortcodes/documentation/sdks.html | 18 ++ .../site/static/images/quote-paypal-logo.png | Bin 0 -> 16047 bytes .../www/site/static/js/categories-filter.js | 289 ++++++++++++++++++ .../www/site/static/js/hero/hero-desktop.js | 21 ++ .../www/site/static/js/hero/hero-mobile.js | 21 ++ .../site/static/js/hero/lottie-light.min.js | 18 ++ website/www/site/static/js/keen-slider.min.js | 15 + website/www/site/static/js/quotes-slider.js | 42 +++ website/www/site/static/js/section-nav.js | 2 +- 74 files changed, 2694 insertions(+), 586 deletions(-) create mode 100644 website/www/site/assets/icons/documentation/runners/beam-icon.svg create mode 100644 website/www/site/assets/icons/documentation/runners/dataflow-icon.svg create mode 100644 website/www/site/assets/icons/documentation/runners/flink-icon.svg create mode 100644 website/www/site/assets/icons/documentation/runners/nemo-icon.svg create mode 100644 website/www/site/assets/icons/documentation/runners/samza-icon.svg create mode 100644 website/www/site/assets/icons/documentation/runners/spark-icon.svg create mode 100644 website/www/site/assets/icons/documentation/sdks/go-icon.svg create mode 100644 website/www/site/assets/icons/documentation/sdks/java-icon.svg create mode 100644 website/www/site/assets/icons/documentation/sdks/python-icon.svg create mode 100644 website/www/site/assets/icons/install-button-icon.svg create mode 100644 website/www/site/assets/icons/navbar-arrow-icon.svg create mode 100644 website/www/site/assets/icons/navbar-documentation-icon.svg create mode 100644 website/www/site/assets/icons/quote-icon.svg create mode 100644 website/www/site/assets/scss/_blog.scss delete mode 100644 website/www/site/assets/scss/_cards.sass create mode 100644 website/www/site/assets/scss/_hero-mobile.scss delete mode 100644 website/www/site/assets/scss/_hero.sass create mode 100644 website/www/site/assets/scss/_hero.scss create mode 100644 website/www/site/assets/scss/_keen-slider.scss create mode 100644 website/www/site/assets/scss/_lists.scss create mode 100644 website/www/site/assets/scss/_navbar-desktop.scss rename website/www/site/assets/scss/{_navbar.sass => _navbar-mobile.sass} (87%) create mode 100644 website/www/site/assets/scss/_quotes.scss create mode 100644 website/www/site/data/en/documentation_runners.yaml rename website/www/site/data/en/{cards.yaml => documentation_sdks.yaml} (60%) create mode 100644 website/www/site/data/en/quotes.yaml create mode 100644 website/www/site/i18n/home/hero/en.yaml create mode 100644 website/www/site/i18n/home/quotes/en.yaml create mode 100644 website/www/site/layouts/partials/documentation/icon-row.html create mode 100644 website/www/site/layouts/partials/hooks/body-end.html create mode 100644 website/www/site/layouts/partials/quotes/quote-mobile.html create mode 100644 website/www/site/layouts/partials/quotes/quote.html create mode 100644 website/www/site/layouts/shortcodes/documentation/runners.html create mode 100644 website/www/site/layouts/shortcodes/documentation/sdks.html create mode 100644 website/www/site/static/images/quote-paypal-logo.png create mode 100644 website/www/site/static/js/categories-filter.js create mode 100644 website/www/site/static/js/hero/hero-desktop.js create mode 100644 website/www/site/static/js/hero/hero-mobile.js create mode 100644 website/www/site/static/js/hero/lottie-light.min.js create mode 100644 website/www/site/static/js/keen-slider.min.js create mode 100644 website/www/site/static/js/quotes-slider.js diff --git a/website/www/site/assets/icons/documentation/runners/beam-icon.svg b/website/www/site/assets/icons/documentation/runners/beam-icon.svg new file mode 100644 index 000000000000..a28c653d9d2b --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/beam-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/runners/dataflow-icon.svg b/website/www/site/assets/icons/documentation/runners/dataflow-icon.svg new file mode 100644 index 000000000000..8bf98f238451 --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/dataflow-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/runners/flink-icon.svg b/website/www/site/assets/icons/documentation/runners/flink-icon.svg new file mode 100644 index 000000000000..40c77f112dc1 --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/flink-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/runners/nemo-icon.svg b/website/www/site/assets/icons/documentation/runners/nemo-icon.svg new file mode 100644 index 000000000000..d6ddbc517578 --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/nemo-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/runners/samza-icon.svg b/website/www/site/assets/icons/documentation/runners/samza-icon.svg new file mode 100644 index 000000000000..4627df1be7bf --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/samza-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/runners/spark-icon.svg b/website/www/site/assets/icons/documentation/runners/spark-icon.svg new file mode 100644 index 000000000000..61ee67f363ef --- /dev/null +++ b/website/www/site/assets/icons/documentation/runners/spark-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/sdks/go-icon.svg b/website/www/site/assets/icons/documentation/sdks/go-icon.svg new file mode 100644 index 000000000000..46f43820bb3a --- /dev/null +++ b/website/www/site/assets/icons/documentation/sdks/go-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/sdks/java-icon.svg b/website/www/site/assets/icons/documentation/sdks/java-icon.svg new file mode 100644 index 000000000000..a2991e307ca3 --- /dev/null +++ b/website/www/site/assets/icons/documentation/sdks/java-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/documentation/sdks/python-icon.svg b/website/www/site/assets/icons/documentation/sdks/python-icon.svg new file mode 100644 index 000000000000..f539aa3a62aa --- /dev/null +++ b/website/www/site/assets/icons/documentation/sdks/python-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/install-button-icon.svg b/website/www/site/assets/icons/install-button-icon.svg new file mode 100644 index 000000000000..39c3ffcfbd31 --- /dev/null +++ b/website/www/site/assets/icons/install-button-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/navbar-arrow-icon.svg b/website/www/site/assets/icons/navbar-arrow-icon.svg new file mode 100644 index 000000000000..78724e930331 --- /dev/null +++ b/website/www/site/assets/icons/navbar-arrow-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/navbar-documentation-icon.svg b/website/www/site/assets/icons/navbar-documentation-icon.svg new file mode 100644 index 000000000000..11c165b0feba --- /dev/null +++ b/website/www/site/assets/icons/navbar-documentation-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/quote-icon.svg b/website/www/site/assets/icons/quote-icon.svg new file mode 100644 index 000000000000..0a32eea254ad --- /dev/null +++ b/website/www/site/assets/icons/quote-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/scss/_blog.scss b/website/www/site/assets/scss/_blog.scss new file mode 100644 index 000000000000..7dc51a8d751e --- /dev/null +++ b/website/www/site/assets/scss/_blog.scss @@ -0,0 +1,190 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +@import "media"; + +.blog-content { + h2 { + text-align: center; + margin-bottom: 70px !important; + } + .tf-filter-item { + display: none; + } + + .category-buttons { + display: flex; + align-items: center; + justify-content: center; + max-width: 60%; + flex-wrap: wrap-reverse; + margin: 0 auto; + margin-bottom: 80px; + + @media (max-width: $tablet) { + max-width: 100%; + flex-wrap: wrap; + } + + .category-button { + margin: 0 11.8px 11.7px 11.8px; + padding: 10px 20px; + border-radius: 100px; + background-color: #f6f6f6; + text-transform: uppercase; + border: 0; + font-weight: bold; + line-height: 1.14; + letter-spacing: 0.6px; + } + .active { + background-color: #f26628; + color: #fff; + } + .load-button { + padding: 15px 51px 15px 52px; + border-radius: 100px; + background-color: #f26628; + font-weight: bold; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: 0.39px; + color: #ffffff; + border: 0; + margin-top: 125px; + } + } +} +.posts-list { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + + .show-item { + display: inline-block; + } + .post-card { + width: 381px; + height: 468px; + padding: 24px 24px 128.9px; + border-radius: 16px; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + background-color: #ffffff; + margin-bottom: 36px; + color: #333333; + overflow: hidden; + + &:hover { + text-decoration: none; + } + @media (max-width: $tablet) { + width: 327px; + height: 216px; + padding: 24px 20px; + } + + .post-title { + font-size: 24px; + font-weight: normal; + line-height: 1.25; + letter-spacing: normal; + margin-bottom: 24px; + + @media (max-width: $tablet) { + font-size: 18px; + font-weight: normal; + line-height: 1.6; + letter-spacing: 0.43px; + } + } + + .post-summary { + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 9; + -webkit-box-orient: vertical; + @media (max-width: $tablet) { + display: none; + } + } + } +} +.post-info { + display: flex; + justify-content: space-between; + font-size: 16px; + font-weight: normal; + line-height: 1.63; + letter-spacing: 0.43px; + color: #8c8b8e; + margin-bottom: 24px; + p { + text-transform: uppercase; + } +} +.post { + .post-content { + max-width: 853px; + margin: 0 auto; + margin-bottom: 120px; + padding-top: 55px; + @media (max-width: $tablet) { + padding: 35px 24px; + word-break: break-word; + margin-top: 85px; + } + } + h2 { + margin-bottom: 32px; + margin-top: 42px; + } + .post-header { + border-bottom: 2px solid rgba(255, 109, 5, 0.24); + margin-bottom: 24px; + padding-bottom: 26px; + } + .post-card { + width: 381px; + height: 216px; + padding: 24px; + display: flex; + flex-direction: column; + justify-content: space-between; + @media (max-width: $tablet) { + width: 327px; + height: 216px; + padding: 24px 19.2px 24.7px 20px; + } + } + .post-info { + margin: 0; + p { + font-size: 14px; + font-weight: bold; + line-height: normal; + letter-spacing: 2px; + } + } + .post-title { + margin-bottom: 12px !important; + font-size: 18px; + font-weight: normal; + line-height: 1.6; + letter-spacing: 0.43px; + } +} diff --git a/website/www/site/assets/scss/_calendar.scss b/website/www/site/assets/scss/_calendar.scss index 69e2bf81a291..c78c16081571 100644 --- a/website/www/site/assets/scss/_calendar.scss +++ b/website/www/site/assets/scss/_calendar.scss @@ -209,7 +209,7 @@ min-height: 456px; .calendar-card-small { - max-width: 327px; + width: 327px; height: 216px; padding: 24px 20px; diff --git a/website/www/site/assets/scss/_cards.sass b/website/www/site/assets/scss/_cards.sass deleted file mode 100644 index a1562d0dde1d..000000000000 --- a/website/www/site/assets/scss/_cards.sass +++ /dev/null @@ -1,69 +0,0 @@ -/*! - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -.cards - background-image: url(../images/cards_bg.svg) - background-size: cover - background-repeat: no-repeat - background-position: top - text-align: center - margin-bottom: $pad*2 - - .cards__title - +type-h2 - color: #fff - padding-top: $pad-md - margin-bottom: $pad - - .cards__body - max-width: 550px - +type-body - margin: 0 auto - - .cards__cards - margin-bottom: $pad*2 - +md - display: flex - justify-content: center - align-items: center - - .cards__cards__card - background: #fff - box-shadow: $box-shadow - max-width: 300px - margin: 0 auto $pad - padding: $pad*1.5 - +md - margin: 0 $pad/2 - - .cards__cards__card__body - margin-bottom: $pad - +type-h3 - - .cards__cards__card__user - display: flex - justify-content: center - align-items: center - - .cards__cards__card__user__icon - border-radius: 100% - background: #efefef - width: 40px - height: 40px - - .cards__cards__card__user__name - margin-left: $pad/2 diff --git a/website/www/site/assets/scss/_ctas.sass b/website/www/site/assets/scss/_ctas.sass index 325d4f1b07cc..ce101cf6d587 100644 --- a/website/www/site/assets/scss/_ctas.sass +++ b/website/www/site/assets/scss/_ctas.sass @@ -15,14 +15,55 @@ * limitations under the License. */ + .ctas - text-align: center - margin: $pad-xl 0 + display: flex + justify-content: center + align-items: center + width: 100% + height: 96px + position: sticky + z-index: 1050 + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06) + background-color: #ffffff + margin-top: -5px + + @media (max-width: $ak-breakpoint-lg) + flex-wrap: nowrap; + overflow-x: auto; + width: auto; + justify-content: flex-start + top: calc(100% - 96px) + + + + &_row + margin: 0 0 0 90px + max-width: 184px; + @media (max-width: $ak-breakpoint-lg) + margin: 0 0 0 24px + + &_button + width: 184px + height: 46px + border-radius: 100px + background-color: #f26628 + font-size: 14px + font-weight: bold + line-height: normal + letter-spacing: 0.39px + color: #ffffff + text-transform: uppercase + display: flex + align-items: center + justify-content: center + + i + margin-right: 12px - .ctas__ctas - &--top - margin-bottom: $pad + &:hover + text-decoration: none + color: #ffffff - .ctas__title - +type-h2 - margin-bottom: $pad +.to-bottom + top: calc(100% - 96px) diff --git a/website/www/site/assets/scss/_footer.sass b/website/www/site/assets/scss/_footer.sass index a52ba8d115a5..97f2b24b8093 100644 --- a/website/www/site/assets/scss/_footer.sass +++ b/website/www/site/assets/scss/_footer.sass @@ -25,26 +25,24 @@ color: #fff .footer__contained +contained - + padding: 0 30px a color: #fff .footer__cols display: flex justify-content: space-around + @media (max-width: $ak-breakpoint-lg) + display: block + .footer__cols__col__logos + padding-right: 120px + @media (max-width: $ak-breakpoint-lg) + display: flex .footer__cols__col padding: 5px box-sizing: border-box - &:first-child - +md - width: 20% - - &--md - +md - width: 20% - .footer__cols__col__title color: #fff font-weight: $font-weight-bold @@ -55,7 +53,27 @@ .footer__cols__col__logo margin-bottom: $pad + @media (max-width: $ak-breakpoint-lg) + margin-right: 50px + + .footer__flex_mobile + display: flex + flex-direction: row + justify-content: space-between + @media (max-width: $ak-breakpoint-lg) + flex-direction: column + + .wrapper-grid + display: grid + padding-bottom: 30px + grid-template-columns: repeat(4, 1fr) + grid-gap: 52px + grid-auto-rows: minmax(200px, auto) + @media (max-width: $ak-breakpoint-lg) + grid-template-columns: repeat(2, 1fr) + + .footer-wrapper + padding: 0 56px 56px 56px + @media (max-width: $ak-breakpoint-lg) + padding: 0 - .footer__bottom - margin-top: $pad-md - text-align: center diff --git a/website/www/site/assets/scss/_global.sass b/website/www/site/assets/scss/_global.sass index a4dd35517e26..7dfcfb602f95 100644 --- a/website/www/site/assets/scss/_global.sass +++ b/website/www/site/assets/scss/_global.sass @@ -26,7 +26,6 @@ body .body background: #fff margin: 0 auto - padding-top: 130px &:not(.body--index) .body__contained @@ -36,6 +35,8 @@ body figure img width: 100% + .center + margin: 0 auto .section &:not(.section--wide) @@ -67,4 +68,8 @@ body .container-main-content padding: 0 20px - position: relative \ No newline at end of file + position: relative + margin-top: 85px + + @media (min-width: $tablet) + margin-top: 0 diff --git a/website/www/site/assets/scss/_graphic.sass b/website/www/site/assets/scss/_graphic.sass index f01c72a12528..cd171f7db00b 100644 --- a/website/www/site/assets/scss/_graphic.sass +++ b/website/www/site/assets/scss/_graphic.sass @@ -16,6 +16,8 @@ */ .graphic + padding: $pad-l $pad + .graphic__image text-align: center line-height: 0 diff --git a/website/www/site/assets/scss/_hero-mobile.scss b/website/www/site/assets/scss/_hero-mobile.scss new file mode 100644 index 000000000000..343c279f4c90 --- /dev/null +++ b/website/www/site/assets/scss/_hero-mobile.scss @@ -0,0 +1,62 @@ +/*! + * 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"; + +.hero-mobile { + position: relative; + margin-bottom: 0; + display: none; + + .hero-content { + position: absolute; + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + width: 100%; + max-width: 506px; + + h3 { + @extend .hero-title; + + text-transform: uppercase; + margin: 0 auto 16px auto; + } + + h1 { + @extend .hero-heading; + + width: 300px; + margin: 0 auto 24px auto; + } + + h2 { + @extend .hero-subheading; + + width: 300px; + margin: 0 auto; + } + } +} + +@media (max-width: $mobile) { + .hero-mobile { + display: inherit; + } +} diff --git a/website/www/site/assets/scss/_hero.sass b/website/www/site/assets/scss/_hero.sass deleted file mode 100644 index 63c22b9282a5..000000000000 --- a/website/www/site/assets/scss/_hero.sass +++ /dev/null @@ -1,156 +0,0 @@ -/*! - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -.hero-bg - background-image: url(../images/hero_bg_flat.svg) - background-repeat: no-repeat - background-size: cover - background-position: top center - margin-top: -50px - +md - background-size: 100% - padding-bottom: $pad - -.hero - padding-top: $pad-xl - margin-bottom: $pad-md - position: relative - z-index: 1 - +md - padding-top: $pad-sm - margin-bottom: $pad-xl - - .hero__content - position: relative - z-index: 1 - - .hero__image - bottom: 0 - content: '' - left: 0 - line-height: 0 - position: absolute - right: 0 - top: 0 - z-index: 0 - img - position: absolute - bottom: 0 - width: 100% - - .hero__title - +type-h1 - color: #fff - max-width: 500px - margin: 0 auto $pad - text-align: center - +md - margin: 0 0 $pad - text-align: left - - .hero__ctas - text-align: center - margin-bottom: $pad-md - +md - margin-bottom: 0 - text-align: left - - &--first - margin-bottom: $pad - +md - margin-bottom: $pad-sm - - .hero__subtitle - +type-h3 - color: #fff - max-width: 540px - margin: 0 auto $pad - font-weight: $font-weight-semibold - text-align: center - +md - margin: 0 0 $pad-md - text-align: left - - .hero__blog - .hero__blog__title - +type-h4 - font-weight: $font-weight-bold - margin-bottom: $pad - text-align: center - +md - color: #fff - text-align: left - margin-bottom: $pad/2 - - .hero__blog__cards - +md - display: flex - margin: 0 -10px - - .hero__blog__cards__card - background-color: #fff - color: inherit - box-shadow: $box-shadow - padding: 20px - display: block - transition: transform 300ms ease, box-shadow 300ms ease - position: relative - max-width: 300px - margin: 0 auto $pad - +md - margin: 0 10px - - &:before - background-image: url(../images/card_border.svg) - background-position: top - background-repeat: no-repeat - background-size: cover - content: ' ' - display: block - height: 2px - position: absolute - width: 100% - left: 0 - top: 0 - - &:hover - text-decoration: none - transform: translateY(-8px) - box-shadow: $box-shadow-hover - - .hero__blog__cards__card__title - +type-body - margin-bottom: $pad - - .hero__blog__cards__card__date - +type-body-sm - font-weight: $font-weight-semibold - text-transform: uppercase - letter-spacing: 1px - - .hero__cols - +md - display: flex - min-height: 500px - - .hero__cols__col - width: 50% - display: flex - align-items: flex-end - - &:first-child - align-items: center diff --git a/website/www/site/assets/scss/_hero.scss b/website/www/site/assets/scss/_hero.scss new file mode 100644 index 000000000000..e204d1bf015d --- /dev/null +++ b/website/www/site/assets/scss/_hero.scss @@ -0,0 +1,128 @@ +/*! + * 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"; + +.hero-desktop { + position: relative; + margin-bottom: 0; + width: 100%; + height: 100%; + display: inherit; + margin-top: -30px; + + .hero-content { + position: absolute; + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + + h3 { + @extend .hero-title; + + text-transform: uppercase; + margin: 0 auto 24px auto; + } + + h1 { + @extend .hero-heading; + width: 506px; + + margin: 0 auto 36px auto; + } + + h2 { + @extend .hero-subheading; + + width: 344px; + margin: 0 auto 56px auto; + } + + a { + text-decoration: none; + } + + button { + width: 184px; + height: 46px; + padding: 15px 28px 15px 26px; + border-radius: 100px; + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + background-color: $color-white; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + border: none; + outline: none; + + span { + text-transform: uppercase; + font-size: 14px; + font-weight: bold; + letter-spacing: 0.6px; + color: $color-sun; + } + } + + button:hover { + background-color: $color-white; + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), + 0 4px 6px 0 rgba(0, 0, 0, 0.24); + } + + button:focus { + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), + 0 4px 4px 0 rgba(0, 0, 0, 0.06); + } + } +} + +@media (max-width: $tablet) { + .hero-desktop { + margin-top: 70px; + + .hero-content { + h3 { + margin: 0 auto 16px auto; + } + + h1 { + width: 300px; + margin: 0 auto 24px auto; + } + + h2 { + width: 300px; + margin: 0 auto; + } + + button { + display: none; + } + } + } +} + +@media (max-width: $mobile) { + .hero-desktop { + display: none; + } +} diff --git a/website/www/site/assets/scss/_keen-slider.scss b/website/www/site/assets/scss/_keen-slider.scss new file mode 100644 index 000000000000..08a4326e0042 --- /dev/null +++ b/website/www/site/assets/scss/_keen-slider.scss @@ -0,0 +1,40 @@ +/** + * keen-slider 5.3.2 + * The HTML touch slider carousel with the most native feeling you will get. + * https://keen-slider.io + * Copyright 2020-2020 Eric Beyer + * License: MIT + * Released on: 2020-11-10 + */ + +/*# sourceMappingURL=keen-slider.min.css.map */ +// This is pulled from "https://cdn.jsdelivr.net/npm/keen-slider@5.3.2/keen-slider.min.css" to serve the consistency +.keen-slider { + display: flex; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-touch-callout: none; + -khtml-user-select: none; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; +} +.keen-slider, +.keen-slider__slide { + overflow: hidden; + position: relative; +} +.keen-slider__slide { + width: 100%; + min-height: 100%; +} +.keen-slider[data-keen-slider-v] { + flex-wrap: wrap; +} +.keen-slider[data-keen-slider-v] .keen-slider__slide { + width: 100%; +} +.keen-slider[data-keen-slider-moves] * { + pointer-events: none; +} diff --git a/website/www/site/assets/scss/_lists.scss b/website/www/site/assets/scss/_lists.scss new file mode 100644 index 000000000000..037da8bd2eb6 --- /dev/null +++ b/website/www/site/assets/scss/_lists.scss @@ -0,0 +1,203 @@ +/*! + * 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; + ul { + font-size: 16px; + font-weight: normal; + line-height: 1.63; + letter-spacing: 0.43px; + position: relative; + li:before { + content: "\2192"; + position: absolute; + color: #ff6d05; + font-size: 24px; + line-height: 20px; + left: 0; + } + li { + list-style-type: none; + list-style-position: outside; + margin-bottom: 6px; + p { + margin: 0; + } + } + } +} +.arrow-lists-desktop { + margin-top: 36px; +} +.arrow-lists-mobile { + display: none; + .arrow-list-header { + font-size: 28px; + font-weight: 500; + line-height: 1.29; + letter-spacing: normal; + color: #333333; + text-decoration: none; + display: flex; + img { + margin-top: 17px; + width: 18px; + height: 18px; + padding-right: 16px; + transform: rotate(-90deg); + } + } + .rotate { + img { + transform: rotate(0deg); + margin-top: 26px; + } + } +} +@media (max-width: $mobile) { + .arrow-lists-desktop { + display: none; + } + .arrow-lists-mobile { + display: block; + } +} + +.icon-list { + .list { + margin-top: 64px; + max-width: 640px; + } + .list-item { + display: flex; + margin-bottom: 31px; + + .list-item-icon { + width: 44px; + height: 44px; + display: block; + margin-right: 25px; + } + .list-item-header { + font-size: 22px; + font-weight: normal; + letter-spacing: normal; + line-height: 1.36; + @media (max-width: $mobile) { + font-weight: 500; + } + } + } + .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; + } + + .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; + .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; + } + .item-description { + width: 260px; + margin-right: 32px; + margin-top: 20px; + @media (max-width: $mobile) { + margin-right: 0; + width: auto; + } + } + } + .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; + } +} 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..57eb63350808 --- /dev/null +++ b/website/www/site/assets/scss/_navbar-desktop.scss @@ -0,0 +1,174 @@ +/*! + * 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; +} + +.navigation-bar-desktop { + display: flex; + height: 96px; + width: 100%; + align-items: center; + justify-content: space-between; + 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 + + a { + @extend .component-text; + + color: $color-dark-gray; + letter-spacing: 0.2; + margin-right: 56px; + text-decoration: none; + cursor: pointer; + } + + .navbar-logo { + margin-left: 58px; + + img { + width: 88px; + } + } + + .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; + + .dropdown-toggle { + margin: 0; + } + + ul { + width: 209px; + left: -25%; + text-align: center; + border: none; + box-shadow: none; + padding-top: 34px; + padding-bottom: 0; + + a { + @extend .component-text; + } + } + } + } + + .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; + + 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; + } + } + + .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; + } +} \ No newline at end of file diff --git a/website/www/site/assets/scss/_navbar.sass b/website/www/site/assets/scss/_navbar-mobile.sass similarity index 87% rename from website/www/site/assets/scss/_navbar.sass rename to website/www/site/assets/scss/_navbar-mobile.sass index f4b4ea6bcae7..762b5e517b9a 100644 --- a/website/www/site/assets/scss/_navbar.sass +++ b/website/www/site/assets/scss/_navbar-mobile.sass @@ -23,6 +23,7 @@ .navbar-header margin-left: $pad + float: none .navbar-brand +md @@ -40,16 +41,17 @@ color: $color-dark-gray .navbar-toggle - float: left + margin-right: 24px .icon-bar - background-color: $color-dark-gray + background-color: $color-sun + height: 3px - @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 @@ -59,12 +61,13 @@ top: 0 transition: transform 100ms linear width: calc(100% - 32px) + right: 0 .navbar-nav > li width: 100% &.closed - transform: translateX(-100%) + transform: translateX(100%) &.open transform: translateX(0) @@ -78,7 +81,7 @@ top: 0 transition: opacity 200ms - @media (max-width: $ak-breakpoint-lg) + @media (max-width: $tablet) display: block &.closed @@ -89,6 +92,6 @@ opacity: 0.5 width: 100% - @media (max-width: $ak-breakpoint-lg) + @media (max-width: $tablet) .navbar-right margin-right: -15px diff --git a/website/www/site/assets/scss/_quotes.scss b/website/www/site/assets/scss/_quotes.scss new file mode 100644 index 000000000000..6d59798289f0 --- /dev/null +++ b/website/www/site/assets/scss/_quotes.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"; + +.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 { + width: 172px; + } + } + + :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; + } + + .quotes-desktop { + display: none; + } + + .keen-slider { + display: flex; + } + + .dots { + display: flex; + } + } +} diff --git a/website/www/site/assets/scss/_section-nav.sass b/website/www/site/assets/scss/_section-nav.sass index 61aff9f462ea..d8c4ed195b83 100644 --- a/website/www/site/assets/scss/_section-nav.sass +++ b/website/www/site/assets/scss/_section-nav.sass @@ -97,7 +97,7 @@ @media (max-width: $ak-breakpoint-lg) background-color: $color-light-gray bottom: 0 - left: 0 + right: 0 max-width: 256px position: fixed top: 0 @@ -110,7 +110,7 @@ overflow-y: auto &.closed - transform: translateX(-100%) + transform: translateX(100%) &.open transform: translateX(0) diff --git a/website/www/site/assets/scss/_typography.scss b/website/www/site/assets/scss/_typography.scss index 99eacfe4ca04..807619cadd05 100644 --- a/website/www/site/assets/scss/_typography.scss +++ b/website/www/site/assets/scss/_typography.scss @@ -14,8 +14,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - - @import "media"; + +@import "media"; .component-title { font-size: 36px; @@ -88,6 +88,44 @@ 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; @@ -95,4 +133,7 @@ .component-large-header { font-size: 24px; } -} \ No newline at end of file + .hero-heading { + font-size: 32px; + } +} diff --git a/website/www/site/assets/scss/_vars.sass b/website/www/site/assets/scss/_vars.sass index df4276a042b1..626313d993b2 100644 --- a/website/www/site/assets/scss/_vars.sass +++ b/website/www/site/assets/scss/_vars.sass @@ -24,6 +24,10 @@ $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 diff --git a/website/www/site/assets/scss/main.scss b/website/www/site/assets/scss/main.scss index e4075a1fe51a..903ba6db65a0 100644 --- a/website/www/site/assets/scss/main.scss +++ b/website/www/site/assets/scss/main.scss @@ -20,26 +20,30 @@ // 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"; -@import "_media.scss"; // Components. @import "_button.sass"; // Modules. -@import "_cards.sass"; @import "_ctas.sass"; @import "_footer.sass"; @import "_graphic.sass"; @import "_header.sass"; -@import "_hero.sass"; +@import "_hero.scss"; +@import "_hero-mobile.scss"; @import "_logos.scss"; @import "_pillars.scss"; @import "_section-nav.sass"; @import "_page-nav.sass"; @import "_table-wrapper.sass"; -@import "_calendar.scss"; \ No newline at end of file +@import "_calendar.scss"; +@import "_quotes.scss"; +@import "navbar-desktop.scss"; +@import "_blog.scss"; +@import "_lists.scss"; diff --git a/website/www/site/config.toml b/website/www/site/config.toml index b334ee6d89bb..e15450b3a3ee 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/powered-by.md b/website/www/site/content/en/community/powered-by.md index ad22039388b9..dd45ece15b4b 100644 --- a/website/www/site/content/en/community/powered-by.md +++ b/website/www/site/content/en/community/powered-by.md @@ -22,4 +22,6 @@ To add yourself to the list, please open a [pull request](https://github.com/apa 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 417565bba1c3..4a095b70ba38 100644 --- a/website/www/site/content/en/contribute/_index.md +++ b/website/www/site/content/en/contribute/_index.md @@ -65,7 +65,7 @@ To contribute code, you need - [Docker](https://www.docker.com/) installed for some tasks including building worker containers and testing this website changes locally - [Go](https://golang.org) 1.12 or later installed for Go SDK development - - Python 2.7, 3.5, 3.6, and 3.7. Yes, you need all four versions installed. + - Python 3.6, 3.7, and 3.8. Yes, you need all three versions installed. - pip, setuptools, virtualenv, and tox installed for Python development - for large contributions, a signed [Individual Contributor License Agreement](https://www.apache.org/licenses/icla.pdf) (ICLA) to the Apache @@ -83,6 +83,11 @@ sudo apt-get install \ docker-ce ``` +On some systems (like Ubuntu 20.04) these need to be installed also +``` +pip3 install grpcio-tools mypy-protobuf +``` + You also need to [install Go](https://golang.org/doc/install). Once Go is installed, install goavro: @@ -94,6 +99,15 @@ $ go get github.com/linkedin/goavro gLinux users should configure their machines for sudoless Docker. +Alternatively, you can use the Docker based local development environment to wrap your clone of the Beam repo +into a container meeting the requirements above. + +You can start this container using the [start-build-env.sh](https://github.com/apache/beam/blob/master/start-build-env.sh) +script which is part of the Beam repo: +``` +./start-build-env.sh +``` + ### Connect With the Beam community 1. Consider subscribing to the [dev@ mailing list](/community/contact-us/), especially diff --git a/website/www/site/content/en/documentation/_index.md b/website/www/site/content/en/documentation/_index.md index ffd6c21e7989..18513a9cf1f5 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/ --- + # Developing I/O connectors for Java +**IMPORTANT:** Use ``Splittable DoFn`` to develop your new I/O. For more details, read the +[new I/O connector overview](/documentation/io/developing-io-overview/). + To connect to a data store that isn’t supported by Beam’s existing I/O connectors, you must create a custom I/O connector that usually consist of a source and a sink. All Beam sources and sinks are composite transforms; however, diff --git a/website/www/site/content/en/documentation/io/developing-io-overview.md b/website/www/site/content/en/documentation/io/developing-io-overview.md index 0ea507f2bf79..c8e0482aa9d3 100644 --- a/website/www/site/content/en/documentation/io/developing-io-overview.md +++ b/website/www/site/content/en/documentation/io/developing-io-overview.md @@ -46,33 +46,32 @@ are the recommended steps to get started: For **bounded (batch) sources**, there are currently two options for creating a Beam source: +1. Use `Splittable DoFn`. + 1. Use `ParDo` and `GroupByKey`. -1. Use the `Source` interface and extend the `BoundedSource` abstract subclass. -`ParDo` is the recommended option, as implementing a `Source` can be tricky. See -[When to use the Source interface](#when-to-use-source) for a list of some use -cases where you might want to use a `Source` (such as -[dynamic work rebalancing](/blog/2016/05/18/splitAtFraction-method.html)). +`Splittable DoFn` is the recommended option, as it's the most recent source framework for both +bounded and unbounded sources. This is meant to replace the `Source` APIs( +[BoundedSource](https://beam.apache.org/releases/javadoc/current/org/apache/beam/sdk/io/BoundedSource.html) and +[UnboundedSource](https://beam.apache.org/releases/javadoc/current/org/apache/beam/sdk/io/UnboundedSource.html)) +in the new system. Read +[Splittable DoFn Programming Guide](/learn/programming-guide/#splittable-dofns) for how to write one +Splittable DoFn. For more information, see the +[roadmap for multi-SDK connector efforts](/roadmap/connectors-multi-sdk/). -(Java only) For **unbounded (streaming) sources**, you must use the `Source` -interface and extend the `UnboundedSource` abstract subclass. `UnboundedSource` -supports features that are useful for streaming pipelines, such as -checkpointing. +For Java and Python **unbounded (streaming) sources**, you must use the `Splittable DoFn`, which +supports features that are useful for streaming pipelines, including checkpointing, controlling +watermark, and tracking backlog. -Splittable DoFn is a new sources framework that is under development and will -replace the other options for developing bounded and unbounded sources. For more -information, see the -[roadmap for multi-SDK connector efforts](/roadmap/connectors-multi-sdk/). -### When to use the Source interface {#when-to-use-source} +### When to use the Splittable DoFn interface {#when-to-use-splittable-dofn} -If you are not sure whether to use `Source`, feel free to email the [Beam dev -mailing list](/get-started/support) and we can discuss the -specific pros and cons of your case. +If you are not sure whether to use `Splittable DoFn`, feel free to email the +[Beam dev mailing list](/get-started/support) and we can discuss the specific pros and cons of your +case. -In some cases, implementing a `Source` might be necessary or result in better -performance: +In some cases, implementing a `Splittable DoFn` might be necessary or result in better performance: * **Unbounded sources:** `ParDo` does not work for reading from unbounded sources. `ParDo` does not support checkpointing or mechanisms like de-duping @@ -90,22 +89,40 @@ performance: jobs. Depending on your data source, dynamic work rebalancing might not be possible. -* **Splitting into parts of particular size recommended by the runner:** `ParDo` - does not receive `desired_bundle_size` as a hint from runners when performing - initial splitting. +* **Splitting initially to increase parallelism:** `ParDo` + does not have the ability to perform initial splitting. For example, if you'd like to read from a new file format that contains many records per file, or if you'd like to read from a key-value store that supports read operations in sorted key order. -### Source lifecycle {#source} -Here is a sequence diagram that shows the lifecycle of the Source during - the execution of the Read transform of an IO. The comments give useful - information to IO developers such as the constraints that - apply to the objects or particular cases such as streaming mode. - - -![This is a sequence diagram that shows the lifecycle of the Source](/images/source-sequence-diagram.svg) +### I/O examples using SDFs +**Java Examples** + +* [Kafka](https://github.com/apache/beam/blob/571338b0cc96e2e80f23620fe86de5c92dffaccc/sdks/java/io/kafka/src/main/java/org/apache/beam/sdk/io/kafka/ReadFromKafkaDoFn.java#L118): +An I/O connector for [Apache Kafka](https://kafka.apache.org/) +(an open-source distributed event streaming platform). +* [Watch](https://github.com/apache/beam/blob/571338b0cc96e2e80f23620fe86de5c92dffaccc/sdks/java/core/src/main/java/org/apache/beam/sdk/transforms/Watch.java#L787): +Uses a polling function producing a growing set of outputs for each input until a per-input +termination condition is met. +* [Parquet](https://github.com/apache/beam/blob/571338b0cc96e2e80f23620fe86de5c92dffaccc/sdks/java/io/parquet/src/main/java/org/apache/beam/sdk/io/parquet/ParquetIO.java#L365): +An I/O connector for [Apache Parquet](https://parquet.apache.org/) +(an open-source columnar storage format). +* [HL7v2](https://github.com/apache/beam/blob/6fdde4f4eab72b49b10a8bb1cb3be263c5c416b5/sdks/java/io/google-cloud-platform/src/main/java/org/apache/beam/sdk/io/gcp/healthcare/HL7v2IO.java#L493): +An I/O connector for HL7v2 messages (a clinical messaging format that provides data about events +that occur inside an organization) part of +[Google’s Cloud Healthcare API](https://cloud.google.com/healthcare). +* [BoundedSource wrapper](https://github.com/apache/beam/blob/571338b0cc96e2e80f23620fe86de5c92dffaccc/sdks/java/core/src/main/java/org/apache/beam/sdk/io/Read.java#L248): +A wrapper which converts an existing [BoundedSource](https://beam.apache.org/releases/javadoc/current/org/apache/beam/sdk/io/BoundedSource.html) +implementation to a splittable DoFn. +* [UnboundedSource wrapper](https://github.com/apache/beam/blob/571338b0cc96e2e80f23620fe86de5c92dffaccc/sdks/java/core/src/main/java/org/apache/beam/sdk/io/Read.java#L432): +A wrapper which converts an existing [UnboundedSource](https://beam.apache.org/releases/javadoc/current/org/apache/beam/sdk/io/UnboundedSource.html) +implementation to a splittable DoFn. + +**Python Examples** +* [BoundedSourceWrapper](https://github.com/apache/beam/blob/571338b0cc96e2e80f23620fe86de5c92dffaccc/sdks/python/apache_beam/io/iobase.py#L1375): +A wrapper which converts an existing [BoundedSource](https://beam.apache.org/releases/pydoc/current/apache_beam.io.iobase.html#apache_beam.io.iobase.BoundedSource) +implementation to a splittable DoFn. ### Using ParDo and GroupByKey @@ -157,7 +174,6 @@ example: cannot be parallelized. In this case, the `ParDo` would open the file and read in sequence, producing a `PCollection` of records from the file. - ## Sinks To create a Beam sink, we recommend that you use a `ParDo` that writes the @@ -169,8 +185,6 @@ For **file-based sinks**, you can use the `FileBasedSink` abstraction that is provided by both the Java and Python SDKs. See our language specific implementation guides for more details: -* [Developing I/O connectors for Java](/documentation/io/developing-io-java/) -* [Developing I/O connectors for Python](/documentation/io/developing-io-python/) diff --git a/website/www/site/content/en/documentation/io/developing-io-python.md b/website/www/site/content/en/documentation/io/developing-io-python.md index 039b633c4209..7c7705bb1be8 100644 --- a/website/www/site/content/en/documentation/io/developing-io-python.md +++ b/website/www/site/content/en/documentation/io/developing-io-python.md @@ -19,6 +19,9 @@ limitations under the License. --> # Developing I/O connectors for Python +**IMPORTANT:** Please use ``Splittable DoFn`` to develop your new I/O. For more details, please read +the [new I/O connector overview](/documentation/io/developing-io-overview/). + To connect to a data store that isn’t supported by Beam’s existing I/O connectors, you must create a custom I/O connector that usually consist of a source and a sink. All Beam sources and sinks are composite transforms; however, diff --git a/website/www/site/content/en/documentation/programming-guide.md b/website/www/site/content/en/documentation/programming-guide.md index 3eee8fef6d16..477152c23cb1 100644 --- a/website/www/site/content/en/documentation/programming-guide.md +++ b/website/www/site/content/en/documentation/programming-guide.md @@ -31,7 +31,7 @@ how to implement Beam concepts in your pipelines. {{< language-switcher java py >}} {{< paragraph class="language-py" >}} -The Python SDK supports Python 2.7, 3.5, 3.6, and 3.7. New Python SDK releases will stop supporting Python 2.7 in 2020 ([BEAM-8371](https://issues.apache.org/jira/browse/BEAM-8371)). For best results, use Beam with Python 3. +The Python SDK supports Python 3.6, 3.7, and 3.8. Beam 2.24.0 was the last Python SDK release to support Python 2 and 3.5. {{< /paragraph >}} ## 1. Overview {#overview} diff --git a/website/www/site/content/en/documentation/sdks/python-dependencies.md b/website/www/site/content/en/documentation/sdks/python-dependencies.md index 80130e5fb1cd..4e0bf0a36c51 100644 --- a/website/www/site/content/en/documentation/sdks/python-dependencies.md +++ b/website/www/site/content/en/documentation/sdks/python-dependencies.md @@ -41,18 +41,10 @@ Dependencies for your Beam SDK version are listed in `setup.py` in the Beam repo You can also retrieve the dependency list from the command line using the following process: -1. Create a clean virtual environment on your local machine. - - Python 3: - - ``` - $ python3 -m venv env && source env/bin/activate - ``` - - Python 2: +1. Create a clean virtual environment on your local machine using a supported python version. ``` - $ pip install virtualenv && virtualenv env && source env/bin/activate + $ python -m venv env && source env/bin/activate ``` 2. [Install the Beam Python SDK](/get-started/quickstart-py/#download-and-install). diff --git a/website/www/site/content/en/get-started/quickstart-py.md b/website/www/site/content/en/get-started/quickstart-py.md index b2a503e5803d..5036ee0020b7 100644 --- a/website/www/site/content/en/get-started/quickstart-py.md +++ b/website/www/site/content/en/get-started/quickstart-py.md @@ -23,13 +23,13 @@ If you're interested in contributing to the Apache Beam Python codebase, see the {{< toc >}} -The Python SDK supports Python 2.7, 3.5, 3.6, and 3.7. New Python SDK releases will stop supporting Python 2.7 in 2020 ([BEAM-8371](https://issues.apache.org/jira/browse/BEAM-8371)). For best results, use Beam with Python 3. +The Python SDK supports Python 3.6, 3.7, and 3.8. Beam 2.24.0 was the last release with support for Python 2.7 and 3.5. ## Set up your environment ### Check your Python version -The Beam SDK requires Python 2 users to use Python 2.7 and Python 3 users to use Python 3.5 or higher. Check your version by running: +The Beam SDK requires Python users to use Python version 3.6 or higher. Check your version by running: {{< highlight >}} python --version diff --git a/website/www/site/content/en/get-started/wordcount-example.md b/website/www/site/content/en/get-started/wordcount-example.md index 50634c75b9ad..940eb133bacf 100644 --- a/website/www/site/content/en/get-started/wordcount-example.md +++ b/website/www/site/content/en/get-started/wordcount-example.md @@ -147,7 +147,7 @@ Pipeline p = Pipeline.create(options); {{< /highlight >}} {{< highlight go >}} -p := beam.NewPipeline +p := beam.NewPipeline() s := p.Root() {{< /highlight >}} 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..6c07964ed68e --- /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/cards.yaml b/website/www/site/data/en/documentation_sdks.yaml similarity index 60% rename from website/www/site/data/en/cards.yaml rename to website/www/site/data/en/documentation_sdks.yaml index a2981e7fba86..a1af9475b594 100644 --- a/website/www/site/data/en/cards.yaml +++ b/website/www/site/data/en/documentation_sdks.yaml @@ -10,9 +10,9 @@ # 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 +- 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/quotes.yaml b/website/www/site/data/en/quotes.yaml new file mode 100644 index 000000000000..537171a7d4c2 --- /dev/null +++ b/website/www/site/data/en/quotes.yaml @@ -0,0 +1,23 @@ +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. + +# TODO: +# Placeholder texts should be updated later +- text: A framework that delivers the flexibility and advanced functionality our customers need. + icon: icons/quote-icon.svg + logoUrl: images/quote-paypal-logo.png +- text: A framework that delivers the flexibility and advanced functionality our customers need. + icon: icons/quote-icon.svg + logoUrl: images/quote-paypal-logo.png +- text: A framework that delivers the flexibility and advanced functionality our customers need. + icon: icons/quote-icon.svg + logoUrl: images/quote-paypal-logo.png \ No newline at end of file diff --git a/website/www/site/i18n/blog/en.yaml b/website/www/site/i18n/blog/en.yaml index 4eef374dc95c..4bd552811c3f 100644 --- a/website/www/site/i18n/blog/en.yaml +++ b/website/www/site/i18n/blog/en.yaml @@ -9,10 +9,9 @@ # 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" -- 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" + translation: "Blog" + +- id: blog-loadmore + translation: "Load more" diff --git a/website/www/site/i18n/home/en.yaml b/website/www/site/i18n/home/en.yaml index 8a1ac53eecf8..6ae87c04f465 100644 --- a/website/www/site/i18n/home/en.yaml +++ b/website/www/site/i18n/home/en.yaml @@ -10,10 +10,6 @@ # 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 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/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..ae6255e50683 100644 --- a/website/www/site/i18n/navbar/en.yaml +++ b/website/www/site/i18n/navbar/en.yaml @@ -16,10 +16,12 @@ 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 diff --git a/website/www/site/layouts/_default/baseof.html b/website/www/site/layouts/_default/baseof.html index 6c245c51ac9f..52f805996651 100644 --- a/website/www/site/layouts/_default/baseof.html +++ b/website/www/site/layouts/_default/baseof.html @@ -19,13 +19,15 @@ {{ 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 "hooks/body-end.html"}} diff --git a/website/www/site/layouts/blog/baseof.html b/website/www/site/layouts/blog/baseof.html index fc90318588ca..f0759762da9a 100644 --- a/website/www/site/layouts/blog/baseof.html +++ b/website/www/site/layouts/blog/baseof.html @@ -1,14 +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. See accompanying LICENSE file. -*/}} + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. See accompanying LICENSE file. + */}} @@ -17,7 +17,7 @@ {{ partial "header.html" . }} -
+
{{ block "main" . }}{{ end }}
{{ partial "footer.html" . }} diff --git a/website/www/site/layouts/blog/list.html b/website/www/site/layouts/blog/list.html index 9680f9c977d2..3f8eed19c00c 100644 --- a/website/www/site/layouts/blog/list.html +++ b/website/www/site/layouts/blog/list.html @@ -1,50 +1,109 @@ {{/* - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - http://www.apache.org/licenses/LICENSE-2.0 - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. See accompanying LICENSE file. -*/}} - -{{ define "main" }} -

{{ T "blog-title" }}

- -

{{ T "blog-subtitle" }}

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

{{ .Title }}

-

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

- - {{ .Summary | markdownify }} - - {{ if .Truncated }} -

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

- {{ end }} - -
- {{ end }} -{{ end }} + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. See accompanying LICENSE file. + */}} + + {{ define "main" }} +
+

{{ T "blog-title" }}

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

+ {{ delimit .Params.categories ", " " & " }} +

+

{{ .Date.Format "2006/01/02" }}

+
+

{{ .Title }}

+

+ {{ delimit $authors ", " " & "}} +

+
{{ .Summary | plainify | chomp }}
+ + + {{ end }} +
+
+ +
+ +
+ + + + {{ end }} diff --git a/website/www/site/layouts/blog/single.html b/website/www/site/layouts/blog/single.html index 5dc14eaf490b..7a1903620a07 100644 --- a/website/www/site/layouts/blog/single.html +++ b/website/www/site/layouts/blog/single.html @@ -1,36 +1,75 @@ {{/* -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - http://www.apache.org/licenses/LICENSE-2.0 -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. See accompanying LICENSE file. -*/}} + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. See accompanying LICENSE file. + */}} {{ define "main" }} {{ $authors := .Params.authors }}
- +
+
+

+ {{ delimit .Params.categories ", " " & " }} +

+

{{ .Date.Format "2006/01/02" }}

+
-

{{ .Title }}

-

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

{{ .Title }}

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

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

Latest from the blog

+
+
+ {{ range first 3 (after 1 (where .Site.Pages.ByPublishDate "Section" "blog")) }} + +
+

+ {{ if .Params.categories }} + {{ delimit .Params.categories ", " " & " }} + {{ end }} +

+

{{ .Date.Format "2006/01/02" }}

+
+
+

{{ .Title }}

+

+ {{ if .Params.authors }} + {{ delimit .Params.authors ", " " & " }} + {{ end }} +

+
+ + {{ end }} +
{{ end }} diff --git a/website/www/site/layouts/documentation/baseof.html b/website/www/site/layouts/documentation/baseof.html index 971aeeddc322..12e7005afb9a 100644 --- a/website/www/site/layouts/documentation/baseof.html +++ b/website/www/site/layouts/documentation/baseof.html @@ -31,7 +31,7 @@ {{ .TableOfContents }} -
+
{{ .Content }}
diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html index bbfdf71b9132..aea85dce12ab 100644 --- a/website/www/site/layouts/index.html +++ b/website/www/site/layouts/index.html @@ -11,47 +11,28 @@ */}} {{ define "hero-section" }} -
-
-
-
-
-
- {{ T "home-hero-title" }} -
-
- {{ T "home-hero-subtitle" }} -
-
- {{ T "home-learn-more" }} - {{ T "home-try-beam" }} - {{ T "home-download-beam" . }} -
-
- {{ T "home-java-quickstart" }} - {{ T "home-python-quickstart" }} - {{ T "home-go-quickstart" }} -
-
-
-
-
-
- {{ T "home-hero-blog-title" }} -
-
- - {{ range ( where site.RegularPages "Section" "blog" | first 3 ) }} - -
{{ .Title }}
-
{{ .Date.Format "Jan 2, 2006" }}
- - {{ end }} - -
-
-
-
+
+
+

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

+

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

+

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

+ + + +
+
+
+
+

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

+

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

+

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

{{ end }} @@ -154,6 +135,32 @@

{{ end }} +{{ define "quotes-section" }} +
+
+ {{ T "home-quotes-title" }} +
+ +
+ {{ $data := index $.Site.Data .Site.Language.Lang }} + {{ range $quote := $data.quotes }} + {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text "logoUrl" $quote.logoUrl) }} + {{ end }} +
+ + {{/* + The id "my-keen-slider" and "dots" should be named as defaults to make the external library (Keen Slider) works well + */}} +
+ {{ $data := index $.Site.Data .Site.Language.Lang }} + {{ range $quote := $data.quotes }} + {{ partial "quotes/quote-mobile.html" (dict "icon" $quote.icon "text" $quote.text "logoUrl" $quote.logoUrl) }} + {{ end }} +
+
+
+{{ end }} + {{ define "logos-section" }}
@@ -169,51 +176,19 @@

{{ end }} -{{ define "cards-section" }} -
-
-
- {{ T "home-cards-title" }} -
-
- {{ $data := index $.Site.Data .Site.Language.Lang }} - {{ range $card := $data.cards }} -
-
- {{ $card.quote }} -
-
- {{/* TODO: Implement icons (Original comment from Jekyll) -
-
- */}} -
- {{ $card.name }} -
-
-
- {{ end }} -
-
- {{ T "home-cards-body" }} {{ T "home-contribute" }} {{ T "home-section" }}. -
-
-
-{{ end }} - {{ define "ctas-section" }} -
-
- {{ T "home-ctas-title" }} -
-
- {{ T "home-learn-more" }} - {{ T "home-download-beam" . }} -
-
- {{ T "home-java-quickstart" }} - {{ T "home-python-quickstart" }} - {{ T "home-go-quickstart" }} -
+
+
+ {{ T "home-learn-more" }} +
+
+ {{ T "home-java-quickstart" }} +
+
+ {{ T "home-python-quickstart" }} +
+
+ {{ T "home-go-quickstart" }}
+
{{ end }} diff --git a/website/www/site/layouts/partials/documentation/icon-row.html b/website/www/site/layouts/partials/documentation/icon-row.html new file mode 100644 index 000000000000..f07350ce88db --- /dev/null +++ b/website/www/site/layouts/partials/documentation/icon-row.html @@ -0,0 +1,27 @@ +{{/* + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. See accompanying LICENSE file. + */}} + +
+
+ {{ if .logo }} +
+ {{ with resources.Get .logo }} + {{ .Content | safeHTML }} + {{ end }} +
+ {{ end }} +
+ {{ .header.text | markdownify }} +

{{ .text | safeHTML }}

+
+
+
diff --git a/website/www/site/layouts/partials/footer.html b/website/www/site/layouts/partials/footer.html index 260a38062025..b04a96ef89f8 100644 --- a/website/www/site/layouts/partials/footer.html +++ b/website/www/site/layouts/partials/footer.html @@ -1,63 +1,68 @@ {{/* - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - http://www.apache.org/licenses/LICENSE-2.0 - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. See accompanying LICENSE file. -*/}} + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. See accompanying LICENSE file. + */}} - diff --git a/website/www/site/layouts/partials/header.html b/website/www/site/layouts/partials/header.html index 73c9867acffc..af8417087c20 100644 --- a/website/www/site/layouts/partials/header.html +++ b/website/www/site/layouts/partials/header.html @@ -10,18 +10,18 @@ limitations under the License. See accompanying LICENSE file. */}} -
- {{ range first 3 (after 1 (where .Site.Pages.ByPublishDate "Section" "blog")) }} + {{ range first 3 (after 1 (where .Site.Pages.ByPublishDate.Reverse "Section" "blog")) }}
From bc2916c05335b257955e62e7113582b539a9c7b6 Mon Sep 17 00:00:00 2001 From: Jakub Sadowski Date: Tue, 29 Dec 2020 10:10:37 +0100 Subject: [PATCH 04/24] fix calendar --- website/www/site/assets/scss/_global.sass | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/website/www/site/assets/scss/_global.sass b/website/www/site/assets/scss/_global.sass index 7dfcfb602f95..a65ae4c82a32 100644 --- a/website/www/site/assets/scss/_global.sass +++ b/website/www/site/assets/scss/_global.sass @@ -73,3 +73,10 @@ body @media (min-width: $tablet) margin-top: 0 +.desktop + @media (max-width: $ak-breakpoint-lg) + display: none +.mobile + display: none + @media (max-width: $ak-breakpoint-lg) + display: block From 847301db87f3f5364d2d7605388ce166a283805b Mon Sep 17 00:00:00 2001 From: Jakub Sadowski Date: Mon, 4 Jan 2021 13:04:22 +0100 Subject: [PATCH 05/24] external links --- .../www/site/data/en/documentation_runners.yaml | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/website/www/site/data/en/documentation_runners.yaml b/website/www/site/data/en/documentation_runners.yaml index 6c07964ed68e..0d5901a45253 100644 --- a/website/www/site/data/en/documentation_runners.yaml +++ b/website/www/site/data/en/documentation_runners.yaml @@ -15,20 +15,20 @@ 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. + description: Runs on Apache Flink. - name: { text: "SparkRunner:", link: /documentation/runners/spark/ } icon: icons/documentation/runners/spark-icon.svg - description: Runs on Apache Spark. + 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. + 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. + description: Runs on Apache Samza. - name: { text: "NemoRunner:", link: /documentation/runners/nemo/ } icon: icons/documentation/runners/nemo-icon.svg - description: Runs on Apache Nemo. + description: Runs on Apache Nemo. - name: { text: "JetRunner:", link: /documentation/runners/jet/ } - description: Runs on Hazelcast Jet. + description: Runs on Hazelcast Jet. - name: { text: "Twister2Runner:", link: /documentation/runners/twister2/ } - description: Runs on Twister2. + description: Runs on Twister2. From a9e24c5036eb33971614e3ceaba24f5764e82cb8 Mon Sep 17 00:00:00 2001 From: Jakub Sadowski Date: Mon, 4 Jan 2021 14:04:23 +0100 Subject: [PATCH 06/24] minor fix --- website/www/site/layouts/blog/list.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/www/site/layouts/blog/list.html b/website/www/site/layouts/blog/list.html index 3f8eed19c00c..6e8bd5ff4720 100644 --- a/website/www/site/layouts/blog/list.html +++ b/website/www/site/layouts/blog/list.html @@ -23,7 +23,7 @@

{{ T "blog-title" }}

{{ if ( not ( in ($.Scratch.Get "categories") . ) ) }} {{ $.Scratch.Add "categories" . }} {{ end }} - {{ else if ( printf "%T" . ) "[]string" }} + {{ else if eq ( printf "%T" . ) "[]string" }} {{ range . }} {{ if ( not ( in ($.Scratch.Get "categories") . ) ) }} {{ $.Scratch.Add "categories" . }} From 18e291bfddf21e206d830f7b1af3930a33c3bd9c Mon Sep 17 00:00:00 2001 From: Jakub Sadowski Date: Thu, 28 Jan 2021 14:38:00 +0100 Subject: [PATCH 07/24] changes without content --- website/www/site/assets/icons/close-icon.svg | 22 + .../www/site/assets/icons/commercial-icon.svg | 29 ++ .../site/assets/icons/community/bee-icon.svg | 38 ++ .../site/assets/icons/community/box-icon.svg | 22 + .../assets/icons/community/calendar-icon.svg | 23 + .../assets/icons/community/contact-us/bug.svg | 22 + .../icons/community/contact-us/discussion.svg | 23 + .../icons/community/contact-us/gitArrows.svg | 23 + .../icons/community/contact-us/knot.svg | 22 + .../icons/community/contact-us/messages.svg | 22 + .../community/contact-us/notification.svg | 22 + .../community/contact-us/question-mark.svg | 23 + .../assets/icons/community/envelope-icon.svg | 23 + .../assets/icons/community/message-icon.svg | 23 + .../become a commiter/beam-logo-icon.svg | 46 ++ .../become a commiter/code-icon.svg | 22 + .../become a commiter/diamond-icon.svg | 39 ++ .../become a commiter/file-icon.svg | 23 + .../become a commiter/messages-icon.svg | 28 ++ .../become a commiter/tool-icon.svg | 22 + website/www/site/assets/icons/edit-icon.svg | 22 + .../www/site/assets/icons/extensible-icon.svg | 26 ++ .../www/site/assets/icons/extensive-icon.svg | 26 -- .../site/assets/icons/open_source-icon.svg | 28 ++ website/www/site/assets/icons/search-icon.svg | 22 + website/www/site/assets/scss/_blog.scss | 110 +++-- website/www/site/assets/scss/_calendar.scss | 92 +++- website/www/site/assets/scss/_ctas.sass | 36 +- website/www/site/assets/scss/_footer.sass | 25 +- website/www/site/assets/scss/_global.sass | 78 +++- website/www/site/assets/scss/_graphic.sass | 83 +++- .../www/site/assets/scss/_hero-mobile.scss | 4 +- website/www/site/assets/scss/_hero.scss | 17 +- website/www/site/assets/scss/_layout.scss | 292 ++++++------ website/www/site/assets/scss/_lists.scss | 208 ++++++--- website/www/site/assets/scss/_quotes.scss | 7 +- website/www/site/i18n/footer/en.yaml | 2 +- website/www/site/i18n/home/en.yaml | 18 +- website/www/site/layouts/_default/baseof.html | 6 +- website/www/site/layouts/blog/baseof.html | 22 +- website/www/site/layouts/blog/list.html | 198 ++++---- website/www/site/layouts/index.html | 150 ++++--- .../partials/documentation/icon-row.html | 6 +- website/www/site/layouts/partials/footer.html | 126 +++--- website/www/site/layouts/partials/head.html | 25 +- .../shortcodes/documentation/runners.html | 8 +- .../site/static/images/arrow-expandable.svg | 22 + .../site/static/images/arrow-icon_list.svg | 22 + .../static/images/beam_logo_navbar_mobile.png | Bin 0 -> 1517 bytes website/www/site/static/images/code-icon.svg | 22 + .../images/community/beam-logo-icon.svg | 46 ++ .../static/images/community/diamond-icon.svg | 39 ++ .../static/images/community/messages-icon.svg | 28 ++ website/www/site/static/images/copy-icon.svg | 23 + website/www/site/static/images/elipse.svg | 22 + .../www/site/static/images/github-icon.svg | 29 ++ website/www/site/static/images/info_icon.svg | 23 + .../images/logos/full-color/nameless/eBay.png | Bin 0 -> 90243 bytes .../images/logos/full-color/nameless/klio.png | Bin 0 -> 9212 bytes .../logos/full-color/nameless/mozilla.png | Bin 0 -> 1879 bytes .../images/logos/runners/gray-logos-1.svg | 28 ++ .../static/images/logos/sdks/java-gray.svg | 9 + .../static/images/logos/sdks/python-gray.svg | 28 ++ .../www/site/static/images/model-ellipse.svg | 22 + .../static/images/model-processing-icon.svg | 45 ++ .../site/static/images/model-sinks-icon.svg | 23 + .../site/static/images/model-sources-icon.svg | 25 ++ website/www/site/static/images/run-icon.svg | 22 + website/www/site/static/js/calendar.js | 21 + .../www/site/static/js/categories-filter.js | 423 +++++++++--------- .../www/site/static/js/hero/hero-mobile.js | 6 +- 71 files changed, 2294 insertions(+), 788 deletions(-) create mode 100644 website/www/site/assets/icons/close-icon.svg create mode 100644 website/www/site/assets/icons/commercial-icon.svg create mode 100644 website/www/site/assets/icons/community/bee-icon.svg create mode 100644 website/www/site/assets/icons/community/box-icon.svg create mode 100644 website/www/site/assets/icons/community/calendar-icon.svg create mode 100644 website/www/site/assets/icons/community/contact-us/bug.svg create mode 100644 website/www/site/assets/icons/community/contact-us/discussion.svg create mode 100644 website/www/site/assets/icons/community/contact-us/gitArrows.svg create mode 100644 website/www/site/assets/icons/community/contact-us/knot.svg create mode 100644 website/www/site/assets/icons/community/contact-us/messages.svg create mode 100644 website/www/site/assets/icons/community/contact-us/notification.svg create mode 100644 website/www/site/assets/icons/community/contact-us/question-mark.svg create mode 100644 website/www/site/assets/icons/community/envelope-icon.svg create mode 100644 website/www/site/assets/icons/community/message-icon.svg create mode 100644 website/www/site/assets/icons/contributor/become a commiter/beam-logo-icon.svg create mode 100644 website/www/site/assets/icons/contributor/become a commiter/code-icon.svg create mode 100644 website/www/site/assets/icons/contributor/become a commiter/diamond-icon.svg create mode 100644 website/www/site/assets/icons/contributor/become a commiter/file-icon.svg create mode 100644 website/www/site/assets/icons/contributor/become a commiter/messages-icon.svg create mode 100644 website/www/site/assets/icons/contributor/become a commiter/tool-icon.svg create mode 100644 website/www/site/assets/icons/edit-icon.svg create mode 100644 website/www/site/assets/icons/extensible-icon.svg delete mode 100644 website/www/site/assets/icons/extensive-icon.svg create mode 100644 website/www/site/assets/icons/open_source-icon.svg create mode 100644 website/www/site/assets/icons/search-icon.svg create mode 100644 website/www/site/static/images/arrow-expandable.svg create mode 100644 website/www/site/static/images/arrow-icon_list.svg create mode 100644 website/www/site/static/images/beam_logo_navbar_mobile.png create mode 100644 website/www/site/static/images/code-icon.svg create mode 100644 website/www/site/static/images/community/beam-logo-icon.svg create mode 100644 website/www/site/static/images/community/diamond-icon.svg create mode 100644 website/www/site/static/images/community/messages-icon.svg create mode 100644 website/www/site/static/images/copy-icon.svg create mode 100644 website/www/site/static/images/elipse.svg create mode 100644 website/www/site/static/images/github-icon.svg create mode 100644 website/www/site/static/images/info_icon.svg create mode 100644 website/www/site/static/images/logos/full-color/nameless/eBay.png create mode 100644 website/www/site/static/images/logos/full-color/nameless/klio.png create mode 100644 website/www/site/static/images/logos/full-color/nameless/mozilla.png create mode 100644 website/www/site/static/images/logos/runners/gray-logos-1.svg create mode 100644 website/www/site/static/images/logos/sdks/java-gray.svg create mode 100644 website/www/site/static/images/logos/sdks/python-gray.svg create mode 100644 website/www/site/static/images/model-ellipse.svg create mode 100644 website/www/site/static/images/model-processing-icon.svg create mode 100644 website/www/site/static/images/model-sinks-icon.svg create mode 100644 website/www/site/static/images/model-sources-icon.svg create mode 100644 website/www/site/static/images/run-icon.svg create mode 100644 website/www/site/static/js/calendar.js diff --git a/website/www/site/assets/icons/close-icon.svg b/website/www/site/assets/icons/close-icon.svg new file mode 100644 index 000000000000..7a07561031f1 --- /dev/null +++ b/website/www/site/assets/icons/close-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/commercial-icon.svg b/website/www/site/assets/icons/commercial-icon.svg new file mode 100644 index 000000000000..916237de46cc --- /dev/null +++ b/website/www/site/assets/icons/commercial-icon.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/community/bee-icon.svg b/website/www/site/assets/icons/community/bee-icon.svg new file mode 100644 index 000000000000..d04da17d1006 --- /dev/null +++ b/website/www/site/assets/icons/community/bee-icon.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/community/box-icon.svg b/website/www/site/assets/icons/community/box-icon.svg new file mode 100644 index 000000000000..572896e70ec2 --- /dev/null +++ b/website/www/site/assets/icons/community/box-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/community/calendar-icon.svg b/website/www/site/assets/icons/community/calendar-icon.svg new file mode 100644 index 000000000000..18229ffe4836 --- /dev/null +++ b/website/www/site/assets/icons/community/calendar-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/bug.svg b/website/www/site/assets/icons/community/contact-us/bug.svg new file mode 100644 index 000000000000..62267024ea72 --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/bug.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/discussion.svg b/website/www/site/assets/icons/community/contact-us/discussion.svg new file mode 100644 index 000000000000..dc9c94e95d50 --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/discussion.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/gitArrows.svg b/website/www/site/assets/icons/community/contact-us/gitArrows.svg new file mode 100644 index 000000000000..30a857d94adc --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/gitArrows.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/knot.svg b/website/www/site/assets/icons/community/contact-us/knot.svg new file mode 100644 index 000000000000..e47af8cd8ca2 --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/knot.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/messages.svg b/website/www/site/assets/icons/community/contact-us/messages.svg new file mode 100644 index 000000000000..43806ca5bc3a --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/messages.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/notification.svg b/website/www/site/assets/icons/community/contact-us/notification.svg new file mode 100644 index 000000000000..3b2976ad87ff --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/notification.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/community/contact-us/question-mark.svg b/website/www/site/assets/icons/community/contact-us/question-mark.svg new file mode 100644 index 000000000000..bb230303a16b --- /dev/null +++ b/website/www/site/assets/icons/community/contact-us/question-mark.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/community/envelope-icon.svg b/website/www/site/assets/icons/community/envelope-icon.svg new file mode 100644 index 000000000000..6ced3b9edd59 --- /dev/null +++ b/website/www/site/assets/icons/community/envelope-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/community/message-icon.svg b/website/www/site/assets/icons/community/message-icon.svg new file mode 100644 index 000000000000..466af8040595 --- /dev/null +++ b/website/www/site/assets/icons/community/message-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/beam-logo-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/beam-logo-icon.svg new file mode 100644 index 000000000000..587667d29cc9 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/beam-logo-icon.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/code-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/code-icon.svg new file mode 100644 index 000000000000..338acf8e8de1 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/code-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/diamond-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/diamond-icon.svg new file mode 100644 index 000000000000..50930d56bf94 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/diamond-icon.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/file-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/file-icon.svg new file mode 100644 index 000000000000..a198565b15a4 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/file-icon.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/messages-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/messages-icon.svg new file mode 100644 index 000000000000..0f710d68e9f6 --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/messages-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/contributor/become a commiter/tool-icon.svg b/website/www/site/assets/icons/contributor/become a commiter/tool-icon.svg new file mode 100644 index 000000000000..46e30c82ab1a --- /dev/null +++ b/website/www/site/assets/icons/contributor/become a commiter/tool-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/edit-icon.svg b/website/www/site/assets/icons/edit-icon.svg new file mode 100644 index 000000000000..0832bba986b7 --- /dev/null +++ b/website/www/site/assets/icons/edit-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/icons/extensible-icon.svg b/website/www/site/assets/icons/extensible-icon.svg new file mode 100644 index 000000000000..02ba07c0ccd1 --- /dev/null +++ b/website/www/site/assets/icons/extensible-icon.svg @@ -0,0 +1,26 @@ + + + + + + + + + diff --git a/website/www/site/assets/icons/extensive-icon.svg b/website/www/site/assets/icons/extensive-icon.svg deleted file mode 100644 index 76e680da8216..000000000000 --- a/website/www/site/assets/icons/extensive-icon.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - diff --git a/website/www/site/assets/icons/open_source-icon.svg b/website/www/site/assets/icons/open_source-icon.svg new file mode 100644 index 000000000000..1505a32429e5 --- /dev/null +++ b/website/www/site/assets/icons/open_source-icon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + diff --git a/website/www/site/assets/icons/search-icon.svg b/website/www/site/assets/icons/search-icon.svg new file mode 100644 index 000000000000..d01a19658e8e --- /dev/null +++ b/website/www/site/assets/icons/search-icon.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/website/www/site/assets/scss/_blog.scss b/website/www/site/assets/scss/_blog.scss index 7dc51a8d751e..0b16e353de02 100644 --- a/website/www/site/assets/scss/_blog.scss +++ b/website/www/site/assets/scss/_blog.scss @@ -15,21 +15,24 @@ * limitations under the License. */ @import "media"; - +.tf-filter-item { + display: none; +} .blog-content { + //padding: 0 24px 0 24px; + margin-top: 64px; + h2 { text-align: center; margin-bottom: 70px !important; - } - .tf-filter-item { - display: none; + padding-top: 57px; } .category-buttons { display: flex; align-items: center; justify-content: center; - max-width: 60%; + flex-wrap: wrap-reverse; margin: 0 auto; margin-bottom: 80px; @@ -40,7 +43,7 @@ } .category-button { - margin: 0 11.8px 11.7px 11.8px; + margin: 0 6px 12px 6px; padding: 10px 20px; border-radius: 100px; background-color: #f6f6f6; @@ -49,34 +52,62 @@ font-weight: bold; line-height: 1.14; letter-spacing: 0.6px; + &:focus { + outline: 0; + } + &:hover { + background-color: #f2804d; + color: #fff; + } } + .active { background-color: #f26628; color: #fff; + &:hover { + background-color: #f2804d; + } } - .load-button { - padding: 15px 51px 15px 52px; - border-radius: 100px; - background-color: #f26628; - font-weight: bold; - font-stretch: normal; - font-style: normal; - line-height: normal; - letter-spacing: 0.39px; - color: #ffffff; - border: 0; - margin-top: 125px; + } + .category-buttons_poweredBy { + justify-content: flex-start; + margin-top: 84px; + } + .restricted { + max-width: 60%; + @media (max-width: $mobile) { + max-width: 100%; } } } +.load-button { + padding: 15px 51px 15px 52px; + border-radius: 100px; + background-color: #f26628; + text-transform: uppercase; + font-weight: bold; + line-height: normal; + letter-spacing: 0.39px; + color: #ffffff; + border: 0; + margin-top: 104px; + width: 184px; + height: 46px; + &:hover { + background-color: #f2804d; + } +} + .posts-list { display: flex; flex-wrap: wrap; - justify-content: space-evenly; - + justify-content: space-between; .show-item { display: inline-block; } + @media (max-width: $tablet) { + justify-content: space-evenly; + } .post-card { width: 381px; height: 468px; @@ -91,20 +122,27 @@ &:hover { text-decoration: none; + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), + 0 4px 6px 0 rgba(0, 0, 0, 0.24); } @media (max-width: $tablet) { width: 327px; height: 216px; padding: 24px 20px; + margin-bottom: 24px; + display: flex; + flex-direction: column; + justify-content: space-between; } .post-title { font-size: 24px; - font-weight: normal; + font-weight: 500; line-height: 1.25; letter-spacing: normal; margin-bottom: 24px; - + overflow: hidden; + -webkit-box-orient: vertical; @media (max-width: $tablet) { font-size: 18px; font-weight: normal; @@ -115,6 +153,8 @@ .post-summary { overflow: hidden; + line-height: 1.57; + letter-spacing: 0.43px; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; @@ -128,15 +168,23 @@ display: flex; justify-content: space-between; font-size: 16px; - font-weight: normal; + font-weight: 500; line-height: 1.63; letter-spacing: 0.43px; color: #8c8b8e; - margin-bottom: 24px; + margin-bottom: 38px; + @media (max-width: $tablet) { + margin-bottom: 0; + } p { text-transform: uppercase; } } +.post-category { + font-size: 14px; + font-weight: normal; + margin-top: 8px; +} .post { .post-content { max-width: 853px; @@ -149,10 +197,7 @@ margin-top: 85px; } } - h2 { - margin-bottom: 32px; - margin-top: 42px; - } + .post-header { border-bottom: 2px solid rgba(255, 109, 5, 0.24); margin-bottom: 24px; @@ -182,9 +227,10 @@ } .post-title { margin-bottom: 12px !important; - font-size: 18px; - font-weight: normal; - line-height: 1.6; - letter-spacing: 0.43px; + font-size: 18px !important; + line-height: 1.6 !important; + letter-spacing: 0.43px !important; + text-overflow: ellipsis; + max-height: 4.8em; } } diff --git a/website/www/site/assets/scss/_calendar.scss b/website/www/site/assets/scss/_calendar.scss index c78c16081571..824c0312d8e9 100644 --- a/website/www/site/assets/scss/_calendar.scss +++ b/website/www/site/assets/scss/_calendar.scss @@ -56,11 +56,13 @@ } } - .calendar-card-big-left:hover { - box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), - 0 4px 6px 0 rgba(0, 0, 0, 0.24); + .calendar-card-big-left { + padding: 0 !important; + &:hover { + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), + 0 4px 6px 0 rgba(0, 0, 0, 0.24); + } } - // Middle cards .calendar-card-box { margin: 0 37px; @@ -68,23 +70,64 @@ display: flex; flex-direction: column; justify-content: space-between; - - .calendar-card-small { - width: 100%; - max-width: 381px; + .show-item { + display: inline-block; + } + .post-card { + width: 381px; height: 216px; + padding: 24px; border-radius: 16px; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), 0 4px 4px 0 rgba(0, 0, 0, 0.06); - background-color: $color-white; - padding: 32px 24px; - transition: 0.2s; - - .calendar-card-small-title { - @extend .component-small-header; + background-color: #ffffff; + margin-bottom: 36px; + color: #333333; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: space-between; + @media (max-width: $tablet) { + width: 327px; + height: 216px; + padding: 24px 19.2px 24.7px 20px; + margin-bottom: 24px; + } + &:hover { + text-decoration: none; + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.24), + 0 4px 6px 0 rgba(0, 0, 0, 0.24); + } - margin-top: 40px; + .post-title { + font-size: 18px; + font-weight: 500; + line-height: 1.6; + letter-spacing: 0.43px; margin-bottom: 12px; + text-overflow: ellipsis; + word-wrap: break-word; + overflow: hidden; + max-height: 4.8em; + + @media (max-width: $tablet) { + font-size: 18px; + font-weight: normal; + line-height: 1.6; + letter-spacing: 0.43px; + } + } + + .post-summary { + overflow: hidden; + line-height: 1.57; + letter-spacing: 0.43px; + display: -webkit-box; + -webkit-line-clamp: 9; + -webkit-box-orient: vertical; + @media (max-width: $tablet) { + display: none; + } } } @@ -103,7 +146,17 @@ .calendar-card-events { margin-top: 30px; margin-bottom: 70px; - + .calendar-desktop { + @media (max-width: $tablet) { + display: none; + } + } + .calendar-mobile { + display: none; + @media (max-width: $tablet) { + display: block; + } + } .calendar-event { display: flex; padding: 14px; @@ -191,7 +244,7 @@ .calendar-content { flex-direction: column; align-items: center; - margin-top: 64px; + margin-top: 70px; .calendar-card-big { max-width: 327px; @@ -205,11 +258,12 @@ } .calendar-card-box { - margin: 24px 0px; + margin-bottom: 0; + margin-top: 24px; min-height: 456px; .calendar-card-small { - width: 327px; + max-width: 327px; height: 216px; padding: 24px 20px; diff --git a/website/www/site/assets/scss/_ctas.sass b/website/www/site/assets/scss/_ctas.sass index ce101cf6d587..2a1f8b7c13ee 100644 --- a/website/www/site/assets/scss/_ctas.sass +++ b/website/www/site/assets/scss/_ctas.sass @@ -15,33 +15,38 @@ * limitations under the License. */ - .ctas display: flex justify-content: center align-items: center width: 100% height: 96px - position: sticky - z-index: 1050 - box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06) + position: fixed + z-index: 1020 + bottom: 0 + box-shadow: 0 -4px 16px 0 rgba(0, 0, 0, 0.06); background-color: #ffffff margin-top: -5px @media (max-width: $ak-breakpoint-lg) - flex-wrap: nowrap; - overflow-x: auto; - width: auto; + flex-wrap: nowrap + width: auto justify-content: flex-start - top: calc(100% - 96px) - + left: 0 + right: 0 + overflow-y: hidden + overflow-x: auto &_row - margin: 0 0 0 90px + margin: 0 0 0 91px max-width: 184px; + &:first-of-type + margin: 0 @media (max-width: $ak-breakpoint-lg) - margin: 0 0 0 24px + margin-left: 24px + &:first-of-type + margin-left: 24px &_button width: 184px @@ -58,12 +63,11 @@ align-items: center justify-content: center - i + img margin-right: 12px - + height: 20px + width: 20px &:hover text-decoration: none color: #ffffff - -.to-bottom - top: calc(100% - 96px) + background-color: #f2804d diff --git a/website/www/site/assets/scss/_footer.sass b/website/www/site/assets/scss/_footer.sass index 97f2b24b8093..ce99da118e58 100644 --- a/website/www/site/assets/scss/_footer.sass +++ b/website/www/site/assets/scss/_footer.sass @@ -17,8 +17,8 @@ .footer background: $color-dark - padding: 40px 0 - margin-top: 70px + padding-top: 40px + margin-top: 128px @at-root .body--index & margin-top: 0 @@ -73,7 +73,26 @@ grid-template-columns: repeat(2, 1fr) .footer-wrapper - padding: 0 56px 56px 56px + padding: 0 56px @media (max-width: $ak-breakpoint-lg) padding: 0 + .footer__bottom + line-height: 1.57 + letter-spacing: 0.43px + color: #bfbfbf + padding-bottom: 38px + padding-right: 25px + margin-right: 76px + a + color: #bfbfbf + @media (max-width: $ak-breakpoint-lg) + padding-bottom: 77px + padding-right: 0 + margin-right: 0 + +.main-padding + padding-bottom: 48px + background: #37424B; + @media (max-width: $ak-breakpoint-lg) + padding-bottom: 100px diff --git a/website/www/site/assets/scss/_global.sass b/website/www/site/assets/scss/_global.sass index a65ae4c82a32..c25d4fdb1fd5 100644 --- a/website/www/site/assets/scss/_global.sass +++ b/website/www/site/assets/scss/_global.sass @@ -26,9 +26,12 @@ body .body background: #fff margin: 0 auto - + .no__padding + padding: 0 &:not(.body--index) .body__contained + @media (max-width: $ak-breakpoint-lg) + padding: 0 padding: 0 30px max-width: 1280px @@ -37,6 +40,8 @@ body width: 100% .center margin: 0 auto + .content-up + margin-top: -20px !important .section &:not(.section--wide) @@ -52,6 +57,20 @@ body a color: $color-brand +.body__section-no-nav + margin-left: 256px + //width: calc(100% - 380px) + + > [id]:before + content: '' + display: block + height: 82px // fixed header height + margin: -82px 0 0 // negative fixed header height + + @media (max-width: $ak-breakpoint-lg) + margin-left: 0 + width: 100% + .body__section-nav margin-left: 256px width: calc(100% - 492px) @@ -67,16 +86,67 @@ body width: 100% .container-main-content - padding: 0 20px + @media (max-width: $ak-breakpoint-lg) + padding: 0 24px + min-height: 100vh + padding: 0 22px position: relative - margin-top: 85px + background-color: #fff + margin-top: 64px @media (min-width: $tablet) margin-top: 0 .desktop @media (max-width: $ak-breakpoint-lg) - display: none + display: none !important .mobile display: none @media (max-width: $ak-breakpoint-lg) display: block + +.code-snippet, pre + background:rgba(255, 109, 0, 0.03) !important + border-radius: 8px + border-top-left-radius: 0; + border: solid 0.6px #ff6d05 + font-family: Menlo + font-size: 16px + font-weight: normal + line-height: 1.63 + letter-spacing: 0.43px + padding: 24px + max-width: 848px + position: relative + + pre + border: none + padding: 0 + margin-top: 36px + background: initial !important + a + float: right + margin-left: 12px + img + &:hover + opacity: 0.7 + filter: alpha(opacity=70) + +.snippet + max-width: 848px + .git-link + float: right + font-size: 16px; + font-weight: normal; + line-height: 1.63; + letter-spacing: 0.43px; + color: #8c8b8e; + +table + margin-top: 24px + margin-bottom: 24px + th + min-width: 80px + padding-right: 12px + +.underline + text-decoration: underline diff --git a/website/www/site/assets/scss/_graphic.sass b/website/www/site/assets/scss/_graphic.sass index cd171f7db00b..47b4c933278d 100644 --- a/website/www/site/assets/scss/_graphic.sass +++ b/website/www/site/assets/scss/_graphic.sass @@ -14,16 +14,77 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +@import "media"; -.graphic - padding: $pad-l $pad +.graphic { + text-align: center; + h2 { + @extend .component-title; + } + .images { + max-width: 868px; + margin: 0 auto; + height: 60px; + } + .margin { + margin-top: 84px; + margin-bottom: 84px; + @media (max-width: $mobile) { + margin-top: 0; + margin-bottom: 64px; + } + } + .row { + display: flex; + justify-content: space-between; + @media (max-width: $mobile) { + flex-direction: column; + align-items: center; + } + .logos-row { + display: flex; + align-items: center; + margin-top: 20px; + max-height: 73px; + @media (max-width: $mobile) { + margin-top: 64px; + } + img { + height: auto; + } + } + .first_logo { + margin-right: 18px; + } + .column { + display: flex; + flex-direction: column; + align-items: center; + max-width: 306px; - .graphic__image - text-align: center - line-height: 0 - - img - max-width: 100% - margin: 0 auto - max-height: 500px - border: 1px solid #efefef + h4 { + margin-top: 32px; + } + .more { + margin-top: 32px; + font-size: 14px; + font-weight: bold; + line-height: 16px; + letter-spacing: 0.6px; + color: #f26628; + } + } + .icon { + width: 34px; + height: 44px; + margin-top: 16px; + @media (max-width: $mobile) { + margin-top: 64px; + } + } + img { + max-width: 306px; + height: 42px; + } + } +} diff --git a/website/www/site/assets/scss/_hero-mobile.scss b/website/www/site/assets/scss/_hero-mobile.scss index 343c279f4c90..b3db3d1cd4b9 100644 --- a/website/www/site/assets/scss/_hero-mobile.scss +++ b/website/www/site/assets/scss/_hero-mobile.scss @@ -21,7 +21,9 @@ position: relative; margin-bottom: 0; display: none; - + width: 100%; + height: calc(100% - 96px); + min-height: 300px; .hero-content { position: absolute; z-index: 1; diff --git a/website/www/site/assets/scss/_hero.scss b/website/www/site/assets/scss/_hero.scss index e204d1bf015d..9244f0e7f1f6 100644 --- a/website/www/site/assets/scss/_hero.scss +++ b/website/www/site/assets/scss/_hero.scss @@ -16,6 +16,7 @@ */ @import "media"; +@import "typography"; .hero-desktop { position: relative; @@ -24,7 +25,7 @@ height: 100%; display: inherit; margin-top: -30px; - + min-height: 361px; .hero-content { position: absolute; z-index: 1; @@ -35,7 +36,6 @@ h3 { @extend .hero-title; - text-transform: uppercase; margin: 0 auto 24px auto; } @@ -43,13 +43,13 @@ h1 { @extend .hero-heading; width: 506px; - + height: 92px; + font-size: 46px; margin: 0 auto 36px auto; } h2 { @extend .hero-subheading; - width: 344px; margin: 0 auto 56px auto; } @@ -61,7 +61,6 @@ button { width: 184px; height: 46px; - padding: 15px 28px 15px 26px; border-radius: 100px; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16), 0 4px 4px 0 rgba(0, 0, 0, 0.06); @@ -72,13 +71,18 @@ margin: 0 auto; border: none; outline: none; - + svg { + width: 14px; + height: 16px; + } span { text-transform: uppercase; font-size: 14px; font-weight: bold; letter-spacing: 0.6px; + line-height: 1.14; color: $color-sun; + margin-left: 12px; } } @@ -107,6 +111,7 @@ h1 { width: 300px; margin: 0 auto 24px auto; + font-size: 32px; } h2 { 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 index 037da8bd2eb6..392b476b7892 100644 --- a/website/www/site/assets/scss/_lists.scss +++ b/website/www/site/assets/scss/_lists.scss @@ -18,76 +18,119 @@ .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; - li:before { + padding-left: 26px; + li::marker { content: "\2192"; - position: absolute; color: #ff6d05; font-size: 24px; - line-height: 20px; - left: 0; } li { list-style-type: none; list-style-position: outside; - margin-bottom: 6px; - p { - margin: 0; - } + padding-left: 8px; + margin-bottom: -2px; + } + li:last-of-type { + margin-bottom: 25px; } } -} -.arrow-lists-desktop { - margin-top: 36px; -} -.arrow-lists-mobile { - display: none; - .arrow-list-header { - font-size: 28px; - font-weight: 500; - line-height: 1.29; - letter-spacing: normal; + figure { + width: 112px; + height: 112px; + margin-top: 64px; + } + a { color: #333333; + } +} + +.arrow-list-header { + color: #333333; + text-decoration: none; + display: flex; + max-height: 40px; + margin-bottom: 74px; + &:hover { + cursor: default; text-decoration: none; - display: flex; + } + @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 { - margin-top: 17px; width: 18px; height: 18px; padding-right: 16px; transform: rotate(-90deg); } } - .rotate { - img { - transform: rotate(0deg); - margin-top: 26px; - } - } } -@media (max-width: $mobile) { - .arrow-lists-desktop { - display: none; - } - .arrow-lists-mobile { - display: block; +.rotate { + img { + transform: rotate(0deg) !important; + margin-top: 10px; } } - +.list { + margin-top: 32px; + max-width: 640px; +} .icon-list { - .list { - margin-top: 64px; - max-width: 640px; - } .list-item { display: flex; - margin-bottom: 31px; + margin-bottom: 38px; + position: relative; + 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; @@ -96,13 +139,23 @@ } .list-item-header { font-size: 22px; - font-weight: normal; + 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; @@ -122,6 +175,7 @@ line-height: 1.2; letter-spacing: 0.43px; margin-bottom: 6px; + margin-top: 10px; } .pillars-item-text { @@ -139,6 +193,7 @@ flex-direction: row; justify-content: space-between; flex-wrap: wrap; + max-width: 895px; .row { display: flex; flex-direction: column; @@ -164,7 +219,7 @@ color: #333333; } .item-description { - width: 260px; + max-width: 260px; margin-right: 32px; margin-top: 20px; @media (max-width: $mobile) { @@ -173,24 +228,39 @@ } } } - .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; +} +.sdks { + max-width: 635px; + .column { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + .row { + margin-top: 48px; + .item-description { + margin-right: 0; } - li { - a { - font-size: 16px; - line-height: 1.63; - letter-spacing: 0.43px; - color: #333333; - } + } +} +.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; } } } @@ -201,3 +271,25 @@ 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; + } + .collapse { + display: block; + height: auto !important; + visibility: visible; + } + .collapsing { + position: relative; + height: unset !important; + overflow: hidden; + } + } +} diff --git a/website/www/site/assets/scss/_quotes.scss b/website/www/site/assets/scss/_quotes.scss index 6d59798289f0..57f1c30ca366 100644 --- a/website/www/site/assets/scss/_quotes.scss +++ b/website/www/site/assets/scss/_quotes.scss @@ -63,7 +63,7 @@ margin-right: 0; } } - + // Sliding feature is only displayed on mobile version .keen-slider { display: none; @@ -135,13 +135,16 @@ .quotes-title { margin-bottom: 64px; } - + h2 { + margin-bottom: 0 !important; + } .quotes-desktop { display: none; } .keen-slider { display: flex; + width: 100%; } .dots { 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/en.yaml b/website/www/site/i18n/home/en.yaml index 6ae87c04f465..83cfe40ba2e7 100644 --- a/website/www/site/i18n/home/en.yaml +++ b/website/www/site/i18n/home/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: home-learn-more translation: "Learn more" - id: home-try-beam @@ -33,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 it works?" +- 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/layouts/_default/baseof.html b/website/www/site/layouts/_default/baseof.html index 52f805996651..2a75558f5d85 100644 --- a/website/www/site/layouts/_default/baseof.html +++ b/website/www/site/layouts/_default/baseof.html @@ -17,7 +17,7 @@ {{ partial "header.html" . }} -
+
{{ block "hero-section" . }}{{ end }} {{ block "ctas-section" . }}{{ end }} {{ block "pillars-section" . }}{{ end }} @@ -27,7 +27,9 @@ {{ block "quotes-mobile-section" . }}{{ end }} {{ block "logos-section" . }}{{ end }}
- {{ partial "footer.html" . }} +
+ {{ partial "footer.html" . }} +
{{ partial "hooks/body-end.html"}} diff --git a/website/www/site/layouts/blog/baseof.html b/website/www/site/layouts/blog/baseof.html index f0759762da9a..4086e1fb82c8 100644 --- a/website/www/site/layouts/blog/baseof.html +++ b/website/www/site/layouts/blog/baseof.html @@ -1,14 +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. See accompanying LICENSE file. - */}} + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. See accompanying LICENSE file. +*/}} @@ -17,7 +17,7 @@ {{ partial "header.html" . }} -
+
{{ block "main" . }}{{ end }}
{{ partial "footer.html" . }} diff --git a/website/www/site/layouts/blog/list.html b/website/www/site/layouts/blog/list.html index 6e8bd5ff4720..d6e971a66ab5 100644 --- a/website/www/site/layouts/blog/list.html +++ b/website/www/site/layouts/blog/list.html @@ -1,109 +1,109 @@ {{/* - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - http://www.apache.org/licenses/LICENSE-2.0 - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. See accompanying LICENSE file. - */}} + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. See accompanying LICENSE file. +*/}} - {{ define "main" }} -
-

{{ T "blog-title" }}

- {{ $pages := .Pages }} - {{ $.Scratch.Set "categories" (slice ) }} - {{ $.Scratch.Set "noCategories" 0 }} +{{ define "main" }} +
+

{{ T "blog-title" }}

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

- {{ delimit .Params.categories ", " " & " }} -

-

{{ .Date.Format "2006/01/02" }}

-
-

{{ .Title }}

-

- {{ delimit $authors ", " " & "}} -

-
{{ .Summary | plainify | chomp }}
+
+ {{ range $.Scratch.Get "categories" }} + + {{ end }} + {{ if gt ( $.Scratch.Get "noCategories") 0 }} + + {{ end }} +
- - {{ end }} -
-
- -
+
+ {{ range $pages.ByPublishDate.Reverse }} + + {{ $authors := .Params.authors }} +
+

+ {{ delimit .Params.categories ", " " & " }} +

+

{{ .Date.Format "2006/01/02" }}

+
+

{{ .Title }}

+

+ {{ delimit $authors ", " " & "}} +

+
{{ .Summary | plainify | chomp }}
+ + {{ end }} +
+
+ +
-
- - + - - - {{ end }} +{{ end }} diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html index 7c9344a48c4b..da1f875d1471 100644 --- a/website/www/site/layouts/index.html +++ b/website/www/site/layouts/index.html @@ -18,12 +18,10 @@

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

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

@@ -63,9 +61,54 @@

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

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

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

{{ .title }}

+

{{ .body }}

+
+ {{ end }} +
+
+
+
+

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

+
+
+
+ +
+

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

+
+

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

+

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

+
+
+
+
+ + +
+

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

+
+

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

+

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

+
+
+
{{ end }} @@ -81,52 +124,45 @@

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

- -
-
-

{{ T "home-calendar-category-tag-first" }}

-

{{ T "home-calendar-category-date-first" }}

-
-

- {{ T "home-calendar-card-title-first" }} -

-

{{ T "home-calendar-card-author-first" }}

+
+
+
- +
+ +
+
- -
-
-

{{ T "home-calendar-category-tag-second" }}

-

{{ T "home-calendar-category-date-second" }}

+ {{ range first 2 (after 1 (where .Site.Pages.ByPublishDate.Reverse "Section" "blog")) }} + +
+

+ {{ if .Params.categories }} + {{ delimit .Params.categories ", " " & " }} + {{ end }} +

+

{{ .Date.Format "2006/01/02" }}

+
+
+

{{ .Title }}

+

+ {{ if .Params.authors }} + {{ delimit .Params.authors ", " " & " }} + {{ end }} +

-

- {{ T "home-calendar-card-title-second" }} -

-

{{ T "home-calendar-card-author-second" }}

-
- - -
-
-

{{ T "home-calendar-category-tag-third" }}

-

{{ T "home-calendar-category-date-third" }}

-
-

- {{ T "home-calendar-card-title-third" }} -

-

{{ T "home-calendar-card-author-third" }}

-
- + + {{ end }}

{{ T "home-calendar-card-events-title" }}

-
- +
+
-
- +
+
@@ -176,18 +212,18 @@

{{ end }} {{ define "ctas-section" }} -
-
- {{ T "home-learn-more" }} -
-
- {{ T "home-java-quickstart" }} -
-
- {{ T "home-python-quickstart" }} -
-
- {{ T "home-go-quickstart" }} +
+
+ {{ T "home-learn-more" }} +
+
+ {{ T "home-java-quickstart" }} +
+
+ {{ T "home-python-quickstart" }} +
+
+ {{ T "home-go-quickstart" }} +
-
{{ end }} diff --git a/website/www/site/layouts/partials/documentation/icon-row.html b/website/www/site/layouts/partials/documentation/icon-row.html index f07350ce88db..f5499682fae4 100644 --- a/website/www/site/layouts/partials/documentation/icon-row.html +++ b/website/www/site/layouts/partials/documentation/icon-row.html @@ -10,8 +10,8 @@ limitations under the License. See accompanying LICENSE file. */}} -
-
+
+
{{ if .logo }}
{{ with resources.Get .logo }} @@ -20,7 +20,7 @@
{{ end }}
- {{ .header.text | markdownify }} + {{ .header.text | markdownify }}

{{ .text | safeHTML }}

diff --git a/website/www/site/layouts/partials/footer.html b/website/www/site/layouts/partials/footer.html index b04a96ef89f8..ef6604f5557e 100644 --- a/website/www/site/layouts/partials/footer.html +++ b/website/www/site/layouts/partials/footer.html @@ -1,68 +1,68 @@ {{/* - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - http://www.apache.org/licenses/LICENSE-2.0 - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. See accompanying LICENSE file. - */}} + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. See accompanying LICENSE file. + */}} - + diff --git a/website/www/site/layouts/partials/head.html b/website/www/site/layouts/partials/head.html index b3773320be6d..f256d46593ec 100644 --- a/website/www/site/layouts/partials/head.html +++ b/website/www/site/layouts/partials/head.html @@ -1,4 +1,4 @@ -{{/* +{{/* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -9,16 +9,16 @@ See the License for the specific language governing permissions and limitations under the License. See accompanying LICENSE file. */}} - + {{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }} - + - + {{ $scssMain := "scss/main.scss"}} {{ if .Site.IsServer }} {{ $css := resources.Get $scssMain | toCSS (dict "enableSourceMap" true) | postCSS }} @@ -40,12 +40,13 @@ + - + \ No newline at end of file + + + + diff --git a/website/www/site/layouts/shortcodes/documentation/runners.html b/website/www/site/layouts/shortcodes/documentation/runners.html index f45c192fb593..ab02257d06f5 100644 --- a/website/www/site/layouts/shortcodes/documentation/runners.html +++ b/website/www/site/layouts/shortcodes/documentation/runners.html @@ -18,13 +18,13 @@ {{ else }} {{ partial "documentation/icon-row" (dict "header" .name "text" .description) }} {{ end }} - {{ end }} + {{ end }}
{{ if gt (len $data.documentation_runners) 6 }}
    {{ range last 2 ($item := $data.documentation_runners) }} -
  • {{ .name.text}} {{ .description | safeHTML }}
    • +
  • {{ .name.text}} {{ .description | safeHTML }}
    • {{ end }}
@@ -32,8 +32,8 @@ + SHOW MORE {{ end }} -
-
+
+ diff --git a/website/www/site/static/js/calendar.js b/website/www/site/static/js/calendar.js index 3758e9cc4754..7c5588ca9f6d 100644 --- a/website/www/site/static/js/calendar.js +++ b/website/www/site/static/js/calendar.js @@ -12,9 +12,9 @@ $(document).ready(function() { function setSize() { - var height = $('.calendar-card-big-right').height(); - var width = $('.calendar-card-big-right').width(); - $('#calendar').height = height-100; + var height = $('.calendar-card-big-right').height(); + var width = $('.calendar-card-big-right').width(); + $('#calendar').height = height-100; $('#calendar').width = width-100; } setSize(); From cbccfc435f3e3c3b26565aa26c20d2b34e2f7c1c Mon Sep 17 00:00:00 2001 From: Jakub Sadowski Date: Mon, 1 Feb 2021 12:06:42 +0100 Subject: [PATCH 11/24] filtering fix --- website/www/site/static/js/categories-filter.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/www/site/static/js/categories-filter.js b/website/www/site/static/js/categories-filter.js index b34d92afd3d1..339ceb4bd7c5 100644 --- a/website/www/site/static/js/categories-filter.js +++ b/website/www/site/static/js/categories-filter.js @@ -181,10 +181,10 @@ class CategoriesFilter { checkButton(){ var button = document.getElementById("load-button"); if( this.numberOfItems>this.numberToView*this.longList ){ - this.delClassIfPresent(button, 'tf-filter-item'); + this.delClassIfPresent(button, this.filterItemClass); } else{ - this.addClassIfMissing(button, 'tf-filter-item'); + this.addClassIfMissing(button, this.filterItemClass); } } showMore(){ From a16b54dee65df15197f5e13bd5209cd59fda844b Mon Sep 17 00:00:00 2001 From: Jakub Sadowski Date: Mon, 1 Feb 2021 12:23:30 +0100 Subject: [PATCH 12/24] content update --- examples/java/build.gradle | 17 +- .../complete/kafkatopubsub/KafkaToPubsub.java | 10 +- .../kafkatopubsub/kafka/consumer/Utils.java | 8 + .../options/KafkaToPubsubOptions.java | 6 + ...ryReadFromQueryWithBigQueryStorageAPI.java | 74 +++++++++ .../kafkatopubsub/KafkaToPubsubE2ETest.java | 129 +++++++++++++++ examples/kotlin/build.gradle | 14 +- .../www/site/content/en/blog/beam-2.27.0.md | 1 + .../content/en/contribute/jira-priorities.md | 1 + .../content/en/contribute/release-guide.md | 4 +- .../site/content/en/documentation/_index.md | 2 - .../io/built-in/google-bigquery.md | 2 +- .../en/documentation/programming-guide.md | 150 ++++++++++++++++-- .../content/en/get-started/beam-overview.md | 24 +-- .../site/content/en/get-started/downloads.md | 2 +- .../content/en/get-started/quickstart-java.md | 24 +-- 16 files changed, 417 insertions(+), 51 deletions(-) create mode 100644 examples/java/src/main/java/org/apache/beam/examples/snippets/transforms/io/gcp/bigquery/BigQueryReadFromQueryWithBigQueryStorageAPI.java create mode 100644 examples/java/src/test/java/org/apache/beam/examples/complete/kafkatopubsub/KafkaToPubsubE2ETest.java diff --git a/examples/java/build.gradle b/examples/java/build.gradle index 99a7648f17ee..5c057d897a02 100644 --- a/examples/java/build.gradle +++ b/examples/java/build.gradle @@ -25,6 +25,7 @@ plugins { } applyJavaNature( + enableStrictDependencies: true, exportJavadoc: false, automaticModuleName: 'org.apache.beam.examples', ) @@ -70,17 +71,29 @@ dependencies { compile library.java.google_cloud_datastore_v1_proto_client compile library.java.google_code_gson compile library.java.google_http_client + compile library.java.google_oauth_client compile library.java.joda_time compile library.java.proto_google_cloud_datastore_v1 compile library.java.slf4j_api - compile library.java.slf4j_jdk14 - runtime project(path: ":runners:direct-java", configuration: "shadow") + compile library.java.vendored_grpc_1_26_0 + compile library.java.vendored_guava_26_0_jre + compile "com.google.api.grpc:proto-google-cloud-language-v1:1.81.4" + compile ("io.confluent:kafka-avro-serializer:5.3.2") { + // It depends on "spotbugs-annotations:3.1.9" which clashes with current + // "spotbugs-annotations:3.1.12" used in Beam. Not required. + exclude group: "org.apache.zookeeper", module: "zookeeper" + } + compile "org.apache.httpcomponents:httpclient:4.5.13" + compile "org.apache.httpcomponents:httpcore:4.4.13" + testCompile project(path: ":runners:direct-java", configuration: "shadow") testCompile project(":sdks:java:io:google-cloud-platform") testCompile project(":sdks:java:extensions:ml") testCompile library.java.hamcrest_core testCompile library.java.hamcrest_library testCompile library.java.junit testCompile library.java.mockito_core + testCompile library.java.testcontainers_kafka + testCompile library.java.testcontainers_gcloud // Add dependencies for the PreCommit configurations // For each runner a project level dependency on the examples project. diff --git a/examples/java/src/main/java/org/apache/beam/examples/complete/kafkatopubsub/KafkaToPubsub.java b/examples/java/src/main/java/org/apache/beam/examples/complete/kafkatopubsub/KafkaToPubsub.java index 8b4e2b305927..e4db72e2dc33 100644 --- a/examples/java/src/main/java/org/apache/beam/examples/complete/kafkatopubsub/KafkaToPubsub.java +++ b/examples/java/src/main/java/org/apache/beam/examples/complete/kafkatopubsub/KafkaToPubsub.java @@ -21,6 +21,7 @@ import static org.apache.beam.examples.complete.kafkatopubsub.kafka.consumer.Utils.configureSsl; import static org.apache.beam.examples.complete.kafkatopubsub.kafka.consumer.Utils.getKafkaCredentialsFromVault; import static org.apache.beam.examples.complete.kafkatopubsub.kafka.consumer.Utils.isSslSpecified; +import static org.apache.beam.examples.complete.kafkatopubsub.kafka.consumer.Utils.parseKafkaConsumerConfig; import static org.apache.beam.vendor.guava.v26_0_jre.com.google.common.base.Preconditions.checkArgument; import java.util.ArrayList; @@ -151,7 +152,9 @@ public static void main(String[] args) { KafkaToPubsubOptions options = PipelineOptionsFactory.fromArgs(args).withValidation().as(KafkaToPubsubOptions.class); - run(options); + // Create the pipeline + Pipeline pipeline = Pipeline.create(options); + run(pipeline, options); } /** @@ -159,9 +162,10 @@ public static void main(String[] args) { * * @param options arguments to the pipeline */ - public static PipelineResult run(KafkaToPubsubOptions options) { + public static PipelineResult run(Pipeline pipeline, KafkaToPubsubOptions options) { // Configure Kafka consumer properties Map kafkaConfig = new HashMap<>(); + kafkaConfig.putAll(parseKafkaConsumerConfig(options.getKafkaConsumerConfig())); Map sslConfig = new HashMap<>(); if (options.getSecretStoreUrl() != null && options.getVaultToken() != null) { Map> credentials = @@ -194,8 +198,6 @@ public static PipelineResult run(KafkaToPubsubOptions options) { bootstrapServersList.size() > 0 && topicsList.get(0).length() > 0, "bootstrapServers cannot be an empty string."); - // Create the pipeline - Pipeline pipeline = Pipeline.create(options); LOG.info( "Starting Kafka-To-PubSub pipeline with parameters bootstrap servers:" + options.getBootstrapServers() diff --git a/examples/java/src/main/java/org/apache/beam/examples/complete/kafkatopubsub/kafka/consumer/Utils.java b/examples/java/src/main/java/org/apache/beam/examples/complete/kafkatopubsub/kafka/consumer/Utils.java index ff4cf5f3dcd8..c99fec5efe93 100644 --- a/examples/java/src/main/java/org/apache/beam/examples/complete/kafkatopubsub/kafka/consumer/Utils.java +++ b/examples/java/src/main/java/org/apache/beam/examples/complete/kafkatopubsub/kafka/consumer/Utils.java @@ -22,8 +22,10 @@ import static org.apache.beam.examples.complete.kafkatopubsub.KafkaPubsubConstants.USERNAME; import java.io.IOException; +import java.util.Arrays; import java.util.HashMap; import java.util.Map; +import java.util.stream.Collectors; import org.apache.beam.examples.complete.kafkatopubsub.options.KafkaToPubsubOptions; import org.apache.beam.vendor.grpc.v1p26p0.com.google.gson.JsonObject; import org.apache.beam.vendor.grpc.v1p26p0.com.google.gson.JsonParser; @@ -162,4 +164,10 @@ public static boolean isSslSpecified(KafkaToPubsubOptions options) { || options.getKeystorePath() != null || options.getKeyPassword() != null; } + + public static Map parseKafkaConsumerConfig(String kafkaConsumerConfig) { + return Arrays.stream(kafkaConsumerConfig.split(";")) + .map(s -> s.split("=")) + .collect(Collectors.toMap(kv -> kv[0], kv -> kv[1])); + } } diff --git a/examples/java/src/main/java/org/apache/beam/examples/complete/kafkatopubsub/options/KafkaToPubsubOptions.java b/examples/java/src/main/java/org/apache/beam/examples/complete/kafkatopubsub/options/KafkaToPubsubOptions.java index 7e0460571ef1..3a86b7f4345d 100644 --- a/examples/java/src/main/java/org/apache/beam/examples/complete/kafkatopubsub/options/KafkaToPubsubOptions.java +++ b/examples/java/src/main/java/org/apache/beam/examples/complete/kafkatopubsub/options/KafkaToPubsubOptions.java @@ -87,4 +87,10 @@ public interface KafkaToPubsubOptions extends PipelineOptions { String getKeyPassword(); void setKeyPassword(String keyPassword); + + @Description( + "Additional kafka consumer configs to be applied to Kafka Consumer (e.g. key1=value1;key2=value2).") + String getKafkaConsumerConfig(); + + void setKafkaConsumerConfig(String kafkaConfig); } diff --git a/examples/java/src/main/java/org/apache/beam/examples/snippets/transforms/io/gcp/bigquery/BigQueryReadFromQueryWithBigQueryStorageAPI.java b/examples/java/src/main/java/org/apache/beam/examples/snippets/transforms/io/gcp/bigquery/BigQueryReadFromQueryWithBigQueryStorageAPI.java new file mode 100644 index 000000000000..22680ac76809 --- /dev/null +++ b/examples/java/src/main/java/org/apache/beam/examples/snippets/transforms/io/gcp/bigquery/BigQueryReadFromQueryWithBigQueryStorageAPI.java @@ -0,0 +1,74 @@ +/* + * 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. + */ +package org.apache.beam.examples.snippets.transforms.io.gcp.bigquery; + +// [START bigquery_read_from_query_with_bigquery_storage_api] + +import org.apache.beam.examples.snippets.transforms.io.gcp.bigquery.BigQueryMyData.MyData; +import org.apache.beam.sdk.Pipeline; +import org.apache.beam.sdk.io.gcp.bigquery.BigQueryIO; +import org.apache.beam.sdk.io.gcp.bigquery.BigQueryIO.TypedRead.Method; +import org.apache.beam.sdk.transforms.MapElements; +import org.apache.beam.sdk.values.PCollection; +import org.apache.beam.sdk.values.TypeDescriptor; + +class BigQueryReadFromQueryWithBigQueryStorageAPI { + public static PCollection readFromQueryWithBigQueryStorageAPI( + String project, String dataset, String table, String query, Pipeline pipeline) { + + // String project = "my-project-id"; + // String dataset = "my_bigquery_dataset_id"; + // String table = "my_bigquery_table_id"; + + // Pipeline pipeline = Pipeline.create(); + + /* + String query = String.format("SELECT\n" + + " string_field,\n" + + " int64_field,\n" + + " float64_field,\n" + + " numeric_field,\n" + + " bool_field,\n" + + " bytes_field,\n" + + " date_field,\n" + + " datetime_field,\n" + + " time_field,\n" + + " timestamp_field,\n" + + " geography_field,\n" + + " array_field,\n" + + " struct_field\n" + + "FROM\n" + + " `%s:%s.%s`", project, dataset, table) + */ + + PCollection rows = + pipeline + .apply( + "Read from BigQuery table", + BigQueryIO.readTableRows() + .fromQuery(query) + .usingStandardSql() + .withMethod(Method.DIRECT_READ)) + .apply( + "TableRows to MyData", + MapElements.into(TypeDescriptor.of(MyData.class)).via(MyData::fromTableRow)); + + return rows; + } +} +// [END bigquery_read_from_query_with_bigquery_storage_api] diff --git a/examples/java/src/test/java/org/apache/beam/examples/complete/kafkatopubsub/KafkaToPubsubE2ETest.java b/examples/java/src/test/java/org/apache/beam/examples/complete/kafkatopubsub/KafkaToPubsubE2ETest.java new file mode 100644 index 000000000000..8e44fc2258dd --- /dev/null +++ b/examples/java/src/test/java/org/apache/beam/examples/complete/kafkatopubsub/KafkaToPubsubE2ETest.java @@ -0,0 +1,129 @@ +/* + * 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. + */ +package org.apache.beam.examples.complete.kafkatopubsub; + +import static org.hamcrest.Matchers.equalTo; +import static org.hamcrest.Matchers.hasProperty; + +import com.google.auth.Credentials; +import java.nio.charset.StandardCharsets; +import java.util.UUID; +import java.util.concurrent.ExecutionException; +import org.apache.beam.examples.complete.kafkatopubsub.options.KafkaToPubsubOptions; +import org.apache.beam.examples.complete.kafkatopubsub.transforms.FormatTransform.FORMAT; +import org.apache.beam.runners.direct.DirectOptions; +import org.apache.beam.sdk.PipelineResult; +import org.apache.beam.sdk.extensions.gcp.auth.NoopCredentialFactory; +import org.apache.beam.sdk.extensions.gcp.options.GcpOptions; +import org.apache.beam.sdk.io.gcp.pubsub.PubsubOptions; +import org.apache.beam.sdk.io.gcp.pubsub.TestPubsub; +import org.apache.beam.sdk.options.PipelineOptions; +import org.apache.beam.sdk.testing.TestPipeline; +import org.apache.beam.vendor.guava.v26_0_jre.com.google.common.collect.ImmutableMap; +import org.apache.kafka.clients.consumer.ConsumerConfig; +import org.apache.kafka.clients.producer.KafkaProducer; +import org.apache.kafka.clients.producer.ProducerConfig; +import org.apache.kafka.clients.producer.ProducerRecord; +import org.apache.kafka.common.serialization.StringSerializer; +import org.joda.time.Duration; +import org.junit.Before; +import org.junit.BeforeClass; +import org.junit.ClassRule; +import org.junit.Rule; +import org.junit.Test; +import org.testcontainers.containers.KafkaContainer; +import org.testcontainers.containers.PubSubEmulatorContainer; +import org.testcontainers.utility.DockerImageName; + +/** E2E test for {@link KafkaToPubsub} pipeline. */ +public class KafkaToPubsubE2ETest { + private static final String PUBSUB_EMULATOR_IMAGE = + "gcr.io/google.com/cloudsdktool/cloud-sdk:316.0.0-emulators"; + private static final String KAFKA_IMAGE_NAME = "confluentinc/cp-kafka:5.4.3"; + private static final String PUBSUB_MESSAGE = "test pubsub message"; + private static final String KAFKA_TOPIC_NAME = "messages-topic"; + private static final String PROJECT_ID = "try-kafka-pubsub"; + private static final PipelineOptions OPTIONS = TestPipeline.testingPipelineOptions(); + + @ClassRule + public static final PubSubEmulatorContainer PUB_SUB_EMULATOR_CONTAINER = + new PubSubEmulatorContainer(DockerImageName.parse(PUBSUB_EMULATOR_IMAGE)); + + @ClassRule + public static final KafkaContainer KAFKA_CONTAINER = + new KafkaContainer(DockerImageName.parse(KAFKA_IMAGE_NAME)); + + @Rule public final transient TestPipeline pipeline = TestPipeline.fromOptions(OPTIONS); + @Rule public final transient TestPubsub testPubsub = TestPubsub.fromOptions(OPTIONS); + + @BeforeClass + public static void beforeClass() throws Exception { + Credentials credentials = NoopCredentialFactory.fromOptions(OPTIONS).getCredential(); + OPTIONS.as(DirectOptions.class).setBlockOnRun(false); + OPTIONS.as(GcpOptions.class).setGcpCredential(credentials); + OPTIONS.as(GcpOptions.class).setProject(PROJECT_ID); + OPTIONS + .as(PubsubOptions.class) + .setPubsubRootUrl("http://" + PUB_SUB_EMULATOR_CONTAINER.getEmulatorEndpoint()); + OPTIONS.as(KafkaToPubsubOptions.class).setOutputFormat(FORMAT.PUBSUB); + OPTIONS + .as(KafkaToPubsubOptions.class) + .setBootstrapServers(KAFKA_CONTAINER.getBootstrapServers()); + OPTIONS.as(KafkaToPubsubOptions.class).setInputTopics(KAFKA_TOPIC_NAME); + OPTIONS + .as(KafkaToPubsubOptions.class) + .setKafkaConsumerConfig(ConsumerConfig.AUTO_OFFSET_RESET_CONFIG + "=earliest"); + } + + @Before + public void setUp() { + OPTIONS.as(KafkaToPubsubOptions.class).setOutputTopic(testPubsub.topicPath().getPath()); + } + + @Test + public void testKafkaToPubsubE2E() throws Exception { + PipelineResult job = KafkaToPubsub.run(pipeline, OPTIONS.as(KafkaToPubsubOptions.class)); + + sendKafkaMessage(); + testPubsub + .assertThatTopicEventuallyReceives( + hasProperty("payload", equalTo(PUBSUB_MESSAGE.getBytes(StandardCharsets.UTF_8)))) + .waitForUpTo(Duration.standardMinutes(1)); + try { + job.cancel(); + } catch (UnsupportedOperationException e) { + throw new AssertionError("Could not stop pipeline.", e); + } + } + + private void sendKafkaMessage() { + try (KafkaProducer producer = + new KafkaProducer<>( + ImmutableMap.of( + ProducerConfig.BOOTSTRAP_SERVERS_CONFIG, + KAFKA_CONTAINER.getBootstrapServers(), + ProducerConfig.CLIENT_ID_CONFIG, + UUID.randomUUID().toString()), + new StringSerializer(), + new StringSerializer())) { + producer.send(new ProducerRecord<>(KAFKA_TOPIC_NAME, "testcontainers", PUBSUB_MESSAGE)).get(); + } catch (ExecutionException | InterruptedException e) { + throw new RuntimeException("Something went wrong in kafka producer", e); + } + } +} diff --git a/examples/kotlin/build.gradle b/examples/kotlin/build.gradle index db35dd92be23..9999f42174c6 100644 --- a/examples/kotlin/build.gradle +++ b/examples/kotlin/build.gradle @@ -22,7 +22,7 @@ plugins { id 'org.apache.beam.module' id 'org.jetbrains.kotlin.jvm' version '1.3.72' } -applyJavaNature(exportJavadoc: false, automaticModuleName: 'org.apache.beam.examples.kotlin') +applyJavaNature(enableStrictDependencies: true, exportJavadoc: false, automaticModuleName: 'org.apache.beam.examples.kotlin') provideIntegrationTestingDependencies() enableJavaPerformanceTesting() @@ -46,6 +46,8 @@ configurations.sparkRunnerPreCommit { exclude group: "org.slf4j", module: "slf4j-jdk14" } +def kotlin_version = "1.3.72" + dependencies { compile enforcedPlatform(library.java.google_cloud_platform_libraries_bom) compile library.java.vendored_guava_26_0_jre @@ -59,18 +61,15 @@ dependencies { compile library.java.google_api_services_pubsub compile library.java.google_auth_library_credentials compile library.java.google_auth_library_oauth2_http - compile library.java.google_cloud_datastore_v1_proto_client compile library.java.google_http_client compile library.java.joda_time - compile library.java.proto_google_cloud_datastore_v1 compile library.java.slf4j_api - compile library.java.slf4j_jdk14 + compile library.java.guava + compile "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version" + compile "org.jetbrains:annotations:13.0" runtime project(path: ":runners:direct-java", configuration: "shadow") testCompile project(":sdks:java:io:google-cloud-platform") - testCompile library.java.hamcrest_core - testCompile library.java.hamcrest_library testCompile library.java.junit - testCompile library.java.mockito_core // Add dependencies for the PreCommit configurations // For each runner a project level dependency on the examples project. @@ -87,7 +86,6 @@ dependencies { sparkRunnerPreCommit project(":sdks:java:io:hadoop-file-system") sparkRunnerPreCommit library.java.spark_streaming sparkRunnerPreCommit library.java.spark_core - implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8" } /* diff --git a/website/www/site/content/en/blog/beam-2.27.0.md b/website/www/site/content/en/blog/beam-2.27.0.md index 82c556557103..5e2c4df39825 100644 --- a/website/www/site/content/en/blog/beam-2.27.0.md +++ b/website/www/site/content/en/blog/beam-2.27.0.md @@ -40,6 +40,7 @@ For more information on changes in 2.27.0, check out the * Added Cloud Bigtable Provider extension to Beam SQL ([BEAM-11173](https://issues.apache.org/jira/browse/BEAM-11173), [BEAM-11373](https://issues.apache.org/jira/browse/BEAM-11373)) * Added a schema provider for thrift data ([BEAM-11338](https://issues.apache.org/jira/browse/BEAM-11338)) * Added combiner packing pipeline optimization to Dataflow runner. ([BEAM-10641](https://issues.apache.org/jira/browse/BEAM-10641)) +* Added an example to ingest data from Apache Kafka to Google Pub/Sub. ([BEAM-11065](https://issues.apache.org/jira/browse/BEAM-11065)) ## Breaking Changes diff --git a/website/www/site/content/en/contribute/jira-priorities.md b/website/www/site/content/en/contribute/jira-priorities.md index 473c66eb126f..4bd5f0237e7f 100644 --- a/website/www/site/content/en/contribute/jira-priorities.md +++ b/website/www/site/content/en/contribute/jira-priorities.md @@ -39,6 +39,7 @@ unassigned. Most P1 bugs should block release. - data loss error - important component is nonfunctional for important use cases - major performance regression + - security related issues (CVEs) - failing postcommit test - flaky test diff --git a/website/www/site/content/en/contribute/release-guide.md b/website/www/site/content/en/contribute/release-guide.md index 4ef75969cfca..6f8ab5cf89d1 100644 --- a/website/www/site/content/en/contribute/release-guide.md +++ b/website/www/site/content/en/contribute/release-guide.md @@ -1089,7 +1089,7 @@ please follow [the guide](https://help.github.com/articles/creating-a-personal-a All wheels should be published, in addition to the zip of the release source. (Signatures and hashes do _not_ need to be uploaded.) -### Deploy SDK docker images to DockerHub +### Deploy docker images to DockerHub * Script: [publish_docker_images.sh](https://github.com/apache/beam/blob/master/release/src/main/scripts/publish_docker_images.sh) * Usage ``` @@ -1100,6 +1100,8 @@ Verify that: * Images with *latest* tag are pointing to current release by confirming 1. Digest of the image with *latest* tag is the same as the one with {RELEASE} tag. +(Optional) Clean up any unneeded local images afterward to save disk space. + ### Merge Website pull requests Merge all of the website pull requests diff --git a/website/www/site/content/en/documentation/_index.md b/website/www/site/content/en/documentation/_index.md index 3bf654bce5b2..af6c0a0a4fec 100644 --- a/website/www/site/content/en/documentation/_index.md +++ b/website/www/site/content/en/documentation/_index.md @@ -23,8 +23,6 @@ limitations under the License. This section provides in-depth conceptual information and reference material for the Beam Model, SDKs, and Runners: -
- ## Concepts Learn about the Beam Programming Model and the concepts common to all Beam SDKs and Runners. diff --git a/website/www/site/content/en/documentation/io/built-in/google-bigquery.md b/website/www/site/content/en/documentation/io/built-in/google-bigquery.md index 9c87ec3df84f..e368826ea6d1 100644 --- a/website/www/site/content/en/documentation/io/built-in/google-bigquery.md +++ b/website/www/site/content/en/documentation/io/built-in/google-bigquery.md @@ -365,7 +365,7 @@ GitHub](https://github.com/apache/beam/blob/master/examples/java/src/main/java/o The following code snippet reads with a query string. {{< highlight java >}} -// Snippet not yet available (BEAM-7034). +{{< code_sample "examples/java/src/main/java/org/apache/beam/examples/snippets/transforms/io/gcp/bigquery/BigQueryReadFromQueryWithBigQueryStorageAPI.java" bigquery_read_from_query_with_bigquery_storage_api >}} {{< /highlight >}} {{< highlight py >}} diff --git a/website/www/site/content/en/documentation/programming-guide.md b/website/www/site/content/en/documentation/programming-guide.md index 71179252e2da..33d92df69473 100644 --- a/website/www/site/content/en/documentation/programming-guide.md +++ b/website/www/site/content/en/documentation/programming-guide.md @@ -4519,6 +4519,8 @@ registered, then Beam will automatically infer the coder for the state value. Ot specified when creating the ValueState. For example, the following ParDo creates a single state variable that accumulates the number of elements seen. +Note: `ValueState` is called `ReadModifyWriteState` in the Python SDK. + {{< highlight java >}} PCollection> perUser = readPerUser(); perUser.apply(ParDo.of(new DoFn, OutputT>() { @@ -4544,6 +4546,20 @@ perUser.apply(ParDo.of(new DoFn, OutputT>() { })); {{< /highlight >}} + +{{< highlight py >}} +class ReadModifyWriteStateDoFn(DoFn): + STATE_SPEC = ReadModifyWriteStateSpec('num_elements', VarIntCoder()) + + def process(self, element, state=DoFn.StateParam(STATE_SPEC)): + # Read the number element seen so far for this user key. + current_value = state.read() or 0 + state.write(current_value+1) + +_ = (p | 'Read per user' >> ReadPerUser() + | 'state pardo' >> beam.ParDo(ReadModifyWriteStateDoFn())) +{{< /highlight >}} + #### CombiningState `CombiningState` allows you to create a state object that is updated using a Beam combiner. For example, the previous @@ -4561,11 +4577,11 @@ perUser.apply(ParDo.of(new DoFn, OutputT>() { })); {{< /highlight >}} -{{< highlight python >}} +{{< highlight py >}} class CombiningStateDoFn(DoFn): SUM_TOTAL = CombiningValueStateSpec('total', sum) - def process(self, element, state=SoFn.StateParam(SUM_TOTAL)): + def process(self, element, state=DoFn.StateParam(SUM_TOTAL)): state.add(1) _ = (p | 'Read per user' >> ReadPerUser() @@ -4599,7 +4615,7 @@ perUser.apply(ParDo.of(new DoFn, OutputT>() { })); {{< /highlight >}} -{{< highlight python >}} +{{< highlight py >}} class BagStateDoFn(DoFn): ALL_ELEMENTS = BagStateSpec('buffer', coders.VarIntCoder()) @@ -4639,6 +4655,11 @@ perUser.apply(ParDo.of(new DoFn, OutputT>() { })); {{< /highlight >}} + +{{< highlight py >}} +This is not supported yet, see BEAM-11506. +{{< /highlight >}} + If however there are code paths in which the states are not fetched, then annotating with @AlwaysFetched will add unnecessary fetching for those paths. In this case, the readLater method allows the runner to know that the state will be read in the future, allowing multiple state reads to be batched together. @@ -4703,7 +4724,7 @@ perUser.apply(ParDo.of(new DoFn, OutputT>() { })); {{< /highlight >}} -{{< highlight python >}} +{{< highlight py >}} class EventTimerDoFn(DoFn): ALL_ELEMENTS = BagStateSpec('buffer', coders.VarIntCoder()) TIMER = TimerSpec('timer', TimeDomain.WATERMARK) @@ -4751,7 +4772,7 @@ perUser.apply(ParDo.of(new DoFn, OutputT>() { })); {{< /highlight >}} -{{< highlight python >}} +{{< highlight py >}} class ProcessingTimerDoFn(DoFn): ALL_ELEMENTS = BagStateSpec('buffer', coders.VarIntCoder()) TIMER = TimerSpec('timer', TimeDomain.REAL_TIME) @@ -4775,12 +4796,15 @@ _ = (p | 'Read per user' >> ReadPerUser() #### 11.3.3. Dynamic timer tags {#dynamic-timer-tags} -Beam also supports dynamically setting a timer tag using `TimerMap`. This allows for setting multiple different timers +Beam also supports dynamically setting a timer tag using `TimerMap` in the Java SDK. This allows for setting multiple different timers in a `DoFn` and allowing for the timer tags to be dynamically chosen - e.g. based on data in the input elements. A timer with a specific tag can only be set to a single timestamp, so setting the timer again has the effect of overwriting the previous expiration time for the timer with that tag. Each `TimerMap` is identified with a timer family id, and timers in different timer families are independent. +In the Python SDK, a dynamic timer tag can be specified while calling `set()` or `clear()`. By default, the timer +tag is an empty string if not specified. + {{< highlight java >}} PCollection> perUser = readPerUser(); perUser.apply(ParDo.of(new DoFn, OutputT>() { @@ -4800,9 +4824,33 @@ perUser.apply(ParDo.of(new DoFn, OutputT>() { })); {{< /highlight >}} -{{< highlight python >}} -To be supported, See BEAM-9602 +{{< highlight py >}} +class TimerDoFn(DoFn): + ALL_ELEMENTS = BagStateSpec('buffer', coders.VarIntCoder()) + TIMER = TimerSpec('timer', TimeDomain.REAL_TIME) + + def process(self, + element_pair, + buffer = DoFn.StateParam(ALL_ELEMENTS), + timer = DoFn.TimerParam(TIMER)): + buffer.add(element_pair[1]) + # Set a timer to go off 30 seconds in the future with dynamic timer tag 'first_timer'. + # And set a timer to go off 60 seconds in the future with dynamic timer tag 'second_timer'. + timer.set(Timestamp.now() + Duration(seconds=30), dynamic_timer_tag='first_timer') + timer.set(Timestamp.now() + Duration(seconds=60), dynamic_timer_tag='second_timer') + # Note that a timer can also be explicitly cleared if previously set with a dynamic timer tag: + # timer.clear(dynamic_timer_tag=...) + + @on_timer(TIMER) + def expiry_callback(self, buffer = DoFn.StateParam(ALL_ELEMENTS), timer_tag=DoFn.DynamicTimerTagParam): + # Process timer, the dynamic timer tag associated with expiring timer can be read back with DoFn.DynamicTimerTagParam. + buffer.clear() + yield (timer_tag, 'fired') + +_ = (p | 'Read per user' >> ReadPerUser() + | 'ProcessingTime timer pardo' >> beam.ParDo(TimerDoFn())) {{< /highlight >}} + #### 11.3.4. Timer output timestamps {#timer-output-timestamps} By default, event-time timers will hold the output watermark of the `ParDo` to the timestamp of the timer. This means @@ -4906,6 +4954,10 @@ perUser.apply(ParDo.of(new DoFn, OutputT>() { })); {{< /highlight >}} +{{< highlight py >}} +Timer output timestamps is not yet supported in Python SDK. See BEAM-11507. +{{< /highlight >}} + ### 11.4. Garbage collecting state {#garbage-collecting-state} Per-key state needs to be garbage collected, or eventually the increasing size of state may negatively impact performance. There are two common strategies for garbage collecting state. @@ -4934,7 +4986,7 @@ perUser.apply(Window.into(CalendarWindows.days(1) })); {{< /highlight >}} -{{< highlight python >}} +{{< highlight py >}} class StateDoFn(DoFn): ALL_ELEMENTS = BagStateSpec('buffer', coders.VarIntCoder()) @@ -4995,7 +5047,7 @@ perUser.apply(ParDo.of(new DoFn, OutputT>() { } {{< /highlight >}} -{{< highlight python >}} +{{< highlight py >}} class UserDoFn(DoFn): ALL_ELEMENTS = BagStateSpec('state', coders.VarIntCoder()) MAX_TIMESTAMP = CombiningValueStateSpec('max_timestamp_seen', max) @@ -5052,7 +5104,7 @@ PCollection> eventsPerLinkId = readEvents() .apply(WithKeys.of(Event::getLinkId).withKeyType(TypeDescriptors.strings())); -perUser.apply(ParDo.of(new DoFn, JoinedEvent>() { +eventsPerLinkId.apply(ParDo.of(new DoFn, JoinedEvent>() { // Store the view event. @StateId("view") private final StateSpec> viewState = StateSpecs.value(); // Store the click event. @@ -5114,6 +5166,57 @@ perUser.apply(ParDo.of(new DoFn, JoinedEvent>() { })); {{< /highlight >}} +{{< highlight py >}} +class JoinDoFn(DoFn): + # stores the view event. + VIEW_STATE_SPEC = ReadModifyWriteStateSpec('view', EventCoder()) + # stores the click event. + CLICK_STATE_SPEC = ReadModifyWriteStateSpec('click', EventCoder()) + # The maximum element timestamp value seen so far. + MAX_TIMESTAMP = CombiningValueStateSpec('max_timestamp_seen', max) + # Timer that fires when an hour goes by with an incomplete join. + GC_TIMER = TimerSpec('gc', TimeDomain.WATERMARK) + + def process(self, + element, + view=DoFn.StateParam(VIEW_STATE_SPEC), + click=DoFn.StateParam(CLICK_STATE_SPEC), + max_timestamp_seen=DoFn.StateParam(MAX_TIMESTAMP), + ts=DoFn.TimestampParam, + gc=DoFn.TimerParam(GC_TIMER)): + event = element + if event.type == 'view': + view.write(event) + else: + click.write(event) + + previous_view = view.read() + previous_click = click.read() + + # We've seen both a view and a click. Output a joined event and clear state. + if previous_view and previous_click: + yield (previous_view, previous_click) + view.clear() + click.clear() + max_timestamp_seen.clear() + else: + max_timestamp_seen.add(ts) + gc.set(max_timestamp_seen.read() + Duration(seconds=3600)) + + @on_timer(GC_TIMER) + def gc_callback(self, + view=DoFn.StateParam(VIEW_STATE_SPEC), + click=DoFn.StateParam(CLICK_STATE_SPEC), + max_timestamp_seen=DoFn.StateParam(MAX_TIMESTAMP)): + view.clear() + click.clear() + max_timestamp_seen.clear() + + +_ = (p | 'EventsPerLinkId' >> ReadPerLinkEvents() + | 'Join DoFn' >> beam.ParDo(JoinDoFn())) +{{< /highlight >}} + #### 11.5.2. Batching RPCs {#batching-rpcs} In this example, input elements are being forwarded to an external RPC service. The RPC accepts batch requests - @@ -5155,6 +5258,31 @@ perUser.apply(ParDo.of(new DoFn, OutputT>() { })); {{< /highlight >}} +{{< highlight py >}} +class BufferDoFn(DoFn): + BUFFER = BagStateSpec('buffer', EventCoder()) + IS_TIMER_SET = ReadModifyWriteStateSpec('is_timer_set', BooleanCoder()) + OUTPUT = TimerSpec('output', TimeDomain.REAL_TIME) + + def process(self, + buffer=DoFn.StateParam(BUFFER), + is_timer_set=DoFn.StateParam(IS_TIMER_SET), + timer=DoFn.TimerParam(OUTPUT)): + buffer.add(element) + if not is_timer_set.read(): + timer.set(Timestamp.now() + Duration(seconds=10)) + is_timer_set.write(True) + + @on_timer(OUTPUT) + def output_callback(self, + buffer=DoFn.StateParam(BUFFER), + is_timer_set=DoFn.StateParam(IS_TIMER_SET)): + send_rpc(list(buffer.read())) + buffer.clear() + is_timer_set.clear() + +{{< /highlight >}} + ## 12. Splittable `DoFns` {#splittable-dofns} A Splittable `DoFn` (SDF) enables users to create modular components containing I/Os (and some advanced 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 73c05eb8f06d..40aacb01bc37 100644 --- a/website/www/site/content/en/get-started/beam-overview.md +++ b/website/www/site/content/en/get-started/beam-overview.md @@ -23,7 +23,7 @@ limitations under the License. Apache Beam is an open source, unified model for defining both batch and streaming data-parallel processing pipelines. Using one of the open source Beam SDKs, you build a program that defines the pipeline. The pipeline is then executed by one of Beam's supported **distributed processing back-ends**, which include [Apache Flink](https://flink.apache.org), [Apache Spark](http://spark.apache.org), and [Google Cloud Dataflow](https://cloud.google.com/dataflow). -Beam is particularly useful for [Embarrassingly Parallel](https://en.wikipedia.org/wiki/Embarassingly_parallel) data processing tasks, in which the problem can be decomposed into many smaller bundles of data that can be processed independently and in parallel. You can also use Beam for Extract, Transform, and Load (ETL) tasks and pure data integration. These tasks are useful for moving data between different storage media and data sources, transforming data into a more desirable format, or loading data onto a new system. +Beam is particularly useful for [embarrassingly parallel](https://en.wikipedia.org/wiki/Embarassingly_parallel) data processing tasks, in which the problem can be decomposed into many smaller bundles of data that can be processed independently and in parallel. You can also use Beam for Extract, Transform, and Load (ETL) tasks and pure data integration. These tasks are useful for moving data between different storage media and data sources, transforming data into a more desirable format, or loading data onto a new system. ## Apache Beam SDKs @@ -31,9 +31,9 @@ The Beam SDKs provide a unified programming model that can represent and transfo Beam currently supports the following language-specific SDKs: -- Java ![Java logo](/images/logos/sdks/java.png) -- Python ![Python logo](/images/logos/sdks/python.png) -- Go Go logo +- [Apache Beam Java SDK](/documentation/sdks/java) ![Java logo](/images/logos/sdks/java.png) +- [Apache Beam Python SDK](/documentation/sdks/python) ![Python logo](/images/logos/sdks/python.png) +- [Apache Beam Go SDK](/documentation/sdks/go) Go logo A Scala Scala logo interface is also available as [Scio](https://github.com/spotify/scio). @@ -41,14 +41,16 @@ A Scala Scala logo The Beam Pipeline Runners translate the data processing pipeline you define with your Beam program into the API compatible with the distributed processing back-end of your choice. When you run your Beam program, you'll need to specify an [appropriate runner](/documentation/runners/capability-matrix) for the back-end where you want to execute your pipeline. -Beam currently supports Runners that work with the following distributed processing back-ends: +Beam currently supports the following runners: -- Apache Flink ![Apache Flink logo](/images/logos/runners/flink.png) -- Apache Samza Apache Samza logo -- Apache Spark ![Apache Spark logo](/images/logos/runners/spark.png) -- Google Cloud Dataflow ![Google Cloud Dataflow logo](/images/logos/runners/dataflow.png) -- Hazelcast Jet ![Hazelcast Jet logo](/images/logos/runners/jet.png) -- Twister2 ![Twister2 logo](/images/logos/runners/twister2.png) +- [Direct Runner](/documentation/runners/direct) +- [Apache Flink Runner](/documentation/runners/flink) ![Apache Flink logo](/images/logos/runners/flink.png) +- [Apache Nemo Runner](/documentation/runners/nemo) +- [Apache Samza Runner](/documentation/runners/samza) Apache Samza logo +- [Apache Spark Runner](/documentation/runners/spark) ![Apache Spark logo](/images/logos/runners/spark.png) +- [Google Cloud Dataflow Runner](/documentation/runners/dataflow) ![Google Cloud Dataflow logo](/images/logos/runners/dataflow.png) +- [Hazelcast Jet Runner](/documentation/runners/jet) ![Hazelcast Jet logo](/images/logos/runners/jet.png) +- [Twister2 Runner](/documentation/runners/twister2) ![Twister2 logo](/images/logos/runners/twister2.png) **Note:** You can always execute your pipeline locally for testing and debugging purposes. diff --git a/website/www/site/content/en/get-started/downloads.md b/website/www/site/content/en/get-started/downloads.md index 2ebb1f1c1b44..dd482c288e46 100644 --- a/website/www/site/content/en/get-started/downloads.md +++ b/website/www/site/content/en/get-started/downloads.md @@ -139,7 +139,7 @@ Official [source code download](https://archive.apache.org/dist/beam/2.22.0/apac ### 2.21.0 (2020-05-27) Official [source code download](https://archive.apache.org/dist/beam/2.21.0/apache-beam-2.21.0-source-release.zip). [SHA-512](https://archive.apache.org/dist/beam/2.21.0/apache-beam-2.21.0-source-release.zip.sha512). -[signature](https://archive.apache.org/dist/2.21.0/apache-beam-2.21.0-source-release.zip.asc). +[signature](https://archive.apache.org/dist/beam/2.21.0/apache-beam-2.21.0-source-release.zip.asc). [Release notes](https://issues.apache.org/jira/secure/ReleaseNote.jspa?projectId=12319527&version=12347143). [Blog post](/blog/beam-2.21.0). diff --git a/website/www/site/content/en/get-started/quickstart-java.md b/website/www/site/content/en/get-started/quickstart-java.md index 6c7f9a37dc24..4286a4de63f3 100644 --- a/website/www/site/content/en/get-started/quickstart-java.md +++ b/website/www/site/content/en/get-started/quickstart-java.md @@ -21,7 +21,7 @@ limitations under the License. # Apache Beam Java SDK Quickstart -This Quickstart will walk you through executing your first Beam pipeline to run [WordCount](/get-started/wordcount-example), written using Beam's [Java SDK](/documentation/sdks/java), on a [runner](/documentation#runners) of your choice. +This quickstart shows you how to set up a Java development environment and run an [example pipeline](/get-started/wordcount-example) written with the [Apache Beam Java SDK](/documentation/sdks/java), using a [runner](/documentation#runners) of your choice. If you're interested in contributing to the Apache Beam Java codebase, see the [Contribution Guide](/contribute). @@ -111,9 +111,11 @@ Ensure you are in the same directory as the `pom.xml` file generated from the pr $ gradle init {{< /highlight >}} +You'll be asked if you want to generate a Gradle build. Enter **yes**. You'll also be prompted to choose a DSL (Groovy or Kotlin). This tutorial uses Groovy, so select that if you don't have a preference. + After you have converted the project to Gradle: -1. Edit the generated `build.gradle` file by adding `mavenCentral()` under `repositories`: +1. In the generated `build.gradle` file, in the `repositories` block, replace `mavenLocal()` with `mavenCentral()`: {{< highlight >}} repositories { mavenCentral() @@ -140,18 +142,20 @@ task execute (type:JavaExec) { $ gradle build {{< /highlight >}} -## Run WordCount +## Run a pipeline -A single Beam pipeline can run on multiple Beam [runners](/documentation#runners), including the [FlinkRunner](/documentation/runners/flink), [SparkRunner](/documentation/runners/spark), [NemoRunner](/documentation/runners/nemo), [JetRunner](/documentation/runners/jet), or [DataflowRunner](/documentation/runners/dataflow). The [DirectRunner](/documentation/runners/direct) is a common runner for getting started, as it runs locally on your machine and requires no specific setup. +A single Beam pipeline can run on multiple Beam [runners](/documentation#runners), including the [FlinkRunner](/documentation/runners/flink), [SparkRunner](/documentation/runners/spark), [NemoRunner](/documentation/runners/nemo), [JetRunner](/documentation/runners/jet), or [DataflowRunner](/documentation/runners/dataflow). The [DirectRunner](/documentation/runners/direct) is a common runner for getting started, as it runs locally on your machine and requires no specific setup. If you're just trying out Beam and you're not sure what to use, use the [DirectRunner](/documentation/runners/direct). -After you've chosen which runner you'd like to use: +The general process for running a pipeline goes like this: 1. Ensure you've done any runner-specific setup. -1. Build your commandline by: - 1. Specifying a specific runner with `--runner=` (defaults to the [DirectRunner](/documentation/runners/direct)) - 1. Adding any runner-specific required options - 1. Choosing input files and an output location are accessible on the chosen runner. (For example, you can't access a local file if you are running the pipeline on an external cluster.) -1. Run your first WordCount pipeline. +1. Build your command line: + 1. Specify a runner with `--runner=` (defaults to the [DirectRunner](/documentation/runners/direct)). + 1. Add any runner-specific required options. + 1. Choose input files and an output location that are accessible to the runner. (For example, you can't access a local file if you are running the pipeline on an external cluster.) +1. Run the command. + +To run the WordCount pipeline, see the Maven and Gradle examples below. ### Run WordCount Using Maven From 5f4c6fa1088891678cc8a0450fc98888ef6009d0 Mon Sep 17 00:00:00 2001 From: Jakub Sadowski Date: Mon, 1 Feb 2021 21:55:33 +0100 Subject: [PATCH 13/24] fix todos --- website/www/site/data/en/quotes.yaml | 6 ++-- website/www/site/i18n/home/calendar/en.yaml | 31 ++------------------- website/www/site/layouts/index.html | 5 ---- 3 files changed, 4 insertions(+), 38 deletions(-) diff --git a/website/www/site/data/en/quotes.yaml b/website/www/site/data/en/quotes.yaml index 537171a7d4c2..dd02ecbb869a 100644 --- a/website/www/site/data/en/quotes.yaml +++ b/website/www/site/data/en/quotes.yaml @@ -10,14 +10,12 @@ # See the License for the specific language governing permissions and # limitations under the License. -# TODO: -# Placeholder texts should be updated later - text: A framework that delivers the flexibility and advanced functionality our customers need. icon: icons/quote-icon.svg logoUrl: images/quote-paypal-logo.png - text: A framework that delivers the flexibility and advanced functionality our customers need. - icon: icons/quote-icon.svg + icon: icons/quote-icon.svg logoUrl: images/quote-paypal-logo.png - text: A framework that delivers the flexibility and advanced functionality our customers need. icon: icons/quote-icon.svg - logoUrl: images/quote-paypal-logo.png \ No newline at end of file + logoUrl: images/quote-paypal-logo.png diff --git a/website/www/site/i18n/home/calendar/en.yaml b/website/www/site/i18n/home/calendar/en.yaml index 948854e1a09d..cb1e5f95d2ec 100644 --- a/website/www/site/i18n/home/calendar/en.yaml +++ b/website/www/site/i18n/home/calendar/en.yaml @@ -9,36 +9,9 @@ # 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. - -# TODO: -# Placeholder texts should be updated later + - id: home-calendar-title translation: "Stay up to date with Beam" -- id: home-calendar-category-tag-first - translation: "Category" -- id: home-calendar-category-date-first - translation: "2020/02/21" -- id: home-calendar-card-title-first - translation: "Performance-Driven Runtime Type Checking for the Python SDK" -- id: home-calendar-card-author-first - translation: "Saavan Nanavati" -- id: home-calendar-category-tag-second - translation: "Category" -- id: home-calendar-category-date-second - translation: "2020/02/21" -- id: home-calendar-card-title-second - translation: "Performance-Driven Runtime Type Checking for the Python SDK" -- id: home-calendar-card-author-second - translation: "Saavan Nanavati" -- id: home-calendar-category-tag-third - translation: "Category" -- id: home-calendar-category-date-third - translation: "2020/02/21" -- id: home-calendar-card-title-third - translation: "Performance-Driven Runtime Type Checking for the Python SDK" -- id: home-calendar-card-author-third - translation: "Saavan Nanavati" - id: home-calendar-card-events-title translation: "Upcoming events" -- id: home-calendar-card-events-button - translation: "SEE MORE" + diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html index da1f875d1471..c69c85db6210 100644 --- a/website/www/site/layouts/index.html +++ b/website/www/site/layouts/index.html @@ -113,11 +113,6 @@

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

{{ end }} -{{/* - TODO: - This is the implementation of the design. - The event sync functionality will be implemented when we have the event page. -*/}} {{ define "calendar-section" }}

From 90dd9c8a0bb9041d1968ee9bfb8d873c36f38865 Mon Sep 17 00:00:00 2001 From: Jakub Sadowski Date: Mon, 1 Feb 2021 21:57:06 +0100 Subject: [PATCH 14/24] fix todos --- website/www/site/data/en/quotes.yaml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/website/www/site/data/en/quotes.yaml b/website/www/site/data/en/quotes.yaml index dd02ecbb869a..fa66ce03c05b 100644 --- a/website/www/site/data/en/quotes.yaml +++ b/website/www/site/data/en/quotes.yaml @@ -12,10 +12,10 @@ - text: A framework that delivers the flexibility and advanced functionality our customers need. icon: icons/quote-icon.svg - logoUrl: images/quote-paypal-logo.png + logoUrl: images/logos/full-color/nameless/eBay.png - text: A framework that delivers the flexibility and advanced functionality our customers need. icon: icons/quote-icon.svg - logoUrl: images/quote-paypal-logo.png + logoUrl: images/logos/full-color/nameless/klio.png - text: A framework that delivers the flexibility and advanced functionality our customers need. icon: icons/quote-icon.svg - logoUrl: images/quote-paypal-logo.png + logoUrl: images/logos/full-color/nameless/mozilla.png From 7c54e8c271cce1949ea922c781488f4d963d69ce Mon Sep 17 00:00:00 2001 From: Jakub-Sadowski Date: Tue, 2 Feb 2021 10:30:23 +0100 Subject: [PATCH 15/24] Update website/www/site/layouts/index.html Co-authored-by: Brian Hulette --- website/www/site/layouts/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html index c69c85db6210..afba8646b66c 100644 --- a/website/www/site/layouts/index.html +++ b/website/www/site/layouts/index.html @@ -154,10 +154,10 @@

{{ T "home-calendar-card-events-title" }}

- +
- +

From 853ebd9415ff4852c74748bf97c25dfa0688826a Mon Sep 17 00:00:00 2001 From: Jakub Sadowski Date: Tue, 2 Feb 2021 11:49:04 +0100 Subject: [PATCH 16/24] fixes --- .../site/content/en/documentation/_index.md | 12 +++++----- website/www/site/data/en/graphic.yaml | 22 +++++++++++++++++++ website/www/site/layouts/blog/list.html | 14 ++++++++++-- website/www/site/layouts/blog/single.html | 14 +++++++++--- website/www/site/layouts/index.html | 16 ++++++++++---- website/www/site/layouts/partials/head.html | 1 + 6 files changed, 64 insertions(+), 15 deletions(-) create mode 100644 website/www/site/data/en/graphic.yaml diff --git a/website/www/site/content/en/documentation/_index.md b/website/www/site/content/en/documentation/_index.md index af6c0a0a4fec..36812d53b630 100644 --- a/website/www/site/content/en/documentation/_index.md +++ b/website/www/site/content/en/documentation/_index.md @@ -27,15 +27,15 @@ This section provides in-depth conceptual information and reference material for Learn about the Beam Programming Model and the concepts common to all Beam SDKs and Runners. -- Read the [Programming Guide](/documentation/programming-guide/), which introduces all the key Beam concepts. -- Learn about Beam's [execution model](/documentation/runtime/model) to better understand how pipelines execute. -- Visit [Learning Resources](/documentation/resources/learning-resources) for some of our favorite articles and talks about Beam. +* Read the [Programming Guide](/documentation/programming-guide/), which introduces all the key Beam concepts. +* Learn about Beam's [execution model](/documentation/runtime/model) to better understand how pipelines execute. +* Visit [Learning Resources](/documentation/resources/learning-resources) for some of our favorite articles and talks about Beam. ## Pipeline Fundamentals -- [Design Your Pipeline](/documentation/pipelines/design-your-pipeline/) by planning your pipeline’s structure, choosing transforms to apply to your data, and determining your input and output methods. -- [Create Your Pipeline](/documentation/pipelines/create-your-pipeline/) using the classes in the Beam SDKs. -- [Test Your Pipeline](/documentation/pipelines/test-your-pipeline/) to minimize debugging a pipeline’s remote execution. +* [Design Your Pipeline](/documentation/pipelines/design-your-pipeline/) by planning your pipeline’s structure, choosing transforms to apply to your data, and determining your input and output methods. +* [Create Your Pipeline](/documentation/pipelines/create-your-pipeline/) using the classes in the Beam SDKs. +* [Test Your Pipeline](/documentation/pipelines/test-your-pipeline/) to minimize debugging a pipeline’s remote execution. ## SDKs 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/layouts/blog/list.html b/website/www/site/layouts/blog/list.html index d6e971a66ab5..bab4a8635f7c 100644 --- a/website/www/site/layouts/blog/list.html +++ b/website/www/site/layouts/blog/list.html @@ -10,10 +10,11 @@ limitations under the License. See accompanying LICENSE file. */}} + {{ define "main" }}

{{ T "blog-title" }}

- + {{ $data := index $.Site.Data.authors }} {{ $pages := .Pages }} {{ $.Scratch.Set "categories" (slice ) }} {{ $.Scratch.Set "noCategories" 0 }} @@ -62,7 +63,16 @@

{{ T "blog-title" }}

{{ .Title }}

- {{ delimit $authors ", " " & "}} + {{ range $i, $item := $authors }} + {{ $author := index $data $item }} + {{ if eq $i (sub (len $authors) 1) }} + {{ $author.name }} + {{ else if eq $i (sub (len $authors) 2) }} + {{ $author.name }} & + {{ else }} + {{ $author.name }}, + {{ end }} + {{ end }}

{{ .Summary | plainify | chomp }}
diff --git a/website/www/site/layouts/blog/single.html b/website/www/site/layouts/blog/single.html index 5c28d719f983..e693b48f75d5 100644 --- a/website/www/site/layouts/blog/single.html +++ b/website/www/site/layouts/blog/single.html @@ -12,6 +12,7 @@ {{ define "main" }} {{ $authors := .Params.authors }} + {{ $data := index $.Site.Data.authors }}
@@ -63,10 +64,17 @@

Latest from the blog

{{ .Title }}

- {{ if .Params.authors }} - {{ delimit .Params.authors ", " " & " }} + {{ range $i, $item := $authors }} + {{ $author := index $data $item }} + {{ if eq $i (sub (len $authors) 1) }} + {{ $author.name }} + {{ else if eq $i (sub (len $authors) 2) }} + {{ $author.name }} & + {{ else }} + {{ $author.name }}, + {{ end }} {{ end }} -

+

{{ end }} diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html index c69c85db6210..f0c60f784abb 100644 --- a/website/www/site/layouts/index.html +++ b/website/www/site/layouts/index.html @@ -127,7 +127,7 @@

-
+
{{ range first 2 (after 1 (where .Site.Pages.ByPublishDate.Reverse "Section" "blog")) }} @@ -142,10 +142,18 @@

{{ .Title }}

- {{ if .Params.authors }} - {{ delimit .Params.authors ", " " & " }} + {{ $authors := .Params.authors }} + {{ range $i, $item := $authors }} + {{ $author := index $.Site.Data.authors $item }} + {{ if eq $i (sub (len $authors) 1) }} + {{ $author.name }} + {{ else if eq $i (sub (len $authors) 2) }} + {{ $author.name }} & + {{ else }} + {{ $author.name }}, + {{ end }} {{ end }} -

+

{{ end }} diff --git a/website/www/site/layouts/partials/head.html b/website/www/site/layouts/partials/head.html index f256d46593ec..059e890bffbf 100644 --- a/website/www/site/layouts/partials/head.html +++ b/website/www/site/layouts/partials/head.html @@ -46,6 +46,7 @@ +