docs: add version switcher to the docs header

docs/app.config.ts

@@ -1,4 +1,9 @@
 export default defineAppConfig({
+  versions: [
+    // `current` marks the version served by this deployment.
+    { label: '2.x', href: 'https://pinia-orm.codedredd.de', current: true },
+    { label: '1.x', href: 'https://v1.pinia-orm.codedredd.de' },
+  ],
   docus: {
     title: 'Pinia ORM',
     description: 'The Pinia plugin to enable Object-Relational Mapping access to the Pinia Store.',

docs/components/AppHeader.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { useMagicKeys } from '@vueuse/core'
+
+const { config } = useDocus()
+const { navigation } = useContent()
+const { y } = useWindowScroll()
+const route = useRoute()
+
+const showDocsSearch = ref(false)
+
+const hasDrawer = computed(() => navigation.value?.length > 1 || navigation.value?.[0]?.children?.length)
+
+const isBasicLayout = computed(() => route.meta.layout === 'basic')
+
+const { meta_K, Escape } = useMagicKeys()
+
+watch(meta_K, (v) => {
+  if (v) {
+    showDocsSearch.value = !showDocsSearch.value
+  }
+})
+
+watch(Escape, () => {
+  if (showDocsSearch.value)
+    showDocsSearch.value = false
+})
+</script>
+
+<template>
+  <header :class="{ 'has-drawer': hasDrawer, 'is-basic-layout': isBasicLayout, 'on-top': y === 0 }">
+    <Container>
+      <div class="header-layout">
+        <div class="section left">
+          <AppHeaderDrawer v-if="hasDrawer" />
+          <AppHeaderLogo />
+        </div>
+
+        <div class="section center">
+          <AppHeaderLogo />
+          <AppNavigation v-if="config.header.navigation" />
+          <DocsSearchButton
+            v-else
+            class="docs-search-button-desktop"
+            @click="showDocsSearch = true"
+          />
+          <DocsSearch v-model="showDocsSearch" />
+        </div>
+
+        <div class="section right">
+          <DocsSearchButton
+            class="docs-search-button-mobile"
+            @click="showDocsSearch = true"
+          />
+          <AppVersionSelect />
+          <AppColorMode />
+          <div class="social-icons">
+            <AppSocialIcons />
+          </div>
+        </div>
+      </div>
+    </Container>
+  </header>
+</template>
+
+<style scoped lang="ts">
+css({
+  ':deep(.icon)': {
+    width: '{docus.app.header.icon.size}',
+    height: '{docus.app.header.icon.size}'
+  },
+
+  '.header-logo': {
+    '.left &': {
+      '.has-drawer &': {
+        display: 'none',
+        '@lg': {
+          display: 'block'
+        }
+      },
+    },
+
+    '.center &': {
+      display: 'none',
+      '.has-drawer &': {
+        display: 'block',
+        '@lg': {
+          display: 'none'
+        },
+      },
+    }
+  },
+
+  header: {
+    backdropFilter: '{docus.app.header.backdropFilter}',
+    position: 'sticky',
+    top: 0,
+    zIndex: 10,
+    width: '100%',
+    borderBottomWidth: '{docus.app.header.borderBottomWidth}',
+    borderBottomStyle: '{docus.app.header.borderBottomStyle}',
+    borderBottomColor: '{docus.app.header.borderBottomColor}',
+    backgroundColor: '{docus.app.header.backgroundColor}',
+    height: '{docus.app.header.height}',
+
+    '&.is-basic-layout.on-top': {
+      background: 'transparent',
+      borderColor: 'transparent',
+      backdropFilter: 'none',
+    },
+
+    '.docs-search-button-desktop': {
+      display: 'none',
+      '@lg': {
+        display: 'flex'
+      }
+    },
+
+    '.docs-search-button-mobile': {
+      display: 'flex',
+      '@lg': {
+        display: 'none'
+      }
+    },
+
+    '.header-layout': {
+      display: 'grid',
+      height: '100%',
+      gridTemplateColumns: '{docus.app.header.layout.gridTemplateColumns}',
+      gap: '{docus.app.header.layout.gap}',
+    },
+
+    '.section': {
+      display: 'flex',
+      alignItems: 'center',
+      flex: 'none',
+
+      '&.left': {
+        gridColumn: '{docus.app.header.layout.left.gridColumn}',
+        '@lg': {
+          marginInlineStart: 0
+        },
+      },
+
+      '&.center': {
+        gridColumn: '{docus.app.header.layout.center.gridColumn}',
+        justifyContent: 'center',
+        flex: '1',
+        zIndex: '1'
+      },
+
+      '&.right': {
+        display: 'flex',
+        gridColumn: '{docus.app.header.layout.right.gridColumn}',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        gap: '{space.2}',
+        flex: 'none',
+        marginInlineEnd: 'calc(0px - {space.4})',
+
+        '.social-icons': {
+          display: 'none',
+          '@md': {
+            display: 'flex',
+            alignItems: 'center',
+          }
+        }
+      }
+    }
+  }
+})
+</style>

docs/components/AppVersionSelect.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+interface DocsVersion {
+  label: string
+  href: string
+  current?: boolean
+}
+
+const appConfig = useAppConfig() as { versions?: DocsVersion[] }
+
+const versions = computed<DocsVersion[]>(() => appConfig.versions ?? [])
+
+const current = computed(() => versions.value.find(version => version.current) ?? versions.value[0])
+
+function onChange (event: Event) {
+  const href = (event.target as HTMLSelectElement).value
+
+  if (!href || href === current.value?.href) { return }
+
+  window.location.href = href
+}
+</script>
+
+<template>
+  <label v-if="versions.length > 1" class="version-select">
+    <span class="sr-only">Switch documentation version</span>
+    <select :value="current?.href" @change="onChange">
+      <option v-for="version in versions" :key="version.label" :value="version.href">
+        {{ version.label }}
+      </option>
+    </select>
+  </label>
+</template>
+
+<style scoped>
+.version-select select {
+  appearance: none;
+  background-color: transparent;
+  border: 1px solid rgb(115 115 115 / 0.35);
+  border-radius: 0.375rem;
+  color: inherit;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1;
+  padding: 0.375rem 1.5rem 0.375rem 0.625rem;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23737373' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-position: right 0.375rem center;
+  background-repeat: no-repeat;
+  background-size: 0.875rem;
+}
+
+.version-select select:hover {
+  border-color: rgb(115 115 115 / 0.7);
+}
+
+.version-select .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+</style>