erudit 4.0.1 → 4.1.0

package/app/app.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 initFavicon();
 initOgImage();
+initOgSiteName();
 initAnalytics();
+initScrollUpWatcher();
 
 // Watching and setting theme
 initThemeWatcher();

package/app/assets/icons/bookmark-star.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+  <path d="m389-400 91-55 91 55-24-104 80-69-105-9-42-98-42 98-105 9 80 69-24 104ZM200-120v-640q0-33 23.5-56.5T280-840h400q33 0 56.5 23.5T760-760v640L480-240 200-120Zm80-122 200-86 200 86v-518H280v518Zm0-518h400-400Z"/>
+</svg>

package/app/components/Prose.vue

@@ -40,6 +40,7 @@ const context: ProseContext = {
   EruditLink,
   setPreview,
   closePreview,
+  usePopup,
   loadingSvg,
 };
 </script>

package/app/components/aside/AsideSwitch.vue

@@ -6,32 +6,10 @@ const asideType = inject(asideTypeSymbol);
 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));
-
-    let lastY = window.scrollY;
-    let sumDelta = 0;
-    let scrollTimeout: any;
-
-    window.addEventListener('scroll', () => {
-      const currentY = window.scrollY;
-      const delta = currentY - lastY;
-
-      sumDelta += delta;
-
-      asideState.value.scrolledUp = sumDelta <= 5;
-
-      lastY = currentY;
-
-      clearTimeout(scrollTimeout);
-      scrollTimeout = setTimeout(() => {
-        sumDelta = 0;
-      }, 200);
-    });
-  });
-}
+const scrollUp = useScrollUp();
+watch(scrollUp, () => {
+  asideState.value.scrolledUp = scrollUp.value;
+});
 </script>
 
 <template>

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

@@ -33,18 +33,6 @@ watch(asideMajorPane, (next, prev) => {
   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;
@@ -54,12 +42,6 @@ onMounted(() => {
       asideState.value.opened = AsideType.Major;
     }
   }
-
-  window.addEventListener('keydown', handleKeyDown);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', handleKeyDown);
 });
 
 // Prefetch pages data

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

@@ -1,39 +1,39 @@
 <script lang="ts" setup>
 const withBaseUrl = useBaseUrl();
 
-const siteInfo = ERUDIT.config.siteInfo;
+const siteInfo = ERUDIT.config.asideMajor?.siteInfo;
 
 const fetchPhrases: LanguagePhraseKey[] = [];
 
