erudit 3.0.0-dev.9 → 4.0.0-dev.2

package/app/components/aside/major/pages/PanePages.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+const routePath = useRoutePath();
+
+const customLinks = ERUDIT.config.project.customLinks;
+
+const { data: pagesData } =
+    useNuxtData<AsideMajorPagesData>(asideMajorPagesKey);
+
+const activeState = computed(() => {
+    return {
+        main: routePath.value === PAGES.index,
+        contributors:
+            routePath.value === PAGES.contributors ||
+            routePath.value.startsWith(PAGES.contributor()),
+        sponsors: routePath.value === PAGES.sponsors,
+    };
+});
+
+const contributorsEnabled = !!ERUDIT.config.project.contributors?.enabled;
+const sponsorsEnabled = !!ERUDIT.config.project.sponsors?.enabled;
+
+const phrase = await usePhrases('main_page', 'contributors', 'sponsors');
+</script>
+
+<template>
+    <AsideMajorPaneTemplate>
+        <ScrollHolder direction="rtl">
+            <AsideListItem
+                icon="house"
+                :to="PAGES.index"
+                :main="phrase.main_page"
+                :active="activeState.main"
+            />
+            <AsideListItem
+                v-if="contributorsEnabled"
+                icon="users"
+                :to="PAGES.contributors"
+                :main="phrase.contributors"
+                :active="activeState.contributors"
+                :secondary="pagesData?.contributorsCount"
+            />
+            <AsideListItem
+                v-if="sponsorsEnabled"
+                icon="diamond"
+                :to="PAGES.sponsors"
+                :main="phrase.sponsors"
+                :active="activeState.sponsors"
+                :secondary="pagesData?.sponsorsCount"
+            />
+            <AsideListItem
+                v-if="customLinks"
+                v-for="link in customLinks"
+                :icon="link.icon"
+                :main="link.label"
+                :to="link.href"
+                target="_blank"
+            />
+        </ScrollHolder>
+    </AsideMajorPaneTemplate>
+</template>

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

