diff --git a/website/www/site/assets/scss/_global.sass b/website/www/site/assets/scss/_global.sass index f7f7b5abe384..dcbb49f5d1c9 100644 --- a/website/www/site/assets/scss/_global.sass +++ b/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% 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 new file mode 100644 index 000000000000..bcd1d7d76563 --- /dev/null +++ b/website/www/site/content/en/get-started/try-beam-playground.md @@ -0,0 +1,102 @@ +--- +title: "Try Beam Playground (Beta)" +--- + + +# 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! diff --git a/website/www/site/layouts/partials/section-menu/en/get-started.html b/website/www/site/layouts/partials/section-menu/en/get-started.html index 72cac11ec40d..96dd76d14ff1 100644 --- a/website/www/site/layouts/partials/section-menu/en/get-started.html +++ b/website/www/site/layouts/partials/section-menu/en/get-started.html @@ -18,6 +18,7 @@