From a8e063d7e61d2a1913ec20d868aeb217b60abfc2 Mon Sep 17 00:00:00 2001
From: Samson Amaugo <sammychinedu2ky@gmail.com>
Date: Tue, 19 Jan 2021 12:20:25 +0100
Subject: [PATCH 1/2] added admonition for codesandbox support

---
 website/docs/installation.md | 3 +++
 website/docs/introduction.md | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/website/docs/installation.md b/website/docs/installation.md
index 63e5d5a14c32..14c45e3b6dc7 100644
--- a/website/docs/installation.md
+++ b/website/docs/installation.md
@@ -26,6 +26,9 @@ npx @docusaurus/init@latest init my-website classic
 
 If you do not specify `name` or `template`, it will prompt you for them. We recommend the `classic` template so that you can get started quickly and it contains features found in Docusaurus 1. The `classic` template contains `@docusaurus/preset-classic` which includes standard documentation, a blog, custom pages, and a CSS framework (with dark mode support). You can get up and running extremely quickly with the classic template and customize things later on when you have gained more familiarity with Docusaurus.
 
+:::tip You can easily bootstrap your documentation with Docusaurus on Codesandbox via this [link](https://new.docusaurus.io) 
+:::
+
 **[FB-Only]:** If you are setting up a new Docusaurus website for a Facebook open source project, use the `facebook` template instead, which comes with some useful Facebook-specific defaults:
 
 ```bash
diff --git a/website/docs/introduction.md b/website/docs/introduction.md
index 9df13d66e91e..9d615576c0e8 100644
--- a/website/docs/introduction.md
+++ b/website/docs/introduction.md
@@ -96,6 +96,9 @@ Jekyll is one of the most mature static site generators around and has been a gr
 
 In comparison with statically generated HTML and interactivity added using `<script />` tags, Docusaurus sites are React apps. Using modern JavaScript ecosystem tooling, we hope to set new standards on doc sites performance, asset build pipeline and optimizations, and ease to setup.
 
+:::tip You can easily bootstrap your documentation with Docusaurus on Codesandbox via this [link](https://new.docusaurus.io) 
+:::
+
 ### VuePress
 
 VuePress has many similarities with Docusaurus - both focus heavily on content-centric website and provides tailored documentation features out of the box. However, VuePress is powered by Vue, while Docusaurus is powered by React. If you want a Vue-based solution, VuePress would be a decent choice.

From b99c422f9985d103ccbd51e6093a9d2428fb2557 Mon Sep 17 00:00:00 2001
From: slorber <lorber.sebastien@gmail.com>
Date: Tue, 19 Jan 2021 15:36:37 +0100
Subject: [PATCH 2/2] better doc integration of CodeSandbox

---
 README.md                           |  2 +-
 website/docs/installation.md        |  9 ++++++---
 website/docs/introduction.md        |  9 ++++++---
 website/src/pages/index.js          |  5 +++++
 website/src/pages/styles.module.css | 15 ++++++++++++++-
 5 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 423ff360b603..b35371d25e4e 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@
 
 Docusaurus is a project for building, deploying, and maintaining open source project websites easily.
 
-Try Docusaurus on **CodeSandbox** immediately with [new.docusaurus.io](http://new.docusaurus.io/)
+Use **[new.docusaurus.io](https://new.docusaurus.io)** to test Docusaurus immediately in CodeSandbox.
 
 - **Simple to Start**
 
diff --git a/website/docs/installation.md b/website/docs/installation.md
index 14c45e3b6dc7..227ef58492a2 100644
--- a/website/docs/installation.md
+++ b/website/docs/installation.md
@@ -5,6 +5,12 @@ title: Installation
 
 Docusaurus is essentially a set of npm [packages](https://github.com/facebook/docusaurus/tree/master/packages) that can be installed over npm.
 
+:::tip
+
+Use **[new.docusaurus.io](https://new.docusaurus.io)** to test Docusaurus immediately in CodeSandbox.
+
+:::
+
 ## Requirements
 
 - [Node.js](https://nodejs.org/en/download/) version >= 10.15.1 or above (which can be checked by running `node -v`). You can use [nvm](https://github.com/nvm-sh/nvm) for managing multiple Node versions on a single machine installed
@@ -26,9 +32,6 @@ npx @docusaurus/init@latest init my-website classic
 
 If you do not specify `name` or `template`, it will prompt you for them. We recommend the `classic` template so that you can get started quickly and it contains features found in Docusaurus 1. The `classic` template contains `@docusaurus/preset-classic` which includes standard documentation, a blog, custom pages, and a CSS framework (with dark mode support). You can get up and running extremely quickly with the classic template and customize things later on when you have gained more familiarity with Docusaurus.
 
-:::tip You can easily bootstrap your documentation with Docusaurus on Codesandbox via this [link](https://new.docusaurus.io) 
-:::
-
 **[FB-Only]:** If you are setting up a new Docusaurus website for a Facebook open source project, use the `facebook` template instead, which comes with some useful Facebook-specific defaults:
 
 ```bash
diff --git a/website/docs/introduction.md b/website/docs/introduction.md
index 9d615576c0e8..362593859b6d 100644
--- a/website/docs/introduction.md
+++ b/website/docs/introduction.md
@@ -20,6 +20,12 @@ Most users are already using v2 ([trends](https://www.npmtrends.com/docusaurus-v
 - :white_check_mark: You want the full power of React and MDX
 - :white_check_mark: You do not need support for IE11
 
+:::tip
+
+Use **[new.docusaurus.io](https://new.docusaurus.io)** to test Docusaurus immediately in CodeSandbox.
+
+:::
+
 **Use [Docusaurus v1](https://docusaurus.io/) if:**
 
 - :x: You don't want a single-page application (SPA)
@@ -96,9 +102,6 @@ Jekyll is one of the most mature static site generators around and has been a gr
 
 In comparison with statically generated HTML and interactivity added using `<script />` tags, Docusaurus sites are React apps. Using modern JavaScript ecosystem tooling, we hope to set new standards on doc sites performance, asset build pipeline and optimizations, and ease to setup.
 
-:::tip You can easily bootstrap your documentation with Docusaurus on Codesandbox via this [link](https://new.docusaurus.io) 
-:::
-
 ### VuePress
 
 VuePress has many similarities with Docusaurus - both focus heavily on content-centric website and provides tailored documentation features out of the box. However, VuePress is powered by Vue, while Docusaurus is powered by React. If you want a Vue-based solution, VuePress would be a decent choice.
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index fef1bb41a2e8..ce491f619c3a 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -114,6 +114,11 @@ function Home() {
                 to={useBaseUrl('docs/')}>
                 <Translate>Get Started</Translate>
               </Link>
+              <Link
+                className={styles.indexCtaTryNowButton}
+                to="https://new.docusaurus.io">
+                <Translate>Playground</Translate>
+              </Link>
               <span className={styles.indexCtasGitHubButtonWrapper}>
                 <iframe
                   className={styles.indexCtasGitHubButton}
diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
index 982a14f6a56a..0ec989c63a30 100644
--- a/website/src/pages/styles.module.css
+++ b/website/src/pages/styles.module.css
@@ -122,10 +122,23 @@
 
 .indexCtasGitHubButton {
   border: none;
-  margin-left: 24px;
   overflow: hidden;
 }
 
+.indexCtaTryNowButton {
+  line-height: 1.2em;
+  text-decoration: underline;
+  text-transform: uppercase;
+  transition: background 0.3s, color 0.3s;
+  color: #fff;
+  font-size: 14px;
+  font-weight: bold;
+  margin: 0 36px;
+}
+.indexCtaTryNowButton:hover {
+  color: var(--ifm-color-primary);
+}
+
 @media only screen and (max-width: 768px) {
   .hero {
     padding-left: 20px;