Skip to content

Feat: Auto switch code tab to user preferred programming language #111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
RAJ8664 merged 1 commit into from
Feb 21, 2026
Merged

Feat: Auto switch code tab to user preferred programming language #111

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 51 additions & 3 deletions .vitepress/theme/components/CodeTabs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,26 @@
<script setup>
import { ref, nextTick } from 'vue'
<script>
import { ref, watch, onMounted, nextTick } from 'vue'

const GLOBAL_LANG_KEY = 'java'
Copy link

@coderabbitai coderabbitai bot Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

GLOBAL_LANG_KEY holds a language name instead of a storage key identifier.

The constant value 'java' is a language name, not a storage key. This means all preferences are stored under localStorage.key = 'java' (e.g., localStorage.setItem('java', 'C++') when C++ is selected). The name GLOBAL_LANG_KEY strongly implies it should hold a descriptive key identifier like 'preferred-language'.

🐛 Proposed fix 
-const GLOBAL_LANG_KEY = 'java'
+const GLOBAL_LANG_KEY = 'preferred-language'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const GLOBAL_LANG_KEY = 'java'
const GLOBAL_LANG_KEY = 'preferred-language'
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In @.vitepress/theme/components/CodeTabs.vue at line 4, GLOBAL_LANG_KEY
currently holds a language name ('java') instead of a descriptive storage key;
change its value to a clear identifier like 'preferred-language' and update all
usages (e.g., localStorage.getItem(GLOBAL_LANG_KEY),
localStorage.setItem(GLOBAL_LANG_KEY, ...)) so preferences are stored under that
key; ensure any code referencing GLOBAL_LANG_KEY (the constant itself in
CodeTabs.vue and any methods that read/write localStorage) continues to work
without semantic changes.

const globalActiveLanguage = ref('')

// initialize from localStorage if available
if (typeof window !== 'undefined') {
const stored = localStorage.getItem(GLOBAL_LANG_KEY)
if (stored) {
globalActiveLanguage.value = stored
}
}

// Watch for changes and save to localStorage
watch(globalActiveLanguage, (newLang) => {
if (typeof window !== 'undefined' && newLang) {
localStorage.setItem(GLOBAL_LANG_KEY, newLang)
}
})
</script>

<script setup>
const props = defineProps({
languages: {
type: Array,
Expand All @@ -12,6 +32,34 @@ const activeTab = ref(0)
const isFullscreen = ref(false)
const copiedIndex = ref(null)

onMounted(() => {
if (globalActiveLanguage.value) {
const index = props.languages.findIndex(
(lang) => lang.name === globalActiveLanguage.value,
)
if (index !== -1) {
activeTab.value = index
}
} else if (props.languages.length > 0) {
// Note: If no global language is set, use the first tab's language as default
globalActiveLanguage.value = props.languages[0].name
}
})

watch(globalActiveLanguage, (newLang) => {
if (newLang) {
const index = props.languages.findIndex((lang) => lang.name === newLang)
if (index !== -1) {
activeTab.value = index
}
}
})

const setActiveTab = (index) => {
activeTab.value = index
globalActiveLanguage.value = props.languages[index].name
}
Comment on lines +58 to +61
Copy link

@coderabbitai coderabbitai bot Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Missing bounds check before accessing props.languages[index].

props.languages[index].name is accessed without verifying that index is within the array bounds. While v-for in the template makes an out-of-range call unlikely, a defensive guard prevents a potential runtime crash if setActiveTab is ever called programmatically:

🛡️ Proposed fix 
 const setActiveTab = (index) => {
+  if (index < 0 || index >= props.languages.length) return
   activeTab.value = index
   globalActiveLanguage.value = props.languages[index].name
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const setActiveTab = (index) => {
activeTab.value = index
globalActiveLanguage.value = props.languages[index].name
}
const setActiveTab = (index) => {
if (index < 0 || index >= props.languages.length) return
activeTab.value = index
globalActiveLanguage.value = props.languages[index].name
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In @.vitepress/theme/components/CodeTabs.vue around lines 58 - 61, The
setActiveTab function accesses props.languages[index].name without validating
index; add a defensive bounds check in setActiveTab (referencing setActiveTab,
activeTab, globalActiveLanguage, and props.languages) so it only reads
props.languages[index].name when index >= 0 && index < props.languages.length;
if the index is out of range, still set activeTab (or bail) and set
globalActiveLanguage to a safe fallback (e.g., props.languages[0]?.name or an
empty string) to avoid runtime crashes when called programmatically.


const toggleFullscreen = () => {
isFullscreen.value = !isFullscreen.value
document.body.style.overflow = isFullscreen.value ? 'hidden' : ''
Expand Down Expand Up @@ -58,7 +106,7 @@ const langIcon = (lang) => {
v-for="(lang, index) in languages"
:key="index"
:class="['tab-button', { active: activeTab === index }]"
@click="activeTab = index"
@click="setActiveTab(index)"
>
<span class="lang-icon">{{ langIcon(lang.name) }}</span>
{{ lang.name }}
Expand Down