add url encoding component

Author: raphaeltm

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 to deploy your app to the Defang Playground so that other people can easily deploy your app.
 
 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>

package-lock.json

@@ -29,7 +29,6 @@
     "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

@@ -1,19 +1,35 @@
 import { Stack, TextField } from '@mui/material';
-import { useState } from 'react';
-import {atom, useAtom} from 'jotai';
+import { createContext, useContext, useState } from 'react';
+import CodeBlock from '@theme/CodeBlock';
 
-const urlAtom = atom("");
 
-export function OriginalRepoUrl(){
+
+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){
+function getTemplateUrl(url: string) {
   // extract github user and repo from url
   const regex = /https:\/\/github.com\/([^\/]+)\/([^\/]+)/;
   const match = url.match(regex);
@@ -24,8 +40,8 @@ function getTemplateUrl(url: string){
   return `https://github.com/new?template_name=${repo}&template_owner=${user}&name=${repo}`;
 }
 
-export function TemplateUrl(){
-  const [url] = useAtom(urlAtom);
+export function TemplateUrl() {
+  const { url } = useContext(URLContext);
 
   const templateUrl = getTemplateUrl(url);
 
@@ -36,14 +52,14 @@ export function TemplateUrl(){
   );
 }
 
-function getEncodedTemplateUrl(url: string){
+function getEncodedTemplateUrl(url: string) {
   const templateUrl = getTemplateUrl(url);
   return encodeURIComponent(templateUrl);
 }
 
 
-export function EncodedTemplateUrl(){
-  const [url] = useAtom(urlAtom);
+export function EncodedTemplateUrl() {
+  const { url } = useContext(URLContext);
   const encodedTemplateUrl = getEncodedTemplateUrl(url);
   return (
     <Stack spacing={2}>
@@ -52,14 +68,14 @@ export function EncodedTemplateUrl(){
   );
 }
 
-function getOneClickUrl(url: string){
+function getOneClickUrl(url: string) {
   const encodedTemplateUrl = getEncodedTemplateUrl(url);
   return `https://portal.defang.dev/redirect?url=${encodedTemplateUrl}`;
 }
 
 
-export function OneClickUrl(){
-  const [url] = useAtom(urlAtom);
+export function OneClickUrl() {
+  const { url } = useContext(URLContext);
   const oneClickUrl = getOneClickUrl(url);
   return (
     <Stack spacing={2}>
@@ -68,3 +84,14 @@ export function OneClickUrl(){
   );
 }
 
+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>
+  )
+}