Allow selecting pnpm (or other package manager) as the default across the docs

[sankalpaacharya]

Currently, the documentation defaults to showing commands with npm. When browsing, if I prefer pnpm, I have to manually switch to it on each page where package manager commands appear.

It would be great if there were a way to set pnpm (or any package manager) as the default once, and have that preference persist across the documentation. This would make the experience smoother for developers who don’t use npm by default.

I’d be more than happy to contribute to implementing this if the team is open to it.

[delucis]

Hi @sankalpaacharya!

We use Starlight’s <Tabs> component that already supports this via a syncKey prop and try to be consistent about its use via our <PackageManagerTabs> component, which you can see being used in the install guide for example:

docs/src/content/docs/en/install-and-setup.mdx

Lines 42 to 61 in e1e9994

	<PackageManagerTabs>
	<Fragment slot="npm">
	```shell
	# create a new project with npm
	npm create astro@latest
	```
	</Fragment>
	<Fragment slot="pnpm">
	```shell
	# create a new project with pnpm
	pnpm create astro@latest
	```
	</Fragment>
	<Fragment slot="yarn">
	```shell
	# create a new project with yarn
	yarn create astro
	```
	</Fragment>
	</PackageManagerTabs>

It looks like we maybe don’t use that consistently yet though. For example, it’s missing in this guide where we just use <Tabs> directly:

docs/src/content/docs/en/develop-and-build.mdx

Lines 23 to 39 in e1e9994

	<Tabs>
	<TabItem label="npm">
	```shell
	npm run dev
	```
	</TabItem>
	<TabItem label="pnpm">
	```shell
	pnpm run dev
	```
	</TabItem>
	<TabItem label="yarn">
	```shell
	yarn run dev
	```
	</TabItem>
	</Tabs>

It would be helpful to try and find all instances of where we’re using <Tabs> for package managers and update them to use the <PackageManagerTabs> approach. A PR would be great!

[sankalpaacharya]

Thanks for the heads-up! I’ll start looking into this and open a PR once I have something ready

[sankalpaacharya]

Closing this discussion as the issue has been resolved in #12492

[delucis]

Awesome — thanks @sankalpaacharya!