feat: Функционал глобального переключения синтаксисов

docs/.vitepress/theme/components/DocsLayout.vue

@@ -5,8 +5,10 @@ import DocsEcosystem from './DocsEcosystem.vue'
 import DocsComponentWidget from './DocsComponentWidget.vue'
 import DocsBreadcrumbs from './DocsBreadcrumbs.vue'
 import DocsNotFound from './DocsNotFound.vue'
+import { useSyntaxSwitcher } from '../composables/syntax-switcher'
 
 const { Layout } = DefaultTheme
+useSyntaxSwitcher('vitepress:default-syntax', ['modx', 'fenom'])
 </script>
 
 <template>

docs/.vitepress/theme/composables/syntax-switcher.ts

@@ -0,0 +1,54 @@
+import { onMounted, watch } from 'vue'
+import { inBrowser, useRouter } from 'vitepress'
+
+function setSyntax(
+  syntax: string,
+  target?: HTMLLabelElement,
+) {
+  const allGroups = document.querySelectorAll('.vp-code-group')
+  const group = target && target.closest('.vp-code-group')
+
+  for (let i = 0; i < allGroups.length; i++) {
+    if (group && allGroups[i] === group) continue
+    Array.from(allGroups[i].querySelectorAll('label')).find(el => el.innerText === syntax)?.click()
+  }
+}
+
+export function useSyntaxSwitcher(
+  key: string,
+  labels: Array<string>,
+): void {
+  if (inBrowser) {
+    onMounted(() => {
+      const { route } = useRouter()
+      watch(
+        () => route.data.relativePath,
+        () => {
+        const defaultSyntax = localStorage.getItem(key)
+        defaultSyntax && setSyntax(defaultSyntax)
+      }, {
+        immediate: true,
+        flush: 'post',
+      })
+    })
+
+    window.addEventListener('click', (e: Event) => {
+      const target = e.target as HTMLLabelElement
+
+      if (
+        !target.matches('.vp-code-group .tabs label') ||
+        !e.isTrusted
+      ) {
+        return
+      }
+
+      const syntax = target.innerText
+      if (!labels.some(label => label === syntax)) {
+        return
+      }
+
+      localStorage.setItem(key, syntax)
+      setSyntax(syntax, target)
+    })
+  }
+}