[Docs Site] Add useTypeScriptExample prop to GitHubCode

Author: KianNH

src/components/GitHubCode.astro

@@ -17,6 +17,7 @@ const props = z
 			.transform((val) => val.split("-").map(Number))
 			.optional(),
 		tag: z.string().optional(),
+		useTypeScriptExample: z.boolean().default(false),
 		code: z.custom<ComponentProps<typeof Code>>().optional(),
 	})
 	.strict()
@@ -25,9 +26,19 @@ const props = z
 			return !(val.lines && val.tag);
 		},
 		{ message: "Lines and tag are mutually exclusive filters." },
+	)
+	.refine(
+		(val) => {
+			return val.useTypeScriptExample && val.lang === "ts";
+		},
+		{
+			message:
+				"useTypeScriptExample can only be used when 'lang' is set to 'ts'",
+		},
 	);
 
-const { repo, commit, file, lang, lines, tag, code } = props.parse(Astro.props);
+const { repo, commit, file, lang, lines, tag, useTypeScriptExample, code } =
+	props.parse(Astro.props);
 
 const res = await fetch(
 	`https://gh-code.developers.cloudflare.com/${repo}/${commit}/${file}`,
@@ -69,9 +80,9 @@ contentLines = contentLines.filter(
 	(line) => !/<[/]?docs-tag name=".*">/.test(line),
 );
 
-const Wrapper = lang === "ts" ? TypeScriptExample : Fragment;
+const Wrapper = useTypeScriptExample ? TypeScriptExample : Fragment;
 ---
 
-<Wrapper>
+<Wrapper code={code}>
 	<Code {...code} code={contentLines.join("\n")} lang={lang} />
 </Wrapper>

src/content/docs/style-guide/components/github-code.mdx

@@ -16,25 +16,15 @@ import { GitHubCode } from "~/components";
 
 ## Usage
 
-<GitHubCode
-    repo="cloudflare/workflows-starter"
-    file="src/index.ts"
-    commit="a844e629ec80968118d4b116d4b26f5dcb107137"
-    lang="ts"
-    code={{
-    	collapse: "3-6"
-    }}
-/>
+```mdx live
+import { GitHubCode } from "~/components";
 
-```mdx
 <GitHubCode
     repo="cloudflare/workflows-starter"
     file="src/index.ts"
     commit="a844e629ec80968118d4b116d4b26f5dcb107137"
     lang="ts"
-    code={{
-    	collapse: "2-3"
-    }}
+    useTypeScriptExample={true}
 />
 ```
 
@@ -122,7 +112,12 @@ The long (40-characters) Git commit hash to pull from, for example `ab3951b5c953
 
 The language to use for the code block, for example `rs`.
 
-If the `lang` is `ts`, the [`TypeScriptExample`](/style-guide/components/typescript-example/) component will be used to provide a JavaScript tab as well.
+### `useTypeScriptExample`
+
+**type:** `boolean`
+
+
+If the `lang` is `"ts"` and `useTypeScriptExample` is `true`, the [`TypeScriptExample`](/style-guide/components/typescript-example/) component will be used to provide a JavaScript tab as well.
 
 ### `lines`
 

src/content/docs/style-guide/components/typescript-example.mdx

@@ -16,13 +16,39 @@ Some TypeScript syntax influences runtime behaviour, and cannot be stripped.
 Please refer to the [Unsupported Syntax](https://github.com/bloomberg/ts-blank-space?tab=readme-ov-file#unsupported-syntax) section of the project's README.
 :::
 
+:::caution
+Code blocks are typically configured with options on the opening fence, like so:
+
+````mdx
+```ts collapse={1-2}
+// ...
+```
+````
+
+These cannot be extracted by `TypeScriptExample` so they must be moved to the [`code`](#code) prop.
+
+````mdx
+<TypeScriptExample code={{
+  collapse: "1-2"
+}}>
+```ts
+// ...
+```
+</TypeScriptExample>
+````
+:::
+
 ## Component
 
 ````mdx live
 import { TypeScriptExample } from "~/components";
 
-<TypeScriptExample>
+<TypeScriptExample code={{
+  collapse: "1-2"
+}}>
 ```ts
+// comment to demonstrate
+// collapsible sections
 interface Environment {
   KV: KVNamespace;
 }