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

package/app/components/aside/major/contentNav/items/Flags.vue

@@ -6,47 +6,45 @@ import type { MyIconName } from '#my-icons';
 defineProps<{ flags: ContentFlags }>();
 
 const phrase = await usePhrases(
-    'flag_title_dev',
-    'flag_title_advanced',
-    'flag_title_secondary',
+  'flag_title_dev',
+  'flag_title_advanced',
+  'flag_title_secondary',
 );
 
 const flagData = ((flagType: ContentFlag) => {
-    switch (flagType) {
-        case 'dev':
-            return {
-                icon: 'construction',
-                title: phrase.flag_title_dev,
-            };
-        case 'advanced':
-            return {
-                icon: 'asterisk',
-                title: phrase.flag_title_advanced,
-            };
-        case 'secondary':
-            return {
-                icon: 'puzzle',
-                title: phrase.flag_title_secondary,
-            };
-    }
+  switch (flagType) {
+    case 'dev':
+      return {
+        icon: 'construction',
+        title: phrase.flag_title_dev,
+      };
+    case 'advanced':
+      return {
+        icon: 'asterisk',
+        title: phrase.flag_title_advanced,
+      };
+    case 'secondary':
+      return {
+        icon: 'puzzle',
+        title: phrase.flag_title_secondary,
+      };
+  }
 }) as (flagType: ContentFlag) => { icon: MyIconName; title: string };
 
 const flagOrder: ContentFlag[] = ['secondary', 'advanced', 'dev'];
 </script>
 
 <template>
-    <div class="gap-small flex items-center text-xs">
-        <div
-            v-for="flagType in flagOrder.filter(
-                (f) => flags[f] && flags[f] === true,
-            )"
-            :title="flagData(flagType).title"
-        >
-            <MyIcon
-                :name="flagData(flagType).icon"
-                class="text-text-disabled hocus:text-text-dimmed cursor-help
-                    text-base transition-[color]"
-            />
-        </div>
+  <div class="gap-small flex items-center text-xs">
+    <div
+      v-for="flagType in flagOrder.filter((f) => flags[f] && flags[f] === true)"
+      :title="flagData(flagType).title"
+    >
+      <MyIcon
+        :name="flagData(flagType).icon"
+        class="text-text-disabled hocus:text-text-dimmed cursor-help text-base
+          transition-[color]"
+      />
     </div>
+  </div>
 </template>

package/app/components/aside/major/contentNav/items/ItemTemplate.vue

@@ -3,25 +3,25 @@ import type { MyIconName } from '#my-icons';
 import Flags from './Flags.vue';
 
 const { navItem, to } = defineProps<{
-    navItem: FrontContentNavItem;
-    icon?: MyIconName;
-    state: undefined | 'active' | 'accent';
-    to?: string;
+  navItem: FrontContentNavItem;
+  icon?: MyIconName;
+  state: undefined | 'active' | 'accent';
+  to?: string;
 }>();
 
 const resolvedTo = computed(() => {
-    if (to === '') {
-        return undefined;
-    }
+  if (to === '') {
+    return undefined;
+  }
 
-    return to ?? navItem.link;
+  return to ?? navItem.link;
 });
 </script>
 
 <template>
-    <TreeItem :icon :main="navItem.title" :state :to="resolvedTo">
-        <template v-slot:secondary v-if="navItem.flags">
-            <Flags :flags="navItem.flags" />
-        </template>
-    </TreeItem>
+  <TreeItem :icon :main="navItem.title" :state :to="resolvedTo">
+    <template v-slot:secondary v-if="navItem.flags">
+      <Flags :flags="navItem.flags" />
+    </template>
+  </TreeItem>
 </template>

package/app/components/aside/major/languages/PaneLanguages.vue

@@ -1,55 +1,55 @@
 <script lang="ts" setup>
 import type { EruditTranslations } from '@erudit-js/core/eruditConfig/language';
 
-const currentLanguage = ERUDIT.config.project.language.current;
-const translations = ERUDIT.config.project.language.translations;
-const contribute = ERUDIT.config.project.language.contribute;
+const currentLanguage = ERUDIT.config.language.current;
+const translations = ERUDIT.config.language.translations;
+const contribute = ERUDIT.config.language.contribute;
 
 const sortedTranslations = <EruditTranslations>(() => {
-    if (!translations || !currentLanguage) {
-        return {};
-    }
+  if (!translations || !currentLanguage) {
+    return {};
+  }
 
-    const { [currentLanguage]: current, ...rest } = translations;
+  const { [currentLanguage]: current, ...rest } = translations;
 
-    if (current) {
-        const sortedRestEntries = Object.entries(rest).sort(([a], [b]) =>
-            a.localeCompare(b),
-        );
-        return <EruditTranslations>{
-            [currentLanguage]: current,
-            ...Object.fromEntries(sortedRestEntries),
-        };
-    }
+  if (current) {
+    const sortedRestEntries = Object.entries(rest).sort(([a], [b]) =>
+      a.localeCompare(b),
+    );
+    return <EruditTranslations>{
+      [currentLanguage]: current,
+      ...Object.fromEntries(sortedRestEntries),
+    };
+  }
 
-    return translations;
+  return translations;
 })();
 
 const phrase = await usePhrases('add_translation');
 </script>
 
 <template>
