docs: add Playground section to "Getting Started" (#1773)

## Description

This PR adds the Playground to the Getting Started section in the docs.
The idea is to put forward the Playground as the first place for people
to go and learn about Gno, instead of having to set up a local chain and
all of the things that follow.

I suggest reviewing this PR by running a local version of the docs, with
`yarn start` in the `misc/docusaurus` folder. (when deployment preview
@albttx)

This is one of 2 PRs that will update the Getting started section in the
Docs. The next PR will update the Local setup section to put `gnodev` as
the first option to get started.

Here is the latest version of the PR:
https://www.loom.com/share/636afb0d48ed4bf7ac8043b17463b8fd?sid=0c055f69-a5a8-4ddf-8d42-f550db17dbe3

<details><summary>Contributors' checklist...</summary>

- [x] Added new tests, or not needed, or not feasible
- [x] Provided an example (e.g. screenshot) to aid review or the PR is
self-explanatory
- [x] Updated the official documentation or not needed
- [x] No breaking changes were made, or a `BREAKING CHANGE: xxx` message
was included in the description
- [x] Added references to related issues and PRs
- [x] Provided any useful hints for running manual tests
- [ ] Added new benchmarks to [generated
graphs](https://gnoland.github.io/benchmarks), if any. More info
[here](https://github.com/gnolang/gno/blob/master/.benchmarks/README.md).
</details>

---------

Co-authored-by: Danny <[email protected]>

docs/concepts/gnovm.md

@@ -22,6 +22,6 @@ This enables non-web3 developers to contribute without requiring an understandin
 
 ## Getting started
 
-Install [`gno`](../getting-started/local-setup.md) and refer to the [`examples`](https://github.com/gnolang/gno/tree/master/examples) folder to start developing contracts.
+Install [`gno`](../getting-started/local-setup/local-setup.md) and refer to the [`examples`](https://github.com/gnolang/gno/tree/master/examples) folder to start developing contracts.
 
 Check the [Makefile](https://github.com/gnolang/gno/blob/master/gnovm/Makefile) to enhance GnoVM, Gno, and stdlibs.

docs/getting-started/getting-started.md

@@ -5,4 +5,5 @@ id: getting-started
 # Getting started
 
 Welcome to the **Getting Started** section for Gno. This section outlines how to
-get started with Gno by setting up a local development environment, get funds, etc.
+get started with Gno by using the Gno Playground, as well as how to set up a 
+local development environment, get funds, deploy packages, etc.

docs/getting-started/browsing-gno-source-code.md → docs/getting-started/local-setup/browsing-gno-source-code.md

@@ -6,8 +6,8 @@ id: browsing-gno-source-code
 
 ## Overview
 
-In this tutorial, you will learn how to browse deployed Gno [Realms](../concepts/realms.md)
-and [Packages](../concepts/packages.md). Additionally, you will understand how the `Render` method is utilized
+In this tutorial, you will learn how to browse deployed Gno [Realms](../../concepts/realms.md)
+and [Packages](../../concepts/packages.md). Additionally, you will understand how the `Render` method is utilized
 to achieve Realm state visibility.
 
 ## Prerequisites
@@ -42,13 +42,13 @@ you can specify the remote URL with the `gnoweb` flag named `--remote`
 
 We should be able to access the website locally on http://127.0.0.1:8888/.
 
-![gnoweb screen](../assets/getting-started/browsing-gno-source-code/gnoweb.png)
+![gnoweb screen](../../assets/getting-started/local-setup/browsing-gno-source-code/gnoweb.png)
 
 ## 3. Browse Package source code
 
 Packages in Gno.land usually have names resembling `gno.land/p/<name>`. Since packages do not contain state, we can only
 view their source code on-chain. To learn more about Packages, please check out
-the [Packages](../concepts/packages.md) explanation document.
+the [Packages](../../concepts/packages.md) explanation document.
 
 Using `gnoweb`, we can browse the source code in our browser.
 For example, the `avl` package is deployed at `gno.land/p/demo/avl`.
@@ -58,7 +58,7 @@ To access the source code of the `avl` package, we can append the `/p/demo/avl`
 The final URL for the `avl` package source could be viewable at http://127.0.0.1:8888/p/demo/avl, if we followed
 default setup params, as we did in this guide.
 
-![gnoweb avl](../assets/getting-started/browsing-gno-source-code/gnoweb-avl.png)
+![gnoweb avl](../../assets/getting-started/local-setup/browsing-gno-source-code/gnoweb-avl.png)
 
 From here, we can open any source code file of the deployed on-chain package and inspect its API.
 
@@ -68,7 +68,7 @@ In contrast to Packages, Realms in Gno.land usually have names resembling `gno.l
 
 Realms _do_ contain state, and in addition to being able to view their source code on-chain, users can also view their
 internal state representation in the form of the `Render()` output. To learn more about Realms, please
-check out the [Realms](../concepts/realms.md) explanation document.
+check out the [Realms](../../concepts/realms.md) explanation document.
 
 Using `gnoweb`, we can browse the Realm `Render()` method output and source code in our browser.
 For example, the `boards` Realm is deployed at `gno.land/r/demo/boards`.
@@ -80,7 +80,7 @@ The final URL for the `boards` Realm internal state could be viewable at http://
 followed
 default setup params, as we did in this guide.
 
-![gnoweb boards](../assets/getting-started/browsing-gno-source-code/gnoweb-boards.png)
+![gnoweb boards](../../assets/getting-started/local-setup/browsing-gno-source-code/gnoweb-boards.png)
 
 :::info Render() is not required
 
@@ -93,4 +93,4 @@ Additionally, to view the source code for the realm, we simply need to append th
 
 http://127.0.0.1:8888/r/demo/boards/
 
-![gnoweb boards source](../assets/getting-started/browsing-gno-source-code/gnoweb-boards-source.png)
+![gnoweb boards source](../../assets/getting-started/local-setup/browsing-gno-source-code/gnoweb-boards-source.png)

docs/getting-started/local-setup.md → docs/getting-started/local-setup/local-setup.md

@@ -46,7 +46,7 @@ make build
 
 This will build out the necessary `gno` binary into the `gnovm/cmd` sub-folder:
 
-![gno tool build](../assets/getting-started/local-setup/make-build-gnovm.gif)
+![gno tool build](../../assets/getting-started/local-setup/local-setup/make-build-gnovm.gif)
 
 Next, to make development easier, we need to make the binary available system-wide.
 From the same `gnovm` sub-folder, you can run:
@@ -63,7 +63,7 @@ gno --help
 
 You should get the help output from the command:
 
-![gno help](../assets/getting-started/local-setup/gno-help.gif)
+![gno help](../../assets/getting-started/local-setup/local-setup/gno-help.gif)
 
 Alternatively, if you don't want to have the binary callable system-wide, you can run the binary directly:
 
@@ -78,7 +78,7 @@ The next step is to install several other tools that are required for the Gno de
 - `gnoland` - the Gno [blockchain node](setting-up-a-local-chain.md)
 - `gnokey` - the Gno [private key manager](working-with-key-pairs.md)
 - `gnoweb` - the Gno [source code viewer](browsing-gno-source-code.md)
-- `gnofaucet` - the Gno [native currency faucet](setting-up-funds/running-a-faucet.md)
+- `gnofaucet` - the Gno [native currency faucet](../../gno-tooling/cli/faucet/faucet.md)
 
 To build these tools, from the root directory navigate to the `gno.land` sub-folder, and run the `build` make
 directive:
@@ -90,7 +90,7 @@ make build
 
 This will build out the necessary binaries into the `gno.land/cmd` sub-folder:
 
-![gno tools build](../assets/getting-started/local-setup/make-build-gnoland.gif)
+![gno tools build](../../assets/getting-started/local-setup/local-setup/make-build-gnoland.gif)
 
 Same as with the `gno` tool, we can make these binaries available system-wide.
 From the same `gno.land` sub-folder, you can run:
@@ -107,7 +107,7 @@ gnokey --help
 
 You should get the help output from the command:
 
-![gnokey help](../assets/getting-started/local-setup/gnokey-help.gif)
+![gnokey help](../../assets/getting-started/local-setup/local-setup/gnokey-help.gif)
 
 ## Conclusion
 

docs/getting-started/setting-up-funds/premining-balances.md → docs/getting-started/local-setup/premining-balances.md

@@ -15,7 +15,7 @@ have ample funds to interact with the chain and facilitate contract deployments.
 
 ## Prerequisites
 
-- **`gnoland` and `gnokey` set up. Reference the [Installation](../local-setup.md#3-installing-other-gno-tools) guide
+- **`gnoland` and `gnokey` set up. Reference the [Installation](local-setup.md#3-installing-other-gno-tools) guide
   for steps**
 
 ## 1. Clean chain data
@@ -78,7 +78,7 @@ gnoland start
 This command will initialize the Gno node, generate the `genesis.json` with our newly added premine information, and
 start the chain.
 
-![gnoland start](../../assets/getting-started/setting-up-funds/gnoland-start.gif)
+![gnoland start](../../assets/getting-started/local-setup/setting-up-funds/gnoland-start.gif)
 
 ## 3. Check the account balance
 
@@ -95,7 +95,7 @@ Let's break down this command:
 - **`bank/balances/g1qpymzwx4l4cy6cerdyajp9ksvjsf20rk5y9rtt`** - the ABCI query targets the `bank` module to find
   the `balances` for address `g1qpymzwx4l4cy6cerdyajp9ksvjsf20rk5y9rtt`. Replace the address with your desired address
 
-![gnokey query](../../assets/getting-started/setting-up-funds/gnokey-query.gif)
+![gnokey query](../../assets/getting-started/local-setup/setting-up-funds/gnokey-query.gif)
 
 ## Conclusion
 

docs/getting-started/setting-up-a-local-chain.md → docs/getting-started/local-setup/setting-up-a-local-chain.md

@@ -25,7 +25,7 @@ gnoland start
 The command will trigger a chain initialization process (if you haven't run the node before), and start the Gno node,
 which is ready to accept transactions and interact with other Gno nodes.
 
-![gnoland start](../assets/getting-started/setting-up-a-local-chain/gnoland-start.gif)
+![gnoland start](../../assets/getting-started/local-setup/setting-up-a-local-chain/gnoland-start.gif)
 
 To view the command defaults, simply run the `help` command:
 

docs/getting-started/working-with-key-pairs.md → docs/getting-started/local-setup/working-with-key-pairs.md

@@ -92,7 +92,7 @@ To generate the mnemonic phrase in the console, you can run:
 gnokey generate
 ```
 
-![gnokey generate](../assets/getting-started/creating-a-key-pair/gnokey-generate.gif)
+![gnokey generate](../../assets/getting-started/local-setup/creating-a-key-pair/gnokey-generate.gif)
 
 ## Adding a random private key
 
@@ -109,15 +109,15 @@ After you enter the password, the `gnokey` tool will add the key to the keystore
 phrase](https://en.bitcoin.it/wiki/Seed_phrase), which you should remember somewhere if you want to recover the key at a
 future point in time.
 
-![gnokey add random](../assets/getting-started/creating-a-key-pair/gnokey-add-random.gif)
+![gnokey add random](../../assets/getting-started/local-setup/creating-a-key-pair/gnokey-add-random.gif)
 
 You can check that the key was indeed added to the keystore, by listing available keys:
 
 ```bash
 gnokey list
 ```
 
-![gnokey list](../assets/getting-started/creating-a-key-pair/gnokey-list.gif)
+![gnokey list](../../assets/getting-started/local-setup/creating-a-key-pair/gnokey-list.gif)
 
 ## Adding a private key using a mnemonic
 
@@ -134,7 +134,7 @@ Of course, you can replace `MyKey` with whatever name you want for your key.
 By following the prompts to encrypt the key on disk, and providing a BIP39 mnemonic, we can successfully add
 the key to the keystore.
 
-![gnokey add mnemonic](../assets/getting-started/creating-a-key-pair/gnokey-add-mnemonic.gif)
+![gnokey add mnemonic](../../assets/getting-started/local-setup/creating-a-key-pair/gnokey-add-mnemonic.gif)
 
 ## Deleting a private key
 
@@ -169,7 +169,7 @@ Follow the prompts presented in the terminal. Namely, you will be asked to decry
 and later to encrypt the armor file on disk. It is worth noting that you can also export unencrypted key armor, using
 the `--unsafe` flag.
 
-![gnokey export](../assets/getting-started/creating-a-key-pair/gnokey-export.gif)
+![gnokey export](../../assets/getting-started/local-setup/creating-a-key-pair/gnokey-export.gif)
 
 ## Importing a private key
 
@@ -186,4 +186,4 @@ flag), and then to provide an encryption password for storing the key in the key
 
 After executing the previous command, the `gnokey` keystore will have imported `ImportedKey`.
 
-![gnokey import](../assets/getting-started/creating-a-key-pair/gnokey-import.gif)
+![gnokey import](../../assets/getting-started/local-setup/creating-a-key-pair/gnokey-import.gif)

docs/getting-started/playground-start.md

@@ -0,0 +1,104 @@
+---
+id: playground-start
+---
+
+# Gno Playground
+
+## Overview
+
+The Gno Playground is an innovative web-based editor and sandbox that enables developers to 
+interactively work with the Gno language. It makes coding, testing,
+and deploying simple with its diverse set of tools and features. Users can
+share code, run tests, and deploy projects to Gno.land networks, 
+making it the perfect tool to get started with Gno development.
+
+## Prerequisites
+
+- **A Gno.land compatible wallet**
+  - Currently, [Adena](https://www.adena.app/) is the preferred wallet for
+Gno.land, with more wallets being introduced in the future.
+
+## Playground Features
+
+To get started, visit the Playground at [play.gno.land](https://play.gno.land). You will be greeted with a
+simple `package.gno` file:
+
+![default_playground](../assets/getting-started/playground/default_playground.png)
+
+The Playground has the following features:
+- `Share` - Generate a unique, short, and shareable identifier for your Gno code.
+- `Deploy` - Connect your wallet and publish your code on Gno.land.
+- `Format` - Automatically adjust your Gno code's structure and style for optimal readability and consistency.
+- `Run` - Execute a particular expression within your code to validate its functionality and output.
+- `Test` - Execute predefined tests to verify your code's integrity and ensure it meets expected outcomes.
+- `REPL` - Experiment and troubleshoot in real-time using the GnoVM with interactive REPL features.
+
+Let's dive into each of the Playground features.
+
+### Share
+
+The **Share** feature provides users with a permanent shortlink to the current
+Gno code in the playground, making it a simple and easy way to do code-sharing.
+Links created via the **Share** feature initially set to expire after 5 years,
+ensuring the shared code remains accessible over an extended period.
+
+### Deploy
+
+The **Deploy** feature allows users to seamlessly deploy their Gno code to the 
+chain. After connecting a Gno.land wallet, users can select their desired 
+package path and network for deployment.
+
+![default_deploy](../assets/getting-started/playground/default_deploy.png)
+
+After inputting your desired package path, you can select the network you would 
+like to deploy to, such as [Portal Loop](../concepts/portal-loop.md) or local,
+and click deploy.
+
+:::info
+The Playground will automatically provide enough test tokens to cover the gas 
+cost at the time of deployment, removing the need for using a faucet.
+:::
+
+### Format
+
+The **Format** feature utilizes the Monaco editor and
+[`gofmt`](https://pkg.go.dev/cmd/gofmt) to automatically refine and standardize 
+your Gno code's syntax.
+
+### Run
+
+The **Run** feature will allow you to run an expression on your Gno code. Take the following code
+for an example:
+
+[![run_example](../assets/getting-started/playground/run.png)](https://play.gno.land/p/nBq2W8drjMy)
+
+Running `println(Render("Gnopher"))` will display the following output:
+
+```bash
+Hello Gnopher!
+```
+
+View the code [here](https://play.gno.land/p/nBq2W8drjMy).
+
+### Test
+
+The **Test** feature will look for `_test.gno` files in your playground and run 
+the`gno test -v` command on them. Testing your code will open a terminal that
+will show you the output of the test. Read more about how Gno tests work
+[here](../concepts/gno-test.md).
+
+### REPL (experimental)
+
+The **REPL** feature allows you to experiment with the GnoVM.
+It provides a command-line interface for hands-on learning, iterative testing, and swift prototyping.
+
+## Learning about Gno.land & writing Gno code
+
+If you're new here, don't worry—content is regularly produced to breakdown
+Gno.land to explain its features. Dive into the essentials of Gno.land by 
+exploring the [Concepts](../concepts/concepts.md) section.
+
+To get started writing Gno code, check out the
+[How-to](../how-to-guides/how-to-guides.md) section, the `examples/` folder on
+the [Gno monorepo](https://github.com/gnolang/gno), or one of many community projects and tutorials found in the 
+[awesome-gno](https://github.com/gnolang/awesome-gno/blob/main/README.md) repo on GitHub.

docs/getting-started/setting-up-funds/running-a-faucet.md → docs/gno-tooling/cli/faucet/faucet.md

@@ -8,25 +8,25 @@ id: running-a-faucet
 
 In this tutorial, we will cover how to run a local native currency faucet that works seamlessly with a Gno node.
 Using the faucet, any address can get a hold of native currency funds in case they
-haven't [premined a balance beforehand](premining-balances.md).
+haven't [premined a balance beforehand](../../../getting-started/local-setup/premining-balances.md).
 
 ## Prerequisites
 
 - **`gnoland`, `gnofaucet` and `gnoweb` set up. Reference
-  the [Installation](../local-setup.md#3-installing-other-gno-tools) guide for steps**
+  the [Installation](../../../getting-started/local-setup/local-setup.md#3-installing-other-gno-tools) guide for steps**
 
 ## 1. Ensure a topped-up faucet address
 
 The Gno faucet works by designating a single address as a faucet address that will distribute funds.
 
-Ensure the faucet account will have enough funds by [premining its balance](premining-balances.md) to a high value.
+Ensure the faucet account will have enough funds by [premining its balance](../../../getting-started/local-setup/premining-balances.md) to a high value.
 In case you do not have an existing address added to `gnokey`, you can consult
-the [Working with Key Pairs](../working-with-key-pairs.md) guide.
+the [Working with Key Pairs](../../../getting-started/local-setup/working-with-key-pairs.md) guide.
 
 ## 2. Start the local chain
 
 After ensuring the faucet address will have enough funds in the premine, we
-can [run the local blockchain node](../setting-up-a-local-chain.md).
+can [run the local blockchain node](../../../getting-started/local-setup/setting-up-a-local-chain.md).
 Navigate to the `gno.land` sub-folder and run the appropriate make command:
 
 ```bash
@@ -50,7 +50,7 @@ The command will prompt you to enter the decryption password for the key you've
 
 This will initialize the faucet to listen on port `5050`, by default.
 
-![gnofaucet serve](../../assets/getting-started/setting-up-funds/gnofaucet-serve.gif)
+![gnofaucet serve](../../../assets/getting-started/local-setup/setting-up-funds/gnofaucet-serve.gif)
 
 ## 4. Start the `gnoweb` interface
 
@@ -65,15 +65,15 @@ gnoweb
 
 This will initialize the `gnoweb` interface on `http://127.0.0.1:8888`.
 
-![gnoweb](../../assets/getting-started/setting-up-funds/gnoweb.gif)
+![gnoweb](../../../assets/getting-started/local-setup/setting-up-funds/gnoweb.gif)
 
 ## 5. Use the deployed faucet
 
 Once `gnoweb` has been started, you can navigate to http://127.0.0.1:8888/faucet.
 
 Simply input the desired address you wish to receive funds on (`1 GNOT` by default), and press the `GO` button.
 
-![gnofaucet page](../../assets/getting-started/setting-up-funds/faucet-page.png)
+![gnofaucet page](../../../assets/getting-started/local-setup/setting-up-funds/faucet-page.png)
 
 After you've added the address, you should see a success message in the browser:
 

docs/how-to-guides/interact-with-gnoland.md

@@ -8,7 +8,7 @@ This tutorial will teach you how to interact with the gno.land blockchain by cre
 
 ## Prerequisites
 
-- [Installation](../getting-started/local-setup.md)
+- [Installation](../getting-started/local-setup/local-setup.md)
 
 ## Create an Account
 

docs/how-to-guides/testing-gno.md

@@ -12,7 +12,7 @@ testing techniques that involve data mocking.
 
 ## Prerequisites
 
-- **`gno` set up. Reference the [Installation](../getting-started/local-setup.md#3-installing-other-gno-tools) guide
+- **`gno` set up. Reference the [Installation](../getting-started/local-setup/local-setup.md#3-installing-other-gno-tools) guide
   for steps**
 
 ## Example Realm

docs/overview.md

@@ -49,7 +49,7 @@ In comparison to Ethereum, Gno.land offers distinct advantages:
 ## Using the Gno.land Documentation
 
 Gno.land's documentation adopts the [Diataxis](https://diataxis.fr/) framework, ensuring structured and predictable content. It includes:
-- A [Getting Started](./getting-started/local-setup.md) section, covering simple instructions on how to begin your journey into Gno.land.
+- A [Getting Started](getting-started/local-setup/local-setup.md) section, covering simple instructions on how to begin your journey into Gno.land.
 - Concise how-to guides for specific technical tasks.
 - Conceptual explanations, offering context and usage insights.
 - Detailed reference sections with implementation specifics.