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

package/app/components/aside/AsideSwitch.vue

@@ -7,71 +7,70 @@ const isMajor = computed(() => asideType === AsideType.Major);
 const isMinor = computed(() => asideType === AsideType.Minor);
 
 if (import.meta.client) {
-    callOnce(async () => {
-        // Wait for possible layout shifts triggering scroll events
-        await new Promise((resolve) => setTimeout(resolve, 100));
+  callOnce(async () => {
+    // Wait for possible layout shifts triggering scroll events
+    await new Promise((resolve) => setTimeout(resolve, 100));
 
-        let lastY = window.scrollY;
-        let sumDelta = 0;
-        let scrollTimeout: any;
+    let lastY = window.scrollY;
+    let sumDelta = 0;
+    let scrollTimeout: any;
 
-        window.addEventListener('scroll', () => {
-            const currentY = window.scrollY;
-            const delta = currentY - lastY;
+    window.addEventListener('scroll', () => {
+      const currentY = window.scrollY;
+      const delta = currentY - lastY;
 
-            sumDelta += delta;
+      sumDelta += delta;
 
-            asideState.value.scrolledUp = sumDelta <= 5;
+      asideState.value.scrolledUp = sumDelta <= 5;
 
-            lastY = currentY;
+      lastY = currentY;
 
-            clearTimeout(scrollTimeout);
-            scrollTimeout = setTimeout(() => {
-                sumDelta = 0;
-            }, 200);
-        });
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        sumDelta = 0;
+      }, 200);
     });
+  });
 }
 </script>
 
 <template>
-    <div
-        :class="[
-            /* Variables */
-            `micro:[--_switchSize:110px] [--_switchGap:var(--spacing-main)]
-            [--_switchSize:80px]`,
-            /* */
-            `fixed bottom-0 flex size-(--_switchSize) items-center
-            justify-center pb-(--_switchGap) pl-(--_switchGap)
-            transition-[left,right,opacity]`,
-            {
-                //
-                // Major Global
-                //
-                'aside1:opacity-0': isMajor,
-                // Major Can Show
-                'left-0 opacity-100': isMajor && canShowSwitches,
-                // Major Cannot Show
-                '-left-(--_switchSize) opacity-0': isMajor && !canShowSwitches,
+  <div
+    :class="[
+      /* Variables */
+      `micro:[--_switchSize:110px] [--_switchGap:var(--spacing-main)]
+      [--_switchSize:80px]`,
+      /* */
+      `fixed bottom-0 flex size-(--_switchSize) items-center justify-center
+      pb-(--_switchGap) pl-(--_switchGap) transition-[left,right,opacity]`,
+      {
+        //
+        // Major Global
+        //
+        'aside1:opacity-0': isMajor,
+        // Major Can Show
+        'left-0 opacity-100': isMajor && canShowSwitches,
+        // Major Cannot Show
+        '-left-(--_switchSize) opacity-0': isMajor && !canShowSwitches,
 
-                //
-                // Minor Global
-                //
-                'aside2:opacity-0 -scale-x-100': isMinor,
-                // Minor Can Show
-                'right-0 opacity-100': isMinor && canShowSwitches,
-                // Minor Cannot Show
-                '-right-(--_switchSize) opacity-0': isMinor && !canShowSwitches,
-            },
-        ]"
+        //
+        // Minor Global
+        //
+        'aside2:opacity-0 -scale-x-100': isMinor,
+        // Minor Can Show
+        'right-0 opacity-100': isMinor && canShowSwitches,
+        // Minor Cannot Show
+        '-right-(--_switchSize) opacity-0': isMinor && !canShowSwitches,
+      },
+    ]"
+  >
+    <button
+      @click="asideState.opened = asideType"
+      class="hocus:opacity-100 flex size-full cursor-pointer items-center
+        justify-center bg-neutral-500 opacity-90
+        shadow-[0_0_20px_20px_var(--color-bg-main)] transition-opacity"
     >
