react components for one click

Author: raphaeltm

docs/tutorials/adding-custom-one-click-deploy.md

@@ -4,6 +4,8 @@ sidebar_position: 800
 description: Add a custom 1-Click Deploy button to deploy your own app. 
 ---
 
+import {OriginalRepoUrl, TemplateUrl, EncodedTemplateUrl, OneClickUrl} from '../../src/components/URLEncoder';
+
 # Adding a Custom 1-Click Deploy
 
 This tutorial will show you how to add a custom Defang 1-Click Deploy button to deploy your own app to Defang Playground. 
@@ -113,6 +115,11 @@ https://github.com/<your-github-username>/<your-project-here>
 https%3A%2F%2Fgithub.com%2F<your-github-username>%2F<your-project-here>
 ```
 
+<OriginalRepoUrl/>
+<TemplateUrl/>
+<EncodedTemplateUrl/>
+<OneClickUrl/>
+
 ## Step 5 - Create the 1-Click Deploy Link
 
 Finally, you will need to format the 1-Click Deploy Link as `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. 

package-lock.json

@@ -28,6 +28,7 @@
     "docusaurus-lunr-search": "^3.2.0",
     "fuse.js": "^7.0.0",
     "gray-matter": "^4.0.3",
+    "jotai": "^2.11.0",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package.json

@@ -0,0 +1,70 @@
+import { Stack, TextField } from '@mui/material';
+import { useState } from 'react';
+import {atom, useAtom} from 'jotai';
+
+const urlAtom = atom("");
+
+export function OriginalRepoUrl(){
+  const [url, setUrl] = useState("");
+  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] = useAtom(urlAtom);
+
+  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] = useAtom(urlAtom);
+  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] = useAtom(urlAtom);
+  const oneClickUrl = getOneClickUrl(url);
+  return (
+    <Stack spacing={2}>
+      <TextField value={oneClickUrl} label="Your 1-Click URL" />
+    </Stack>
+  );
+}
+

src/components/URLEncoder/index.tsx

@@ -0,0 +1,11 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}