erudit 4.0.0-dev.3 → 4.0.0-dev.5

package/app/components/aside/major/search/SearchInput.vue

@@ -2,7 +2,7 @@
 import { debounce } from 'perfect-debounce';
 
 const emit = defineEmits<{
-    (e: 'search', query: string): void;
+  (e: 'search', query: string): void;
 }>();
 
 const searchInput = useTemplateRef('searchInput');
@@ -16,89 +16,88 @@ const normalizedQuery = computed(() => currentQuery.value.trim());
 const urlParamQuery = computed(() => normalizedQuery.value || undefined);
 
 const scheduleEmit = debounce(() => {
-    if (normalizedQuery.value !== previousQuery.value) {
-        previousQuery.value = normalizedQuery.value;
-        emit('search', normalizedQuery.value);
-    }
+  if (normalizedQuery.value !== previousQuery.value) {
+    previousQuery.value = normalizedQuery.value;
+    emit('search', normalizedQuery.value);
+  }
 }, 300);
 
 function onWake() {
-    searchInput.value?.focus();
+  searchInput.value?.focus();
 }
 
 function initFromUrlParam() {
-    const defaultQuery = String(route.query.q || '').trim();
-    if (defaultQuery) {
-        currentQuery.value = defaultQuery;
-        emit('search', currentQuery.value);
-    }
+  const defaultQuery = String(route.query.q || '').trim();
+  if (defaultQuery) {
+    currentQuery.value = defaultQuery;
+    emit('search', currentQuery.value);
+  }
 }
 
 function insertUrlQuery(q: string | undefined) {
-    router.replace({ ...route, query: { ...route.query, q } });
+  router.replace({ ...route, query: { ...route.query, q } });
 }
 
 function handleKeyDown(event: KeyboardEvent) {
-    if (event.shiftKey && event.code === 'KeyF') {
-        event.preventDefault();
-        onWake();
-    }
+  if (event.shiftKey && event.code === 'KeyF') {
+    event.preventDefault();
+    onWake();
+  }
 }
 
 watch(normalizedQuery, () => {
-    insertUrlQuery(urlParamQuery.value);
-    scheduleEmit();
+  insertUrlQuery(urlParamQuery.value);
+  scheduleEmit();
 });
 
 onMounted(() => {
-    initFromUrlParam();
-    onWake();
-    window.addEventListener('keydown', handleKeyDown);
+  initFromUrlParam();
+  onWake();
+  window.addEventListener('keydown', handleKeyDown);
 });
 
 onUnmounted(() => {
-    window.removeEventListener('keydown', handleKeyDown);
+  window.removeEventListener('keydown', handleKeyDown);
 });
 
 onActivated(() => {
-    insertUrlQuery(urlParamQuery.value);
-    onWake();
+  insertUrlQuery(urlParamQuery.value);
+  onWake();
 });
 
 onDeactivated(() => {
-    insertUrlQuery(undefined);
+  insertUrlQuery(undefined);
 });
 
 const phrase = await usePhrases('search_the_site');
 </script>
 
 <template>
-    <section class="border-border flex w-full items-center border-b">
-        <input
-            ref="searchInput"
-            type="text"
-            name="search"
-            autocomplete="off"
-            spellcheck="false"
-            :placeholder="phrase.search_the_site"
-            v-model="currentQuery"
-            class="ps-normal h-[60px] w-full
-                pe-[calc(0.5*var(--spacing-normal))] font-sans text-sm
-                font-[500] outline-none"
-        />
-        <TransitionFade>
-            <div
-                v-if="currentQuery"
-                @click="currentQuery = ''"
-                class="p-normal group hocus:cursor-pointer pl-small"
-            >
-                <div
-                    class="text-text-dimmed group-hocus:text-text text-[22px]
-                        transition-[color]"
-                >
-                    <MyIcon name="plus" class="rotate-45" />
-                </div>
-            </div>
-        </TransitionFade>
-    </section>
+  <section class="border-border flex w-full items-center border-b">
+    <input
+      ref="searchInput"
+      type="text"
+      name="search"
+      autocomplete="off"
+      spellcheck="false"
+      :placeholder="phrase.search_the_site"
+      v-model="currentQuery"
+      class="ps-normal h-[60px] w-full pe-[calc(0.5*var(--spacing-normal))]
+        font-sans text-sm font-[500] outline-none"
+    />
+    <TransitionFade>
+      <div
+        v-if="currentQuery"
+        @click="currentQuery = ''"
+        class="p-normal group hocus:cursor-pointer pl-small"
+      >
+        <div
+          class="text-text-dimmed group-hocus:text-text text-[22px]
+            transition-[color]"
+        >
+          <MyIcon name="plus" class="rotate-45" />
+        </div>
+      </div>
+    </TransitionFade>
+  </section>
 </template>

