docs: Add package manager dropdown on copy button

[WarningImHack3r]

Before submitting the PR, please make sure you do the following

• If your PR isn't addressing a small fix (like a typo), it references an issue where it is discussed ahead of time and assigned to you. In many cases, features are absent for a reason.
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Follows the contribution guidelines.
• Format & lint the code with pnpm format and pnpm lint

Fixes #642.

I finally got time to lean into this feature. What took time was getting more familiar with mdsvex and rehype/remark plugins, which I never really did before (only using md➜html, never contributed to them, or even wondered how they were working).

At the end of the day, instead of blindly copying what shadcn did for the original website, I preferred a Sveltier approach: simpler, type-safe and shorter.

Hope you like it!

I also added some comments in the mdsvex config file as I was messing around, I can totally remove that if you think it's unnecessary/not the point of the PR

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6182694

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
shadcn-svelte	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 21, 2024 6:53pm

[huntabyte]

This is dope! Thanks a ton, just a minor thing! Let me know if you want me to take care of it (I try not to intrude on PRs without permission!)

Also, the comments are much appreciated! Probably should have been there from the beginning! The plugins are quite the work of art right? 😂 Took me a bit to figure out how to get this site to behave like the original!

[WarningImHack3r]

This is dope! Thanks a ton, just a minor thing! Let me know if you want me to take care of it (I try not to intrude on PRs without permission!)

Haha yeah you can modify it no problem!!

The plugins are quite the work of art right? 😂 Took me a bit to figure out how to get this site to behave like the original!

OMG yeah, fortunately I had some basis, and my recent work on svelte-changelog got me in better shape to work on that! When I got assigned this feature and that I later noticed it was not as simple (I thought) as a few more lines of Svelte I was like man, I should've really planned my feature before having to dig into that for the first time! I wasn't even sure I could bring the feature I requested into life and I'd be looking like a jerk haha.
I saw your tweet about a lack of better solutions nowadays in the Svelte ecosystem (like Docausaurus?) and I agree so bad!

[huntabyte]

CleanShot.2024-01-21.at.11.07.24.mp4

The dropdown doesn't appear to work on this one command 🤔

[WarningImHack3r]

Indeed! It isn't in the conditions we discussed, because it wasn't needed for React. Adding that case right now, sorry.

FYI

Reading again the docs I linked above, npm init <x> === npm create <x> === npx <x> for the non-scoped packages (99.9% of the time).
npx create doesn't exist, and the condition I changed in the last commit is not really correct anymore: npx create is often just the beginning of something like npx create-react-app, where create-x-app is a package name (see first sentence). Let's adapt all that new info!

---

Edit

Here are the changes I made:

• I removed the whole condition for npx create*: as we saw, npx is always followed by a package name, so no need to filter this condition, it's already handled by the last condition.
• I added support for npm create, which is indeed a subcommand I wasn't handling
• I improved the command syntax for each package manager (pnpm dlx ➜ pnpx etc)
• I avoided replacing identical strings (npm ➜ pnpm instead of npm install ➜ pnpm install) for brevity
• Finally, I used regexes to make sure I was replacing the very beginning of the string, not an accidental "npm" substring at the middle of the command (npm install package-name-npm-hello): even though .replace replaces the first substring matched, it's still an additional safety after the previous bullet point