-        <button
-            @click="asideState.opened = asideType"
-            class="hocus:opacity-100 flex size-full cursor-pointer items-center
-                justify-center bg-neutral-500 opacity-90
-                shadow-[0_0_20px_20px_var(--color-bg-main)] transition-opacity"
-        >
-            <MyIcon name="aside-open" class="text-bg-main size-[60%]" />
-        </button>
-    </div>
+      <MyIcon name="aside-open" class="text-bg-main size-[60%]" />
+    </button>
+  </div>
 </template>

package/app/components/aside/major/PaneHolder.vue

@@ -7,12 +7,12 @@ import PaneSearch from './search/PaneSearch.vue';
 import PaneSettings from './settings/PaneSettings.vue';
 
 const paneMap: Record<AsideMajorPane, Component> = {
-    [AsideMajorPane.GlobalNav]: PaneGlobalNav,
-    [AsideMajorPane.BookNav]: PaneBookNav,
-    [AsideMajorPane.Languages]: PaneLanguages,
-    [AsideMajorPane.Pages]: PanePages,
-    [AsideMajorPane.Search]: PaneSearch,
-    [AsideMajorPane.Settings]: PaneSettings,
+  [AsideMajorPane.GlobalNav]: PaneGlobalNav,
+  [AsideMajorPane.BookNav]: PaneBookNav,
+  [AsideMajorPane.Languages]: PaneLanguages,
+  [AsideMajorPane.Pages]: PanePages,
+  [AsideMajorPane.Search]: PaneSearch,
+  [AsideMajorPane.Settings]: PaneSettings,
 };
 
 const route = useRoute();
