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)
+ })
+ }
+}