erudit 4.1.1 → 4.2.0-dev.1

package/app/assets/icons/update.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+  <path d="M480-120q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q82 0 155.5 35T760-706v-94h80v240H600v-80h110q-41-56-101-88t-129-32q-117 0-198.5 81.5T200-480q0 117 81.5 198.5T480-200q105 0 183.5-68T756-440h82q-15 137-117.5 228.5T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z"/>
+</svg>

package/app/components/Prose.vue

@@ -1,14 +1,15 @@
 <script lang="ts" setup>
-import type { AnySchema, GenericStorage, ProseElement } from '@jsprose/core';
+import type { ProseElement, ProseStorage } from 'tsprose';
 import type { EruditMode } from '@erudit-js/core/mode';
 import { Prose, type ProseContext } from '@erudit-js/prose/app';
 
 import { EruditLink, MaybeMyIcon, TransitionFade } from '#components';
 
-const { element, storage, useHashUrl } = defineProps<{
-  element: ProseElement<AnySchema>;
-  storage: GenericStorage;
+const { element, storage, useHashUrl, setHtmlIds } = defineProps<{
+  element: ProseElement;
+  storage: ProseStorage;
   useHashUrl: boolean;
+  setHtmlIds: boolean;
 }>();
 
 const runtimeConfig = useRuntimeConfig();
@@ -18,9 +19,7 @@ const route = useRoute();
 
 const hashUrl = computed(() => {
   return useHashUrl
-    ? route.hash
-      ? route.hash.slice(1)
-      : undefined
+    ? ((route.query.element as string | undefined) ?? undefined)
     : undefined;
 });
 
@@ -28,6 +27,7 @@ const { setPreview, closePreview } = usePreview();
 
 const context: ProseContext = {
   appElements,
+  setHtmlIds,
   mode: runtimeConfig.public.eruditMode as EruditMode,
   languageCode: ERUDIT.config.language.current,
   formatText,

package/app/components/SmartMedia.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { isMyIcon, type MyIconName } from '#my-icons';
-import { computed, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 
 const { url } = defineProps<{ url?: MyIconName | (string & {}) }>();
 
@@ -77,7 +77,7 @@ onMounted(() => {
                 text-(--_mediaColor) transition-[color,background]"
             >
               <MyIcon
-                @vue:mounted="loaded = true"
+                @vue:mounted="nextTick(() => (loaded = true))"
                 :name="url as MyIconName"
                 class="h-2/3 w-2/3"
               />
@@ -87,13 +87,13 @@ onMounted(() => {
             v-if="mediaType === 'image'"
             :src="url"
             loading="lazy"
-            @load="loaded = true"
+            @load="nextTick(() => (loaded = true))"
             class="absolute block h-full w-full object-cover"
           />
           <video
             v-else-if="mediaType === 'video'"
             :src="url"
-            @loadeddata="loaded = true"
+            @loadeddata="nextTick(() => (loaded = true))"
             autoplay
             muted
             loop

package/app/components/aside/major/contentNav/PaneBookNav.vue

@@ -28,11 +28,8 @@ async function bookChange() {
   const fetchPayload = async (): Promise<BookPayloadValue> => {
     return {
       shortBookId: shortBookId.value!,
-      frontNav: await $fetch(
+      frontNav: await fetchJson(
         `/api/aside/major/frontNav/book/${shortBookId.value}`,
-        {
-          responseType: 'json',
-        },
       ),
     };
   };

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

@@ -138,7 +138,30 @@ onMounted(() => {
   elements.forEach(({ el }) => observer.observe(el));
 
   /**
-   * 6️⃣ Cleanup
+   * 6️⃣ Re-sync active heading when ?element navigation jumps past headings.
+   * IntersectionObserver only fires on gradual scrolls; programmatic
+   * scrollIntoView skips headings without triggering intersection events.
+   */
+  const route = useRoute();
+  watch(
+    () => route.query.element,
+    async (elementId) => {
+      if (!elementId) return;
+      // Wait for scrollIntoView to finish (it's synchronous but DOM
+      // layout needs a tick + frame to reflect the new scrollY)
+      await nextTick();
+      requestAnimationFrame(() => {
+        lastAboveViewportId = findLastHeadingAboveViewport(elements);
+        visibleIds.clear();
+        activeHeadingIds.value = lastAboveViewportId
+          ? new Set([lastAboveViewportId])
+          : new Set();
+      });
+    },
+  );
+
+  /**
+   * 7️⃣ Cleanup
    */
   onUnmounted(() => {
     observer.disconnect();

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

@@ -4,6 +4,7 @@ import { headingSchema } from '@erudit-js/prose/elements/heading/core';
 
 const { item, level } = defineProps<{ item: ResolvedTocItem; level: number }>();
 
+const route = useRoute();
 const elementIcon = await (async () => {
   let schemaName =
     item.type === 'heading' ? headingSchema.name : item.schemaName;
@@ -57,7 +58,7 @@ onMounted(() => {
       :icon="elementIcon"
       :main="formatText(item.title)"
       :state="active ? 'active' : undefined"
-      :to="'#' + item.elementId"
+      :to="route.path + '?element=' + item.elementId"
     />
     <div
       v-if="item.type === 'heading'"

package/app/components/aside/minor/news/AsideMinorNews.vue

@@ -42,9 +42,7 @@ async function fetchNews(index: number) {
   newsLoading.value = true;
 
   try {
-    const newsBatch = await $fetch<NewsBatch>(`/api/news/batch/${index}`, {
-      responseType: 'json',
-    });
+    const newsBatch = await fetchJson<NewsBatch>(`/api/news/batch/${index}`);
 
     if (index === 0) {
       newsTotal.value = newsBatch.total!;

package/app/components/aside/minor/news/NewsItem.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { walkElements } from '@jsprose/core';
-
+import { walkPreSync } from 'tsprose';
 import RenderNewsElement from './RenderNewsElement.vue';
 
 const { item, isNew } = defineProps<{
@@ -26,7 +25,7 @@ const dateOptions: Intl.DateTimeFormatOptions = {
 const formattedTitle = itemDate.toLocaleDateString(undefined, dateOptions);
 
 // Prepopulate storage values in order not to fuck with provide/inject shit
-await walkElements(item.content.proseElement, async (element) => {
+walkPreSync(item.content.prose, (element) => {
   if (element.storageKey) {
     const storageKey = element.storageKey;
     if (item.content.storage[storageKey] !== undefined) {
@@ -63,7 +62,7 @@ await walkElements(item.content.proseElement, async (element) => {
       }"
       class="gap-small flex flex-col text-[0.95em]"
     >
-      <RenderNewsElement :element="item.content.proseElement" />
+      <RenderNewsElement :element="item.content.prose" />
     </div>
   </div>
 </template>

package/app/components/aside/minor/news/RenderNewsElement.vue

@@ -1,11 +1,5 @@
 <script lang="ts" setup>
-import {
-  inlinersSchema,
-  mixSchema,
-  textSchema,
-  type AnySchema,
-  type ProseElement,
-} from '@jsprose/core';
+import { mixSchema, textSchema, type ProseElement } from 'tsprose';
 import { paragraphSchema } from '@erudit-js/prose/elements/paragraph/core';
 
 import Mix from './elements/Mix.vue';
@@ -14,10 +8,10 @@ import Text from './elements/Text.vue';
 import { refSchema } from '@erudit-js/prose/elements/link/reference/core';
 import Ref from './elements/Ref.vue';
 
-const { element } = defineProps<{ element: ProseElement<AnySchema> }>();
+const { element } = defineProps<{ element: ProseElement }>();
 
 const ElementComponent = (() => {
-  switch (element.schemaName) {
+  switch (element.schema.name) {
     case textSchema.name:
       return Text;
     case paragraphSchema.name:
@@ -25,13 +19,12 @@ const ElementComponent = (() => {
     case refSchema.name:
       return Ref;
     case mixSchema.name:
-    case inlinersSchema.name:
       return Mix;
     default:
       return h(
         'span',
         { class: 'text-red-500 font-semibold font-mono' },
-        `<${element.schemaName} />`,
+        `<${element.schema.name} />`,
       );
   }
 })();

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

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import type { mixSchema, ProseElement } from '@jsprose/core';
-
+import type { MixSchema, ToProseElement } from 'tsprose';
 import RenderNewsElement from '../RenderNewsElement.vue';
 
-defineProps<{ element: ProseElement<typeof mixSchema> }>();
+defineProps<{ element: ToProseElement<MixSchema> }>();
 </script>
 
 <template>

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

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import type { ProseElement } from '@jsprose/core';
-import type { paragraphSchema } from '@erudit-js/prose/elements/paragraph/core';
+import type { ToProseElement } from 'tsprose';
+import type { ParagraphSchema } from '@erudit-js/prose/elements/paragraph/core';
 
 import RenderNewsElement from '../RenderNewsElement.vue';
 
-defineProps<{ element: ProseElement<typeof paragraphSchema> }>();
+defineProps<{ element: ToProseElement<ParagraphSchema> }>();
 </script>
 
 <template>

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

@@ -1,12 +1,12 @@
 <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 { ToProseElement } from 'tsprose';
+import type { RefSchema } from '@erudit-js/prose/elements/link/reference/core';
 import type { LinkStorage } from '@erudit-js/prose/elements/link/storage';
 
 const withBaseUrl = useBaseUrl();
 const { closePreview, setPreview } = usePreview();
-const { element } = defineProps<{ element: ProseElement<typeof refSchema> }>();
+const { element } = defineProps<{ element: ToProseElement<RefSchema> }>();
 const linkStorage = (element as any).storageValue as LinkStorage;
 
 const doubleClick = {

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

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { Text, h } from 'vue';
-import type { ProseElement, textSchema } from '@jsprose/core';
+import type { TextSchema, ToProseElement } from 'tsprose';
 
-const { element } = defineProps<{ element: ProseElement<typeof textSchema> }>();
+const { element } = defineProps<{ element: ToProseElement<TextSchema> }>();
 
 const originalText = element.data;
 const leadingSpace = originalText.match(/^(\s*)/)?.[1] ? ' ' : '';

package/app/components/main/MainContentChild.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 const { child } = defineProps<{ child: MainContentChildrenItem }>();
 
-const hasExtra = child.stats || child.quickLinks;
+const hasExtra = child.stats || child.keyLinks;
 </script>
 
 <template>
@@ -33,8 +33,8 @@ const hasExtra = child.stats || child.quickLinks;
       v-if="hasExtra"
       class="border-t-border p-normal gap-normal flex flex-col border-t"
     >
-      <div v-if="child.quickLinks" class="relative top-[1px]">
-        <MainQuickLinks :elementSnippets="child.quickLinks" mode="children" />
+      <div v-if="child.keyLinks" class="relative top-[1px]">
+        <MainKeyLinks :elementSnippets="child.keyLinks" mode="children" />
       </div>
       <div v-if="child.stats">
         <MainContentStats :stats="child.stats" mode="children" />

package/app/components/main/{MainQuickLink.vue → MainKeyLink.vue}

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { autoUpdate, shift } from '@floating-ui/vue';
 
-const { quickLink } = defineProps<{ quickLink: ElementSnippet }>();
+const { keyLink } = defineProps<{ keyLink: ElementSnippet }>();
 
 const containerElement = useTemplateRef('container');
 const toggleElement = useTemplateRef('toggle');
@@ -21,21 +21,21 @@ const { popupVisible, popupStyles } = usePopup(
   },
 );
 
-const elementIcon = await getElementIcon(quickLink.schemaName);
+const elementIcon = await getElementIcon(keyLink.schemaName);
 
 const title = computed(() => {
-  if (quickLink.quick?.title) {
-    return quickLink.quick.title;
+  if (keyLink.key?.title) {
+    return keyLink.key.title;
   } else {
-    return quickLink.title;
+    return keyLink.title;
   }
 });
 
 const description = computed(() => {
-  if (quickLink.quick?.description) {
-    return quickLink.quick.description;
+  if (keyLink.key?.description) {
+    return keyLink.key.description;
   } else {
-    return quickLink.description;
+    return keyLink.description;
   }
 });
 </script>
@@ -44,11 +44,11 @@ const description = computed(() => {
   <div ref="container">
     <div ref="toggle">
       <EruditLink
-        :to="quickLink.link"
+        :to="keyLink.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]"
+          items-center rounded border bg-(--keyBg) 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>

package/app/components/main/{MainQuickLinks.vue → MainKeyLinks.vue}

@@ -4,12 +4,12 @@ const { elementSnippets } = defineProps<{
   elementSnippets?: ElementSnippet[];
 }>();
 
-const quickLinks = (() => {
+const keyLinks = (() => {
   if (!elementSnippets) {
     return;
   }
 
-  const filtered = elementSnippets.filter((snippet) => !!snippet.quick);
+  const filtered = elementSnippets.filter((snippet) => !!snippet.key);
 
   return filtered.length > 0 ? filtered : undefined;
 })();
@@ -18,23 +18,23 @@ const phrase = await usePhrases('key_elements');
 </script>
 
 <template>
-  <template v-if="quickLinks">
+  <template v-if="keyLinks">
     <section v-if="mode === 'single'" class="px-main py-main-half">
       <MainSubTitle :title="phrase.key_elements + ':'" />
       <div
-        :style="{ '--quickBg': 'var(--color-bg-aside)' }"
+        :style="{ '--keyBg': 'var(--color-bg-aside)' }"
         class="gap-small micro:gap-normal micro:justify-start flex flex-wrap
           justify-center"
       >
-        <MainQuickLink v-for="quickLink of quickLinks" :quickLink />
+        <MainKeyLink v-for="keyLink of keyLinks" :keyLink />
       </div>
     </section>
     <div
       v-else
-      :style="{ '--quickBg': 'var(--color-bg-main)' }"
+      :style="{ '--keyBg': 'var(--color-bg-main)' }"
       class="gap-small text-main-sm flex flex-wrap"
     >
-      <MainQuickLink v-for="quickLink of quickLinks" :quickLink />
+      <MainKeyLink v-for="keyLink of keyLinks" :keyLink />
     </div>
   </template>
 </template>

package/app/components/main/MainQuoteLoader.vue

@@ -6,7 +6,7 @@ const payloadKey = 'quote-ids';
 const payloadValue: QuoteIds =
   (nuxtApp.static.data[payloadKey] ||=
   nuxtApp.payload.data[payloadKey] ||=
-    await $fetch('/api/quote/ids', { responseType: 'json' }));
+    await fetchJson('/api/quote/ids'));
 
 // Calculate total number of quotes
 const totalQuotes = computed(() => {
@@ -56,9 +56,7 @@ async function nextQuote() {
 
   const nextQuoteId = getRandomQuoteId();
   currentQuoteId.value = nextQuoteId;
-  const nextQuote = await $fetch(`/api/quote/data/${nextQuoteId}`, {
-    responseType: 'json',
-  });
+  const nextQuote = await fetchJson<Quote>(`/api/quote/data/${nextQuoteId}`);
   quote.value = nextQuote;
   quoteKey.value++;
 

package/app/components/main/MainStickyHeader.vue

@@ -10,7 +10,7 @@ const hasPreamble = computed(() => {
   let hasKeyElements = false;
   if (mainContent.type === 'topic' || mainContent.type === 'page') {
     hasKeyElements =
-      mainContent.snippets?.some((snippet) => !!snippet.quick) ?? false;
+      mainContent.snippets?.some((snippet) => !!snippet.key) ?? false;
   }
 
   return (

package/app/components/main/MainStickyHeaderPreamble.vue

@@ -11,13 +11,17 @@ const { mainContent } = defineProps<{ mainContent: MainContent }>();
       :description="mainContent.description"
       class="text-main!"
     />
-    <MainQuickLinks
+    <MainKeyLinks
       v-if="mainContent.type === 'topic' || mainContent.type === 'page'"
       mode="single"
       :elementSnippets="mainContent.snippets"
     />
     <MainConnections mode="single" :connections="mainContent.connections" />
-    <MainContentStats mode="single" :stats="mainContent.stats" />
+    <MainContentStats
+      mode="single"
+      :stats="mainContent.stats"
+      :contentRelativePath="mainContent.contentRelativePath"
+    />
     <div class="h-main-half"></div>
   </div>
 </template>

package/app/components/main/MainTopicPartPage.vue

@@ -57,9 +57,13 @@ await useContentSeo({
     <MainTitle :icon="ICONS[mainContent.part]" :title="mainContent.title" />
     <MainFlags :flags="mainContent.flags" />
     <MainDescription :description="mainContent.description" />
-    <MainQuickLinks mode="single" :elementSnippets="mainContent.snippets" />
+    <MainKeyLinks mode="single" :elementSnippets="mainContent.snippets" />
     <MainConnections :connections="mainContent.connections" />
-    <MainContentStats mode="single" :stats="mainContent.stats" />
+    <MainContentStats
+      mode="single"
+      :stats="mainContent.stats"
+      :contentRelativePath="mainContent.contentRelativePath"
+    />
     <div class="h-main-half"></div>
     <MainQuoteLoader />
     <div class="h-main-half"></div>
@@ -75,10 +79,11 @@ await useContentSeo({
     </template>
     <template #default>
       <Prose
-        :element="mainContent.proseElement"
+        :element="mainContent.prose"
         :storage="mainContent.storage"
         :urlPath="'/' + mainContent.fullId"
         :useHashUrl="true"
+        :setHtmlIds="true"
         @vue:mounted="proseMounted"
       />
     </template>

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

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import type { MaybeMyIconName } from '#my-icons';
+
+const props = defineProps<{
+  type: 'dependency' | 'dependent';
+  unique: ContentDepUnique;
+}>();
+
+const loadingSvg = useLoadingSvg();
+
+const iconKey = ref(0);
+const icon = ref<MaybeMyIconName>(loadingSvg);
+
+watch(icon, () => {
+  iconKey.value += 1;
+});
+
+onMounted(async () => {
+  try {
+    icon.value = await getElementIcon(props.unique.schemaName);
+  } catch {
+    icon.value = '__missing';
+  }
+});
+</script>
+
+<template>
+  <div class="gap-small flex items-center">
+    <MyIcon
+      name="arrow/up-to-right"
+      :class="[
+        'text-text-dimmed shrink-0',
+        type === 'dependent' && 'relative -top-[3px] -scale-x-100 rotate-90',
+      ]"
+    />
+    <MaybeMyIcon :key="iconKey" :name="icon" class="text-main-sm shrink-0" />
+    <EruditLink :to="unique.link" class="text-hover-underline text-main-sm">
+      {{ formatText(unique.title ?? unique.name) }}
+      <MyIcon
+        name="arrow/outward"
+        class="text-text-disabled relative -top-1 inline text-[0.8em]"
+      />
+    </EruditLink>
+  </div>
+</template>

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

@@ -1,7 +1,8 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import ScrollPane from './ScrollPane.vue';
+import DepUnique from './DepUnique.vue';
 
-defineProps<{ deps: ContentDep[] }>();
+defineProps<{ type: 'dependency' | 'dependent'; deps: ContentDep[] }>();
 </script>
 
 <template>
@@ -24,6 +25,17 @@ defineProps<{ deps: ContentDep[] }>();
         >
           {{ formatText(dep.reason) }}
         </div>
+        <div
+          v-if="dep.type === 'auto' && dep.uniques?.length"
+          class="mt-small flex flex-col gap-0.5"
+        >
+          <DepUnique
+            v-for="unique in dep.uniques"
+            :type
+            :key="unique.name"
+            :unique="unique"
+          />
+        </div>
       </div>
     </div>
   </ScrollPane>

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { ContentExternals } from '@erudit-js/core/content/externals';
 import ScrollPane from './ScrollPane.vue';
 

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

@@ -82,6 +82,7 @@ const parentExternalsCount = computed(() => {
     <template v-if="currentType && connections[currentType]">
       <Deps
         v-if="currentType !== 'externals'"
+        :type="currentType === 'autoDependencies' ? 'dependency' : 'dependent'"
         :deps="connections[currentType]!"
       />
       <Externals v-else :externals="connections[currentType]!" />

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

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+type LastChangedSource = NonNullable<
+  ReturnType<typeof useLastChangedSource>['value']
+>;
+
+const { source } = defineProps<{ source: LastChangedSource }>();
+
+const date = ref<Date | null>(null);
+
+const dateOptions: Intl.DateTimeFormatOptions = {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+};
+
+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;
+});
+
+const formattedTitle = computed(() =>
+  date.value ? date.value.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"
+  >
+    <MyIcon name="update" class="text-text-dimmed -mr-0.5 text-[1.2em]" />
+    <span class="text-text-muted">{{ phrase.updated }}</span>
+    <NuxtTime
+      :datetime="date"
+      v-bind="dateOptions"
+      :relative="isWithinThreeMonths"
+      :title="formattedTitle"
+      class="text-text-muted cursor-help font-bold"
+    />
+  </div>
+</template>