package/app/components/aside/major/search/SearchResult.vue

@@ -3,101 +3,152 @@ import { isContentType } from '@erudit-js/core/content/type';
 
 import type { MaybeMyIconName, MyIconName } from '#my-icons';
 
-const { result } = defineProps<{ result: SearchEntry }>();
+const { result, query } = defineProps<{ result: SearchEntry; query: string }>();
+
+const route = useRoute();
+const router = useRouter();
+const loadingSvg = useLoadingSvg();
 
 const ELEMENT_PREFIX = 'element:';
 const isElementCategory = result.category?.startsWith(ELEMENT_PREFIX);
 
 const immediateIcon: MaybeMyIconName = (() => {
-    if (isElementCategory) {
-        return loadingSvg;
-    }
+  if (isElementCategory) {
+    return loadingSvg;
+  }
 
-    if (isContentType(result.category)) {
-        return ICONS[result.category];
-    }
+  if (isContentType(result.category)) {
+    return ICONS[result.category];
+  }
 
-    switch (result.category) {
-        case 'contributors':
-            return 'user';
-        default:
-            return '__missing';
-    }
+  switch (result.category) {
+    case 'contributors':
+      return 'user';
+    default:
+      return '__missing';
+  }
 })();
 
 const iconKey = ref(0);
 const icon = ref<MaybeMyIconName>(immediateIcon);
 
 watch(icon, () => {
-    iconKey.value += 1;
+  iconKey.value += 1;
 });
 
 async function requestElementIcon(elementName: string) {
-    try {
-        icon.value = await getElementIcon(elementName);
-    } catch {
-        icon.value = '__missing' satisfies MyIconName;
-    }
+  icon.value = loadingSvg;
+
+  try {
+    icon.value = await getElementIcon(elementName);
+  } catch {
+    icon.value = '__missing' satisfies MyIconName;
+  }
 }
 
 if (isElementCategory) {
-    const elementName = result.category!.slice(ELEMENT_PREFIX.length);
-    requestElementIcon(elementName);
+  const elementName = result.category!.slice(ELEMENT_PREFIX.length);
+  requestElementIcon(elementName);
+}
+
+function splitQueryTokens(input: string) {
+  return input.toLowerCase().trim().split(/\s+/g).filter(Boolean);
+}
+
+function scoreTokenMatches(tokens: string[], haystack: string) {
+  // Basic forward look: query is space-separated, treat each token as substring.
+  const text = haystack.toLowerCase();
+  let score = 0;
+  for (const token of tokens) {
+    if (text.includes(token)) score += 1;
+  }
+  return score;
+}
+
+const matchedSynonym = computed(() => {
+  if (!query) return undefined;
+  if (!result.synonyms?.length) return undefined;
+
+  const tokens = splitQueryTokens(query);
+  if (tokens.length === 0) return undefined;
+
+  // If title already matches any query token, keep normal title.
+  if (scoreTokenMatches(tokens, result.title) > 0) return undefined;
+
+  // Otherwise pick the synonym with best token match score.
+  let bestSynonym: string | undefined;
+  let bestScore = 0;
+  for (const synonym of result.synonyms) {
+    const score = scoreTokenMatches(tokens, synonym);
+    if (score > bestScore) {
+      bestScore = score;
+      bestSynonym = synonym;
+    }
+  }
+
+  return bestScore > 0 ? bestSynonym : undefined;
+});
+
+const primaryTitle = computed(() => matchedSynonym.value ?? result.title);
+const secondaryTitle = computed(() =>
+  matchedSynonym.value ? result.title : undefined,
+);
+
+async function searchResultClick() {
+  await router.replace({ ...route, hash: '' });
+  await nextTick();
+  await navigateTo(result.link);
 }
 </script>
 
 <template>
