improve: Move to Github codespaces for try-online links. (#109)

* Update docs to reflect codespaces usage.

* Update docs to add direct links to different setups.

* Update links to use main branch.

* docs: MCD-398: Fix Codespaces URLs to launch online dev environments.

* Update 20.play-online.md

Remove unfinished github codespaces devcointainers.

* Update 20.play-online.md

Additional info on where to find backend and frontend

---------

Co-authored-by: Liopold D. Novelli <[email protected]>
Co-authored-by: Lio Novelli <[email protected]>

Author: 3 people

content/1.get-started/20.play-online.md

@@ -1,21 +1,36 @@
 # Play online
 
-## About Gitpod.io
-
-Gitpod is a cloud-based integrated development environment (IDE) that allows developers to work on their code projects collaboratively and efficiently. The online demo is built using [Gitpod](https://gitpod.io) and its Drupal integration, [DrupalPod](https://www.drupal.org/docs/develop/development-tools/drupalpod/getting-started).
-
-
-Gitpod provides 50 hours per month for *free*, so you can just log in via GitHub and give it a try!
-
-
-## Launch with Gitpod
-
-Launch one of the following environments with varying frontends:
-
-- [Drupal 11 + Nuxt3 Naked Demo](https://gitpod.io/new/#DP_PROJECT_NAME=lupus_decoupled,DP_ISSUE_BRANCH=1.x,DP_PROJECT_TYPE=project_module,DP_MODULE_VERSION=1.x,DP_CORE_VERSION=10.3,DP_PATCH_FILE=,FRONTEND_REPOSITORY=https%3A%2F%2Fgithub.com%2Fdrunomics%2Flupus-decoupled-nuxt3-demo,CUSTOM_ELEMENTS_VERSION=3.*,DP_INSTALL_PROFILE=standard/https://github.com/drunomics/lupus-decoupled-project/tree/main) -  [Github](https://github.com/drunomics/lupus-decoupled-nuxt3-demo)
-- [Drupal 11 + Nuxt3 Shadcn Demo](https://gitpod.io/new/#DP_PROJECT_NAME=lupus_decoupled,DP_ISSUE_BRANCH=1.x,DP_PROJECT_TYPE=project_module,DP_MODULE_VERSION=1.x,DP_CORE_VERSION=10.3,DP_PATCH_FILE=,FRONTEND_REPOSITORY=https%3A%2F%2Fgithub.com%2Fdrunomics%2Flupus-decoupled-nuxt3-demo-shadcn,CUSTOM_ELEMENTS_VERSION=3.*,DP_INSTALL_PROFILE=standard/https://github.com/drunomics/lupus-decoupled-project/tree/main) - [Github](https://github.com/drunomics/lupus-decoupled-nuxt3-demo-shadcn)
-- [Drupal 11 + Next.js Demo](https://gitpod.io/new/#DP_PROJECT_NAME=lupus_decoupled,DP_ISSUE_BRANCH=1.x,DP_PROJECT_TYPE=project_module,DP_MODULE_VERSION=1.x,DP_PATCH_FILE=,FRONTEND_REPOSITORY=https%3A%2F%2Fgithub.com%2Fdrunomics%2Flupus-decoupled-nextjs-demo,CUSTOM_ELEMENTS_VERSION=3.*,DP_INSTALL_PROFILE=standard/https://github.com/drunomics/lupus-decoupled-project/tree/main) - [Github](https://github.com/drunomics/lupus-decoupled-nextjs-demo), (Proof of-concept, see README)
-
-
-The environment takes a couple of minutes to launch and logs you into Drupal. Once it's finished, try adding some content nodes and menu items to see it working and continue with your [first steps](/get-started/first-steps)
-
+## About GitHub Codespaces
+
+[GitHub Codespaces](https://github.com/features/codespaces) is a cloud-based development environment integrated with
+GitHub, allowing you to develop directly within your browser. It offers a free
+tier with a set number of usage hours per month, enabling you to explore
+projects like **Lupus Decoupled Drupal** without local setup.
+
+Github Codespaces provides 120 hours and 15 GB/month storage for *free*, so you
+can just log into GitHub and give it a try!
+
+## Quick Start with Preconfigured Codespaces
+
+Choose one of the following preconfigured development environments based on
+your needs (clicking on a link launches that Codespace):
+- [Standard Environment (Drupal 11 + Nuxt3 Naked)](https://codespaces.new/drunomics/lupus-decoupled-project?quickstart=1&devcontainer_path=.devcontainer%2Fbase_with_nuxt_naked%2Fdevcontainer.json)
+- [Drupal 11 + Nuxt3 Shadcn Demo](https://codespaces.new/drunomics/lupus-decoupled-project?quickstart=1&devcontainer_path=.devcontainer%2Fbase_with_nuxt_shadcn%2Fdevcontainer.json)
+- [Drupal 11 + Next.js Demo](https://codespaces.new/drunomics/lupus-decoupled-project?quickstart=1&devcontainer_path=.devcontainer%2Fbase_with_next%2Fdevcontainer.json)
+
+## How to Use It?
+1. Click on the link for your desired configuration.
+2. GitHub will automatically create a new Codespace with the selected setup.
+3. Wait for the container to initialize—this may take a few minutes.
+4. Once ready, the development environment is fully set up and running in your browser.
+5. In the `ports` tab there are links to the running services.
+   - Frontend is available by clicking the link next to port 3000.
+   - Backend is at port 80. By default it redirects to frontend. To prevent redirect visit the /user/login path of backend URL.
+
+The environment may take a few minutes to initialize. Once it's ready, you can add content nodes and menu items to explore its functionality. For further guidance, refer to the repository's README file.
+By utilizing GitHub Codespaces, you can efficiently explore and develop with Lupus Decoupled Drupal without the need for local installations.
+
+## What’s Included in the Setup?
+A fully configured development container with all dependencies.
+Automatic port forwarding for running services.
+Preloaded DDEV setup for Drupal development.