Add optional arguments below command

Author: kodster28

src/components/WranglerCLI.astro

@@ -1,7 +1,9 @@
 ---
 import { z } from "astro:schema";
 import { PackageManagers } from "starlight-package-managers";
-import { getCommand } from "~/util/wrangler";
+import { commands, getCommand } from "~/util/wrangler";
+import WranglerArg from "./WranglerArg.astro";
+import Details from "./Details.astro";
 
 function validateArg(value: any, expected: string): boolean {
 	if (Array.isArray(expected)) {
@@ -23,12 +25,15 @@ const props = z.object({
 	command: z.string(),
 	positionals: z.array(z.string()).optional(),
 	flags: z.record(z.string(), z.any()).optional(),
+	showArgs: z.boolean().default(false),
 });
 
-const { command, positionals, flags } = props.parse(Astro.props);
+const { command, positionals, flags, showArgs } = props.parse(Astro.props);
 
 const definition = getCommand(command);
 
+const { globalFlags } = commands;
+
 let args = [];
 
 if (flags) {
@@ -72,3 +77,29 @@ if (positionals) {
 	type="exec"
 	args={`${command} ${args.join(" ")}`}
 />
+
+{
+	showArgs && definition.args && (
+		<Details header="Arguments">
+			<p>
+				<strong>Command flags</strong>
+			</p>
+			<ul>
+				{Object.entries(definition.args)
+					.filter(([_, value]) => !value.hidden)
+					.map(([key, value]) => {
+						return <WranglerArg key={key} definition={value} />;
+					})}
+			</ul>
+
+			<p>
+				<strong>Global flags</strong>
+			</p>
+			<ul>
+				{Object.entries(globalFlags).map(([key, value]) => {
+					return <WranglerArg key={key} definition={value} />;
+				})}
+			</ul>
+		</Details>
+	)
+}

src/content/docs/style-guide/components/wrangler-cli.mdx

@@ -12,6 +12,7 @@ This is generated using the Wrangler version in the [`cloudflare-docs` repositor
 
 ## Import
 
+{/* prettier-ignore */}
 ```mdx
 import { WranglerCLI } from "~/components";
 ```
@@ -41,3 +42,6 @@ import { WranglerCLI } from "~/components";
 
 - `flags` <Type text="Record<string, any>" />
   - Any named argument values, i.e `name: "my-worker"` for the optional `name` argument on `deploy`.
+
+- `showArgs` <Type text="boolean" /> <MetaInfo text="default (false)" />
+  - Show the available arguments in a [`Details` component](/style-guide/components/details/) below the command.