From 8bfb251eb3b983f88cd33f310bbebf12417e349a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartek=20Iwa=C5=84czuk?= <biwanczuk@gmail.com>
Date: Thu, 18 Jun 2026 10:05:16 +0200
Subject: [PATCH 1/2] Add Deno to package-manager options

---
 src/mdx/Npm.astro           | 4 ++--
 src/mdx/Npx.astro           | 4 ++--
 src/mdx/NpxCompact.astro    | 2 +-
 src/ui/CenteredLayout.astro | 8 ++++----
 src/ui/DocsLayout.astro     | 8 ++++----
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/mdx/Npm.astro b/src/mdx/Npm.astro
index 15e13e22d..de071965c 100644
--- a/src/mdx/Npm.astro
+++ b/src/mdx/Npm.astro
@@ -1,7 +1,7 @@
 ---
-const items = ["npm", "yarn", "pnpm", "bun"];
+const items = ["npm", "yarn", "pnpm", "bun", "deno"];
 const html = await Astro.slots.render("default");
-const installCommands = ["npm i", "yarn add", "pnpm add", "bun add"];
+const installCommands = ["npm i", "yarn add", "pnpm add", "bun add", "deno add"];
 const installLines = html.replaceAll(/<\/?p>/g, "").replaceAll('—', '--').split("\n");
 
 const getCopyButton = (index: number) => {
diff --git a/src/mdx/Npx.astro b/src/mdx/Npx.astro
index dcecc1f5d..795084cbd 100644
--- a/src/mdx/Npx.astro
+++ b/src/mdx/Npx.astro
@@ -1,7 +1,7 @@
 ---
-const items = ["npm", "yarn", "pnpm", "bun"];
+const items = ["npm", "yarn", "pnpm", "bun", "deno"];
 const html = await Astro.slots.render("default");
-const installCommands = ["npx", "yarn", "pnpm", "bunx"];
+const installCommands = ["npx", "yarn", "pnpm", "bunx", "deno run -A"];
 const installLines = html
   .replaceAll(/<\/?p>/g, "")
   .replaceAll("—", "--")
diff --git a/src/mdx/NpxCompact.astro b/src/mdx/NpxCompact.astro
index d262ad463..987e46338 100644
--- a/src/mdx/NpxCompact.astro
+++ b/src/mdx/NpxCompact.astro
@@ -1,6 +1,6 @@
 ---
 const html = await Astro.slots.render("default");
-const installCommands = ["npx", "yarn", "pnpm", "bun"];
+const installCommands = ["npx", "yarn", "pnpm", "bun", "deno run -A"];
 const installLines = html.replaceAll(/<\/?p>/g, "").replaceAll('—', '--').split("\n");
 const getInstallCommands = () =>
   installLines
diff --git a/src/ui/CenteredLayout.astro b/src/ui/CenteredLayout.astro
index bccbfcd38..2a2b59b3c 100644
--- a/src/ui/CenteredLayout.astro
+++ b/src/ui/CenteredLayout.astro
@@ -137,7 +137,7 @@ const { title, tree } = await getContentTree({
     </script>
     <script is:inline>
       const changeNpmTab = () => {
-        const packageManagers = ["npm", "yarn", "pnpm", "bun"];
+        const packageManagers = ["npm", "yarn", "pnpm", "bun", "deno"];
         // @ts-nocheck
         let packageManagerIndex = packageManagers.indexOf(packageManager);
 
@@ -154,7 +154,7 @@ const { title, tree } = await getContentTree({
           });
 
           npxSelectResizer.querySelector(".line span").innerText =
-            packageManagers[index];
+            npxSelects[0]?.children[index]?.innerText ?? packageManagers[index];
 
           npxSelects.forEach((element) => {
             element.value = index;
@@ -250,7 +250,7 @@ const { title, tree } = await getContentTree({
         const npxSelectResizer = document.querySelector<HTMLDivElement>(
           ".npx-select-resizer",
         );
-        const packageManagers: string[] = ["npm", "yarn", "pnpm", "bun"];
+        const packageManagers: string[] = ["npm", "yarn", "pnpm", "bun", "deno"];
         let packageManager: string =
           localStorage.getItem("package-manager") || "npm";
         let packageManagerIndex: number =
@@ -274,7 +274,7 @@ const { title, tree } = await getContentTree({
           const lineSpan =
             npxSelectResizer?.querySelector<HTMLSpanElement>(".line span");
           if (lineSpan) {
-            lineSpan.innerText = packageManagers[index];
+            lineSpan.innerText = (npxSelects[0]?.children[index] as HTMLElement)?.innerText ?? packageManagers[index];
           }
 
           npxSelects.forEach((element) => {
diff --git a/src/ui/DocsLayout.astro b/src/ui/DocsLayout.astro
index a63fe12b2..dac451dcb 100644
--- a/src/ui/DocsLayout.astro
+++ b/src/ui/DocsLayout.astro
@@ -208,7 +208,7 @@ const pageHasDialects = Object.keys(dialects).includes(
     </script>
     <script is:inline>
       const changeNpmTab = () => {
-        const packageManagers = ["npm", "yarn", "pnpm", "bun"];
+        const packageManagers = ["npm", "yarn", "pnpm", "bun", "deno"];
 
         let packageManagerIndex = packageManagers.indexOf(packageManager);
 
@@ -225,7 +225,7 @@ const pageHasDialects = Object.keys(dialects).includes(
           });
 
           npxSelectResizer.querySelector(".line span").innerText =
-            packageManagers[index];
+            npxSelects[0]?.children[index]?.innerText ?? packageManagers[index];
 
           npxSelects.forEach((element) => {
             element.value = index;
@@ -446,7 +446,7 @@ const pageHasDialects = Object.keys(dialects).includes(
         const npxSelectResizer = document.querySelector<HTMLDivElement>(
           ".npx-select-resizer",
         );
-        const packageManagers: string[] = ["npm", "yarn", "pnpm", "bun"];
+        const packageManagers: string[] = ["npm", "yarn", "pnpm", "bun", "deno"];
         let packageManager: string =
           localStorage.getItem("package-manager") || "npm";
         let packageManagerIndex: number =
@@ -470,7 +470,7 @@ const pageHasDialects = Object.keys(dialects).includes(
           const lineSpan =
             npxSelectResizer?.querySelector<HTMLSpanElement>(".line span");
           if (lineSpan) {
-            lineSpan.innerText = packageManagers[index];
+            lineSpan.innerText = (npxSelects[0]?.children[index] as HTMLElement)?.innerText ?? packageManagers[index];
           }
 
           npxSelects.forEach((element) => {

From 6473db26140bafc9949743631d87decf338499b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartek=20Iwa=C5=84czuk?= <biwanczuk@gmail.com>
Date: Thu, 18 Jun 2026 12:57:50 +0200
Subject: [PATCH 2/2] Use deno x for exec commands (npx equivalent)

---
 src/mdx/Npx.astro        | 2 +-
 src/mdx/NpxCompact.astro | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/mdx/Npx.astro b/src/mdx/Npx.astro
index 795084cbd..a523539b8 100644
--- a/src/mdx/Npx.astro
+++ b/src/mdx/Npx.astro
@@ -1,7 +1,7 @@
 ---
 const items = ["npm", "yarn", "pnpm", "bun", "deno"];
 const html = await Astro.slots.render("default");
-const installCommands = ["npx", "yarn", "pnpm", "bunx", "deno run -A"];
+const installCommands = ["npx", "yarn", "pnpm", "bunx", "deno x"];
 const installLines = html
   .replaceAll(/<\/?p>/g, "")
   .replaceAll("—", "--")
diff --git a/src/mdx/NpxCompact.astro b/src/mdx/NpxCompact.astro
index 987e46338..aa8497360 100644
--- a/src/mdx/NpxCompact.astro
+++ b/src/mdx/NpxCompact.astro
@@ -1,6 +1,6 @@
 ---
 const html = await Astro.slots.render("default");
-const installCommands = ["npx", "yarn", "pnpm", "bun", "deno run -A"];
+const installCommands = ["npx", "yarn", "pnpm", "bun", "deno x"];
 const installLines = html.replaceAll(/<\/?p>/g, "").replaceAll('—', '--').split("\n");
 const getInstallCommands = () =>
   installLines