-    <AsideMajorPaneTemplate v-if="translations">
-        <ScrollHolder direction="rtl">
-            <AsideListItem
-                v-for="(language, code) in sortedTranslations"
-                :main="language.name"
-                :to="code !== currentLanguage ? language.link : undefined"
-                :hoverable="code !== currentLanguage"
-                :active="code === currentLanguage"
-                target="_blank"
-            >
-                <template v-slot:icon>
-                    <div class="font-bold uppercase">{{ code }}</div>
-                </template>
-            </AsideListItem>
-            <AsideListItem
-                v-if="contribute"
-                :to="contribute"
-                target="_blank"
-                icon="plus-circle"
-                :main="phrase.add_translation"
-            />
-        </ScrollHolder>
-    </AsideMajorPaneTemplate>
+  <AsideMajorPaneTemplate v-if="translations">
+    <ScrollHolder direction="rtl">
+      <AsideListItem
+        v-for="(language, code) in sortedTranslations"
+        :main="language.name"
+        :to="code !== currentLanguage ? language.link : undefined"
+        :hoverable="code !== currentLanguage"
+        :active="code === currentLanguage"
+        target="_blank"
+      >
+        <template v-slot:icon>
+          <div class="font-bold uppercase">{{ code }}</div>
+        </template>
+      </AsideListItem>
+      <AsideListItem
+        v-if="contribute"
+        :to="contribute"
+        target="_blank"
+        icon="plus-circle"
+        :main="phrase.add_translation"
+      />
+    </ScrollHolder>
+  </AsideMajorPaneTemplate>
 </template>

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

@@ -1,60 +1,60 @@
 <script lang="ts" setup>
 const routePath = useRoutePath();
 
-const customLinks = ERUDIT.config.project.customLinks;
+const customLinks = ERUDIT.config.customLinks;
 
 const { data: pagesData } =
-    useNuxtData<AsideMajorPagesData>(asideMajorPagesKey);
+  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,
-    };
+  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 contributorsEnabled = !!ERUDIT.config.contributors?.enabled;
+const sponsorsEnabled = !!ERUDIT.config.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>
+  <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

@@ -5,141 +5,152 @@ import SearchStatus from './SearchStatus.vue';
 import SearchResult from './SearchResult.vue';
 
 const runtimeConfig = useRuntimeConfig();
+const withBaseUrl = useBaseUrl();
+
+const loadingSvg = useLoadingSvg();
 
 const phrase = await usePhrases(
-    'no_results',
-    'searching_more',
-    'no_more_results',
+  '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,
-    }),
+  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);
+const query = ref('');
 
 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;
-        }
-    };
+  worker.value = new SearchWorker();
+
+  const initCommand: SearchCommandInit = {
+    type: 'init',
+    baseUrl: withBaseUrl('/'),
+    language: ERUDIT.config.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();
+  worker.value.terminate();
 });
 
-function newSearch(query: string) {
-    if (!query) {
-        results.value = [];
-        status.value = STATUS.default;
-        return;
-    }
+function newSearch(newQuery: string) {
+  const trimmed = newQuery.trim();
+  query.value = trimmed;
 
+  if (!trimmed) {
     results.value = [];
-    status.value = STATUS.loading;
-    const newSearchId = ++searchId;
+    status.value = STATUS.default;
+    return;
+  }
 
-    const searchCommand: SearchCommandSearch = {
-        type: 'search',
-        id: newSearchId,
-        query,
-    };
+  results.value = [];
+  status.value = STATUS.loading;
+  const newSearchId = ++searchId;
 
-    worker.value.postMessage(searchCommand);
+  const searchCommand: SearchCommandSearch = {
+    type: 'search',
+    id: newSearchId,
+    query: trimmed,
+  };
+
+  worker.value.postMessage(searchCommand);
 }
 
 function more() {
-    if (status.value.id !== 'searching') {
-        return;
-    }
+  if (status.value.id !== 'searching') {
+    return;
+  }
 
-    const moreCommand: SearchCommandMore = {
-        type: 'more',
-        id: searchId,
-    };
+  const moreCommand: SearchCommandMore = {
+    type: 'more',
+    id: searchId,
+  };
 
-    worker.value.postMessage(moreCommand);
+  worker.value.postMessage(moreCommand);
 }
 
 function defineStatuses<
-    T extends Record<
-        string,
-        | Omit<SearchStatusVariant, 'id'>
-        | ((...a: any[]) => Omit<SearchStatusVariant, 'id'>)
-    >,
+  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 };
-        }
+  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;
-    };
+  }
+  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>
+  <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"
+            :query="query"
+          />
+        </ol>
+      </div>
+      <SearchStatus
+        :key="`${status.id}-${results.length}`"
+        :statusVariant="status"
+        @reach="more"
+      />
+    </ScrollHolder>
+  </AsideMajorPaneTemplate>
 </template>