adding a deploy button which links to the dashboard (#1888)

Co-authored-by: Phil Hawksworth <phil@deno.com>

Author: thisisjofrank

_components/CTA.css

@@ -21,3 +21,11 @@
   @apply bg-jsr-yellow-400 border-jsr-cyan-950 !text-jsr-cyan-950 border-2
     hover:!no-underline hover:bg-jsr-yellow-300;
 }
+
+.deploy-button {
+  padding-left: 3rem;
+  background-image: url("../deno-deploy.svg");
+  background-repeat: no-repeat;
+  background-position: 1rem center;
+  background-size: 2rem;
+}

_components/DeployCTA.tsx

@@ -0,0 +1,12 @@
+export default function DeployCTA() {
+  return (
+    <a
+      href="https://app.deno.com/"
+      className="docs-cta deploy-cta deploy-button"
+    >
+      Deno Deploy
+    </a>
+  );
+}
+
+export const css = "@import './_components/CTA.css';";

examples/tutorials/next.md

@@ -277,6 +277,29 @@ details!
 
 ![demo of the app](./images/how-to/next/dinoapp.gif)
 
+## Deploy your app
+
+Now that you have a Next.js app, you can deploy it to the web with Deno
+Deploy<sup>EA</sup>. Deno Deploy requires your code to be hosted on GitHub to
+access and deploy it, so first you'll need to create a GitHub repository and
+push your app there.
+
+[Create a new GitHub repository](https://github.com/new), then initialize and
+push your app to GitHub:
+
+```sh
+git init -b main
+git remote add origin https://github.com/<your_github_username>/<your_repo_name>.git
+git add .
+git commit -am 'my next app'
+git push -u origin main
+```
+
+Once your app is on GitHub, you can deploy it on the Deno Deploy<sup>EA</sup>
+dashboard:
+<a href="https://app.deno.com/" class="docs-cta deploy-cta deploy-button">Deploy
+my app</a>
+
 🦕 Now you can build and run a Next.js app with Deno! To build on your app you
 could consider [adding a database](/runtime/tutorials/connecting_to_databases/)
 to replace your `data.json` file, or consider

styleguide/components.mdx

@@ -110,6 +110,15 @@ Call to action button with different colors based on their `type` prop
 
 <comp.CTA href="https://deno.com" type="deploy">Get started</comp.CTA><br/>
 
+## Deploy on Deploy
+
+Call to action button with the Deno Deploy logo. Should be used with additional copy.
+```tsx
+<comp.DeployCTA />
+```
+
+Deploy your application to the edge: <comp.DeployCTA />
+
 ## Admonition
 
 A box to highlight information. Must be of type