@@ -22,85 +22,85 @@ const direction = ref<'forward' | 'backward'>('forward');
 const activePaneComponent = computed(() => paneMap[asideMajorPane.value]);
 
 watch(asideMajorPane, (next, prev) => {
-    const nextIdx = asideMajorPanes.indexOf(next);
-    const prevIdx = asideMajorPanes.indexOf(prev);
+  const nextIdx = asideMajorPanes.indexOf(next);
+  const prevIdx = asideMajorPanes.indexOf(prev);
 
-    if (nextIdx === -1 || prevIdx === -1) {
-        direction.value = 'forward';
-        return;
-    }
+  if (nextIdx === -1 || prevIdx === -1) {
+    direction.value = 'forward';
+    return;
+  }
 
-    direction.value = nextIdx > prevIdx ? 'forward' : 'backward';
+  direction.value = nextIdx > prevIdx ? 'forward' : 'backward';
 });
 
 const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.shiftKey && event.code === 'KeyF') {
-        event.preventDefault();
-        asideMajorPane.value = AsideMajorPane.Search;
-        const styles = getComputedStyle(document.documentElement);
-        const aside1Bp = styles.getPropertyValue('--breakpoint-aside1');
-        if (window.matchMedia(`(max-width: ${aside1Bp})`).matches) {
-            asideState.value.opened = AsideType.Major;
-        }
+  if (event.shiftKey && event.code === 'KeyF') {
+    event.preventDefault();
+    asideMajorPane.value = AsideMajorPane.Search;
+    const styles = getComputedStyle(document.documentElement);
+    const aside1Bp = styles.getPropertyValue('--breakpoint-aside1');
+    if (window.matchMedia(`(max-width: ${aside1Bp})`).matches) {
+      asideState.value.opened = AsideType.Major;
     }
+  }
 };
 
 onMounted(() => {
-    if (route.query.q) {
-        asideMajorPane.value = AsideMajorPane.Search;
-        const styles = getComputedStyle(document.documentElement);
-        const aside1Bp = styles.getPropertyValue('--breakpoint-aside1');
-        if (window.matchMedia(`(max-width: ${aside1Bp})`).matches) {
-            asideState.value.opened = AsideType.Major;
-        }
+  if (route.query.q) {
+    asideMajorPane.value = AsideMajorPane.Search;
+    const styles = getComputedStyle(document.documentElement);
+    const aside1Bp = styles.getPropertyValue('--breakpoint-aside1');
+    if (window.matchMedia(`(max-width: ${aside1Bp})`).matches) {
+      asideState.value.opened = AsideType.Major;
     }
+  }
 
-    window.addEventListener('keydown', handleKeyDown);
+  window.addEventListener('keydown', handleKeyDown);
 });
 
 onUnmounted(() => {
-    window.removeEventListener('keydown', handleKeyDown);
+  window.removeEventListener('keydown', handleKeyDown);
 });
 
 // Prefetch pages data
 await useFetch('/api/aside/major/pages', {
-    key: asideMajorPagesKey,
-    deep: false,
-    responseType: 'json',
+  key: asideMajorPagesKey,
+  deep: false,
+  responseType: 'json',
 });
 
 // Prefetch phrases
 await usePhrases(
-    'theme',
-    'theme_light',
-    'theme_dark',
-    'theme_system',
-    'built',
-    'content',
-    'erudit',
-    'add_translation',
-    'main_page',
-    'contributors',
-    'sponsors',
-    'search_the_site',
-    'searching_more',
-    'no_results',
-    'no_more_results',
-    'no_content',
-    'to_index',
-    'about_textbook',
-    'flag_title_dev',
-    'flag_title_advanced',
-    'flag_title_secondary',
+  'theme',
+  'theme_light',
+  'theme_dark',
+  'theme_system',
+  'built',
+  'content',
+  'erudit',
+  'add_translation',
+  'main_page',
+  'contributors',
+  'sponsors',
+  'search_the_site',
+  'searching_more',
+  'no_results',
+  'no_more_results',
+  'no_content',
+  'to_index',
+  'about_textbook',
+  'flag_title_dev',
+  'flag_title_advanced',
+  'flag_title_secondary',
 );
 </script>
 
 <template>
-    <section class="relative flex-1 overflow-clip">
-        <TransitionSlide :direction>
-            <KeepAlive>
-                <component :key="asideMajorPane" :is="activePaneComponent" />
-            </KeepAlive>
-        </TransitionSlide>
-    </section>
+  <section class="relative flex-1 overflow-clip">
+    <TransitionSlide :direction>
+      <KeepAlive>
+        <component :key="asideMajorPane" :is="activePaneComponent" />
+      </KeepAlive>
+    </TransitionSlide>
+  </section>
 </template>

package/app/components/aside/major/PaneSwitcher.vue

@@ -3,71 +3,66 @@ import PaneSwitcherButton from './PaneSwitcherButton.vue';
 
 const asideMajorPane = useAsideMajorPane();
 
-const translations = ERUDIT.config.project.language.translations;
+const translations = ERUDIT.config.language.translations;
 
 const underlinePaneIndex = computed(() => {
-    const paneIndex = asideMajorPanes.indexOf(asideMajorPane.value);
-    return Math.max(paneIndex - 1, 0);
+  const paneIndex = asideMajorPanes.indexOf(asideMajorPane.value);
+  return Math.max(paneIndex - 1, 0);
 });
 
 const { shortBookId } = useContentId();
 
 const phrase = await usePhrases(
-    'content_nav',
-    'pages',
-    'search',
-    'languages',
-    'settings',
+  'content_nav',
+  'pages',
+  'search',
+  'languages',
+  'settings',
 );
 </script>
 
 <template>
-    <section class="border-border z-1 border-b">
+  <section class="border-border z-1 border-b">
+    <div
+      style="--_button-size: 56px; --_underline-p: 6px"
+      class="relative mx-auto flex w-max"
+    >
+      <PaneSwitcherButton
+        :pane="shortBookId ? AsideMajorPane.BookNav : AsideMajorPane.GlobalNav"
+        :hint="phrase.content_nav"
+        icon="book"
+      />
+      <PaneSwitcherButton
+        :pane="AsideMajorPane.Pages"
+        :hint="phrase.pages"
+        icon="file-lines"
+      />
+      <PaneSwitcherButton
+        :pane="AsideMajorPane.Search"
+        :hint="phrase.search"
+        icon="search/glass"
+      />
+      <PaneSwitcherButton
+        :pane="AsideMajorPane.Settings"
+        :hint="phrase.settings"
+        icon="cog"
+      />
+      <PaneSwitcherButton
+        v-if="translations"
+        :pane="AsideMajorPane.Languages"
+        :hint="phrase.languages"
+        icon="translate"
+      />
+      <!-- Active button underline -->
+      <div
+        :style="`left: calc(${underlinePaneIndex} * var(--_button-size))`"
+        :class="'absolute bottom-0 w-(--_button-size) transition-[left]'"
+      >
         <div
-            style="--_button-size: 56px; --_underline-p: 6px"
-            class="relative mx-auto flex w-max"
-        >
-            <PaneSwitcherButton
-                :pane="
-                    shortBookId
-                        ? AsideMajorPane.BookNav
-                        : AsideMajorPane.GlobalNav
-                "
-                :hint="phrase.content_nav"
-                icon="book"
-            />
-            <PaneSwitcherButton
-                :pane="AsideMajorPane.Pages"
-                :hint="phrase.pages"
-                icon="file-lines"
-            />
-            <PaneSwitcherButton
-                :pane="AsideMajorPane.Search"
-                :hint="phrase.search"
-                icon="search/glass"
-            />
-            <PaneSwitcherButton
-                :pane="AsideMajorPane.Settings"
-                :hint="phrase.settings"
-                icon="cog"
-            />
-            <PaneSwitcherButton
-                v-if="translations"
-                :pane="AsideMajorPane.Languages"
-                :hint="phrase.languages"
-                icon="translate"
-            />
-            <!-- Active button underline -->
-            <div
-                :style="`left: calc(${underlinePaneIndex} * var(--_button-size))`"
-                :class="'absolute bottom-0 w-(--_button-size) transition-[left]'"
-            >
-                <div
-                    class="bg-text-muted absolute right-(--_underline-p)
-                        bottom-[-2px] left-(--_underline-p) h-[3px]
-                        rounded-[20px]"
-                ></div>
-            </div>
-        </div>
-    </section>
+          class="bg-text-muted absolute right-(--_underline-p) bottom-[-2px]
+            left-(--_underline-p) h-[3px] rounded-[20px]"
+        ></div>
+      </div>
+    </div>
+  </section>
 </template>

package/app/components/aside/major/PaneSwitcherButton.vue

@@ -2,37 +2,37 @@
 import type { MyIconName } from '#my-icons';
 
 const props = defineProps<{
-    pane: AsideMajorPane;
-    icon: MyIconName;
-    hint: string;
+  pane: AsideMajorPane;
+  icon: MyIconName;
+  hint: string;
 }>();
 
 const asideMajorPane = useAsideMajorPane();
 
 const active = computed(() => {
-    return asideMajorPane.value === props.pane;
+  return asideMajorPane.value === props.pane;
 });
 </script>
 
 <template>
-    <button
-        @click="asideMajorPane = pane"
-        :title="hint"
-        :class="[
-            `group relative flex size-(--_button-size) cursor-pointer
-            items-center justify-center transition-[color]`,
-            {
-                'text-text': active,
-                'text-text-muted hocus:text-text': !active,
-            },
-        ]"
-    >
-        <MyIcon :name="icon" class="size-[48%]" />
-        <!-- Button underline -->
-        <div
-            class="group-hocus:bg-border absolute right-(--_underline-p)
-                bottom-[-2px] left-(--_underline-p) h-[3px] rounded-[20px]
-                bg-transparent transition-[background]"
-        ></div>
-    </button>
+  <button
+    @click="asideMajorPane = pane"
+    :title="hint"
+    :class="[
+      `group relative flex size-(--_button-size) cursor-pointer items-center
+      justify-center transition-[color]`,
+      {
+        'text-text': active,
+        'text-text-muted hocus:text-text': !active,
+      },
+    ]"
+  >
+    <MyIcon :name="icon" class="size-[48%]" />
+    <!-- Button underline -->
+    <div
+      class="group-hocus:bg-border absolute right-(--_underline-p) bottom-[-2px]
+        left-(--_underline-p) h-[3px] rounded-[20px] bg-transparent
+        transition-[background]"
+    ></div>
+  </button>
 </template>

