add interactive component

Author: hahnbeelee

advanced/subpath/vercel.mdx

@@ -3,6 +3,8 @@ title: "Vercel"
 description: "Host documentation at a subpath using Vercel"
 ---
 
+import { VercelJsonGenerator } from "/snippets/vercel-json-generator.mdx";
+
 <Steps>
   <Step title="Move your docs files">
     Edit your file structure so that all your files are within a folder which is your custom subpath. So if you want to host your docs at `/docs` you would do the following:
@@ -15,46 +17,9 @@ description: "Host documentation at a subpath using Vercel"
     ```
   </Step>
   <Step title="Configure your vercel.json">
-    In your main website add the following rewrites to your `vercel.json`. Make sure to replace `[SUBDOMAIN]` with your subdomain.
+    In your main website add the following rewrites to your `vercel.json`.
 
-    ```json
-    {
-      "rewrites": [
-        {
-          "source": "/api/request",
-          "destination": "https://[SUBDOMAIN].mintlify.app/api/request"
-        },
-        {
-          "source": "/custom/subdirectory",
-          "destination": "https://[SUBDOMAIN].mintlify.app"
-        },
-        {
-          "source": "/custom/subdirectory/llms.txt",
-          "destination": "https://[SUBDOMAIN].mintlify.app/llms.txt"
-        },
-        {
-          "source": "/custom/subdirectory/llms-full.txt",
-          "destination": "https://[SUBDOMAIN].mintlify.app/llms-full.txt"
-        },
-        {
-          "source": "/custom/subdirectory/sitemap.xml",
-          "destination": "https://[SUBDOMAIN].mintlify.app/sitemap.xml"
-        },
-        {
-          "source": "/custom/subdirectory/robots.txt",
-          "destination": "https://[SUBDOMAIN].mintlify.app/robots.txt"
-        },
-        {
-          "source": "/custom/subdirectory/:path*",
-          "destination": "https://[SUBDOMAIN].mintlify.app/custom/subdirectory/:path*"
-        },
-        {
-          "source": "/mintlify-assets/:path+",
-          "destination": "https://[SUBDOMAIN].mintlify.app/mintlify-assets/:path+"
-        }
-      ]
-    }
-    ```
+    <VercelJsonGenerator />
   </Step>
 </Steps>
 

snippets/vercel-json-generator.mdx

@@ -0,0 +1,94 @@
+export const VercelJsonGenerator = () => {
+  const [subdomain, setSubdomain] = useState('[SUBDOMAIN]')
+  const [subdirectory, setSubdirectory] = useState('/docs')
+
+  const vercelConfig = {
+    rewrites: [
+      {
+        source: "/api/request",
+        destination: `https://${subdomain}.mintlify.app/api/request`
+      },
+      {
+        source: `/${subdirectory}`,
+        destination: `https://${subdomain}.mintlify.app`
+      },
+      {
+        source: `/${subdirectory}/llms.txt`,
+        destination: `https://${subdomain}.mintlify.app/llms.txt`
+      },
+      {
+        source: `/${subdirectory}/llms-full.txt`,
+        destination: `https://${subdomain}.mintlify.app/llms-full.txt`
+      },
+      {
+        source: `/${subdirectory}/sitemap.xml`,
+        destination: `https://${subdomain}.mintlify.app/sitemap.xml`
+      },
+      {
+        source: `/${subdirectory}/robots.txt`,
+        destination: `https://${subdomain}.mintlify.app/robots.txt`
+      },
+      {
+        source: `/${subdirectory}/:path*`,
+        destination: `https://${subdomain}.mintlify.app/${subdirectory}/:path*`
+      },
+      {
+        source: "/mintlify-assets/:path+",
+        destination: `https://${subdomain}.mintlify.app/mintlify-assets/:path+`
+      }
+    ]
+  }
+
+  const copyToClipboard = () => {
+    navigator.clipboard
+      .writeText(JSON.stringify(vercelConfig, null, 2))
+      .then(() => {
+        console.log('Copied config to clipboard!')
+      })
+      .catch((err) => {
+        console.error("Failed to copy: ", err)
+      })
+  }
+
+  return (
+    <div className="p-4 border dark:border-white/10 rounded-2xl not-prose space-y-4">
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm text-zinc-950/70 dark:text-white/70 mb-1">
+            Subdomain
+          </label>
+          <input
+            type="text"
+            value={subdomain}
+            onChange={(e) => setSubdomain(e.target.value)}
+            placeholder="your-subdomain"
+            className="w-full p-1 text-sm rounded border dark:border-white/10 bg-transparent"
+          />
+        </div>
+        <div>
+          <label className="block text-sm text-zinc-950/70 dark:text-white/70 mb-1">
+            Subdirectory
+          </label>
+          <input
+            type="text"
+            value={subdirectory}
+            onChange={(e) => setSubdirectory(e.target.value)}
+            placeholder="docs"
+            className="w-full p-1 text-sm rounded border dark:border-white/10 bg-transparent"
+          />
+        </div>
+      </div>
+      <div className="relative">
+        <button
+          onClick={copyToClipboard}
+          className="absolute top-2 right-2 px-2 py-1 text-sm border dark:border-white/10 rounded hover:bg-zinc-950/5 dark:hover:bg-white/5 transition-colors bg-white"
+        >
+          Copy to Clipboard
+        </button>
+        <pre className="bg-zinc-950/5 dark:bg-white/5 p-4 rounded-lg overflow-auto text-xs">
+          <code>{JSON.stringify(vercelConfig, null, 2)}</code>
+        </pre>
+      </div>
+    </div>
+  )
+}