From 1e9e9ff305f8a8c0690fc14b414353c5412f4a08 Mon Sep 17 00:00:00 2001
From: Soman <somandhir@gmail.com>
Date: Sun, 22 Feb 2026 02:13:08 +0530
Subject: [PATCH 1/2] fix(site): Make Command Prompts Non-Selectable in
 CodeGroup

---
 .../theme/components/shared/CodeGroup.vue     | 72 +++++++++++++++++++
 docs/.vitepress/theme/landing/Hero.vue        |  2 +-
 2 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 docs/.vitepress/theme/components/shared/CodeGroup.vue

diff --git a/docs/.vitepress/theme/components/shared/CodeGroup.vue b/docs/.vitepress/theme/components/shared/CodeGroup.vue
new file mode 100644
index 00000000000000..2a75d29030ad4b
--- /dev/null
+++ b/docs/.vitepress/theme/components/shared/CodeGroup.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface CodeTab {
+  label: string
+  code: string
+  language?: string
+}
+
+const props = defineProps<{
+  tabs: CodeTab[]
+}>()
+
+const activeTab = ref(0)
+const groupId = Math.random().toString(36).substring(7)
+
+// Function to split the prompt ($) from the command
+const splitCommand = (code: string) => {
+  const match = code.match(/^(\s*\$\s+)(.*)$/)
+  if (match) {
+    return { prompt: match[1], command: match[2] }
+  }
+  return { prompt: '', command: code }
+}
+</script>
+
+<template>
+  <div class="vp-doc">
+    <div class="vp-code-group">
+      <div class="tabs">
+        <template v-for="(tab, index) in tabs" :key="index">
+          <input
+            :id="`tab-${groupId}-${index}`"
+            type="radio"
+            :name="`code-group-tabs-${groupId}`"
+            :checked="index === activeTab"
+            @change="activeTab = index"
+          />
+          <label :for="`tab-${groupId}-${index}`">{{ tab.label }}</label>
+        </template>
+      </div>
+      <div
+        v-for="(tab, index) in tabs"
+        :key="`content-${index}`"
+        :class="[
+          'language-' + (tab.language || 'bash'),
+          { active: index === activeTab },
+        ]"
+      >
+        <button class="copy"></button>
+        <span class="lang">{{ tab.language || 'bash' }}</span>
+        <pre><code><span class="prompt" v-if="splitCommand(tab.code).prompt">{{ splitCommand(tab.code).prompt }}</span><span class="command">{{ splitCommand(tab.code).command }}</span></code></pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Inherits styles from vp-code-group.css and vp-doc.css */
+code {
+  outline: none !important;
+  color: var(--vp-c-brand-1) !important;
+}
+
+.prompt {
+  user-select: none;
+}
+
+.command {
+  user-select: text;
+}
+</style>
diff --git a/docs/.vitepress/theme/landing/Hero.vue b/docs/.vitepress/theme/landing/Hero.vue
index 9b2c59ffa1e812..8513da28855e44 100644
--- a/docs/.vitepress/theme/landing/Hero.vue
+++ b/docs/.vitepress/theme/landing/Hero.vue
@@ -1,6 +1,6 @@
 <script setup>
 import RiveAnimation from '@components/shared/RiveAnimation.vue'
-import CodeGroup from '@components/shared/CodeGroup.vue'
+import CodeGroup from '../components/shared/CodeGroup.vue'
 
 import viteAnimation from '@assets/vite/animations/641_x_629_vite_masthead.riv'
 

From 49c0e7eeccb7fc6c2de03e24adf00f93b8555eaf Mon Sep 17 00:00:00 2001
From: Soman <somandhir@gmail.com>
Date: Sun, 22 Feb 2026 02:35:31 +0530
Subject: [PATCH 2/2] fix(site): optimized the component to eliminate the
 redundant regex executions

---
 .../theme/components/shared/CodeGroup.vue     | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/docs/.vitepress/theme/components/shared/CodeGroup.vue b/docs/.vitepress/theme/components/shared/CodeGroup.vue
index 2a75d29030ad4b..ee3a0033c1c906 100644
--- a/docs/.vitepress/theme/components/shared/CodeGroup.vue
+++ b/docs/.vitepress/theme/components/shared/CodeGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 interface CodeTab {
   label: string
@@ -14,14 +14,15 @@ const props = defineProps<{
 const activeTab = ref(0)
 const groupId = Math.random().toString(36).substring(7)
 
-// Function to split the prompt ($) from the command
-const splitCommand = (code: string) => {
-  const match = code.match(/^(\s*\$\s+)(.*)$/)
-  if (match) {
-    return { prompt: match[1], command: match[2] }
-  }
-  return { prompt: '', command: code }
-}
+// Split the prompt ($) from the command once per tab and cache the result
+const splitCommands = computed(() => {
+  return props.tabs.map((tab) => {
+    const match = tab.code.match(/^(\s*\$\s+)(.*)$/)
+    return match
+      ? { prompt: match[1], command: match[2] }
+      : { prompt: '', command: tab.code }
+  })
+})
 </script>
 
 <template>
@@ -49,7 +50,7 @@ const splitCommand = (code: string) => {
       >
         <button class="copy"></button>
         <span class="lang">{{ tab.language || 'bash' }}</span>
-        <pre><code><span class="prompt" v-if="splitCommand(tab.code).prompt">{{ splitCommand(tab.code).prompt }}</span><span class="command">{{ splitCommand(tab.code).command }}</span></code></pre>
+        <pre><code><span class="prompt" v-if="splitCommands[index].prompt">{{ splitCommands[index].prompt }}</span><span class="command">{{ splitCommands[index].command }}</span></code></pre>
       </div>
     </div>
   </div>