Merge pull request #170 from DefangLabs/one-click-mods

Small modifications to one-click

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";
+
+<URLProvider>
+
 # 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=<your-repo-name>&template_owner=<your-github-username>
 ```
-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<your-repo-name>%26template_owner%3D<your-github-username>
 ```
 
+You can just paste your url in here to get the encoded version:
+
+<URLEncode />
+
 ## 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:
 ```
 [![1-click-deploy-button](https://defang.io/deploy-with-defang.png)](https://portal.defang.dev/redirect?url=<your-encoded-url>&name=<your-project-here>)
 ```
+
+</URLProvider>

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".
 
-![one-click-deploy-button](/img/use-one-click-tutorial/one-click-deploy-button.png)
+<img src="/img/use-one-click-tutorial/one-click-deploy-button.png" alt="one-click-deploy-button" width="500"/>
+<br/>
 
 :::info
 Alternatively, you can find the "1-Click Deploy" button located in the `README.md` file of each sample's GitHub repository. 
 
-![deploy-with-defang-button](/img/use-one-click-tutorial/deploy-with-defang-button.png)
+<img src="/img/use-one-click-tutorial/deploy-with-defang-button.png" alt="deploy-with-defang-button" width="400"/>
+<br/>
 :::
 
-## 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.
 
-![create-repository](/img/use-one-click-tutorial/create-repository.png)
+![login-screen](/img/use-one-click-tutorial/login-screen.png)
 
-## 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. 
+
+<img src="/img/use-one-click-tutorial/create-repository.png" alt="create-repository" width="600"/>
+<br/>
+
+
+## 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:
+
+<img src="/img/use-one-click-tutorial/actions.png" alt="github-actions-tab" width="400"/>
+
+<br/>
+<br/>
 
 :::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.

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 (
+    <URLContext.Provider value={{ url, setUrl }}>
+      {children}
+    </URLContext.Provider>
+  );
+}
+
+
+
+export function OriginalRepoUrl() {
+  const { url, setUrl } = useContext(URLContext);
+  return (
+    <Stack spacing={2}>
+      <TextField value={url} onChange={e => setUrl(e.target.value)} label="Your Repo URL" helperText="Like https://github.com/defanglabs/defang" />
+    </Stack>
+  );
+}
+
+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 (
+    <Stack spacing={2}>
+      <TextField value={templateUrl} label="Your Template URL" />
+    </Stack>
+  );
+}
+
+function getEncodedTemplateUrl(url: string) {
+  const templateUrl = getTemplateUrl(url);
+  return encodeURIComponent(templateUrl);
+}
+
+
+export function EncodedTemplateUrl() {
+  const { url } = useContext(URLContext);
+  const encodedTemplateUrl = getEncodedTemplateUrl(url);
+  return (
+    <Stack spacing={2}>
+      <TextField value={encodedTemplateUrl} label="The Encoded Template URL" />
+    </Stack>
+  );
+}
+
+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 (
+    <Stack spacing={2}>
+      <TextField value={oneClickUrl} label="Your 1-Click URL" />
+    </Stack>
+  );
+}
+
+export function URLEncode() {
+  const [val, setVal] = useState("");
+  return (
+    <Stack spacing={2}>
+      <TextField value={val} placeholder='Paste a url here' onChange={e => setVal(e.target.value)} />
+      <CodeBlock className="language-bash">
+        {encodeURIComponent(val)}
+      </CodeBlock>
+    </Stack>
+  )
+}