[BEAM-13518][Playground] Beam Playground quickstart page on the Beam website

website/www/site/assets/scss/_global.sass

@@ -131,6 +131,9 @@ body
         opacity: 0.7
         filter: alpha(opacity=70)
         cursor: pointer
+  &.playground
+    padding: 0
+    border-top-left-radius: 8px
 
 .snippet
   max-width: 100%

website/www/site/content/en/get-started/try-beam-playground.md

@@ -0,0 +1,102 @@
+---
+title: "Try Beam Playground (Beta)"
+---
+<!--
+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.
+-->
+
+# Try Beam Playground (Beta)
+
+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 an Apache Beam examples at
+[Beam Playground](https://frontend-beta-dot-apache-beam-testing.appspot.com/).
+
+## Beam Playground WordCount Example
+
+{{< playground "SDK_JAVA/MinimalWordCount" >}}
+
+## How To Add New Examples
+
+To add an Apache Beam example/test/kata into Beam Playground catalog,
+add the `beam-playground` tag into the file to be added.
+`beam-playground` tag is a yaml format comment:
+
+{{< highlight java >}}
+// beam-playground:
+//   name: Name of the example/test/kata
+//   description: Description of the example/test/kata
+//   multifile: false
+//   pipeline_options: --option1 value1 --option2 value2
+//   categories:
+//     - category 1
+//     - category 2
+//     - category N
+
+// example code
+{{< /highlight >}}
+{{< highlight py >}}
+# beam-playground:
+#   name: Name of the example/test/kata
+#   description: Description of the example/test/kata
+#   multifile: false
+#   pipeline_options: --option1 value1 --option2 value2
+#   categories:
+#     - category 1
+#     - category 2
+#     - category N
+
+# example code
+{{< /highlight >}}
+{{< highlight go >}}
+// beam-playground:
+//   name: Name of the example/test/kata
+//   description: Description of the example/test/kata
+//   multifile: false
+//   pipeline_options: --option1 value1 --option2 value2
+//   categories:
+//     - category 1
+//     - category 2
+//     - category N
+
+// example code
+{{< /highlight >}}
+
+The 'beam-playground' tag consists of the following **required** elements:
+
+- `beam-playground` - tag title.
+- `name` - string field. Name of the Beam example/test/kata that will be displayed in the Beam Playground
+examples catalog.
+- `description` - string field. Description of the Beam example/test/kata that will be displayed in Beam Playground.
+- `multifile` - boolean field. Specifies if the given example consists of multiple files or not.
+- `pipeline_options` - string field. Contains information about pipeline options of the Beam example/test/kata.
+- `categories` - list type field.
+Lists categories this example is included into. Available categories are listed in
+[playground/categories.yaml](https://github.com/apache/beam/blob/master/playground/categories.yaml).
+If some Beam example/kata/test needs to add a new category, then please submit PR with the changes to `categories.yaml`.
+After the category has been added, it can be used in the examples.
+
+More details on examples in Apache Beam Playground can be found
+[here](https://docs.google.com/document/d/1LBeGVTYwJHYbtmLt06OjhBR1CJ1Wgz18MEZjvNkuofc/edit?usp=sharing).
+
+## Next Steps
+
+* Try examples in [Apache Beam Playground](https://frontend-beta-dot-apache-beam-testing.appspot.com/).
+* Submit feedback using "Enjoying Playground?" in
+[Apache Beam Playground](https://frontend-beta-dot-apache-beam-testing.appspot.com/) 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).
+
+Please don't hesitate to [reach out](/community/contact-us) if you encounter any issues!

website/www/site/layouts/partials/section-menu/en/get-started.html

@@ -18,6 +18,7 @@
 
   <ul class="section-nav-list">
     <li><a href="/get-started/try-apache-beam/">Try Apache Beam</a></li>
+    <li><a href="/get-started/try-beam-playground/">Try Beam Playground (Beta)</a></li>
     <li><a href="/get-started/quickstart-java/">Java quickstart</a></li>
     <li><a href="/get-started/quickstart-py/">Python quickstart</a></li>
     <li><a href="/get-started/quickstart-go/">Go quickstart</a></li>

website/www/site/layouts/shortcodes/playground.html

@@ -0,0 +1,19 @@
+{{/*
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. See accompanying LICENSE file.
+*/}}
+
+<iframe
+    src="https://frontend-beta-dot-apache-beam-testing.appspot.com/embedded?example={{ .Get 0 }}"
+    width="100%"
+    height="350px"
+    class="code-snippet playground"
+    allow="clipboard-write">
+</iframe>