Update to packagemanagers where appropriate

Author: kodster28

src/content/docs/developer-spotlight/tutorials/create-sitemap-from-sanity-cms.mdx

@@ -17,7 +17,7 @@ spotlight:
   author_bio_source: LinkedIn
 ---
 
-import { TabItem, Tabs } from "~/components";
+import { TabItem, Tabs, PackageManagers } from "~/components";
 
 In this tutorial, you will put together a Cloudflare Worker that creates and serves a sitemap using data from [Sanity.io](https://www.sanity.io), a headless CMS.
 
@@ -44,25 +44,7 @@ While you can create Workers in the Cloudflare dashboard, it is a best practice
 
 Create a new Worker project using [C3](/pages/get-started/c3/) (`create-cloudflare` CLI):
 
-<Tabs> <TabItem label="pnpm">
-
-```sh
-pnpm create cloudflare@latest
-```
-
-</TabItem> <TabItem label="npm">
-
-```sh
-npm create cloudflare@latest
-```
-
-</TabItem> <TabItem label="yarn">
-
-```sh
-yarn create cloudflare
-```
-
-</TabItem> </Tabs>
+<PackageManagers type="create" pkg="cloudflare@latest" />
 
 In this tutorial, the Worker will be named `cms-sitemap`.
 

src/content/docs/developer-spotlight/tutorials/creating-a-recommendation-api.mdx

@@ -22,7 +22,7 @@ sidebar:
   order: 2
 ---
 
-import { Render, TabItem, Tabs } from "~/components";
+import { Render, TabItem, Tabs, PackageManagers } from "~/components";
 
 E-commerce and media sites often work on increasing the average transaction value to boost profitability. One of the strategies to increase the average transaction value is "cross-selling," which involves recommending related products. Cloudflare offers a range of products designed to build mechanisms for retrieving data related to the products users are viewing or requesting. In this tutorial, you will experience developing functionalities necessary for cross-selling by creating APIs for related product searches and product recommendations.
 
@@ -61,6 +61,12 @@ First, let's create a Cloudflare Workers project.
 To efficiently create and manage multiple APIs, let's use [`Hono`](https://hono.dev). Hono is an open-source application framework released by a Cloudflare Developer Advocate. It is lightweight and allows for the creation of multiple API paths, as well as efficient request and response handling.
 Open your command line interface (CLI) and run the following command:
 
+<PackageManagers
+	type="create"
+	pkg="cloudflare@latest"
+	args={"cross-sell-api --framework=hono"}
+/>
+
 <Tabs> <TabItem label="npm">
 
 ```sh
@@ -210,8 +216,6 @@ index_name = "stripe-products"
 
 Additionally, let's add the configuration to use Workers AI in `wrangler.toml`.
 
-
-
 <WranglerConfig>
 
 ```toml null {9,10}

src/content/docs/turnstile/tutorials/protecting-your-payment-form-from-attackers-bots-using-turnstile.mdx

@@ -22,7 +22,7 @@ sidebar:
   order: 2
 ---
 
-import { Render, TabItem, Tabs } from "~/components";
+import { Render, TabItem, Tabs, PackageManagers } from "~/components";
 
 This tutorial shows how you can build a more secure payment form using Turnstile. You can learn how to block bot access on the checkout page and trigger additional authentication flows by integrating Turnstile with Stripe.
 
@@ -49,25 +49,11 @@ To efficiently create and manage multiple APIs, let's use [`Hono`](https://hono.
 
 Open your command line interface (CLI) and run the following command:
 
-<Tabs> <TabItem label="npm">
-
-```sh
-npm create cloudflare@latest secure-payment-form -- --framework hono
-```
-
-</TabItem> <TabItem label="yarn">
-
-```sh
-yarn create cloudflare secure-payment-form -- --framework hono
-```
-
-</TabItem> <TabItem label="pnpm">
-
-```sh
-pnpm create cloudflare@latest secure-payment-form -- --framework hono
-```
-
-</TabItem> </Tabs>
+<PackageManagers
+	type="create"
+	pkg="cloudflare@latest"
+	args={"secure-payment-form --framework=hono"}
+/>
 
 If this is your first time running the `C3` command, you will be asked whether you want to install it. Confirm that the package name for installation is `create-cloudflare` and answer `y`.
 

src/content/partials/workers/c3-run-command-no-directory.mdx

@@ -2,20 +2,6 @@
 {}
 ---
 
-import { TabItem, Tabs } from "~/components";
+import { PackageManagers } from "~/components";
 
-<Tabs> <TabItem label="npm">
-
-```sh
-npm create cloudflare@latest
-```
-
-</TabItem>
-
-<TabItem label="yarn">
-
-```sh
-yarn create cloudflare
-```
-
-</TabItem> </Tabs>
+<PackageManagers type="create" pkg="cloudflare@latest" />