-if (!siteInfo.title) {
+if (!siteInfo?.title) {
   fetchPhrases.push('erudit');
 }
 
-if (!siteInfo.short && siteInfo.short !== false) {
+if (!siteInfo?.short && siteInfo?.short !== false) {
   fetchPhrases.push('default_site_info_short');
 }
 
 const phrase = await usePhrases(...fetchPhrases);
 
-const title = siteInfo.title || phrase.erudit;
+const title = siteInfo?.title || phrase.erudit;
 const short =
-  siteInfo.short === false
+  siteInfo?.short === false
     ? undefined
-    : siteInfo.short || phrase.default_site_info_short;
+    : siteInfo?.short || phrase.default_site_info_short;
 
 const logotype = (() => {
-  if (siteInfo.logotype === false) {
+  if (siteInfo?.logotype === false) {
     return false;
   }
 
-  if (!siteInfo.logotype) {
+  if (!siteInfo?.logotype) {
     return eruditPublic('logotype.svg');
   }
 
   return String(siteInfo.logotype);
 })();
 
-const layout = siteInfo.logotype === false ? 'column' : 'row';
+const layout = siteInfo?.logotype === false ? 'column' : 'row';
 </script>
 
 <template>
@@ -45,7 +45,7 @@ const layout = siteInfo.logotype === false ? 'column' : 'row';
       {
         'gap-normal items-center': layout === 'row',
         'gap-small flex-col': layout === 'column',
-        'text-center': layout === 'column' || siteInfo.logotype === false,
+        'text-center': layout === 'column' || siteInfo?.logotype === false,
       },
     ]"
   >

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

@@ -19,7 +19,7 @@ const resolvedTo = computed(() => {
 </script>
 
 <template>
-  <TreeItem :icon :main="navItem.title" :state :to="resolvedTo">
+  <TreeItem :icon :main="formatText(navItem.title)" :state :to="resolvedTo">
     <template v-slot:secondary v-if="navItem.flags">
       <Flags :flags="navItem.flags" />
     </template>

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 const routePath = useRoutePath();
 
-const customLinks = ERUDIT.config.customLinks;
+const customLinks = ERUDIT.config.asideMajor?.customLinks;
 
 const { data: pagesData } =
   useNuxtData<AsideMajorPagesData>(asideMajorPagesKey);

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

@@ -42,7 +42,7 @@ onMounted(() => {
     baseUrl: withBaseUrl('/'),
     language: ERUDIT.config.language.current,
     cacheId: String(
-      import.meta.dev ? Date.now() : runtimeConfig.public.buildTimestamp,
+      import.meta.dev ? Date.now() : runtimeConfig.public.buildTime,
     ),
   };
 

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

@@ -38,13 +38,6 @@ 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();
@@ -53,11 +46,6 @@ watch(normalizedQuery, () => {
 onMounted(() => {
   initFromUrlParam();
   onWake();
-  window.addEventListener('keydown', handleKeyDown);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', handleKeyDown);
 });
 
 onActivated(() => {

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

@@ -119,7 +119,7 @@ async function searchResultClick() {
           {{ formatText(secondaryTitle) }}
         </div>
         <div class="gap-small text-text flex items-center">
-          <div class="relative size-[1.2em]">
+          <div class="relative size-[1.2em] shrink-0">
             <TransitionFade>
               <MaybeMyIcon
                 :name="icon"

package/app/components/aside/minor/content/Toc.vue

@@ -4,7 +4,6 @@ import type { ResolvedTocItem } from '@erudit-js/prose';
 import TocItem from './TocItem.vue';
 
 const props = defineProps<{ toc?: ResolvedTocItem[] }>();
-
 const phrase = await usePhrases('no_toc');
 
 /**
@@ -158,6 +157,5 @@ onMounted(() => {
       />
     </TreeContainer>
   </div>
-
   <AsidePlainMessage v-else :text="phrase.no_toc" />
 </template>

package/app/components/aside/minor/news/elements/Ref.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { onMounted } from 'vue';
 import type { ProseElement } from '@jsprose/core';
 import type { refSchema } from '@erudit-js/prose/elements/link/reference/core';
 import type { LinkStorage } from '@erudit-js/prose/elements/link/storage';
@@ -22,37 +23,52 @@ const doubleClick = {
 };
 
 function linkClick() {
-  if (doubleClick.timeout) {
+  if (doubleClick.timeout && linkStorage.type !== 'error') {
     doubleClick.reset();
     closePreview();
     const openUrl =
-      linkStorage.type === 'direct'
+      linkStorage.type === 'external'
         ? linkStorage.resolvedHref
         : withBaseUrl(linkStorage.resolvedHref.slice(1));
     window.open(openUrl, '_blank');
     return false;
   }
 
+  if (linkStorage.type === 'error') {
+    return false;
+  }
+
   setPreview(linkStorage.previewRequest);
   doubleClick.startTimeout();
   return false;
 }
+
+onMounted(() => {
+  if (linkStorage.type === 'error') {
+    console.warn(`Error in link element inside new item: ${linkStorage.error}`);
+  }
+});
 </script>
 
 <template>
   <EruditLink
     @click.capture.prevent="linkClick"
-    :to="linkStorage.resolvedHref"
+    :to="linkStorage.type === 'error' ? undefined : linkStorage.resolvedHref"
     :style="{
       '--tGap': '1px',
       '--xGap': '4px',
       '--bGap': '4px',
     }"
-    class="hocus:bg-(--linkColor)/15 relative -mx-[calc(var(--xGap)-3px)]
-      -mt-(--tGap) -mb-(--bGap) rounded-sm bg-transparent px-(--xGap)
-      pt-(--tGap) pb-(--bGap) text-(--linkColor) underline
-      decoration-[color-mix(in_srgb,var(--linkColor)30%,transparent)]
-      decoration-2 underline-offset-2 transition-[background]"
+    :class="[
+      `relative -mx-[calc(var(--xGap)-3px)] -mt-(--tGap) -mb-(--bGap) rounded-sm
+      bg-transparent px-(--xGap) pt-(--tGap) pb-(--bGap) underline decoration-2
+      underline-offset-2 transition-[background]`,
+      linkStorage.type === 'error'
+        ? `hocus:bg-red-400/20 cursor-not-allowed text-red-600
+          decoration-red-400/40 dark:text-red-400`
+        : `hocus:bg-(--linkColor)/15 text-(--linkColor)
+          decoration-[color-mix(in_srgb,var(--linkColor)30%,transparent)]`,
+    ]"
   >
     {{ formatText(element.data.label) }}
   </EruditLink>

package/app/components/main/MainFlag.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { autoUpdate, shift, useFloating } from '@floating-ui/vue';
-import type { MyIconName } from '#my-icons';
+import { autoUpdate, shift } from '@floating-ui/vue';
 import type { ContentFlag } from '@erudit-js/core/content/flags';
+import type { MyIconName } from '#my-icons';
 
 interface FlagData {
   icon: MyIconName;
@@ -44,54 +44,32 @@ const flagsData: Record<ContentFlag, FlagData> = {
 
 const flagData = flagsData[flag];
 
-const referenceElement = useTemplateRef('reference');
+const containerElement = useTemplateRef('container');
+const toggleElement = useTemplateRef('toggle');
 const popupElement = useTemplateRef('popup');
-const popupVisible = ref(false);
-const showTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
-
-const { floatingStyles } = useFloating(referenceElement, popupElement, {
-  placement: 'bottom',
-  whileElementsMounted: autoUpdate,
-  middleware: [
-    shift({
-      boundary: document?.querySelector('[data-erudit-main]') || undefined,
-    }),
-  ],
-});
-
-const showPopup = () => {
-  showTimeout.value = setTimeout(() => {
-    popupVisible.value = true;
-  }, 400);
-};
-
-const hidePopup = () => {
-  if (showTimeout.value) {
-    clearTimeout(showTimeout.value);
-    showTimeout.value = null;
-  }
-  popupVisible.value = false;
-};
-
-onUnmounted(() => {
-  if (showTimeout.value) {
-    clearTimeout(showTimeout.value);
-  }
-});
+const { popupVisible, popupStyles } = usePopup(
+  containerElement,
+  toggleElement,
+  popupElement,
+  {
+    placement: 'bottom',
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      shift({
+        boundary: document?.querySelector('[data-erudit-main]') || undefined,
+      }),
+    ],
+  },
+);
 </script>
 
 <template>
-  <div
-    ref="reference"
-    :style="{ '--flagColor': flagData.color }"
-    @mouseenter="showPopup"
-    @mouseleave="hidePopup"
-  >
+  <div ref="container" :style="{ '--flagColor': flagData.color }">
     <div
-      @touchstart="popupVisible ? hidePopup() : showPopup()"
+      ref="toggle"
       class="px-small text-main-sm flex cursor-help items-center gap-1 rounded
         border border-(--flagColor)/30 bg-(--flagColor)/15 py-1
-        text-(--flagColor)"
+        text-(--flagColor) select-none"
     >
       <MyIcon :name="flagData.icon" class="text-[1.3em]" />
       <span>{{ formatText(flagData.title) }}</span>
@@ -99,7 +77,7 @@ onUnmounted(() => {
     <TransitionFade>
       <div
         v-if="popupVisible"
-        :style="floatingStyles"
+        :style="popupStyles"
         ref="popup"
         class="z-10 max-w-[320px] p-2"
       >

package/app/components/main/MainQuickLink.vue

@@ -1,42 +1,25 @@
 <script lang="ts" setup>
-import { autoUpdate, shift, useFloating } from '@floating-ui/vue';
+import { autoUpdate, shift } from '@floating-ui/vue';
 
 const { quickLink } = defineProps<{ quickLink: ElementSnippet }>();
 
-const referenceElement = useTemplateRef('reference');
+const containerElement = useTemplateRef('container');
+const toggleElement = useTemplateRef('toggle');
 const popupElement = useTemplateRef('popup');
-const popupVisible = ref(false);
-const showTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
-
-const { floatingStyles } = useFloating(referenceElement, popupElement, {
-  placement: 'bottom',
-  whileElementsMounted: autoUpdate,
-  middleware: [
-    shift({
-      boundary: document?.querySelector('[data-erudit-main]') || undefined,
-    }),
-  ],
-});
-
-const showPopup = () => {
-  showTimeout.value = setTimeout(() => {
-    popupVisible.value = true;
-  }, 400);
-};
-
-const hidePopup = () => {
-  if (showTimeout.value) {
-    clearTimeout(showTimeout.value);
-    showTimeout.value = null;
-  }
-  popupVisible.value = false;
-};
-
-onUnmounted(() => {
-  if (showTimeout.value) {
-    clearTimeout(showTimeout.value);
-  }
-});
+const { popupVisible, popupStyles } = usePopup(
+  containerElement,
+  toggleElement,
+  popupElement,
+  {
+    placement: 'bottom',
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      shift({
+        boundary: document?.querySelector('[data-erudit-main]') || undefined,
+      }),
+    ],
+  },
+);
 
 const elementIcon = await getElementIcon(quickLink.schemaName);
 
@@ -58,22 +41,23 @@ const description = computed(() => {
 </script>
 
 <template>
-  <div ref="reference" @mouseenter="showPopup" @mouseleave="hidePopup">
-    <EruditLink
-      @touchstart="popupVisible ? hidePopup() : showPopup()"
-      :to="quickLink.link"
-      class="gap-small border-border px-small text-text-muted text-main-sm
-        hocus:text-brand hocus:border-brand hocus:ring-brand/25 flex
-        items-center rounded border bg-(--quickBg) py-1 ring-2 ring-transparent
-        transition-[color,border,box-shadow]"
-    >
-      <MaybeMyIcon :name="elementIcon" class="-mr-0.5 text-[1.2em]" />
-      <span>{{ formatText(title) }}</span>
-    </EruditLink>
+  <div ref="container">
+    <div ref="toggle">
+      <EruditLink
+        :to="quickLink.link"
+        class="gap-small border-border px-small text-text-muted text-main-sm
+          hocus:text-brand hocus:border-brand hocus:ring-brand/25 flex
+          items-center rounded border bg-(--quickBg) py-1 ring-2
+          ring-transparent transition-[color,border,box-shadow]"
+      >
+        <MaybeMyIcon :name="elementIcon" class="-mr-0.5 text-[1.2em]" />
+        <span>{{ formatText(title) }}</span>
+      </EruditLink>
+    </div>
     <TransitionFade>
       <div
         v-if="description && popupVisible"
-        :style="floatingStyles"
+        :style="popupStyles"
         ref="popup"
         class="z-10 max-w-[300px] p-2"
       >

package/app/components/main/MainSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <section :class="[$style.section, 'bg-bg-main']">
+  <section :class="[$style.section]">
     <!-- Section Header -->
     <div :class="[$style.header, 'border-border relative border-b-2']">
       <!-- Header Shade -->
@@ -15,7 +15,7 @@
     </div>
 
     <!-- Section Body -->
-    <div class="relative z-1">
+    <div :class="[$style.body, 'bg-bg-main relative z-1']">
       <slot></slot>
     </div>
   </section>
@@ -26,6 +26,9 @@
   .header {
     display: none;
   }
+  .body {
+    background: transparent;
+  }
 }
 
 .section:not(:nth-child(1 of .section)) {