fix: url display in code block

This commit is contained in:
BennyKok 2023-12-17 21:40:54 +08:00
parent ca272ce8f0
commit dcbf6f82d8

View File

@ -11,6 +11,7 @@ import { TableCell, TableRow } from "@/components/ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { getRelativeTime } from "@/lib/getRelativeTime"; import { getRelativeTime } from "@/lib/getRelativeTime";
import type { findAllDeployments } from "@/server/findAllRuns"; import type { findAllDeployments } from "@/server/findAllRuns";
import { headers } from 'next/headers';
const curlTemplate = ` const curlTemplate = `
curl --request POST \ curl --request POST \
@ -57,6 +58,11 @@ export function DeploymentDisplay({
}: { }: {
deployment: Awaited<ReturnType<typeof findAllDeployments>>[0]; deployment: Awaited<ReturnType<typeof findAllDeployments>>[0];
}) { }) {
const headersList = headers();
const host = headersList.get('host') || "";
const protocol = headersList.get("x-forwarded-proto") || "";
const domain = `${protocol}://${host}`;
return ( return (
<Dialog> <Dialog>
<DialogTrigger asChild className="appearance-none hover:cursor-pointer"> <DialogTrigger asChild className="appearance-none hover:cursor-pointer">
@ -87,21 +93,21 @@ export function DeploymentDisplay({
</TabsList> </TabsList>
<TabsContent className="flex flex-col gap-2" value="js"> <TabsContent className="flex flex-col gap-2" value="js">
Trigger the workflow Trigger the workflow
<CodeBlock lang="js" code={formatCode(jsTemplate, deployment)} /> <CodeBlock lang="js" code={formatCode(jsTemplate, deployment, domain)} />
Check the status of the run, and retrieve the outputs Check the status of the run, and retrieve the outputs
<CodeBlock <CodeBlock
lang="js" lang="js"
code={formatCode(jsTemplate_checkStatus, deployment)} code={formatCode(jsTemplate_checkStatus, deployment, domain)}
/> />
</TabsContent> </TabsContent>
<TabsContent className="flex flex-col gap-2" value="curl"> <TabsContent className="flex flex-col gap-2" value="curl">
<CodeBlock <CodeBlock
lang="bash" lang="bash"
code={formatCode(curlTemplate, deployment)} code={formatCode(curlTemplate, deployment, domain)}
/> />
<CodeBlock <CodeBlock
lang="bash" lang="bash"
code={formatCode(curlTemplate_checkStatus, deployment)} code={formatCode(curlTemplate_checkStatus, deployment, domain)}
/> />
</TabsContent> </TabsContent>
</Tabs> </Tabs>
@ -112,12 +118,13 @@ export function DeploymentDisplay({
function formatCode( function formatCode(
codeTemplate: string, codeTemplate: string,
deployment: Awaited<ReturnType<typeof findAllDeployments>>[0] deployment: Awaited<ReturnType<typeof findAllDeployments>>[0],
domain: string
) { ) {
return codeTemplate return codeTemplate
.replace( .replace(
"<URL>", "<URL>",
`${process.env.VERCEL_URL ?? "http://localhost:3000"}/api/run` `${domain ?? "http://localhost:3000"}/api/run`
) )
.replace("<ID>", deployment.id); .replace("<ID>", deployment.id);
} }