From d2898c689b0bae47c760f8504de5bcc07cd28b43 Mon Sep 17 00:00:00 2001
From: Nathaniel Tucker <me@ntucker.me>
Date: Mon, 12 Aug 2024 13:46:20 +0200
Subject: [PATCH] docs: Add pnpm install instructions

---
 website/src/components/PkgInstall.js | 7 +++++++
 website/src/components/PkgTabs.js    | 6 ++++++
 2 files changed, 13 insertions(+)

diff --git a/website/src/components/PkgInstall.js b/website/src/components/PkgInstall.js
index 77e3ff867f20..bcecdfbabb92 100644
--- a/website/src/components/PkgInstall.js
+++ b/website/src/components/PkgInstall.js
@@ -14,6 +14,13 @@ export default function PkgInstall({ pkgs, dev = false, global }) {
         {pkgs}
       </CodeBlock>
     );
+  } else if (relevantTabGroupChoice === 'pnmp') {
+    return (
+      <CodeBlock className="language-bash">
+        pnpm add{global ? ' -g' : ''}
+        {dev ? ' -D' : ''} {pkgs}
+      </CodeBlock>
+    );
   }
   return (
     <CodeBlock className="language-bash">
diff --git a/website/src/components/PkgTabs.js b/website/src/components/PkgTabs.js
index e1d2bc3dbcee..668a921ba009 100644
--- a/website/src/components/PkgTabs.js
+++ b/website/src/components/PkgTabs.js
@@ -11,6 +11,7 @@ export default function PkgTabs({ pkgs, dev = false }) {
       values={[
         { label: 'NPM', value: 'npm' },
         { label: 'Yarn', value: 'yarn' },
+        { label: 'pnpm', value: 'pnpm' },
         { label: 'esm.sh', value: 'esm' },
       ]}
     >
@@ -25,6 +26,11 @@ export default function PkgTabs({ pkgs, dev = false }) {
           npm install --save{dev ? 'Dev ' : ''} {pkgs}
         </CodeBlock>
       </TabItem>
+      <TabItem value="pnpm">
+        <CodeBlock className="language-bash">
+          pnpm add{dev ? ' -D' : ''} {pkgs}
+        </CodeBlock>
+      </TabItem>
       <TabItem value="esm">
         <CodeBlock className="language-html">
           {`<script type="module">