diff --git a/docs/tutorials/adding-custom-one-click-deploy.md b/docs/tutorials/adding-custom-one-click-deploy.md
index ec66e2915..0d5b8a385 100644
--- a/docs/tutorials/adding-custom-one-click-deploy.md
+++ b/docs/tutorials/adding-custom-one-click-deploy.md
@@ -4,9 +4,13 @@ sidebar_position: 800
description: Add a custom 1-Click Deploy link to deploy your own app.
---
+import { URLProvider, URLEncode } from "../../src/components/OneClick";
+
+
+
# Adding Custom 1-Click Deploy to Your App
-This tutorial will show you how to add a 1-Click Deploy link to deploy your app to the Defang Playground.
+This tutorial will show you how to add a 1-Click Deploy link so other people can easily deploy your app to the Defang Playground and eventually to their own cloud accounts.
The link is often placed as a button in the `README.md` file of your project repository, and is the easiest way to allow anyone to deploy your app.
@@ -83,12 +87,16 @@ You will need the encoded version of the URL of the page from the previous step.
```
https://github.com/new?template_name=&template_owner=
```
-2. You can go online and paste the URL from the step above into a URL encoder tool of your choice. You should end up with an encoded URL, similar to the one shown below:
+2. You need to URL encode your url for the next step. For example, the url above would be encoded as:
```
https%3A%2F%2Fgithub.com%2Fnew%3Ftemplate_name%3D%26template_owner%3D
```
+You can just paste your url in here to get the encoded version:
+
+
+
## Step 5 - Create the 1-Click Deploy Link
You will need to create a 1-Click Deploy link with the following format: `https://portal.defang.dev/redirect?url=` + your encoded URL. This ensures that the user can get [logged in](/docs/concepts/authentication/) to Defang before they get redirected to clone your app for deployment.
@@ -113,3 +121,5 @@ Or perhaps you can add it to a button with your own styling:
```
[](https://portal.defang.dev/redirect?url=&name=)
```
+
+
\ No newline at end of file
diff --git a/docs/tutorials/using-one-click-deploy.md b/docs/tutorials/using-one-click-deploy.md
index 363246dad..f30031858 100644
--- a/docs/tutorials/using-one-click-deploy.md
+++ b/docs/tutorials/using-one-click-deploy.md
@@ -17,25 +17,41 @@ To access the full range of features provided by Defang, we recommend using the
## Step 1 - Choose a Sample
Head to our [list of samples](https://defang.io/#samples) and click a sample you want to deploy. Then, click on the button that says "1-Click Deploy".
-
+
+
:::info
Alternatively, you can find the "1-Click Deploy" button located in the `README.md` file of each sample's GitHub repository.
-
+
+
:::
-## Step 2 - Allow Permissions
+## Step 2 - Login
-After you've clicked, you will be prompted to use GitHub to log in. Once you see a "Create a new repository" page appear, allow the sample repository to get cloned into your GitHub account. You can do this by clicking the green "Create repository" button at the bottom.
+For 1-click deployments to work, Defang has to have your permission, which you can grant by logging in. If you are already logged in, you will be automatically taken to the next step.
-
+
-## Step 3 - Wait for Deployment to Complete
+
+## Step 3 - Create Your Repo
+
+Onced logged in, you'll be redirected to GitHub. Click the "Create repository button" to create a new repository with the sample project.
+
+
+
+
+
+## Step 4 - Wait for Deployment to Complete
A Github Action workflow will automatically start running to install Defang and deploy the sample to the Defang Playground. You can see this by going into the "Actions" tab in your GitHub repository.
-You can view the status of your deployment in the [Defang Portal](https://portal.defang.dev/), or by downloading the [Defang CLI](/docs/getting-started).
+You can view the status of your deployment in the [Defang Portal](https://portal.defang.dev/), or by downloading the [Defang CLI](/docs/getting-started). You can also see deployment progress in the "Actions" tab of your GitHub repository:
+
+
+
+
+
:::tip
If you decide to make a commit later to a repository created from 1-Click Deploy, then the project will automatically get deployed again to Defang Playground.
diff --git a/src/components/OneClick/index.tsx b/src/components/OneClick/index.tsx
new file mode 100644
index 000000000..8fd11f746
--- /dev/null
+++ b/src/components/OneClick/index.tsx
@@ -0,0 +1,97 @@
+import { Stack, TextField } from '@mui/material';
+import { createContext, useContext, useState } from 'react';
+import CodeBlock from '@theme/CodeBlock';
+
+
+
+const URLContext = createContext({
+ url: "",
+ setUrl: (url: string) => { }
+});
+
+export function URLProvider({ children }: { children: React.ReactNode }) {
+ const [url, setUrl] = useState("");
+ return (
+
+ {children}
+
+ );
+}
+
+
+
+export function OriginalRepoUrl() {
+ const { url, setUrl } = useContext(URLContext);
+ return (
+
+ setUrl(e.target.value)} label="Your Repo URL" helperText="Like https://github.com/defanglabs/defang" />
+
+ );
+}
+
+function getTemplateUrl(url: string) {
+ // extract github user and repo from url
+ const regex = /https:\/\/github.com\/([^\/]+)\/([^\/]+)/;
+ const match = url.match(regex);
+ const user = match ? match[1] : "";
+ const repo = match ? match[2] : "";
+
+ // https://github.com/new?template_name=sample-django-template&template_owner=DefangSamples
+ return `https://github.com/new?template_name=${repo}&template_owner=${user}&name=${repo}`;
+}
+
+export function TemplateUrl() {
+ const { url } = useContext(URLContext);
+
+ const templateUrl = getTemplateUrl(url);
+
+ return (
+
+
+
+ );
+}
+
+function getEncodedTemplateUrl(url: string) {
+ const templateUrl = getTemplateUrl(url);
+ return encodeURIComponent(templateUrl);
+}
+
+
+export function EncodedTemplateUrl() {
+ const { url } = useContext(URLContext);
+ const encodedTemplateUrl = getEncodedTemplateUrl(url);
+ return (
+
+
+
+ );
+}
+
+function getOneClickUrl(url: string) {
+ const encodedTemplateUrl = getEncodedTemplateUrl(url);
+ return `https://portal.defang.dev/redirect?url=${encodedTemplateUrl}`;
+}
+
+
+export function OneClickUrl() {
+ const { url } = useContext(URLContext);
+ const oneClickUrl = getOneClickUrl(url);
+ return (
+
+
+
+ );
+}
+
+export function URLEncode() {
+ const [val, setVal] = useState("");
+ return (
+
+ setVal(e.target.value)} />
+
+ {encodeURIComponent(val)}
+
+
+ )
+}
diff --git a/static/img/use-one-click-tutorial/actions.png b/static/img/use-one-click-tutorial/actions.png
new file mode 100644
index 000000000..d059d9c4a
Binary files /dev/null and b/static/img/use-one-click-tutorial/actions.png differ
diff --git a/static/img/use-one-click-tutorial/login-screen.png b/static/img/use-one-click-tutorial/login-screen.png
new file mode 100644
index 000000000..1c2e249cb
Binary files /dev/null and b/static/img/use-one-click-tutorial/login-screen.png differ
diff --git a/static/img/use-one-click-tutorial/one-click-deploy-button.png b/static/img/use-one-click-tutorial/one-click-deploy-button.png
index 995efa607..b60f059f0 100644
Binary files a/static/img/use-one-click-tutorial/one-click-deploy-button.png and b/static/img/use-one-click-tutorial/one-click-deploy-button.png differ