docs(v2): Add codesandbox integration (#4062)

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**
 

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

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)

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}

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;