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

facebook · Jan 19, 2021 · b93d95b · b93d95b
1 parent 458bf67
commit b93d95b
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 2 deletions.
diff --git 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
@@ -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

diff --git 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)

diff --git 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
@@ -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;