You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@beam.apache.org by pa...@apache.org on 2022/07/15 22:24:06 UTC
[beam] branch master updated: [Website] add playground section, update playground, update get-started #22301
This is an automated email from the ASF dual-hosted git repository.
pabloem pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/beam.git
The following commit(s) were added to refs/heads/master by this push:
new 62a0d0a484f [Website] add playground section, update playground, update get-started #22301
new 29b26be0c2e Merge pull request #21959 from [Website] add playground section
62a0d0a484f is described below
commit 62a0d0a484f2c2dbda481b9bfafb304edd76c2a1
Author: bulat safiullin <bu...@akvelon.com>
AuthorDate: Tue Jun 21 19:06:06 2022 +0600
[Website] add playground section, update playground, update get-started #22301
---
.../site/assets/js/fix-playground-nested-scroll.js | 12 ++++++-----
website/www/site/assets/scss/_playground.sass | 10 +++++++--
.../content/en/get-started/try-beam-playground.md | 6 +++---
website/www/site/layouts/index.html | 24 ++++++++++++++++++++++
website/www/site/layouts/partials/head.html | 3 +++
.../www/site/layouts/partials/head_homepage.html | 3 +++
.../www/site/layouts/partials/hooks/body-end.html | 3 ---
.../{playground.html => playground_iframe.html} | 17 ++++++++-------
8 files changed, 58 insertions(+), 20 deletions(-)
diff --git a/website/www/site/assets/js/fix-playground-nested-scroll.js b/website/www/site/assets/js/fix-playground-nested-scroll.js
index b505e9c27d9..09d212df01a 100644
--- a/website/www/site/assets/js/fix-playground-nested-scroll.js
+++ b/website/www/site/assets/js/fix-playground-nested-scroll.js
@@ -10,10 +10,12 @@
// License for the specific language governing permissions and limitations under
// the License.
-$('#playgroundIframeContainer').on('click', function(_) {
- $('#playgroundIframe').css('pointer-events', 'auto');
-});
+$(document).ready(function() {
+ $('.playground-iframe-overlay').on('click', function(_) {
+ $(this).hide();
+ });
-$('#playgroundIframeContainer').mouseleave(function(_) {
- $('#playgroundIframe').css('pointer-events', 'none');
+ $('.playground-iframe-wrapper-no-scroll').mouseleave(function(_) {
+ $('.playground-iframe-overlay').show();
+ });
});
diff --git a/website/www/site/assets/scss/_playground.sass b/website/www/site/assets/scss/_playground.sass
index 3f3e7767a6d..c4a978949a1 100644
--- a/website/www/site/assets/scss/_playground.sass
+++ b/website/www/site/assets/scss/_playground.sass
@@ -42,5 +42,11 @@
display: flex
justify-content: center
-#playgroundIframe
- pointer-events: none
+.playground-iframe-wrapper-no-scroll
+ position: relative
+ .playground-iframe-overlay
+ position: absolute
+ top: 58px
+ left: 0
+ height: calc(100% - 58px)
+ width: 100%
diff --git a/website/www/site/content/en/get-started/try-beam-playground.md b/website/www/site/content/en/get-started/try-beam-playground.md
index ca32afd840e..b183a9d264a 100644
--- a/website/www/site/content/en/get-started/try-beam-playground.md
+++ b/website/www/site/content/en/get-started/try-beam-playground.md
@@ -25,7 +25,7 @@ You can try the available Apache Beam examples at
## Beam Playground WordCount Example
-{{< playground "true" "SDK_JAVA/PRECOMPILED_OBJECT_TYPE_EXAMPLE/MinimalWordCount" "" "700px">}}
+{{< playground_iframe editable="1" example="SDK_JAVA/PRECOMPILED_OBJECT_TYPE_EXAMPLE/MinimalWordCount" code="" height="700">}}
## How To Add New Examples
@@ -102,9 +102,9 @@ More details on examples in Apache Beam Playground can be found
## Next Steps
-* Try examples in [Apache Beam Playground](https://frontend-beta-dot-apache-beam-testing.appspot.com/).
+* Try examples in [Apache Beam Playground](https://play.beam.apache.org/).
* Submit feedback using "Enjoying Playground?" in
-[Apache Beam Playground](https://frontend-beta-dot-apache-beam-testing.appspot.com/) or via
+[Apache Beam Playground](https://play.beam.apache.org/) or via
[this form](https://docs.google.com/forms/d/e/1FAIpQLSd5_5XeOwwW2yjEVHUXmiBad8Lxk-4OtNcgG45pbyAZzd4EbA/viewform?usp=pp_url).
* Join the Beam [users@](/community/contact-us) mailing list.
* If you're interested in contributing to the Apache Beam Playground codebase, see the [Contribution Guide](/contribute).
diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html
index 718d21ff907..396b0dbac83 100644
--- a/website/www/site/layouts/index.html
+++ b/website/www/site/layouts/index.html
@@ -49,6 +49,30 @@ limitations under the License. See accompanying LICENSE file.
</div>
{{ end }}
+{{ define "playground-section" }}
+<div class="body__contained body__section-nav playground-section" tabindex="-1">
+ <h1>Try Beam Playground</h1>
+ <p>Beam Playground is an interactive environment to try out Beam transforms and examples without having to install Apache Beam in your environment.
+ You can try the Apache Beam examples at <a href="https://play.beam.apache.org/">Beam Playground (Beta)</a>.
+ </p>
+ <br>
+ <br>
+ <a class="playground__mobile" href="https://play.beam.apache.org/">
+ <img src="images/playground.png" alt="beam playground">
+ </a>
+ <div class="playground-iframe-wrapper-no-scroll">
+ <iframe
+ src="https://play.beam.apache.org/embedded?editable=1&example=SDK_JAVA/PRECOMPILED_OBJECT_TYPE_EXAMPLE/MinimalWordCount"
+ width="100%"
+ height="700px"
+ class="code-snippet playground"
+ allow="clipboard-write">
+ </iframe>
+ <div class="playground-iframe-overlay"></div>
+ </div>
+</div>
+{{ end }}
+
{{ define "graphic-section" }}
<div class="graphic">
<div class="quotes">
diff --git a/website/www/site/layouts/partials/head.html b/website/www/site/layouts/partials/head.html
index 3ef2f37c1cf..66fc62ad8d0 100644
--- a/website/www/site/layouts/partials/head.html
+++ b/website/www/site/layouts/partials/head.html
@@ -60,6 +60,9 @@
{{ $calendar := resources.Get "js/calendar.js" | minify | fingerprint }}
<script type="text/javascript" src="{{ $calendar.RelPermalink }}" defer></script>
+{{ $fixPlaygroundNestedScroll := resources.Get "js/fix-playground-nested-scroll.js" | minify | fingerprint }}
+<script type="text/javascript" src="{{ $fixPlaygroundNestedScroll.RelPermalink }}" defer></script>
+
<link rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" href="/feed.xml">
<link rel="canonical" href="{{ .Site.Params.hostName }}{{ .Permalink | absURL }}" data-proofer-ignore>
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
diff --git a/website/www/site/layouts/partials/head_homepage.html b/website/www/site/layouts/partials/head_homepage.html
index 228abf41ab6..edfecc4fc36 100644
--- a/website/www/site/layouts/partials/head_homepage.html
+++ b/website/www/site/layouts/partials/head_homepage.html
@@ -54,6 +54,9 @@
{{ $calendar := resources.Get "js/calendar.js" | minify | fingerprint }}
<script type="text/javascript" src="{{ $calendar.RelPermalink }}" defer></script>
+{{ $fixPlaygroundNestedScroll := resources.Get "js/fix-playground-nested-scroll.js" | minify | fingerprint }}
+<script type="text/javascript" src="{{ $fixPlaygroundNestedScroll.RelPermalink }}" defer></script>
+
<link rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" href="/feed.xml">
<link rel="canonical" href="{{ .Site.Params.hostName }}{{ .Permalink | absURL }}" data-proofer-ignore>
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
diff --git a/website/www/site/layouts/partials/hooks/body-end.html b/website/www/site/layouts/partials/hooks/body-end.html
index 3b1d7eb1252..f03b6e404ef 100644
--- a/website/www/site/layouts/partials/hooks/body-end.html
+++ b/website/www/site/layouts/partials/hooks/body-end.html
@@ -20,6 +20,3 @@
<script src="{{ $swiperSlider.RelPermalink }}"></script>
{{ $quotesSlider := resources.Get "js/quotes-slider.js" | minify | fingerprint }}
<script src="{{ $quotesSlider.RelPermalink }}"></script>
-{{ $fixPlaygroundNestedScroll := resources.Get "js/fix-playground-nested-scroll.js" | minify | fingerprint }}
-<script type="text/javascript" src="{{ $fixPlaygroundNestedScroll.RelPermalink }}" defer></script>
-
diff --git a/website/www/site/layouts/shortcodes/playground.html b/website/www/site/layouts/shortcodes/playground_iframe.html
similarity index 58%
rename from website/www/site/layouts/shortcodes/playground.html
rename to website/www/site/layouts/shortcodes/playground_iframe.html
index 70fe3df87fd..bd0a447b3e5 100644
--- a/website/www/site/layouts/shortcodes/playground.html
+++ b/website/www/site/layouts/shortcodes/playground_iframe.html
@@ -10,10 +10,13 @@ See the License for the specific language governing permissions and
limitations under the License. See accompanying LICENSE file.
*/}}
-<iframe
- src="https://frontend-beta-dot-apache-beam-testing.appspot.com/embedded?enabled={{ .Get 0 }}&example={{ .Get 1 }}&code={{ .Get 2 }}"
- width="100%"
- height="{{ .Get 3 }}"
- class="code-snippet playground"
- allow="clipboard-write">
-</iframe>
+<div class="playground-iframe-wrapper-no-scroll">
+ <iframe
+ src="https://play.beam.apache.org/embedded?editable={{ .Get `editable` }}&example={{ .Get `example` }}&code={{ .Get `code` }}"
+ width="100%"
+ height="{{ .Get `height` }}"
+ class="code-snippet playground"
+ allow="clipboard-write">
+ </iframe>
+ <div class="playground-iframe-overlay"></div>
+</div>