-    <li>
-        <AsideListItem :to="result.link">
-            <div
-                class="group p-normal text-text-muted hocus:text-text text-sm
-                    transition-[color]"
-            >
-                <div class="gap-small text-text flex items-center">
-                    <div class="relative size-[1.2em]">
-                        <TransitionFade>
-                            <MaybeMyIcon
-                                :name="icon"
-                                :key="iconKey"
-                                class="absolute top-px left-0 size-full"
-                            />
-                        </TransitionFade>
-                    </div>
-                    <div>{{ formatText(result.title) }}</div>
-                </div>
-                <div>
-                    <div
-                        v-if="result.description"
-                        class="text-text-dimmed pt-small text-xs"
-                    >
-                        {{ formatText(result.description) }}
-                    </div>
-                    <div
-                        v-if="result.synonyms?.length"
-                        class="pt-small flex flex-wrap gap-2 text-xs"
-                    >
-                        <span
-                            v-for="synonym in result.synonyms"
-                            class="text-text-dimmed group-hocus:bg-bg-aside
-                                rounded bg-neutral-200 px-[5px] py-[3px]
-                                transition-[background] dark:bg-neutral-800"
-                        >
-                            {{ formatText(synonym) }}
-                        </span>
-                    </div>
-                    <div
-                        v-if="result.location"
-                        class="text-text-dimmed pt-small gap-small flex
-                            items-center text-xs italic"
-                    >
-                        <MyIcon
-                            name="arrow/up-to-right"
-                            class="shrink-0 text-[1.3em]"
-                        />
-                        {{ formatText(result.location) }}
-                    </div>
-                </div>
-            </div>
-        </AsideListItem>
-    </li>
+  <li>
+    <AsideListItem @click="searchResultClick">
+      <div
+        class="group p-normal text-text-muted hocus:text-text text-sm
+          transition-[color]"
+      >
+        <div
+          v-if="secondaryTitle"
+          class="text-text-muted pb-small gap-small flex items-center text-xs"
+        >
+          <MyIcon
+            name="arrow/up-to-right"
+            class="relative top-[4px] shrink-0 rotate-90 text-[1.3em]"
+          />
+          {{ formatText(secondaryTitle) }}
+        </div>
+        <div class="gap-small text-text flex items-center">
+          <div class="relative size-[1.2em]">
+            <TransitionFade>
+              <MaybeMyIcon
+                :name="icon"
+                :key="iconKey"
+                class="absolute top-px left-0 size-full"
+              />
+            </TransitionFade>
+          </div>
+          <div>
+            {{ formatText(primaryTitle) }}
+          </div>
+        </div>
+        <div>
+          <div
+            v-if="result.description"
+            class="text-text-dimmed pt-small text-xs"
+          >
+            {{ formatText(result.description) }}
+          </div>
+          <div
+            v-if="result.location"
+            class="text-text-dimmed pt-small gap-small flex items-center text-xs
+              italic"
+          >
+            <MyIcon name="arrow/up-to-right" class="shrink-0 text-[1.3em]" />
+            {{ formatText(result.location) }}
+          </div>
+        </div>
+      </div>
+    </AsideListItem>
+  </li>
 </template>

package/app/components/aside/major/search/SearchStatus.vue

@@ -3,7 +3,7 @@ const { statusVariant } = defineProps<{ statusVariant: SearchStatusVariant }>();
 const { icon, message } = statusVariant;
 
 const emit = defineEmits<{
-    (e: 'reach'): void;
+  (e: 'reach'): void;
 }>();
 
 const section = useTemplateRef('section');
@@ -11,38 +11,38 @@ const section = useTemplateRef('section');
 let observer: IntersectionObserver;
 
 onMounted(() => {
-    if (!section.value) {
-        return;
-    }
-
-    observer = new IntersectionObserver(
-        (entries) => {
-            for (const entry of entries) {
-                if (entry.isIntersecting) {
-                    emit('reach');
-                }
-            }
-        },
-        { threshold: 0.25 },
-    );
-
-    observer.observe(section.value);
+  if (!section.value) {
+    return;
+  }
+
+  observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          emit('reach');
+        }
+      }
+    },
+    { threshold: 0.25 },
+  );
+
+  observer.observe(section.value);
 });
 
 onUnmounted(() => {
-    observer?.disconnect();
+  observer?.disconnect();
 });
 </script>
 
 <template>
-    <section ref="section">
-        <div
-            v-if="icon || message"
-            class="px-normal gap-big text-text-dimmed flex flex-col items-center
-                justify-center py-[40px] text-center text-sm"
-        >
-            <MaybeMyIcon v-if="icon" :name="icon" class="size-[68px]" />
-            <p v-if="message">{{ message }}</p>
-        </div>
-    </section>
+  <section ref="section">
+    <div
+      v-if="icon || message"
+      class="px-normal gap-big text-text-dimmed flex flex-col items-center
+        justify-center py-[40px] text-center text-sm"
+    >
+      <MaybeMyIcon v-if="icon" :name="icon" class="size-[68px]" />
+      <p v-if="message">{{ message }}</p>
+    </div>
+  </section>
 </template>