You are viewing a plain text version of this content. The canonical link for it is here.
Posted to github@beam.apache.org by GitBox <gi...@apache.org> on 2022/06/21 13:09:07 UTC
[GitHub] [beam] bullet03 opened a new pull request, #21959: [Website] add playground section
bullet03 opened a new pull request, #21959:
URL: https://github.com/apache/beam/pull/21959
- add playground section with no autofocus set in playground iframe on page loading
------------------------
Thank you for your contribution! Follow this checklist to help us incorporate your contribution quickly and easily:
- [ ] [**Choose reviewer(s)**](https://beam.apache.org/contribute/#make-your-change) and mention them in a comment (`R: @username`).
- [ ] Mention the appropriate issue in your description (for example: `addresses #123`), if applicable. This will automatically add a link to the pull request in the issue. If you would like the issue to automatically close on merging the pull request, comment `fixes #<ISSUE NUMBER>` instead.
- [ ] Update `CHANGES.md` with noteworthy changes.
- [ ] If this contribution is large, please file an Apache [Individual Contributor License Agreement](https://www.apache.org/licenses/icla.pdf).
See the [Contributor Guide](https://beam.apache.org/contribute) for more tips on [how to make review process smoother](https://beam.apache.org/contribute/#make-reviewers-job-easier).
To check the build health, please visit [https://github.com/apache/beam/blob/master/.test-infra/BUILD_STATUS.md](https://github.com/apache/beam/blob/master/.test-infra/BUILD_STATUS.md)
GitHub Actions Tests Status (on master branch)
------------------------------------------------------------------------------------------------
[](https://github.com/apache/beam/actions?query=workflow%3A%22Build+python+source+distribution+and+wheels%22+branch%3Amaster+event%3Aschedule)
[](https://github.com/apache/beam/actions?query=workflow%3A%22Python+Tests%22+branch%3Amaster+event%3Aschedule)
[](https://github.com/apache/beam/actions?query=workflow%3A%22Java+Tests%22+branch%3Amaster+event%3Aschedule)
See [CI.md](https://github.com/apache/beam/blob/master/CI.md) for more information about GitHub Actions CI.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] asf-ci commented on pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
asf-ci commented on PR #21959:
URL: https://github.com/apache/beam/pull/21959#issuecomment-1161726200
Can one of the admins verify this patch?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] alexeyinkin commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r916778627
##########
website/www/site/content/en/get-started/try-beam-playground.md:
##########
@@ -25,7 +26,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 "true" "SDK_JAVA/PRECOMPILED_OBJECT_TYPE_EXAMPLE/MinimalWordCount" "" "700px" "playgroundIframe">}}
Review Comment:
I have another vision for this. We often will need Playground with tabs for multiple languages. A shortcode should be like
```
{{< playground >}}
{{< playground_snippet sdk="java" example="SDK_JAVA/PRECOMPILEDOBJECT_TYPE_EXAMPLE/MinimalWordCount" ... >}}
{{< playground_snippet sdk="python" ... >}}
{{< /playground >}}
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] AKosolapov commented on pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
AKosolapov commented on PR #21959:
URL: https://github.com/apache/beam/pull/21959#issuecomment-1185776506
@alexeyinkin Thank you for adding notes from our testing and triage with @alevtinaboiko and @bullet03
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] asf-ci commented on pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
asf-ci commented on PR #21959:
URL: https://github.com/apache/beam/pull/21959#issuecomment-1161726197
Can one of the admins verify this patch?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] bullet03 commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
bullet03 commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r919819921
##########
website/www/site/assets/js/fix-playground-nested-scroll.js:
##########
@@ -10,10 +10,10 @@
// License for the specific language governing permissions and limitations under
// the License.
-$('#playgroundIframeContainer').on('click', function(_) {
- $('#playgroundIframe').css('pointer-events', 'auto');
+$('.playgroundIframeContainer').on('click', function(_) {
+ $('.playgroundIframeContainer > iframe').css('pointer-events', 'auto');
Review Comment:
done
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] bullet03 commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
bullet03 commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r916989427
##########
website/www/site/content/en/get-started/try-beam-playground.md:
##########
@@ -25,7 +26,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 "true" "SDK_JAVA/PRECOMPILED_OBJECT_TYPE_EXAMPLE/MinimalWordCount" "" "700px" "playgroundIframe">}}
Review Comment:
renamed playground shortcode to playground_iframe
##########
website/www/site/layouts/shortcodes/playground.html:
##########
@@ -10,10 +10,13 @@
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 id="playgroundIframeContainer">
+ <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 }}"
+ id="{{ .Get 4 }}"
Review Comment:
removed id
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] alexeyinkin commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r916784489
##########
website/www/site/layouts/shortcodes/playground.html:
##########
@@ -10,10 +10,13 @@
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 id="playgroundIframeContainer">
+ <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 }}"
+ id="{{ .Get 4 }}"
Review Comment:
What is the use for this ID? Is it used outside of the shortcode? If not, can it be generated here or omitted?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] alexeyinkin commented on pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on PR #21959:
URL: https://github.com/apache/beam/pull/21959#issuecomment-1185750095
Known limitations:
- **Mid impact:** To avoid text editor inside embedded Playground take over focus and scrolling while user intends to scroll web page and bring mouse over iframe, implemented an overlay container over embedded Playground leaving only top buttons bar (Run, theme, copy, Try Playground) buttons react to the first user click. If user wants to interact with the code example, Result, Graph – user will first need to click (on the overlay container) that will hide the overlay container, and user will be able to interact with Playground code editor (scroll, edit, etc.). When mouse pointer leaves iframe (user navigates away), the overlay container displayed again so user scrolls web page, as intended
- **Low impact:** On Beam staging, copy button scrolls user to the top of web not reproduced on a local environment or in the current production environment. Do not expect most users to copy in the scenarios we have for home page and try Playground page. Needs more investigate to understand difference between local and staging behavior. http://apache-beam-website-pull-requests.storage.googleapis.com/21959/index.html
- **Low impact:** Firefox browser only – selected text from Results does not loose selection when user clicks outside of Result edit box
- **Low impact:** When selecting text in Output window and dragging mouse pointer below the field, the selection is lost because the pointer leaves the iframe. This is a side effect of the workaround to release the focus.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] alexeyinkin commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r918064730
##########
playground/frontend/README.md:
##########
@@ -85,6 +85,9 @@ For more information see See [CONTRIBUTE.md](CONTRIBUTE.md)
The full list of commands can be found [here](https://flutter.dev/docs/reference/flutter-cli)
+## Embedding
+Page with playground has a vertical, iframe has its own vertical scroll. When user scrolls down the page and gets in playground viewport, inner scroll intercepts the outer, user gets stuck in playground iframe. Solution is to make playground to be opaque to scrolling until clicked. Playground has a container with css pointer-events: none, so user can't interact with it initially until click event happens. If clicked, pointer-events changes value to auto, inner scroll works. When user leaves the playground, iframe scroll becomes opaque to scrolling until next click. Function fix-playground-nested-scroll.js toggles css pointer-events property when click and mouseleave events are triggered.
+
Review Comment:
This is hard to read without an example. I think I will add it myself when I'm done on my part.
Sorry for the overhead.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] alexeyinkin commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r916771279
##########
website/www/site/layouts/shortcodes/playground.html:
##########
@@ -10,10 +10,13 @@
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 id="playgroundIframeContainer">
Review Comment:
`id` should not be used in shortcode because the shortcode can be used multiple times on a page. It actually will be used many times since we need to convert many doc highlighted examples to playground instances.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] alexeyinkin commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r920982700
##########
website/www/site/layouts/get-started/baseof.html:
##########
@@ -37,5 +37,6 @@
</div>
</div>
{{ partial "footer.html" . }}
+{{ partial "check_for_playground.html" . }}
Review Comment:
This only adds this check to `get-started`, but not the home page. Maybe better add this to `footer.html`? That will cover all pages on the website.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] bullet03 commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
bullet03 commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r920911014
##########
website/www/site/layouts/get-started/playground_template.html:
##########
@@ -0,0 +1,42 @@
+{{/*
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License. See accompanying LICENSE file.
+*/}}
+
+<!DOCTYPE html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+<head>
+ {{ partial "head.html" . }}
+</head>
+<body class="body" data-spy="scroll" data-target=".page-nav" data-offset="0">
+ {{ partial "header.html" . }}
+ <div class="clearfix container-main-content">
+ <div class="section-nav closed" data-offset-top="90" data-offset-bottom="500">
+ <span class="section-nav-back glyphicon glyphicon-menu-left"></span>
+ <nav>
+ <ul class="section-nav-list" data-section-nav>
+ {{ partial (printf "section-menu/%s/get-started.html" .Lang) . }}
+ </ul>
+ </nav>
+ </div>
+
+ <nav class="page-nav clearfix" data-offset-top="90" data-offset-bottom="500">
+ {{ .TableOfContents }}
+ </nav>
+
+ <div class="body__contained body__section-nav">
+ {{ .Content }}
+ {{ partial "feedback.html" . }}
+ </div>
+ </div>
+{{ partial "footer.html" . }}
+{{ partial "hooks/body-end-playground.html"}}
Review Comment:
Thank you, used approach #1. Should I make a partial from this code, so it could be reusable?
```
{{ if .HasShortcode "playground_iframe" }}
{{ $fixPlaygroundNestedScroll := resources.Get "js/fix-playground-nested-scroll.js" | minify | fingerprint }}
<script type="text/javascript" src="{{ $fixPlaygroundNestedScroll.RelPermalink }}" defer></script>
{{ end }}
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] bullet03 commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
bullet03 commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r919959049
##########
playground/frontend/README.md:
##########
@@ -85,6 +85,9 @@ For more information see See [CONTRIBUTE.md](CONTRIBUTE.md)
The full list of commands can be found [here](https://flutter.dev/docs/reference/flutter-cli)
+## Embedding
+Page with playground has a vertical, iframe has its own vertical scroll. When user scrolls down the page and gets in playground viewport, inner scroll intercepts the outer, user gets stuck in playground iframe. Solution is to make playground to be opaque to scrolling until clicked. Playground has a container with css pointer-events: none, so user can't interact with it initially until click event happens. If clicked, pointer-events changes value to auto, inner scroll works. When user leaves the playground, iframe scroll becomes opaque to scrolling until next click. Function fix-playground-nested-scroll.js toggles css pointer-events property when click and mouseleave events are triggered.
+
Review Comment:
removed Embedding note from README
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] asf-ci commented on pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
asf-ci commented on PR #21959:
URL: https://github.com/apache/beam/pull/21959#issuecomment-1161726201
Can one of the admins verify this patch?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] bullet03 commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
bullet03 commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r916988775
##########
website/www/site/layouts/index.html:
##########
@@ -49,6 +49,30 @@ <h2 class="pillars-title">
</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 id="playgroundIframeContainer">
+ <iframe
+ src="https://play.beam.apache.org/embedded?enabled=true&example=SDK_JAVA/PRECOMPILED_OBJECT_TYPE_EXAMPLE/MinimalWordCount&code="
Review Comment:
done
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] bullet03 commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
bullet03 commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r917649588
##########
website/www/site/layouts/shortcodes/playground.html:
##########
@@ -10,10 +10,13 @@
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 id="playgroundIframeContainer">
+ <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 }}"
+ id="{{ .Get 4 }}"
Review Comment:
done
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] alexeyinkin commented on pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on PR #21959:
URL: https://github.com/apache/beam/pull/21959#issuecomment-1180653112
I renamed `enabled` param to `editable`. `enabled` was vague, it gives an impression that disabled playground is unable to run the code. `editable` is more precise.
I did it in this branch because it is likely the fastest way to deploy it, and we want this change before URLs start to spread.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] alexeyinkin commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r916768953
##########
website/www/site/layouts/index.html:
##########
@@ -49,6 +49,30 @@ <h2 class="pillars-title">
</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 id="playgroundIframeContainer">
+ <iframe
+ src="https://play.beam.apache.org/embedded?enabled=true&example=SDK_JAVA/PRECOMPILED_OBJECT_TYPE_EXAMPLE/MinimalWordCount&code="
Review Comment:
No need to pass `code` if it's empty.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] bullet03 commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
bullet03 commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r916988883
##########
website/www/site/layouts/shortcodes/playground.html:
##########
@@ -10,10 +10,13 @@
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 id="playgroundIframeContainer">
Review Comment:
done
##########
website/www/site/layouts/shortcodes/playground.html:
##########
@@ -10,10 +10,13 @@
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 id="playgroundIframeContainer">
+ <iframe
+ src="https://frontend-beta-dot-apache-beam-testing.appspot.com/embedded?enabled={{ .Get 0 }}&example={{ .Get 1 }}&code={{ .Get 2 }}"
Review Comment:
done
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] bullet03 commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
bullet03 commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r920902423
##########
website/www/site/assets/js/fix-playground-nested-scroll.js:
##########
@@ -10,10 +10,10 @@
// License for the specific language governing permissions and limitations under
// the License.
-$('#playgroundIframeContainer').on('click', function(_) {
- $('#playgroundIframe').css('pointer-events', 'auto');
+$('.playground-iframe-wrapper-no-scroll').on('click', function(_) {
+ $('.playground-iframe-wrapper-no-scroll').addClass('playground-iframe-wrapper-scroll');
Review Comment:
changed
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] pabloem merged pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
pabloem merged PR #21959:
URL: https://github.com/apache/beam/pull/21959
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] AKosolapov commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
AKosolapov commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r917004682
##########
website/www/site/layouts/shortcodes/playground.html:
##########
@@ -10,10 +10,13 @@
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 id="playgroundIframeContainer">
+ <iframe
+ src="https://frontend-beta-dot-apache-beam-testing.appspot.com/embedded?enabled={{ .Get 0 }}&example={{ .Get 1 }}&code={{ .Get 2 }}"
Review Comment:
Opportunity to update embedded playground source to https://play.beam.apache.org/
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] alexeyinkin commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r916772267
##########
website/www/site/layouts/index.html:
##########
@@ -49,6 +49,30 @@ <h2 class="pillars-title">
</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 id="playgroundIframeContainer">
Review Comment:
Why not use a shortcode here?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] alexeyinkin commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r916789977
##########
website/www/site/content/en/get-started/try-beam-playground.md:
##########
@@ -25,7 +26,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 "true" "SDK_JAVA/PRECOMPILED_OBJECT_TYPE_EXAMPLE/MinimalWordCount" "" "700px" "playgroundIframe">}}
Review Comment:
The idea is that `playground_snippet` inserts a `div` with `data-xxx` attributes or something like this.
`playground` shortcode then inserts a JS that looks for these nested dives. If only one is given, it renders a single iframe. If multiple are given, it creates tabs.
If you need to push this fast, can you rename `playground` shortcode to `playground_iframe` or something like so we can reserve `playground` shortcode for the above solution?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] bullet03 commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
bullet03 commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r917649334
##########
website/www/site/layouts/shortcodes/playground.html:
##########
@@ -10,10 +10,13 @@
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 id="playgroundIframeContainer">
+ <iframe
+ src="https://frontend-beta-dot-apache-beam-testing.appspot.com/embedded?enabled={{ .Get 0 }}&example={{ .Get 1 }}&code={{ .Get 2 }}"
Review Comment:
done
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] asf-ci commented on pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
asf-ci commented on PR #21959:
URL: https://github.com/apache/beam/pull/21959#issuecomment-1161726192
Can one of the admins verify this patch?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] alexeyinkin commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r916778627
##########
website/www/site/content/en/get-started/try-beam-playground.md:
##########
@@ -25,7 +26,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 "true" "SDK_JAVA/PRECOMPILED_OBJECT_TYPE_EXAMPLE/MinimalWordCount" "" "700px" "playgroundIframe">}}
Review Comment:
I have another vision for this. We often will need Playground with tabs for multiple languages. A shortcode should be like
```
{{< playground height="700px" >}}
{{< playground_snippet sdk="java" example="SDK_JAVA/PRECOMPILEDOBJECT_TYPE_EXAMPLE/MinimalWordCount" ... >}}
{{< playground_snippet sdk="python" ... >}}
{{< /playground >}}
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] bullet03 commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
bullet03 commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r920911014
##########
website/www/site/layouts/get-started/playground_template.html:
##########
@@ -0,0 +1,42 @@
+{{/*
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License. See accompanying LICENSE file.
+*/}}
+
+<!DOCTYPE html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+<head>
+ {{ partial "head.html" . }}
+</head>
+<body class="body" data-spy="scroll" data-target=".page-nav" data-offset="0">
+ {{ partial "header.html" . }}
+ <div class="clearfix container-main-content">
+ <div class="section-nav closed" data-offset-top="90" data-offset-bottom="500">
+ <span class="section-nav-back glyphicon glyphicon-menu-left"></span>
+ <nav>
+ <ul class="section-nav-list" data-section-nav>
+ {{ partial (printf "section-menu/%s/get-started.html" .Lang) . }}
+ </ul>
+ </nav>
+ </div>
+
+ <nav class="page-nav clearfix" data-offset-top="90" data-offset-bottom="500">
+ {{ .TableOfContents }}
+ </nav>
+
+ <div class="body__contained body__section-nav">
+ {{ .Content }}
+ {{ partial "feedback.html" . }}
+ </div>
+ </div>
+{{ partial "footer.html" . }}
+{{ partial "hooks/body-end-playground.html"}}
Review Comment:
Thank you, used approach #1.
Made a partial from this code, so it could be reusable in future, since playground will be used on many pages.
```
{{ if .HasShortcode "playground_iframe" }}
{{ $fixPlaygroundNestedScroll := resources.Get "js/fix-playground-nested-scroll.js" | minify | fingerprint }}
<script type="text/javascript" src="{{ $fixPlaygroundNestedScroll.RelPermalink }}" defer></script>
{{ end }}
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] bullet03 commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
bullet03 commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r919819921
##########
website/www/site/assets/js/fix-playground-nested-scroll.js:
##########
@@ -10,10 +10,10 @@
// License for the specific language governing permissions and limitations under
// the License.
-$('#playgroundIframeContainer').on('click', function(_) {
- $('#playgroundIframe').css('pointer-events', 'auto');
+$('.playgroundIframeContainer').on('click', function(_) {
+ $('.playgroundIframeContainer > iframe').css('pointer-events', 'auto');
Review Comment:
done
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] alexeyinkin commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r920052853
##########
website/www/site/layouts/get-started/playground_template.html:
##########
@@ -0,0 +1,42 @@
+{{/*
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License. See accompanying LICENSE file.
+*/}}
+
+<!DOCTYPE html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+<head>
+ {{ partial "head.html" . }}
+</head>
+<body class="body" data-spy="scroll" data-target=".page-nav" data-offset="0">
+ {{ partial "header.html" . }}
+ <div class="clearfix container-main-content">
+ <div class="section-nav closed" data-offset-top="90" data-offset-bottom="500">
+ <span class="section-nav-back glyphicon glyphicon-menu-left"></span>
+ <nav>
+ <ul class="section-nav-list" data-section-nav>
+ {{ partial (printf "section-menu/%s/get-started.html" .Lang) . }}
+ </ul>
+ </nav>
+ </div>
+
+ <nav class="page-nav clearfix" data-offset-top="90" data-offset-bottom="500">
+ {{ .TableOfContents }}
+ </nav>
+
+ <div class="body__contained body__section-nav">
+ {{ .Content }}
+ {{ partial "feedback.html" . }}
+ </div>
+ </div>
+{{ partial "footer.html" . }}
+{{ partial "hooks/body-end-playground.html"}}
Review Comment:
Do we need to include this on each page where this scrolling trick is used? If so, it is inconvenient.
I see the following options to avoid it:
1. There seems to be a technique to check if a shortcode is used anywhere in the page to include scripts in that case:
https://gohugo.io/templates/shortcode-templates/#checking-for-existence
2. Inline JS in the shortcode. It may be non-trivial if we want to avoid IDs on iframes and divs.
3. Include this JS unconditionally on all pages as the last resort, since Playground will likely be used on most of them.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] bullet03 commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
bullet03 commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r916813785
##########
website/www/site/layouts/index.html:
##########
@@ -49,6 +49,30 @@ <h2 class="pillars-title">
</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 id="playgroundIframeContainer">
Review Comment:
as far as I understood according to the answer, we are not able to use shortcodes: https://discourse.gohugo.io/t/shortcode-inside-define-block/39410
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] alexeyinkin commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r916774767
##########
website/www/site/layouts/shortcodes/playground.html:
##########
@@ -10,10 +10,13 @@
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 id="playgroundIframeContainer">
+ <iframe
+ src="https://frontend-beta-dot-apache-beam-testing.appspot.com/embedded?enabled={{ .Get 0 }}&example={{ .Get 1 }}&code={{ .Get 2 }}"
Review Comment:
Better use named parameters in this shortcode since we already have 5. They will only be adding up.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] alexeyinkin commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r918060976
##########
website/www/site/assets/js/fix-playground-nested-scroll.js:
##########
@@ -10,10 +10,10 @@
// License for the specific language governing permissions and limitations under
// the License.
-$('#playgroundIframeContainer').on('click', function(_) {
- $('#playgroundIframe').css('pointer-events', 'auto');
+$('.playgroundIframeContainer').on('click', function(_) {
+ $('.playgroundIframeContainer > iframe').css('pointer-events', 'auto');
Review Comment:
I think it's better to add and remove classes to the div instead if tweaking styles at runtime. I suggest to:
1. Rename this class to `playground-iframe-wrapper-no-scroll` so it is self-descriptive. (Dashes are for this to go in line with my parallel work on embedding).
2. On click, add another class `playground-iframe-wrapper-scroll` that sets `pointer-events: auto` on iframe so it takes over.
3. On mouse leave, remove `playground-iframe-wrapper-scroll` class.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] alexeyinkin commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
alexeyinkin commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r920039570
##########
website/www/site/assets/js/fix-playground-nested-scroll.js:
##########
@@ -10,10 +10,10 @@
// License for the specific language governing permissions and limitations under
// the License.
-$('#playgroundIframeContainer').on('click', function(_) {
- $('#playgroundIframe').css('pointer-events', 'auto');
+$('.playground-iframe-wrapper-no-scroll').on('click', function(_) {
+ $('.playground-iframe-wrapper-no-scroll').addClass('playground-iframe-wrapper-scroll');
Review Comment:
This should be done on `$(this)`, otherwise we affect all Playground instances on the page.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] bullet03 commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
bullet03 commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r919958477
##########
website/www/site/assets/js/fix-playground-nested-scroll.js:
##########
@@ -10,10 +10,10 @@
// License for the specific language governing permissions and limitations under
// the License.
-$('#playgroundIframeContainer').on('click', function(_) {
- $('#playgroundIframe').css('pointer-events', 'auto');
+$('.playgroundIframeContainer').on('click', function(_) {
+ $('.playgroundIframeContainer > iframe').css('pointer-events', 'auto');
Review Comment:
done
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] bullet03 commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
bullet03 commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r920911014
##########
website/www/site/layouts/get-started/playground_template.html:
##########
@@ -0,0 +1,42 @@
+{{/*
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License. See accompanying LICENSE file.
+*/}}
+
+<!DOCTYPE html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+<head>
+ {{ partial "head.html" . }}
+</head>
+<body class="body" data-spy="scroll" data-target=".page-nav" data-offset="0">
+ {{ partial "header.html" . }}
+ <div class="clearfix container-main-content">
+ <div class="section-nav closed" data-offset-top="90" data-offset-bottom="500">
+ <span class="section-nav-back glyphicon glyphicon-menu-left"></span>
+ <nav>
+ <ul class="section-nav-list" data-section-nav>
+ {{ partial (printf "section-menu/%s/get-started.html" .Lang) . }}
+ </ul>
+ </nav>
+ </div>
+
+ <nav class="page-nav clearfix" data-offset-top="90" data-offset-bottom="500">
+ {{ .TableOfContents }}
+ </nav>
+
+ <div class="body__contained body__section-nav">
+ {{ .Content }}
+ {{ partial "feedback.html" . }}
+ </div>
+ </div>
+{{ partial "footer.html" . }}
+{{ partial "hooks/body-end-playground.html"}}
Review Comment:
Thank you, used approach #1. Should I make a partial from this code, so it could be reusable?
`{{ if .HasShortcode "playground_iframe" }}
{{ $fixPlaygroundNestedScroll := resources.Get "js/fix-playground-nested-scroll.js" | minify | fingerprint }}
<script type="text/javascript" src="{{ $fixPlaygroundNestedScroll.RelPermalink }}" defer></script>
{{ end }}`
##########
website/www/site/layouts/get-started/playground_template.html:
##########
@@ -0,0 +1,42 @@
+{{/*
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License. See accompanying LICENSE file.
+*/}}
+
+<!DOCTYPE html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+<head>
+ {{ partial "head.html" . }}
+</head>
+<body class="body" data-spy="scroll" data-target=".page-nav" data-offset="0">
+ {{ partial "header.html" . }}
+ <div class="clearfix container-main-content">
+ <div class="section-nav closed" data-offset-top="90" data-offset-bottom="500">
+ <span class="section-nav-back glyphicon glyphicon-menu-left"></span>
+ <nav>
+ <ul class="section-nav-list" data-section-nav>
+ {{ partial (printf "section-menu/%s/get-started.html" .Lang) . }}
+ </ul>
+ </nav>
+ </div>
+
+ <nav class="page-nav clearfix" data-offset-top="90" data-offset-bottom="500">
+ {{ .TableOfContents }}
+ </nav>
+
+ <div class="body__contained body__section-nav">
+ {{ .Content }}
+ {{ partial "feedback.html" . }}
+ </div>
+ </div>
+{{ partial "footer.html" . }}
+{{ partial "hooks/body-end-playground.html"}}
Review Comment:
Thank you, used approach #1. Should I make a partial from this code, so it could be reusable?
```{{ if .HasShortcode "playground_iframe" }}
{{ $fixPlaygroundNestedScroll := resources.Get "js/fix-playground-nested-scroll.js" | minify | fingerprint }}
<script type="text/javascript" src="{{ $fixPlaygroundNestedScroll.RelPermalink }}" defer></script>
{{ end }}```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] AKosolapov commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
AKosolapov commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r917005261
##########
website/www/site/layouts/shortcodes/playground.html:
##########
@@ -10,10 +10,13 @@
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 id="playgroundIframeContainer">
+ <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 }}"
+ id="{{ .Get 4 }}"
Review Comment:
Playground now has subdomain https://play.beam.apache.org/ - would be nice to update
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] bullet03 commented on a diff in pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
bullet03 commented on code in PR #21959:
URL: https://github.com/apache/beam/pull/21959#discussion_r921939826
##########
website/www/site/layouts/get-started/baseof.html:
##########
@@ -37,5 +37,6 @@
</div>
</div>
{{ partial "footer.html" . }}
+{{ partial "check_for_playground.html" . }}
Review Comment:
added to head.html/head_homepage.html
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [beam] asf-ci commented on pull request #21959: [Website] add playground section
Posted by GitBox <gi...@apache.org>.
asf-ci commented on PR #21959:
URL: https://github.com/apache/beam/pull/21959#issuecomment-1161726195
Can one of the admins verify this patch?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscribe@beam.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org