erudit 4.0.0-dev.5 → 4.0.1

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

@@ -1,106 +1,106 @@
-<script lang="ts" setup>
-import PaneGlobalNav from './contentNav/PaneGlobalNav.vue';
-import PaneBookNav from './contentNav/PaneBookNav.vue';
-import PaneLanguages from './languages/PaneLanguages.vue';
-import PanePages from './pages/PanePages.vue';
-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,
-};
-
-const route = useRoute();
-const asideMajorPane = useAsideMajorPane();
-const asideState = useAsideState();
-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);
-
-  if (nextIdx === -1 || prevIdx === -1) {
-    direction.value = 'forward';
-    return;
-  }
-
-  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;
-    }
-  }
-};
-
-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;
-    }
-  }
-
-  window.addEventListener('keydown', handleKeyDown);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', handleKeyDown);
-});
-
-// Prefetch pages data
-await useFetch('/api/aside/major/pages', {
-  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',
-);
-</script>
-
-<template>
-  <section class="relative flex-1 overflow-clip">
-    <TransitionSlide :direction>
-      <KeepAlive>
-        <component :key="asideMajorPane" :is="activePaneComponent" />
-      </KeepAlive>
-    </TransitionSlide>
-  </section>
-</template>
+<script lang="ts" setup>
+import PaneGlobalNav from './contentNav/PaneGlobalNav.vue';
+import PaneBookNav from './contentNav/PaneBookNav.vue';
+import PaneLanguages from './languages/PaneLanguages.vue';
+import PanePages from './pages/PanePages.vue';
+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,
+};
+
+const route = useRoute();
+const asideMajorPane = useAsideMajorPane();
+const asideState = useAsideState();
+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);
+
+  if (nextIdx === -1 || prevIdx === -1) {
+    direction.value = 'forward';
+    return;
+  }
+
+  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;
+    }
+  }
+};
+
+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;
+    }
+  }
+
+  window.addEventListener('keydown', handleKeyDown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown);
+});
+
+// Prefetch pages data
+await useFetch('/api/aside/major/pages', {
+  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',
+);
+</script>
+
+<template>
+  <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

@@ -1,68 +1,68 @@
-<script lang="ts" setup>
-import PaneSwitcherButton from './PaneSwitcherButton.vue';
-
-const asideMajorPane = useAsideMajorPane();
-
-const translations = ERUDIT.config.language.translations;
-
-const underlinePaneIndex = computed(() => {
-  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',
-);
-</script>
-
-<template>
-  <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
-          class="bg-text-muted absolute right-(--_underline-p) bottom-[-2px]
-            left-(--_underline-p) h-[3px] rounded-[20px]"
-        ></div>
-      </div>
-    </div>
-  </section>
-</template>
+<script lang="ts" setup>
+import PaneSwitcherButton from './PaneSwitcherButton.vue';
+
+const asideMajorPane = useAsideMajorPane();
+
+const translations = ERUDIT.config.language.translations;
+
+const underlinePaneIndex = computed(() => {
+  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',
+);
+</script>
+
+<template>
+  <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
+          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

@@ -1,38 +1,38 @@
-<script setup lang="ts">
-import type { MyIconName } from '#my-icons';
-
-const props = defineProps<{
-  pane: AsideMajorPane;
-  icon: MyIconName;
-  hint: string;
-}>();
-
-const asideMajorPane = useAsideMajorPane();
-
-const active = computed(() => {
-  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>
-</template>
+<script setup lang="ts">
+import type { MyIconName } from '#my-icons';
+
+const props = defineProps<{
+  pane: AsideMajorPane;
+  icon: MyIconName;
+  hint: string;
+}>();
+
+const asideMajorPane = useAsideMajorPane();
+
+const active = computed(() => {
+  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>
+</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>
-</template>
+<template>
+  <div class="absolute top-0 left-0 h-full w-full">
+    <slot></slot>
+  </div>
+</template>

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

@@ -1,66 +1,66 @@
-<script lang="ts" setup>
-const withBaseUrl = useBaseUrl();
-
-const siteInfo = ERUDIT.config.siteInfo;
-
-const fetchPhrases: LanguagePhraseKey[] = [];
-
-if (!siteInfo.title) {
-  fetchPhrases.push('erudit');
-}
-
-if (!siteInfo.short && siteInfo.short !== false) {
-  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;
-
-const logotype = (() => {
-  if (siteInfo.logotype === false) {
-    return false;
-  }
-
-  if (!siteInfo.logotype) {
-    return eruditPublic('logotype.svg');
-  }
-
-  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" />
-    </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>
-</template>
+<script lang="ts" setup>
+const withBaseUrl = useBaseUrl();
+
+const siteInfo = ERUDIT.config.siteInfo;
+
+const fetchPhrases: LanguagePhraseKey[] = [];
+
+if (!siteInfo.title) {
+  fetchPhrases.push('erudit');
+}
+
+if (!siteInfo.short && siteInfo.short !== false) {
+  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;
+
+const logotype = (() => {
+  if (siteInfo.logotype === false) {
+    return false;
+  }
+
+  if (!siteInfo.logotype) {
+    return eruditPublic('logotype.svg');
+  }
+
+  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" />
+    </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>
+</template>