From 4608c92c2b60d316f25b15f75cc78d1bdadc3321 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxtjs.com>
Date: Tue, 12 Oct 2021 20:26:16 +0200
Subject: [PATCH] chore(docs): add sandbox links (#752)

Co-authored-by: pooya parsa <pyapar@gmail.com>
---
 docs/components/atoms/ButtonLink.vue             | 1 -
 docs/content/1.getting-started/2.installation.md | 9 ++++++++-
 docs/content/3.docs/1.usage/index.md             | 2 +-
 docs/content/4.community/2.reporting-bugs.md     | 5 ++++-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/docs/components/atoms/ButtonLink.vue b/docs/components/atoms/ButtonLink.vue
index d422eda4a5..2ae5d8f816 100644
--- a/docs/components/atoms/ButtonLink.vue
+++ b/docs/components/atoms/ButtonLink.vue
@@ -1,7 +1,6 @@
 <template>
   <Link class="button-link" :class="[size, bold ? 'font-semibold' : 'font-medium']" :to="href" :blank="blank">
     <Markdown unwrap="p ul li" />
-
     <template #href>
       <IconExternalLink v-if="blank" class="w-4 h-4 ml-2" />
     </template>
diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md
index 6c10a06328..d8834d195d 100644
--- a/docs/content/1.getting-started/2.installation.md
+++ b/docs/content/1.getting-started/2.installation.md
@@ -7,6 +7,13 @@ If you want to migrate an existing Nuxt 2 project, skip this and follow the [Bri
 Learn more in [Introduction](/getting-started/introduction).
 ::
 
+## Play online
+
+You can start playing with Nuxt 3 in your browser using our online sandboxes:
+
+:button-link[Play on StackBlitz]{href=https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz blank}
+:button-link[Play on CodeSandBox]{href=https://codesandbox.io/s/github/nuxt/starter/tree/v3-codesandbox blank}
+
 ## New project
 
 Open a terminal, or from [Visual Studio Code](https://code.visualstudio.com/), open an [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal) and use the following command to create a new starter project:
@@ -32,7 +39,7 @@ npm install
 ```
 ::
 
-## Development Server
+## Development server
 
 Now you'll be able to use `yarn dev` to start your nuxt app in development mode:
 
diff --git a/docs/content/3.docs/1.usage/index.md b/docs/content/3.docs/1.usage/index.md
index 3977919683..2a691c8656 100644
--- a/docs/content/3.docs/1.usage/index.md
+++ b/docs/content/3.docs/1.usage/index.md
@@ -2,6 +2,6 @@
 title: 'Usage'
 layout.aside: true
 layout.asideClass: ''
-navigation.collapse: true
+navigation.collapse: false
 navigation.redirect: /docs/basics/introduction
 ---
diff --git a/docs/content/4.community/2.reporting-bugs.md b/docs/content/4.community/2.reporting-bugs.md
index 0a27882499..25a77b9773 100644
--- a/docs/content/4.community/2.reporting-bugs.md
+++ b/docs/content/4.community/2.reporting-bugs.md
@@ -16,7 +16,10 @@ Search through the [open issues](https://github.com/nuxt/framework/issues) and [
 
 It's important to be able to reproduce the bug reliably - in a minimal way and apart from the rest of your project. This narrows down what could be causing the issue and makes it possible for someone not only to find the cause, but also to test a potential solution.
 
-Start with [this Nuxt 3 sandbox](https://codesandbox.io/s/github/nuxt/starter/tree/v3-codesandbox) and add the **minimum** amount of code necessary to reproduce the bug you're experiencing.
+Start with the Nuxt3 sandbox and add the **minimum** amount of code necessary to reproduce the bug you're experiencing:
+
+:button-link[Nuxt 3 on StackBlitz]{href=https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz blank}
+:button-link[Nuxt 3 on CodeSandBox]{href=https://codesandbox.io/s/github/nuxt/starter/tree/v3-codesandbox blank}
 
 Once you've reproduced the issue, remove as much code from your reproduction as you can (while still recreating the bug). Time spent making the reproduction as minimal as possible will make a huge difference to whoever sets out to fix the issue.