erudit 4.2.0 → 4.3.0-dev.1

package/app/components/Prose.vue

@@ -4,6 +4,7 @@ import type { EruditMode } from '@erudit-js/core/mode';
 import { Prose, type ProseContext } from '@erudit-js/prose/app';
 
 import { EruditLink, MaybeMyIcon, TransitionFade } from '#components';
+import { problemCheckers } from '#erudit/checks';
 
 const { element, storage, useHashUrl, setHtmlIds } = defineProps<{
   element: ProseElement;
@@ -35,6 +36,7 @@ const context: ProseContext = {
   baseUrl: runtimeConfig.app.baseURL,
   hashUrl,
   eruditIcons: ICONS,
+  problemCheckers,
   EruditIcon: MaybeMyIcon,
   EruditTransition: TransitionFade,
   EruditLink,

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

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { topicParts } from '@erudit-js/core/content/topic';
+
 import ItemTemplate from './ItemTemplate.vue';
 
 const { navItem } = defineProps<{ navItem: FrontContentNavTopic }>();
@@ -7,11 +9,20 @@ const { shortContentId } = useContentId();
 const active = computed(() => {
   return navItem.shortId === shortContentId.value;
 });
+
+const topicIcon = computed(() => {
+  // Article > Summary > Practice
+  if (navItem.parts?.length) {
+    for (const part of topicParts) {
+      if (navItem.parts.includes(part)) return ICONS[part];
+    }
+  }
+});
 </script>
 
 <template>
   <ItemTemplate
-    icon="array-lines"
+    :icon="topicIcon"
     :navItem
     :state="active ? 'active' : undefined"
   />

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

@@ -95,8 +95,22 @@ const secondaryTitle = computed(() =>
 );
 
 async function searchResultClick() {
-  await router.replace({ ...route, hash: '' });
-  await nextTick();
+  const linkUrl = new URL(result.link, 'http://x');
+  const elementId = linkUrl.searchParams.get('element');
+
+  if (elementId) {
+    // Clear the element param first so watchers re-trigger scroll/highlight.
+    linkUrl.searchParams.delete('element');
+    const withoutElement =
+      linkUrl.pathname + (linkUrl.search || '') + (linkUrl.hash || '');
+    await router.replace({
+      ...route,
+      query: { ...route.query, element: undefined },
+    });
+    await navigateTo(withoutElement);
+    await nextTick();
+  }
+
   await navigateTo(result.link);
 }
 </script>

package/app/components/aside/minor/contributor/AsideMinorContributor.vue

@@ -7,6 +7,12 @@ const contributions = (asideMinorState.value as AsideMinorContributor)
   .contributions;
 
 const phrase = await usePhrases('contribution', 'no_contribution');
+
+const totalCount = contributions?.reduce((sum, item) => {
+  if (item.type === 'book') return sum + item.items.length;
+  if (item.type === 'topic' || item.type === 'page') return sum + 1;
+  return sum;
+}, 0);
 </script>
 
 <template>
@@ -15,7 +21,7 @@ const phrase = await usePhrases('contribution', 'no_contribution');
       <AsideMinorPlainHeader
         icon="draw"
         :title="phrase.contribution"
-        :count="contributions?.length"
+        :count="totalCount"
       />
       <ScrollHolder v-if="contributions" class="flex-1">
         <TreeContainer>

package/app/components/main/MainStickyHeader.vue

@@ -1,5 +1,8 @@
 <script lang="ts" setup>
-const { mainContent } = defineProps<{ mainContent: MainContent }>();
+const { mainContent, lastChangedDate } = defineProps<{
+  mainContent: MainContent;
+  lastChangedDate?: Date;
+}>();
 
 const hasPreamble = computed(() => {
   const hasBreadcrumbs = mainContent.breadcrumbs.length > 0;
@@ -136,7 +139,7 @@ onMounted(() => {
               class="text-main nice-scrollbars max-h-[70dvh] overflow-auto"
             >
               <Suspense>
-                <MainStickyHeaderPreamble :mainContent />
+                <MainStickyHeaderPreamble :mainContent :lastChangedDate />
               </Suspense>
             </div>
           </div>

package/app/components/main/MainStickyHeaderPreamble.vue

@@ -1,5 +1,8 @@
 <script lang="ts" setup>
-const { mainContent } = defineProps<{ mainContent: MainContent }>();
+const { mainContent, lastChangedDate } = defineProps<{
+  mainContent: MainContent;
+  lastChangedDate?: Date;
+}>();
 </script>
 
 <template>
@@ -20,7 +23,7 @@ const { mainContent } = defineProps<{ mainContent: MainContent }>();
     <MainContentStats
       mode="single"
       :stats="mainContent.stats"
-      :contentRelativePath="mainContent.contentRelativePath"
+      :lastChangedDate
     />
     <div class="h-main-half"></div>
   </div>

package/app/components/main/MainTopicPartPage.vue

@@ -24,6 +24,7 @@ const phrase = await usePhrases(
   'summary_seo_description',
   'practice_seo_description',
 );
+const lastChangedDate = useLastChanged(() => mainContent.contentRelativePath);
 
 await useContentSeo({
   title: mainContent.title,
@@ -62,12 +63,12 @@ await useContentSeo({
     <MainContentStats
       mode="single"
       :stats="mainContent.stats"
-      :contentRelativePath="mainContent.contentRelativePath"
+      :lastChangedDate
     />
     <div class="h-main-half"></div>
     <MainQuoteLoader />
     <div class="h-main-half"></div>
-    <MainStickyHeader :mainContent />
+    <MainStickyHeader :mainContent :lastChangedDate />
   </MainSectionPreamble>
   <MainSection>
     <template #header>

package/app/components/main/MainTopicPartSwitch.vue

@@ -43,17 +43,28 @@ const data: Record<TopicPart, TopicPartSwitchData> = {
       :to="partData.state !== 'missing' ? partData.link : undefined"
       :class="[
         `micro:[--switchHeight:50px] micro:gap-small px-small micro:px-normal
-        border-border relative -bottom-[2px] flex h-(--switchHeight)
-        items-center gap-1 rounded rounded-b-none border-2 transition-[color]`,
+        relative -bottom-[2px] flex h-(--switchHeight) items-center gap-1
+        overflow-clip rounded rounded-b-none transition-[color]`,
         partData.state === 'missing' &&
-          'text-text-disabled/75 border-b-border cursor-not-allowed',
-        partData.state === 'active' &&
-          'text-brand bg-bg-main border-b-transparent',
+          'text-text-disabled/75 cursor-not-allowed',
+        partData.state === 'active' && 'text-brand bg-bg-main',
         partData.state === 'inactive' &&
-          `text-text-muted hocus:text-text bg-bg-aside
-          border-b-[color-mix(in_srgb,var(--color-border),var(--color-bg-main)_65%)]`,
+          'text-text-muted hocus:text-text bg-bg-aside',
       ]"
     >
+      <div
+        :class="[
+          'border-border absolute top-0 left-0 h-full w-full rounded-t border-2',
+          partData.state === 'active' && 'border-b-transparent',
+          partData.state === 'inactive' &&
+            'border-b-[color-mix(in_srgb,var(--color-border),var(--color-bg-main)_65%)]',
+        ]"
+      ></div>
+      <div
+        v-if="partData.state === 'active'"
+        class="from-brand/80 via-brand/10 absolute top-0 left-0 z-0 h-full
+          w-full bg-linear-to-b via-5% to-transparent"
+      ></div>
       <MyIcon :name="ICONS[partKey]" class="max-micro:mx-1 text-[1.2em]" />
       <span
         :class="[

package/app/components/main/connections/Deps.vue

@@ -25,10 +25,7 @@ defineProps<{ type: 'dependency' | 'dependent'; deps: ContentDep[] }>();
         >
           {{ formatText(dep.reason) }}
         </div>
-        <div
-          v-if="dep.type === 'auto' && dep.uniques?.length"
-          class="mt-small flex flex-col gap-0.5"
-        >
+        <div v-if="dep.uniques?.length" class="mt-small flex flex-col gap-0.5">
           <DepUnique
             v-for="unique in dep.uniques"
             :type

package/app/components/main/connections/MainConnections.vue

@@ -4,7 +4,11 @@ import Externals from './Externals.vue';
 
 const { connections } = defineProps<{ connections?: ContentConnections }>();
 
-const phrase = await usePhrases('connections');
+const phrase = await usePhrases(
+  'connections',
+  'externals_own',
+  'externals_from',
+);
 
 const currentType = ref<keyof ContentConnections | undefined>(
   'hardDependencies',
@@ -82,10 +86,12 @@ const parentExternalsCount = computed(() => {
     <template v-if="currentType && connections[currentType]">
       <Deps
         v-if="currentType !== 'externals'"
-        :type="currentType === 'autoDependencies' ? 'dependency' : 'dependent'"
+        :type="currentType === 'dependents' ? 'dependent' : 'dependency'"
         :deps="connections[currentType]!"
       />
-      <Externals v-else :externals="connections[currentType]!" />
+      <Suspense v-else>
+        <Externals :externals="connections[currentType]!" />
+      </Suspense>
     </template>
   </section>
 </template>

package/app/components/main/contentStats/ItemLastChanged.vue

@@ -1,11 +1,5 @@
 <script lang="ts" setup>
-type LastChangedSource = NonNullable<
-  ReturnType<typeof useLastChangedSource>['value']
->;
-
-const { source } = defineProps<{ source: LastChangedSource }>();
-
-const date = ref<Date | null>(null);
+const { date } = defineProps<{ date: Date }>();
 
 const dateOptions: Intl.DateTimeFormatOptions = {
   year: 'numeric',
@@ -14,44 +8,21 @@ const dateOptions: Intl.DateTimeFormatOptions = {
 };
 
 const isWithinThreeMonths = computed(() => {
-  if (!date.value) return false;
   const now = new Date();
   const threeMonthsAgo = new Date(now);
   threeMonthsAgo.setMonth(now.getMonth() - 3);
-  return date.value >= threeMonthsAgo && date.value <= now;
+  return date >= threeMonthsAgo && date <= now;
 });
 
 const formattedTitle = computed(() =>
-  date.value ? date.value.toLocaleDateString(undefined, dateOptions) : '',
+  date.toLocaleDateString(undefined, dateOptions),
 );
 
 const phrase = await usePhrases('updated');
-
-onMounted(async () => {
-  if (source.type === 'date') {
-    date.value = new Date(source.value);
-    return;
-  }
-
-  if (source.type === 'github') {
-    try {
-      const data = await $fetch<any[]>(source.url, {
-        query: { path: source.path, per_page: 1 },
-        responseType: 'json',
-      });
-      if (Array.isArray(data) && data[0]?.commit?.committer?.date) {
-        date.value = new Date(data[0].commit.committer.date);
-      }
-    } catch {
-      // silently ignore API errors
-    }
-  }
-});
 </script>
 
 <template>
   <div
-    v-if="date"
     class="gap-small px-small text-main-sm border-border bg-bg-aside flex
       items-center rounded-xl border py-1"
   >

package/app/components/main/contentStats/MainContentStats.vue

@@ -6,16 +6,15 @@ import ItemMaterials from './ItemMaterials.vue';
 const props = defineProps<{
   mode: 'single' | 'children';
   stats?: ContentStats;
-  contentRelativePath?: string;
+  lastChangedDate?: Date;
 }>();
 
 const phrase = await usePhrases('stats');
-const lastChangedSource = useLastChangedSource(() => props.contentRelativePath);
 </script>
 
 <template>
   <section
-    v-if="mode === 'single' && (stats || lastChangedSource)"
+    v-if="mode === 'single' && (stats || lastChangedDate)"
     class="px-main py-main-half"
   >
     <MainSubTitle :title="phrase.stats + ':'" />
@@ -35,7 +34,7 @@ const lastChangedSource = useLastChangedSource(() => props.contentRelativePath);
         :count
         mode="detailed"
       />
-      <ItemLastChanged v-if="lastChangedSource" :source="lastChangedSource" />
+      <ItemLastChanged v-if="lastChangedDate" :date="lastChangedDate" />
     </div>
   </section>
   <div

package/app/components/preview/Preview.vue

@@ -108,9 +108,10 @@ await usePhrases(
   <div
     ref="preview"
     :class="[
-      `fixed-main bg-bg-main micro:max-h-[70dvh] border-border
-      pointer-events-auto bottom-0 z-5 max-h-[90dvh] touch-auto overflow-hidden
-      rounded-[25px] rounded-b-none border-t
+      `fixed-main micro:max-h-[70dvh] border-border bg-bg-aside from-brand/8
+      dark:from-brand/10 to-brand/2 pointer-events-auto bottom-0 z-5
+      max-h-[90dvh] touch-auto overflow-hidden rounded-[25px] rounded-b-none
+      border-t bg-linear-to-t
       transition-[max-height,height,translate,box-shadow,left,width]`,
       previewState.opened
         ? `translate-y-0
@@ -136,10 +137,11 @@ await usePhrases(
     <TransitionFade>
       <div
         v-if="loading"
-        class="bg-bg-main absolute bottom-0 flex h-full w-full items-center
-          justify-center"
+        class="bg-bg-main from-brand/8 dark:from-brand/10 to-brand/2 absolute
+          bottom-0 flex h-full w-full items-center justify-center
+          bg-linear-to-t"
       >
-        <Loading class="text-text-dimmed text-[50px]" />
+        <Loading class="text-text-dimmed text-[65px]" />
       </div>
     </TransitionFade>
 

package/app/components/preview/PreviewScreen.vue

@@ -18,20 +18,22 @@ const { closePreview, hasPreviousRequest, setPreviousPreview } = usePreview();
       <slot></slot>
     </div>
     <div
-      class="border-border gap-small micro:gap-normal micro:h-[60px] px-main
-        flex h-[54px] shrink-0 items-center border-t"
+      class="border-brand/20 dark:border-brand/14 gap-small micro:gap-normal
+        micro:h-[60px] px-main flex h-[54px] shrink-0 items-center border-t
+        [box-shadow:0px_2px_10px_var(--color-border)]
+        dark:[box-shadow:0px_2px_10px_var(--color-bg-aside)]"
     >
       <MaybeMyIcon
         :name="icon"
-        class="text-text-muted micro:text-[34px] shrink-0 text-[30px]"
+        class="micro:text-[34px] shrink-0 text-[30px]
+          text-[color-mix(in_srgb,var(--color-brand),var(--color-text)_70%)]"
       />
       <div class="flex flex-1 flex-col justify-center overflow-hidden">
-        <div
+        <FancyBold
+          :text="main"
           class="micro:text-sm overflow-hidden text-xs font-bold text-nowrap
             overflow-ellipsis"
-        >
-          {{ formatText(main) }}
-        </div>
+        />
         <div
           v-if="secondary"
           class="text-text-muted text-tiny micro:text-xs overflow-hidden

package/app/components/preview/screen/Unique.vue

@@ -43,8 +43,9 @@ const secondary = (() => {
       />
       <div
         v-if="previewData.fadeOverlay"
-        class="to-bg-main pointer-events-none absolute bottom-0 left-0 h-full
-          w-full touch-none bg-linear-to-b from-transparent"
+        class="pointer-events-none absolute bottom-0 left-0 h-full w-full
+          touch-none bg-linear-to-b from-transparent
+          to-[color-mix(in_srgb,var(--color-bg-aside),var(--color-brand)_5%)]"
       ></div>
     </div>
   </PreviewScreen>

package/app/composables/ads.ts

@@ -11,7 +11,7 @@ export function adsAllowed() {
     return false;
   }
 
-  return ERUDIT.config.mode === 'static';
+  return ERUDIT.mode === 'static';
 }
 
 export function adsAsideAllowed() {

package/app/composables/analytics.ts

@@ -13,7 +13,7 @@ export function initAnalytics() {
       return debugValue;
     }
 
-    return ERUDIT.config.mode === 'static' ? true : false;
+    return ERUDIT.mode === 'static' ? true : false;
   })();
 
   if (!analytics || !analyticsEnabled) {

package/app/composables/lastChanged.ts

@@ -2,21 +2,21 @@ type LastChangedSource =
   | { type: 'date'; value: string }
   | { type: 'github'; url: string; path: string };
 
-export function useLastChangedSource(
+function useLastChangedSource(
   contentRelativePath: MaybeRefOrGetter<string | undefined>,
 ) {
-  return computed((): LastChangedSource | null => {
+  return computed((): LastChangedSource | undefined => {
     const path = toValue(contentRelativePath);
-    if (!path) return null;
+    if (!path) return undefined;
 
     const debug = ERUDIT.config.debug.fakeApi.lastChanged;
     if (debug === true) return { type: 'date', value: '2024-01-15T12:00:00Z' };
     if (typeof debug === 'string') return { type: 'date', value: debug };
 
     const repo = ERUDIT.config.repository;
-    if (!repo || repo.type !== 'github') return null;
+    if (!repo || repo.type !== 'github') return undefined;
     const parts = repo.name.split('/');
-    if (parts.length !== 2) return null;
+    if (parts.length !== 2) return undefined;
     const [owner, repoName] = parts;
 
     return {
@@ -26,3 +26,36 @@ export function useLastChangedSource(
     };
   });
 }
+
+export function useLastChanged(
+  contentRelativePath: MaybeRefOrGetter<string | undefined>,
+) {
+  const source = useLastChangedSource(contentRelativePath);
+  const date = ref<Date | undefined>(undefined);
+
+  onMounted(async () => {
+    const s = source.value;
+    if (!s) return;
+
+    if (s.type === 'date') {
+      date.value = new Date(s.value);
+      return;
+    }
+
+    if (s.type === 'github') {
+      try {
+        const data = await $fetch<any[]>(s.url, {
+          query: { path: s.path, per_page: 1 },
+          responseType: 'json',
+        });
+        if (Array.isArray(data) && data[0]?.commit?.committer?.date) {
+          date.value = new Date(data[0].commit.committer.date);
+        }
+      } catch {
+        // silently ignore API errors
+      }
+    }
+  });
+
+  return date;
+}

package/app/composables/og.ts

@@ -144,8 +144,6 @@ export async function useContentSeo(args: {
         return;
       }
 
-      // ── Synchronous: set title/description immediately so there is no
-      //    flash of the base-page title on first render.
       const seoSnippet = toSeoSnippet(snippet)!;
       const quickTitle = (() => seoSnippet.title)();
       const quickDescription = (() => seoSnippet.description)();
@@ -155,11 +153,13 @@ export async function useContentSeo(args: {
         urlPath: snippet.link,
       });
 
-      // ── Async: refine title with element-type phrase once loaded.
       const elementPhrase = await getElementPhrase(snippet.schemaName);
-      const fullTitle = (() => seoSnippet.title)();
+      const fullTitle = seoSnippet.title;
+      const refinedTitle = seoSnippet.titleInherited
+        ? `${fullTitle} [${elementPhrase.element_name}]`
+        : fullTitle;
       setupSeo({
-        title: `${fullTitle} [${elementPhrase.element_name}] - ${seoSiteTitle}`,
+        title: `${refinedTitle} - ${seoSiteTitle}`,
         description: quickDescription || '',
         urlPath: snippet.link,
       });

package/app/composables/scrollUp.ts

@@ -85,12 +85,14 @@ export function initScrollUpWatcher() {
       addEventListener('resize', resetLayoutEstablished);
 
       addEventListener('scroll', () => {
+        const currentY = window.scrollY;
+
         if (!layoutEstablished) {
           resetLayoutEstablished();
+          lastY = currentY;
           return;
         }
 
-        const currentY = window.scrollY;
         const delta = currentY - lastY;
 
         sumDelta += delta;

package/app/pages/book/[...bookId].vue

@@ -19,6 +19,7 @@ if (ERUDIT.config.contributors?.enabled) {
 }
 
 const phrase = await usePhrases('begin_learning');
+const lastChangedDate = useLastChanged(() => mainContent.contentRelativePath);
 
 await useContentSeo({
   title: mainContent.title,
@@ -43,7 +44,7 @@ await useContentSeo({
     <MainContentStats
       mode="single"
       :stats="mainContent.stats"
-      :contentRelativePath="mainContent.contentRelativePath"
+      :lastChangedDate
     />
     <div class="h-main-half"></div>
     <MainAction
@@ -53,7 +54,7 @@ await useContentSeo({
       :link="mainContent.children[0].link"
     />
     <div class="h-main-half"></div>
-    <MainStickyHeader :mainContent />
+    <MainStickyHeader :mainContent :lastChangedDate />
   </MainSectionPreamble>
   <MainContentChildren :children="mainContent.children" />
   <MainSection>

package/app/pages/group/[...groupId].vue

@@ -19,6 +19,7 @@ if (ERUDIT.config.contributors?.enabled) {
 }
 
 const phrase = await usePhrases('group', 'begin_learning');
+const lastChangedDate = useLastChanged(() => mainContent.contentRelativePath);
 
 await useContentSeo({
   title: mainContent.title,
@@ -45,7 +46,7 @@ await useContentSeo({
     <MainContentStats
       mode="single"
       :stats="mainContent.stats"
-      :contentRelativePath="mainContent.contentRelativePath"
+      :lastChangedDate
     />
     <div class="h-main-half"></div>
     <MainAction
@@ -55,7 +56,7 @@ await useContentSeo({
       :link="mainContent.children[0].link"
     />
     <div class="h-main-half"></div>
-    <MainStickyHeader :mainContent />
+    <MainStickyHeader :mainContent :lastChangedDate />
   </MainSectionPreamble>
   <MainContentChildren :children="mainContent.children" />
   <MainSection>

package/app/pages/page/[...pageId].vue

@@ -17,6 +17,8 @@ async function proseMounted() {
   );
 }
 
+const lastChangedDate = useLastChanged(() => mainContent.contentRelativePath);
+
 await useContentSeo({
   title: mainContent.title,
   bookTitle: mainContent.bookTitle,
@@ -43,12 +45,12 @@ await useContentSeo({
     <MainContentStats
       mode="single"
       :stats="mainContent.stats"
-      :contentRelativePath="mainContent.contentRelativePath"
+      :lastChangedDate
     />
     <div class="h-main-half"></div>
     <MainQuoteLoader />
     <div class="h-main-half"></div>
-    <MainStickyHeader :mainContent />
+    <MainStickyHeader :mainContent :lastChangedDate />
   </MainSectionPreamble>
   <MainSection>
     <Prose

package/app/plugins/appSetup/config.ts

@@ -3,4 +3,5 @@ export type EruditAppConfig = EruditRuntimeConfig;
 export async function setupAppRuntimeConfig() {
   const runtimeConfig = useRuntimeConfig();
   ERUDIT.config = runtimeConfig.public.erudit as any;
+  ERUDIT.mode = runtimeConfig.public.eruditMode as any;
 }

package/app/plugins/appSetup/global.ts

@@ -1,3 +1,6 @@
+import type { EruditMode } from '@erudit-js/core/mode';
+
 export const ERUDIT: {
+  mode: EruditMode;
   config: EruditPublicRuntimeConfig;
 } = {} as any;

package/app/plugins/appSetup/index.ts

@@ -13,7 +13,10 @@ export default defineNuxtPlugin({
   hooks: {
     'app:mounted': async () => {
       const { registerProseGlobals } = await import('#erudit/prose/global');
-      registerProseGlobals();
+      await registerProseGlobals();
+
+      const { registerAutoImportGlobals } = await import('#erudit/autoImports');
+      await registerAutoImportGlobals();
 
       await setupHtmlBranding();
       await setupWelcomeMessage();

package/app/plugins/devReload.client.ts

@@ -0,0 +1,13 @@
+import { isDevLikeMode } from '@erudit-js/core/mode';
+
+export default defineNuxtPlugin({
+  name: 'erudit-dev-reload',
+  setup() {
+    const runtimeConfig = useRuntimeConfig().public;
+    const mode = runtimeConfig.eruditMode as any;
+    if (!isDevLikeMode(mode) || !runtimeConfig.eruditReload) return;
+
+    const es = new EventSource('/_reload');
+    es.onmessage = () => window.location.reload();
+  },
+});