@ampernic/vitepress-theme-alt-docs 0.1.4 → 0.1.6

package/dist/components/ADGlobalSearch.vue

@@ -0,0 +1,477 @@
+<script setup lang="ts">
+import { onKeyStroke, useScrollLock } from '@vueuse/core'
+import { useRouter } from 'vitepress'
+import { computed, nextTick, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+
+const emit = defineEmits<{ (e: 'close'): void }>()
+const router = useRouter()
+
+const ALL_DISTROS = [
+  'alt-domain', 'alt-education', 'alt-kworkstation', 'alt-mobile',
+  'alt-platform', 'alt-server', 'alt-server-v', 'alt-virtualisation-one',
+  'alt-virtualization-pve', 'alt-workstation', 'group-policy', 'simply-linux',
+  'alt-education-e2k', 'alt-server-e2k', 'alt-workstation-e2k', 'simply-linux-e2k',
+]
+
+const DISTRO_NAMES: Record<string, string> = {
+  'alt-domain': 'Альт Домен',
+  'alt-education': 'Альт Образование',
+  'alt-education-e2k': 'Альт Образование для Эльбрус',
+  'alt-server': 'Альт Сервер',
+  'alt-server-e2k': 'Альт Сервер для Эльбрус',
+  'alt-server-v': 'Альт Сервер Виртуализации',
+  'alt-workstation': 'Альт Рабочая станция',
+  'alt-workstation-e2k': 'Альт Рабочая станция для Эльбрус',
+  'alt-kworkstation': 'Альт Рабочая станция K',
+  'alt-platform': 'Альт Платформа',
+  'alt-mobile': 'Альт Мобильный',
+  'alt-virtualisation-one': 'Альт Виртуализация ONE',
+  'alt-virtualization-pve': 'Альт Виртуализация PVE',
+  'simply-linux': 'Симпли Линукс',
+  'simply-linux-e2k': 'Симпли Линукс для Эльбрус',
+  'group-policy': 'Групповые политики',
+}
+
+// ── Pagefind ──────────────────────────────────────────────────────────────────
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const pagefind = shallowRef<any>(null)
+const indexLoading = ref(true)
+const loadError = ref(false)
+const availableDistros = ref<string[]>([])
+const availableVersions = ref<string[]>([])
+
+async function loadIndexes() {
+  // Always use absolute paths from origin root — current site base is irrelevant
+  // (on /alt-platform/ we still need to load /alt-domain/pagefind/pagefind.js)
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let pf: any = null
+  let firstIdx = -1
+
+  for (let i = 0; i < ALL_DISTROS.length; i++) {
+    try {
+      // @vite-ignore
+      pf = await import(/* @vite-ignore */ `/${ALL_DISTROS[i]}/pagefind/pagefind.js`)
+      firstIdx = i
+      break
+    } catch { /* distro not deployed yet */ }
+  }
+
+  if (!pf) throw new Error('no pagefind index found')
+
+  for (let i = firstIdx + 1; i < ALL_DISTROS.length; i++) {
+    try {
+      await pf.mergeIndex(`/${ALL_DISTROS[i]}/pagefind`)
+    } catch { /* skip */ }
+  }
+
+  await pf.init()
+
+  const filters = await pf.filters() as Record<string, Record<string, number>>
+  availableDistros.value = Object.keys(filters.distro ?? {}).sort()
+  availableVersions.value = Object.keys(filters.version ?? {}).sort((a, b) => {
+    const [aMaj, aMin] = a.split('.').map(Number)
+    const [bMaj, bMin] = b.split('.').map(Number)
+    return bMaj !== aMaj ? bMaj - aMaj : bMin - aMin
+  })
+
+  return pf
+}
+
+// ── Filters ───────────────────────────────────────────────────────────────────
+
+const selectedDistro = ref('')
+const selectedVersion = ref('')
+
+watch(selectedDistro, () => { selectedVersion.value = '' })
+
+// ── Search ────────────────────────────────────────────────────────────────────
+
+interface ResultData {
+  url: string
+  meta: { title: string }
+  excerpt: string
+}
+
+const query = ref('')
+const selectedIndex = ref(0)
+const results = ref<ResultData[]>([])
+const searching = ref(false)
+
+let searchTimer: ReturnType<typeof setTimeout> | null = null
+
+watch([query, selectedDistro, selectedVersion], () => {
+  selectedIndex.value = 0
+  if (searchTimer) clearTimeout(searchTimer)
+  if (!query.value.trim() || !pagefind.value) {
+    results.value = []
+    searching.value = false
+    return
+  }
+  searching.value = true
+  searchTimer = setTimeout(async () => {
+    const f: Record<string, string> = {}
+    if (selectedDistro.value) f.distro = selectedDistro.value
+    if (selectedVersion.value) f.version = selectedVersion.value
+    const search = await pagefind.value.search(query.value, Object.keys(f).length ? { filters: f } : {})
+    results.value = await Promise.all(
+      search.results.slice(0, 12).map((r: { data: () => Promise<ResultData> }) => r.data()),
+    )
+    searching.value = false
+  }, 200)
+})
+
+function parseUrl(url: string) {
+  const m = url.match(/\/([a-z][a-z0-9-]+)\/(\d+\.\d+(?:-\w+)?)\//)
+  return m ? { distro: m[1], version: m[2] } : null
+}
+
+function go(url: string) {
+  router.go(url)
+  close()
+}
+
+// ── Keyboard ──────────────────────────────────────────────────────────────────
+
+onKeyStroke('ArrowDown', (e) => {
+  e.preventDefault()
+  selectedIndex.value = (selectedIndex.value + 1) % Math.max(results.value.length, 1)
+})
+onKeyStroke('ArrowUp', (e) => {
+  e.preventDefault()
+  selectedIndex.value = (selectedIndex.value - 1 + Math.max(results.value.length, 1)) % Math.max(results.value.length, 1)
+})
+onKeyStroke('Enter', () => {
+  const r = results.value[selectedIndex.value]
+  if (r) go(r.url)
+})
+onKeyStroke('Escape', () => close())
+
+// ── Lifecycle ─────────────────────────────────────────────────────────────────
+
+const inputEl = shallowRef<HTMLInputElement>()
+const scrollLock = useScrollLock(typeof document !== 'undefined' ? document.body : null)
+
+onMounted(async () => {
+  scrollLock.value = true
+  await nextTick()
+  inputEl.value?.focus()
+  try {
+    pagefind.value = await loadIndexes()
+  } catch {
+    loadError.value = true
+  } finally {
+    indexLoading.value = false
+  }
+})
+
+onUnmounted(() => { scrollLock.value = false })
+
+function close() { emit('close') }
+function onOverlayClick(e: MouseEvent) { if (e.target === e.currentTarget) close() }
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="gs-overlay" @click="onOverlayClick">
+      <div class="gs-modal" role="dialog" aria-modal="true">
+
+        <!-- Input row -->
+        <div class="gs-input-row">
+          <span class="gs-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>
+          </span>
+          <input
+            ref="inputEl"
+            v-model="query"
+            class="gs-input"
+            placeholder="Поиск по всей документации…"
+            autocomplete="off"
+            spellcheck="false"
+          />
+          <button class="gs-close" aria-label="Закрыть" @click="close"><kbd>Esc</kbd></button>
+        </div>
+
+        <!-- Filters row (shown once indexes loaded and have data) -->
+        <div v-if="!indexLoading && (availableDistros.length || availableVersions.length)" class="gs-filters">
+          <select v-model="selectedDistro" class="gs-select">
+            <option value="">Все дистрибутивы</option>
+            <option v-for="d in availableDistros" :key="d" :value="d">
+              {{ DISTRO_NAMES[d] ?? d }}
+            </option>
+          </select>
+          <select v-model="selectedVersion" class="gs-select">
+            <option value="">Все версии</option>
+            <option v-for="v in availableVersions" :key="v" :value="v">{{ v }}</option>
+          </select>
+        </div>
+
+        <!-- Results -->
+        <ul v-if="results.length" class="gs-results">
+          <li
+            v-for="(result, i) in results"
+            :key="result.url"
+            class="gs-result"
+            :class="{ 'is-selected': i === selectedIndex }"
+            @mouseenter="selectedIndex = i"
+            @click="go(result.url)"
+          >
+            <div class="gs-result-header">
+              <span class="gs-result-title">{{ result.meta.title }}</span>
+              <span v-if="parseUrl(result.url)" class="gs-result-badges">
+                <span class="gs-badge gs-badge--distro">
+                  {{ DISTRO_NAMES[parseUrl(result.url)!.distro] ?? parseUrl(result.url)!.distro }}
+                </span>
+                <span class="gs-badge gs-badge--version">{{ parseUrl(result.url)!.version }}</span>
+              </span>
+            </div>
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <div class="gs-result-excerpt" v-html="result.excerpt" />
+          </li>
+        </ul>
+
+        <div v-else-if="indexLoading" class="gs-status">
+          <span class="gs-spinner" />
+          Загружаем индексы…
+        </div>
+        <div v-else-if="loadError" class="gs-status gs-status--error">
+          Индекс не найден. Запустите сборку документации.
+        </div>
+        <div v-else-if="searching" class="gs-status">Поиск…</div>
+        <div v-else-if="query && !searching" class="gs-status">
+          Ничего не найдено для «<strong>{{ query }}</strong>»
+        </div>
+        <div v-else-if="!query && !indexLoading" class="gs-status gs-status--hint">
+          Начните вводить запрос
+        </div>
+
+        <!-- Footer -->
+        <div class="gs-footer">
+          <span><kbd>↑</kbd><kbd>↓</kbd> навигация</span>
+          <span><kbd>Enter</kbd> открыть</span>
+          <span><kbd>Esc</kbd> закрыть</span>
+        </div>
+
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.gs-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 10vh;
+}
+
+.gs-modal {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  box-shadow: var(--vp-shadow-4);
+  width: min(680px, calc(100vw - 32px));
+  max-height: 72vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.gs-input-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.gs-icon {
+  color: var(--vp-c-text-3);
+  flex-shrink: 0;
+  display: flex;
+}
+
+.gs-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 16px;
+  color: var(--vp-c-text-1);
+  min-width: 0;
+}
+
+.gs-input::placeholder {
+  color: var(--vp-c-text-3);
+}
+
+.gs-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  color: var(--vp-c-text-3);
+}
+
+.gs-filters {
+  display: flex;
+  gap: 8px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-default-soft);
+}
+
+.gs-select {
+  flex: 1;
+  min-width: 0;
+  padding: 5px 8px;
+  font-size: 13px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  color: var(--vp-c-text-1);
+  cursor: pointer;
+  outline: none;
+}
+
+.gs-select:focus {
+  border-color: var(--vp-c-brand-1);
+}
+
+.gs-results {
+  overflow-y: auto;
+  list-style: none;
+  margin: 0;
+  padding: 8px;
+  flex: 1;
+}
+
+.gs-result {
+  padding: 8px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.gs-result.is-selected,
+.gs-result:hover {
+  background: var(--vp-c-default-soft);
+}
+
+.gs-result-header {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 4px;
+  flex-wrap: wrap;
+}
+
+.gs-result-title {
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+  font-weight: 500;
+}
+
+.gs-result-badges {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.gs-badge {
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.gs-badge--distro {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+}
+
+.gs-badge--version {
+  background: var(--vp-c-default-soft);
+  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-divider);
+}
+
+.gs-result-excerpt {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.gs-status {
+  padding: 24px;
+  text-align: center;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.gs-status--error {
+  color: var(--vp-c-danger-1);
+}
+
+.gs-status--hint {
+  color: var(--vp-c-text-3);
+  font-style: italic;
+}
+
+.gs-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--vp-c-divider);
+  border-top-color: var(--vp-c-brand-1);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.gs-footer {
+  display: flex;
+  gap: 16px;
+  padding: 8px 16px;
+  border-top: 1px solid var(--vp-c-divider);
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+}
+
+kbd {
+  background: var(--vp-c-default-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  padding: 1px 5px;
+  font-size: 11px;
+  font-family: inherit;
+}
+</style>
+
+<style>
+.gs-result-excerpt mark {
+  background: transparent;
+  color: var(--vp-c-brand-1);
+  font-weight: 600;
+}
+</style>

package/dist/components/ADNavBarSearch.vue

@@ -4,6 +4,7 @@ import { useData, useRoute } from 'vitepress'
 import { computed, defineAsyncComponent, ref } from 'vue'
 
 const ADSearch = defineAsyncComponent(() => import('./ADSearch.vue'))
+const ADGlobalSearch = defineAsyncComponent(() => import('./ADGlobalSearch.vue'))
 
 const { site } = useData()
 const route = useRoute()
@@ -17,18 +18,17 @@ const contentPath = computed(() => {
   return base.length > 1 && path.startsWith(base) ? path.slice(base.length - 1) : path
 })
 
-// Show search on all versioned pages (including version root /11.1/)
-// Hidden only on site root and distro-selection landing pages
+// Versioned content page — per-distro search
 const isContentPage = computed(() =>
   /^\/\d+\.\d+(?:-\w+)?\//.test(contentPath.value)
 )
 
 function openSearch() {
-  if (isContentPage.value) open.value = true
+  open.value = true
 }
 
 onKeyStroke('k', (e) => {
-  if ((e.metaKey || e.ctrlKey) && isContentPage.value) {
+  if (e.metaKey || e.ctrlKey) {
     e.preventDefault()
     e.stopPropagation()
     open.value = true
@@ -38,7 +38,7 @@ onKeyStroke('k', (e) => {
 onKeyStroke('/', (e) => {
   const tag = (e.target as HTMLElement).tagName
   const editing = (e.target as HTMLElement).isContentEditable || tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA'
-  if (!editing && isContentPage.value) {
+  if (!editing) {
     e.preventDefault()
     open.value = true
   }
@@ -49,7 +49,6 @@ onKeyStroke('/', (e) => {
   <!-- Wrapper mimics .VPNavBarSearch layout (flex: 1 on ≥768px) -->
   <div class="ad-search-wrap">
     <button
-      v-if="isContentPage"
       type="button"
       class="DocSearch DocSearch-Button"
       aria-label="Поиск"
@@ -65,7 +64,8 @@ onKeyStroke('/', (e) => {
       </span>
     </button>
 
-    <ADSearch v-if="open" @close="open = false" />
+    <ADSearch v-if="open && isContentPage" @close="open = false" />
+    <ADGlobalSearch v-if="open && !isContentPage" @close="open = false" />
   </div>
 </template>
 
@@ -94,4 +94,3 @@ onKeyStroke('/', (e) => {
   }
 }
 </style>
-

package/dist/config/shared.js

@@ -15,6 +15,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function createSharedConfig(options) {
   const base = process.env.VITE_BASE ?? "/";
   const pagefind = (0, _vitepressPluginPagefind.PagefindPlugin)({
+    distroName: options.distroName,
     extractFilters: id => {
       const m = id.match(/[/\\](\d+\.\d+(?:-\w+)?)[/\\]/);
       return m ? {

package/dist/config/shared.mjs

@@ -8,6 +8,7 @@ import { PagefindPlugin } from "@ampernic/vitepress-plugin-pagefind";
 export function createSharedConfig(options) {
   const base = process.env.VITE_BASE ?? "/";
   const pagefind = PagefindPlugin({
+    distroName: options.distroName,
     extractFilters: (id) => {
       const m = id.match(/[/\\](\d+\.\d+(?:-\w+)?)[/\\]/);
       return m ? { version: m[1] } : null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ampernic/vitepress-theme-alt-docs",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Shared VitePress theme for ALT Linux documentation",
   "license": "GPL-3.0-or-later",
   "author": "Ampernic",
@@ -36,7 +36,7 @@
     "@ampernic/vitepress-plugin-alt-docs-versioning": "0.1.2",
     "@ampernic/vitepress-plugin-html-image": "0.1.2",
     "@ampernic/vitepress-plugin-cross-site-router": "0.1.2",
-    "@ampernic/vitepress-plugin-pagefind": "0.1.2"
+    "@ampernic/vitepress-plugin-pagefind": "0.1.5"
   },
   "devDependencies": {
     "builtin-modules": "^3.3.0",