@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import SearchWorker from './search.worker.ts?worker';
+import SearchInput from './SearchInput.vue';
+import SearchStatus from './SearchStatus.vue';
+import SearchResult from './SearchResult.vue';
+
+const runtimeConfig = useRuntimeConfig();
+
+const phrase = await usePhrases(
+    'no_results',
+    'searching_more',
+    'no_more_results',
+);
+
+const STATUS = defineStatuses({
+    default: {},
+    loading: { icon: loadingSvg },
+    searching: { icon: loadingSvg, message: phrase.searching_more },
+    nothingFound: { icon: 'search/wtf', message: phrase.no_results },
+    noMore: { icon: 'search/check', message: phrase.no_more_results },
+    error: (message: string) => ({
+        icon: 'search/dead',
+        message,
+    }),
+});
+
+const worker = shallowRef<Worker>() as Ref<Worker>;
+const results = shallowRef<SearchEntry[]>([]);
+const status = ref<SearchStatusVariant>(STATUS.default);
+
+let searchId = 0;
+
+onMounted(() => {
+    worker.value = new SearchWorker();
+
+    const initCommand: SearchCommandInit = {
+        type: 'init',
+        baseUrl: withBaseUrl('/'),
+        language: ERUDIT.config.project.language.current,
+        cacheId: String(
+            import.meta.dev ? Date.now() : runtimeConfig.public.buildTimestamp,
+        ),
+    };
+
+    worker.value.postMessage(initCommand);
+
+    worker.value.onmessage = (e) => {
+        const response = e.data as SearchResponse;
+        switch (response.type) {
+            case 'error':
+                status.value = STATUS.error(response.message);
+                break;
+            case 'results':
+                results.value = results.value.concat(response.entries);
+                status.value =
+                    results.value.length === 0
+                        ? STATUS.nothingFound
+                        : response.hasMore
+                          ? STATUS.searching
+                          : STATUS.noMore;
+                break;
+        }
+    };
+});
+
+onUnmounted(() => {
+    worker.value.terminate();
+});
+
+function newSearch(query: string) {
+    if (!query) {
+        results.value = [];
+        status.value = STATUS.default;
+        return;
+    }
+
+    results.value = [];
+    status.value = STATUS.loading;
+    const newSearchId = ++searchId;
+
+    const searchCommand: SearchCommandSearch = {
+        type: 'search',
+        id: newSearchId,
+        query,
+    };
+
+    worker.value.postMessage(searchCommand);
+}
+
+function more() {
+    if (status.value.id !== 'searching') {
+        return;
+    }
+
+    const moreCommand: SearchCommandMore = {
+        type: 'more',
+        id: searchId,
+    };
+
+    worker.value.postMessage(moreCommand);
+}
+
+function defineStatuses<
+    T extends Record<
+        string,
+        | Omit<SearchStatusVariant, 'id'>
+        | ((...a: any[]) => Omit<SearchStatusVariant, 'id'>)
+    >,
+>(defs: T) {
+    const out: Record<string, any> = {};
+    for (const [statusId, statusDef] of Object.entries(defs)) {
+        if (typeof statusDef === 'function') {
+            out[statusId] = (...args: any[]) => ({
+                id: statusId,
+                ...statusDef(...args),
+            });
+        } else {
+            out[statusId] = { id: statusId, ...statusDef };
+        }
+    }
+    return out as {
+        [K in keyof T]: T[K] extends (...a: infer A) => any
+            ? (...a: A) => SearchStatusVariant
+            : SearchStatusVariant;
+    };
+}
+</script>
+
+<template>
+    <AsideMajorPaneTemplate :scrollable="false" class="flex flex-col">
+        <SearchInput class="shrink-0" @search="newSearch" />
+        <ScrollHolder direction="rtl" class="flex-1">
+            <div v-if="results.length">
+                <ol>
+                    <SearchResult v-for="result in results" :result="result" />
+                </ol>
+            </div>
+            <SearchStatus
+                :key="`${status.id}-${results.length}`"
+                :statusVariant="status"
+                @reach="more"
+            />
+        </ScrollHolder>
+    </AsideMajorPaneTemplate>
+</template>

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

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import { debounce } from 'perfect-debounce';
+
+const emit = defineEmits<{
+    (e: 'search', query: string): void;
+}>();
+
+const searchInput = useTemplateRef('searchInput');
+const route = useRoute();
+const router = useRouter();
+
+const previousQuery = ref('');
+const currentQuery = ref('');
+
+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);
+    }
+}, 300);
+
+function onWake() {
+    searchInput.value?.focus();
+}
+
+function initFromUrlParam() {
+    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 } });
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+    if (event.shiftKey && event.code === 'KeyF') {
+        event.preventDefault();
+        onWake();
+    }
+}
+
+watch(normalizedQuery, () => {
+    insertUrlQuery(urlParamQuery.value);
+    scheduleEmit();
+});
+
+onMounted(() => {
+    initFromUrlParam();
+    onWake();
+    window.addEventListener('keydown', handleKeyDown);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('keydown', handleKeyDown);
+});
+
+onActivated(() => {
+    insertUrlQuery(urlParamQuery.value);
+    onWake();
+});
+
+onDeactivated(() => {
+    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>
+</template>

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

@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import { isContentType } from '@erudit-js/core/content/type';
+
+import type { MaybeMyIconName, MyIconName } from '#my-icons';
+
+const { result } = defineProps<{ result: SearchEntry }>();
+
+const ELEMENT_PREFIX = 'element:';
+const isElementCategory = result.category?.startsWith(ELEMENT_PREFIX);
+
+const immediateIcon: MaybeMyIconName = (() => {
+    if (isElementCategory) {
+        return loadingSvg;
+    }
+
+    if (isContentType(result.category)) {
+        return ICONS[result.category];
+    }
+
+    switch (result.category) {
+        case 'contributors':
+            return 'user';
+        default:
+            return '__missing';
+    }
+})();
+
+const iconKey = ref(0);
+const icon = ref<MaybeMyIconName>(immediateIcon);
+
+watch(icon, () => {
+    iconKey.value += 1;
+});
+
+async function requestElementIcon(elementName: string) {
+    try {
+        icon.value = await getElementIcon(elementName);
+    } catch {
+        icon.value = '__missing' satisfies MyIconName;
+    }
+}
+
+if (isElementCategory) {
+    const elementName = result.category!.slice(ELEMENT_PREFIX.length);
+    requestElementIcon(elementName);
+}
+</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>
+</template>

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

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+const { statusVariant } = defineProps<{ statusVariant: SearchStatusVariant }>();
+const { icon, message } = statusVariant;
+
+const emit = defineEmits<{
+    (e: 'reach'): void;
+}>();
+
+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);
+});
+
+onUnmounted(() => {
+    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>
+</template>

package/app/components/aside/major/search/search.worker.ts

@@ -0,0 +1,164 @@
+import { Document, Encoder } from 'flexsearch';
+
+import { encoderAugments } from '@erudit/shared/search/encoders';
+import { unzip } from '@erudit/shared/utils/zip';
+
+const batchSize = 50;
+
+let baseUrl: string;
+let initPromise: Promise<void>;
+let initError: string | undefined;
+let latestSearchId: number = -1;
+let documentIndex: Document;
+let categoryPriorityById: Record<string, number>;
+
+let currentOrdered: (string | number)[] = [];
+let currentOffset = 0;
+
+onmessage = async (e) => {
+    const command = e.data as SearchCommand;
+    switch (command.type) {
+        case 'init':
+            baseUrl = command.baseUrl;
+            initPromise = init(command);
+            break;
+        case 'search': {
+            await initPromise;
+            trySendInitError();
+            latestSearchId = command.id;
+            currentOrdered = buildOrderedResults(command.query);
+            currentOffset = 0;
+            sendResults(command.id, batchSize);
+            break;
+        }
+        case 'more': {
+            await initPromise;
+            trySendInitError();
+            sendResults(command.id, batchSize);
+            break;
+        }
+    }
+};
+
+async function init(initCommand: SearchCommandInit) {
+    try {
+        const fetchedSearch = await fetch(
+            baseUrl + 'search.json.gz?' + initCommand.cacheId,
+        );
+        const gzipSearch = await fetchedSearch.text();
+        const textSearch = await unzip(gzipSearch);
+        const jsonSearch = JSON.parse(textSearch);
+
+        const encoder = new Encoder();
+        encoderAugments[initCommand.language as LanguageCode]?.(encoder);
+
+        documentIndex = new Document({
+            document: {
+                ...jsonSearch.documentDescriptor,
+                encoder,
+            },
+        });
+
+        categoryPriorityById = Object.create(null);
+        for (const cat of jsonSearch.categories as {
+            id: string;
+            priority: number;
+        }[]) {
+            categoryPriorityById[cat.id] = cat.priority;
+        }
+
+        for (const key in jsonSearch.export) {
+            documentIndex.import(key, jsonSearch.export[key]);
+        }
+    } catch (error) {
+        initError =
+            'Search init error: ' +
+            (error instanceof Error ? error.message : String(error));
+
+        const errorResponse: SearchResponseError = {
+            type: 'error',
+            message: initError,
+        };
+
+        postMessage(errorResponse);
+    }
+}
+
+function trySendInitError() {
+    if (initError) {
+        const errorResponse: SearchResponseError = {
+            type: 'error',
+            message: initError,
+        };
+        postMessage(errorResponse);
+    }
+}
+
+function buildOrderedResults(query: string): (string | number)[] {
+    // 1. Fast-path: ignore empty or whitespace-only queries.
+    if (!query || !query.trim()) return [];
+
+    // 2. Perform search. FlexSearch Document#search returns groups (by field/tag).
+    //    Each group contains a .result array of ids. We set a reasonably high limit
+    //    (1000) to gather enough candidates; final pagination happens later.
+    const groups = documentIndex.search(query, { limit: 1000 }) as {
+        field?: string;
+        tag?: string;
+        result: (string | number)[];
+    }[];
+
+    // 3. Use a Set to enforce uniqueness while preserving first-seen order.
+    const seen = new Set<string | number>();
+
+    // 4. Accumulate ranked entries immediately (single pass):
+    //    - id: document identifier
+    //    - priority: derived from document metadata (categoryPriority) or 0
+    //    - pos: stable position (the order we first encountered the id)
+    const ranked: { id: string | number; priority: number; pos: number }[] = [];
+    let pos = 0;
+
+    for (const group of groups) {
+        const results = group.result;
+        for (let i = 0, len = results.length; i < len; i++) {
+            const id = results[i]!;
+            if (!seen.has(id)) {
+                seen.add(id);
+                const doc: any = documentIndex.get(id);
+                if (!doc) continue;
+                ranked.push({
+                    id,
+                    priority: categoryPriorityById[doc?.category] ?? 0, // replaced doc.categoryPriority
+                    pos: pos++, // capture discovery order for stable secondary sorting
+                });
+            }
+        }
+    }
+
+    // 5. Sort primarily by descending priority, secondarily by original discovery order
+    //    to preserve stable ordering among equally prioritized documents.
+    ranked.sort((a, b) => b.priority - a.priority || a.pos - b.pos);
+
+    // 6. Return only the ordered ids (actual documents fetched lazily during pagination).
+    return ranked.map((r) => r.id);
+}
+
+function sendResults(searchId: number, pageSize: number) {
+    if (searchId !== latestSearchId) {
+        // Drop results for any stale (outdated) search id.
+        return;
+    }
+
+    const start = currentOffset;
+    const end = start + pageSize;
+    const slice = currentOrdered.slice(start, end);
+    currentOffset = end;
+    const entries = slice.map((id) => documentIndex.get(id));
+    const hasMore = currentOffset < currentOrdered.length;
+    const resultsResponse: SearchResponseResults = {
+        type: 'results',
+        entries: entries as any,
+        hasMore,
+    };
+
+    postMessage(resultsResponse);
+}

package/app/components/aside/major/settings/BuildTime.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+const nuxtApp = useNuxtApp();
+const language = ERUDIT.config.project.language.current;
+const buildTimestamp = nuxtApp.$config.public.buildTimestamp;
+
+const formattedBuildDate = computed(() => {
+    let date = new Date(buildTimestamp);
+    return new Intl.DateTimeFormat(language, {
+        day: '2-digit',
+        month: 'short',
+        year: 'numeric',
+    }).format(date);
+});
+
+const phrase = await usePhrases('built');
+</script>
+
+<template>
+    <AsideListItem
+        :hoverable="false"
+        icon="box"
+        :main="phrase.built"
+        :secondary="formattedBuildDate"
+    />
+</template>

package/app/components/aside/major/settings/EngineVersion.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+const phrase = await usePhrases('erudit');
+</script>
+
+<template>
+    <AsideListItem
+        icon="erudit"
+        to="https://github.com/erudit-js/erudit"
+        target="_blank"
+        :main="phrase.erudit"
+        :secondary="ERUDIT.config.version"
+    />
+</template>

package/app/components/aside/major/settings/PaneSettings.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import ThemeSwitcher from './ThemeSwitcher.vue';
+import BuildTime from './BuildTime.vue';
+import Repository from './repository/Repository.vue';
+import EngineVersion from './EngineVersion.vue';
+</script>
+
+<template>
+    <AsideMajorPaneTemplate>
+        <ScrollHolder direction="rtl">
+            <ThemeSwitcher />
+            <BuildTime />
+            <Repository />
+            <EngineVersion />
+        </ScrollHolder>
+    </AsideMajorPaneTemplate>
+</template>