package/app/components/aside/major/PaneTemplate.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="absolute top-0 left-0 h-full w-full">
-        <slot></slot>
-    </div>
+  <div class="absolute top-0 left-0 h-full w-full">
+    <slot></slot>
+  </div>
 </template>

package/app/components/aside/major/SiteInfo.vue

@@ -1,68 +1,66 @@
 <script lang="ts" setup>
-const siteInfo = ERUDIT.config.project.siteInfo;
+const withBaseUrl = useBaseUrl();
+
+const siteInfo = ERUDIT.config.siteInfo;
 
 const fetchPhrases: LanguagePhraseKey[] = [];
 
 if (!siteInfo.title) {
-    fetchPhrases.push('erudit');
+  fetchPhrases.push('erudit');
 }
 
 if (!siteInfo.short && siteInfo.short !== false) {
-    fetchPhrases.push('default_site_info_short');
+  fetchPhrases.push('default_site_info_short');
 }
 
 const phrase = await usePhrases(...fetchPhrases);
 
 const title = siteInfo.title || phrase.erudit;
 const short =
-    siteInfo.short === false
-        ? undefined
-        : siteInfo.short || phrase.default_site_info_short;
+  siteInfo.short === false
+    ? undefined
+    : siteInfo.short || phrase.default_site_info_short;
 
 const logotype = (() => {
-    if (siteInfo.logotype === false) {
-        return false;
-    }
+  if (siteInfo.logotype === false) {
+    return false;
+  }
 
-    if (!siteInfo.logotype) {
-        return eruditPublic('logotype.svg');
-    }
+  if (!siteInfo.logotype) {
+    return eruditPublic('logotype.svg');
+  }
 
-    return String(siteInfo.logotype);
+  return String(siteInfo.logotype);
 })();
 
 const layout = siteInfo.logotype === false ? 'column' : 'row';
 </script>
 
 <template>
-    <section
-        :class="[
-            'p-normal pb-small',
-            'mx-auto',
-            'flex',
-            {
-                'gap-normal items-center': layout === 'row',
-                'gap-small flex-col': layout === 'column',
-                'text-center':
-                    layout === 'column' || siteInfo.logotype === false,
-            },
-        ]"
-    >
-        <EruditLink v-if="logotype !== false" to="/">
-            <img :src="withBaseUrl(logotype)" alt="Site logotype" />
+  <section
+    :class="[
+      'p-normal pb-small',
+      'mx-auto',
+      'flex',
+      {
+        'gap-normal items-center': layout === 'row',
+        'gap-small flex-col': layout === 'column',
+        'text-center': layout === 'column' || siteInfo.logotype === false,
+      },
+    ]"
+  >
+    <EruditLink v-if="logotype !== false" to="/">
+      <img :src="withBaseUrl(logotype)" alt="Site logotype" />
+    </EruditLink>
+    <div>
+      <div>
+        <EruditLink class="text-hover-underline text-lg font-bold" to="/">
+          {{ formatText(title) }}
         </EruditLink>
-        <div>
-            <div>
-                <EruditLink
-                    class="text-hover-underline text-lg font-bold"
-                    to="/"
-                >
-                    {{ formatText(title) }}
-                </EruditLink>
-            </div>
-            <div v-if="short" class="text-text-muted text-sm">
-                {{ formatText(short) }}
-            </div>
-        </div>
-    </section>
+      </div>
+      <div v-if="short" class="text-text-muted text-sm">
+        {{ formatText(short) }}
+      </div>
+    </div>
+  </section>
 </template>