erudit 4.1.1 → 4.2.0-dev.1

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

@@ -1,50 +1,58 @@
 <script lang="ts" setup>
 import ItemElement from './ItemElement.vue';
+import ItemLastChanged from './ItemLastChanged.vue';
 import ItemMaterials from './ItemMaterials.vue';
 
-defineProps<{
+const props = defineProps<{
   mode: 'single' | 'children';
   stats?: ContentStats;
+  contentRelativePath?: string;
 }>();
 
 const phrase = await usePhrases('stats');
+const lastChangedSource = useLastChangedSource(() => props.contentRelativePath);
 </script>
 
 <template>
-  <template v-if="stats">
-    <section v-if="mode === 'single'" class="px-main py-main-half">
-      <MainSubTitle :title="phrase.stats + ':'" />
-      <div
-        class="micro:justify-start gap-small micro:gap-normal flex flex-wrap
-          justify-center"
-      >
-        <ItemMaterials
-          v-if="stats.materials"
-          :count="stats.materials"
-          mode="detailed"
-        />
-        <ItemElement
-          v-if="stats.elements"
-          v-for="(count, schemaName) of stats.elements"
-          :schemaName
-          :count
-          mode="detailed"
-        />
-      </div>
-    </section>
-    <div v-else class="gap-small micro:gap-normal text-main-sm flex flex-wrap">
+  <section
+    v-if="mode === 'single' && (stats || lastChangedSource)"
+    class="px-main py-main-half"
+  >
+    <MainSubTitle :title="phrase.stats + ':'" />
+    <div
+      class="micro:justify-start gap-small micro:gap-normal flex flex-wrap
+        justify-center"
+    >
+      <ItemLastChanged v-if="lastChangedSource" :source="lastChangedSource" />
       <ItemMaterials
-        v-if="stats.materials"
+        v-if="stats?.materials"
         :count="stats.materials"
-        mode="compact"
+        mode="detailed"
       />
       <ItemElement
-        v-if="stats.elements"
+        v-if="stats?.elements"
         v-for="(count, schemaName) of stats.elements"
         :schemaName
         :count
-        mode="compact"
+        mode="detailed"
       />
     </div>
-  </template>
+  </section>
+  <div
+    v-else-if="mode === 'children' && stats"
+    class="gap-small micro:gap-normal text-main-sm flex flex-wrap"
+  >
+    <ItemMaterials
+      v-if="stats.materials"
+      :count="stats.materials"
+      mode="compact"
+    />
+    <ItemElement
+      v-if="stats.elements"
+      v-for="(count, schemaName) of stats.elements"
+      :schemaName
+      :count
+      mode="compact"
+    />
+  </div>
 </template>

package/app/components/preview/PreviewScreen.vue

@@ -30,14 +30,14 @@ const { closePreview, hasPreviousRequest, setPreviousPreview } = usePreview();
           class="micro:text-sm overflow-hidden text-xs font-bold text-nowrap
             overflow-ellipsis"
         >
-          {{ main }}
+          {{ formatText(main) }}
         </div>
         <div
           v-if="secondary"
           class="text-text-muted text-tiny micro:text-xs overflow-hidden
             text-nowrap overflow-ellipsis"
         >
-          {{ secondary }}
+          {{ formatText(secondary) }}
         </div>
       </div>
       <div class="gap-small flex shrink-0 items-center">

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

@@ -6,13 +6,10 @@ const { request } = defineProps<{ request: PreviewRequestContentPage }>();
 const contentTypeKey =
   request.contentType === 'topic' ? request.topicPart : request.contentType;
 
-const previewData: PreviewContentPage = await $fetch(
+const previewData: PreviewContentPage = await fetchJson(
   '/api/preview/contentPage/' +
     stringifyContentTypePath(contentTypeKey, request.fullId) +
     '.json',
-  {
-    responseType: 'json',
-  },
 );
 
 const icon = ICONS[contentTypeKey];

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

@@ -6,12 +6,9 @@ const { request } = defineProps<{ request: PreviewRequestUnique }>();
 const contentTypeKey =
   request.contentType === 'topic' ? request.topicPart : request.contentType;
 
-const previewData = await $fetch<PreviewContentUnique>(
+const previewData = await fetchJson<PreviewContentUnique>(
   `/api/preview/contentUnique/${stringifyContentTypePath(contentTypeKey, request.contentFullId)}/${request.uniqueName}` +
     '.json',
-  {
-    responseType: 'json',
-  },
 );
 
 const elementIcon = await getElementIcon(previewData.schemaName);
@@ -38,10 +35,11 @@ const secondary = (() => {
       class="nice-scrollbars py-small relative max-h-[inherit] overflow-auto"
     >
       <Prose
-        :element="previewData.proseElement"
+        :element="previewData.prose"
         :storage="previewData.storage"
         :urlPath="'/' + previewData.link.split('#')[0]"
         :useHashUrl="false"
+        :setHtmlIds="false"
       />
       <div
         v-if="previewData.fadeOverlay"

package/app/composables/appElements.ts

@@ -1,7 +1,5 @@
-import type { AppElement } from '@erudit-js/prose/app';
-import { appElements as _appElements } from '#erudit/prose/app';
-
-export const appElements: Record<string, AppElement> = { ..._appElements };
+import { appElements } from '#erudit/prose/app';
+export { appElements } from '#erudit/prose/app';
 
 export async function initAppElements() {
   for (const [name, element] of Object.entries(appElements)) {

package/app/composables/asideMajorPane.ts

@@ -78,9 +78,9 @@ export async function initGlobalContentNav() {
   const payloadValue: FrontGlobalContentNav =
     (nuxtApp.static.data[payloadKey] ||=
     nuxtApp.payload.data[payloadKey] ||=
-      await $fetch('/api/aside/major/frontNav/global', {
-        responseType: 'json',
-      }));
+      await fetchJson<FrontGlobalContentNav>(
+        '/api/aside/major/frontNav/global',
+      ));
 
   globalContentNav = payloadValue;
 }

package/app/composables/fetchJson.ts

@@ -0,0 +1,4 @@
+export const fetchJson = <T>(...args: Parameters<typeof $fetch<T>>) => {
+  const { $fetchJson } = useNuxtApp();
+  return $fetchJson(...args) as ReturnType<typeof $fetch<T>>;
+};

package/app/composables/lastChanged.ts

@@ -0,0 +1,28 @@
+type LastChangedSource =
+  | { type: 'date'; value: string }
+  | { type: 'github'; url: string; path: string };
+
+export function useLastChangedSource(
+  contentRelativePath: MaybeRefOrGetter<string | undefined>,
+) {
+  return computed((): LastChangedSource | null => {
+    const path = toValue(contentRelativePath);
+    if (!path) return null;
+
+    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;
+    const parts = repo.name.split('/');
+    if (parts.length !== 2) return null;
+    const [owner, repoName] = parts;
+
+    return {
+      type: 'github',
+      url: `https://api.github.com/repos/${owner}/${repoName}/commits`,
+      path: `content/${path}`,
+    };
+  });
+}

package/app/composables/mainContent.ts

@@ -16,11 +16,8 @@ export async function useMainContent<TMainContent extends MainContent>(
   let mainContentPromise = async () => {
     if (payloadMainContent.contentPath !== contentTypePath) {
       payloadMainContent.contentPath = contentTypePath;
-      payloadMainContent.mainContent = await $fetch<MainContent>(
+      payloadMainContent.mainContent = await fetchJson<MainContent>(
         '/api/main/content/' + contentTypePath,
-        {
-          responseType: 'json',
-        },
       );
     }
 

package/app/composables/og.ts

@@ -1,4 +1,5 @@
 import type { ContentSeo } from '@erudit-js/core/content/seo';
+import { toSeoSnippet } from '@erudit-js/prose';
 
 export function initOgSiteName() {
   const siteTitle =
@@ -105,54 +106,61 @@ export async function useContentSeo(args: {
 
   const seoSnippets = args.snippets?.filter((snippet) => snippet.seo);
 
+  const route = useRoute();
+
+  function findElementSnippet(elementId: string | undefined) {
+    if (!elementId || !seoSnippets) return undefined;
+    return seoSnippets.find((candidate) => {
+      const url = new URL(candidate.link, 'http://x');
+      const sameParam = url.searchParams.get('element') === elementId;
+      const sameType =
+        candidate.link.split('/')[1] ===
+        (args.contentTypePath.type === 'topic'
+          ? args.contentTypePath.topicPart
+          : args.contentTypePath.type);
+      return sameParam && sameType;
+    });
+  }
+
+  // On a static site the server always serves the canonical-path HTML,
+  // so SSR-time element SEO is not possible. Instead we set SEO
+  // synchronously (before the first await) so the title/description are
+  // applied during the first client render without a visible flash.
+  // Google's crawler executes JS and will see the final values.
   if (!import.meta.client || !seoSnippets || seoSnippets.length === 0) {
     return;
   }
 
-  const route = useRoute();
-  const anchor = computed(() => route.hash.replace('#', ''));
+  const elementQuery = computed(
+    () => route.query.element as string | undefined,
+  );
 
   const stopWatch = watch(
-    anchor,
-    async (hash) => {
-      const snippet = hash
-        ? seoSnippets.find((candidate) => {
-            const sameHash = candidate.link.split('#')[1] === hash;
-            const sameType =
-              candidate.link.split('/')[1] ===
-              (args.contentTypePath.type === 'topic'
-                ? args.contentTypePath.topicPart
-                : args.contentTypePath.type);
-            return sameHash && sameType;
-          })
-        : undefined;
-
+    elementQuery,
+    async (elementId) => {
+      const snippet = findElementSnippet(elementId);
       if (!snippet) {
         setupSeo(baseSeo);
         return;
       }
 
-      const elementPhrase = await getElementPhrase(snippet.schemaName);
-
-      const title = (() => {
-        if (snippet.seo?.title) {
-          return snippet.seo.title;
-        } else {
-          return snippet.title;
-        }
-      })();
-
-      const description = (() => {
-        if (snippet.seo?.description) {
-          return snippet.seo.description;
-        } else {
-          return snippet.description;
-        }
-      })();
+      // ── 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)();
+      setupSeo({
+        title: `${quickTitle} - ${seoSiteTitle}`,
+        description: quickDescription || '',
+        urlPath: snippet.link,
+      });
 
+      // ── Async: refine title with element-type phrase once loaded.
+      const elementPhrase = await getElementPhrase(snippet.schemaName);
+      const fullTitle = (() => seoSnippet.title)();
       setupSeo({
-        title: `${title} [${elementPhrase.element_name}] - ${seoSiteTitle}`,
-        description: description || '',
+        title: `${fullTitle} [${elementPhrase.element_name}] - ${seoSiteTitle}`,
+        description: quickDescription || '',
         urlPath: snippet.link,
       });
     },

package/app/composables/phrases.ts

@@ -69,9 +69,6 @@ export function usePhrases<const T extends readonly LanguagePhraseKey[]>(
       try {
         payloadPhraseValue = await $fetch<PayloadLanguagePhraseValue>(
           `/api/language/phrase/${phraseKey}`,
-          {
-            responseType: 'json',
-          },
         );
 
         payloadLanguage.phrases[phraseKey] = payloadPhraseValue;

package/app/composables/scrollUp.ts

@@ -12,7 +12,7 @@ export function initScrollUpWatcher() {
   watch(
     () => route.path,
     () => {
-      if (route.hash) {
+      if (route.query.element) {
         return;
       }
 

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

@@ -40,7 +40,11 @@ await useContentSeo({
     <MainFlags :flags="mainContent.flags" />
     <MainDescription :description="mainContent.description" />
     <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>
     <MainAction
       v-if="mainContent.children[0]"

package/app/pages/contributor/[contributorId].vue

@@ -17,11 +17,8 @@ const pageContributor = await (async () => {
     return cachedContributor;
   }
 
-  let fetchedContributor: PageContributor = await $fetch(
+  let fetchedContributor: PageContributor = await fetchJson(
     '/api/contributor/page/' + contributorId.value,
-    {
-      responseType: 'json',
-    },
   );
 
   fetchedContributor =
@@ -136,9 +133,10 @@ useStandartSeo({
   </MainSectionPreamble>
   <MainSection v-if="pageContributor.description">
     <Prose
-      :element="pageContributor.description.proseElement"
+      :element="pageContributor.description.prose"
       :storage="pageContributor.description.storage"
       :useHashUrl="false"
+      :setHtmlIds="false"
     />
   </MainSection>
 </template>

package/app/pages/contributors.vue

@@ -11,7 +11,7 @@ const payloadKey = 'list-contributors';
 const listContributors: ListContributor[] =
   (nuxtApp.static.data[payloadKey] ||=
   nuxtApp.payload.data[payloadKey] ||=
-    await $fetch('/api/contributor/list', { responseType: 'json' }));
+    await fetchJson('/api/contributor/list'));
 
 const phrase = await usePhrases(
   'contributors',

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

@@ -42,7 +42,11 @@ await useContentSeo({
     <MainFlags :flags="mainContent.flags" />
     <MainDescription :description="mainContent.description" />
     <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>
     <MainAction
       v-if="mainContent.children[0]"

package/app/pages/index.vue

@@ -9,7 +9,7 @@ const payloadKey = 'index-page';
 const indexPage: IndexPage =
   (nuxtApp.static.data[payloadKey] ||=
   nuxtApp.payload.data[payloadKey] ||=
-    await $fetch<IndexPage>('/api/indexPage', { responseType: 'json' }));
+    await fetchJson<IndexPage>('/api/indexPage'));
 
 useIndexSeo(indexPage);
 

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

@@ -38,9 +38,13 @@ await useContentSeo({
     <MainTitle icon="lines" :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>
@@ -48,10 +52,11 @@ await useContentSeo({
   </MainSectionPreamble>
   <MainSection>
     <Prose
-      :element="mainContent.proseElement"
+      :element="mainContent.prose"
       :storage="mainContent.storage"
       :urlPath="'/' + mainContent.fullId"
       :useHashUrl="true"
+      :setHtmlIds="true"
       @vue:mounted="proseMounted"
     />
   </MainSection>

package/app/pages/sponsors.vue

@@ -11,7 +11,7 @@ const payloadKey = 'page-sponsors';
 const pageSponsors: PageSponsor[] =
   (nuxtApp.static.data[payloadKey] ||=
   nuxtApp.payload.data[payloadKey] ||=
-    await $fetch('/api/pageSponsors', { responseType: 'json' }));
+    await fetchJson('/api/pageSponsors'));
 
 const phrase = await usePhrases(
   'sponsors',

package/app/plugins/appSetup/index.ts

@@ -8,11 +8,6 @@ import { setupWelcomeMessage } from './client/welcome';
 export default defineNuxtPlugin({
   name: 'erudit-app-setup',
   async setup() {
-    // Forgive me God for doing this but this is necessary because Nuxt App server side shares
-    // same globalThis with Nitro server but same imports are done again causing @jsprose/core to throw "multipe singleton instances" error.
-    // @ts-ignore
-    //delete globalThis['__JSPROSE__'];
-
     await setupAppRuntimeConfig();
   },
   hooks: {

package/app/plugins/fetchJson.ts

@@ -0,0 +1,11 @@
+export default defineNuxtPlugin(() => {
+  const fetchJson = $fetch.create({
+    responseType: 'json',
+  });
+
+  return {
+    provide: {
+      fetchJson,
+    },
+  };
+});

package/app/plugins/prerender.server.ts

@@ -28,7 +28,7 @@ export default defineNuxtPlugin({
     ];
 
     for (const provider of routeProviders) {
-      const fetchedRoutes = await $fetch<string[]>(provider);
+      const fetchedRoutes = await fetchJson<string[]>(provider);
       routes.push(...fetchedRoutes);
     }
 

package/app/router.options.ts

@@ -2,7 +2,7 @@ import type { RouterOptions } from 'vue-router';
 
 export default {
   scrollBehavior(_to, _from, savedPosition) {
-    if (!savedPosition && !_to.hash) {
+    if (!savedPosition && !_to.query.element) {
       return { top: 0 };
     }
     return savedPosition;

package/modules/erudit/globals/prose.ts

@@ -1,5 +1,4 @@
-import type { AnySchema, RawElement } from '@jsprose/core';
+import type { RawElement } from 'tsprose';
+export { defineDocument as defineProse, type RawElement } from 'tsprose';
 
-export { defineDocument as defineProse } from '@jsprose/core';
-
-export type AnyProseElement = RawElement<AnySchema>;
+export type ProseElement = RawElement;

package/modules/erudit/setup/elements/appTemplate.ts

@@ -15,7 +15,7 @@ export function createAppTemplate(nuxt: Nuxt, elementsData: ElementData[]) {
   }
 
   const template = `
-import type { AppElement } from '@erudit-js/prose/app';
+import type { ProseAppElements } from '@erudit-js/prose/app';
 
 ${Object.entries(apps)
   .map(
@@ -24,12 +24,11 @@ ${Object.entries(apps)
   )
   .join('\n')}
 
-export const appElementsArray: AppElement[] = [
-    ${Object.keys(apps).join(',\n    ')}
-].flatMap(element => (Array.isArray(element) ? element : [element]) as any);
-
-export const appElements = Object.fromEntries(
-    appElementsArray.map(element => [element.schema.name, element])
+export const appElements: ProseAppElements = Object.fromEntries([
+  ${Object.keys(apps).join(',\n  ')}
+  ]
+  .flatMap((element: any) => (Array.isArray(element) ? element : [element]))
+  .map((element: any) => [element.schema.name, element])
 );
     `.trim();
 

package/modules/erudit/setup/elements/{globalTypes.ts → elementGlobalTypes.ts}

@@ -5,13 +5,13 @@ import { sn } from 'unslash';
 import type { ElementData } from './shared';
 import { PROJECT_PATH } from '../../env';
 
-export function createGlobalTypes(elementsData: ElementData[]) {
+export function createElementGlobalTypes(elementsData: ElementData[]) {
   for (const elementData of elementsData) {
-    // Collect all tag names from registry
-    const allRegistryTagNames = new Set<string>();
-    for (const registryItem of elementData.registryItems) {
-      for (const tagName of registryItem.tagNames) {
-        allRegistryTagNames.add(tagName);
+    // Collect tag names from core element
+    const allCoreTagNames = new Set<string>();
+    for (const coreElement of elementData.coreElements) {
+      for (const tagName of Object.keys(coreElement.tags)) {
+        allCoreTagNames.add(tagName);
       }
     }
 
@@ -32,8 +32,8 @@ export function createGlobalTypes(elementsData: ElementData[]) {
       other = parsed.other;
     }
 
-    // Add missing tags from registry
-    for (const tagName of allRegistryTagNames) {
+    // Add missing tags from core element
+    for (const tagName of allCoreTagNames) {
       if (!(tagName in tags)) {
         tags[tagName] = '';
       }
@@ -58,18 +58,18 @@ export function createGlobalTypes(elementsData: ElementData[]) {
       );
     });
 
-    // Create typeof imports for tags that exist in element's registry items
+    // Create typeof imports for tags that exist in element's core elements
     const tagDefinitions = Object.entries(tags).map(([tagName, jsdoc]) => {
-      // Find which registry item contains this tag
+      // Find which core element contains this tag
       let tagDefinition = "'_tag_'";
-      for (let i = 0; i < elementData.registryItems.length; i++) {
-        const registryItem = elementData.registryItems[i]!;
-        if (registryItem.tagNames.includes(tagName)) {
+      for (let i = 0; i < elementData.coreElements.length; i++) {
+        const coreElement = elementData.coreElements[i]!;
+        if (coreElement.tags[tagName] !== undefined) {
           // If there are multiple schemas, include the index
-          if (elementData.registryItems.length > 1) {
-            tagDefinition = `typeof import('${elementData.absCorePath}')['default'][${i}]['registryItem']['tags']['${tagName}']`;
+          if (elementData.coreElements.length > 1) {
+            tagDefinition = `typeof import('${elementData.absCorePath}')['default'][${i}]['tags']['${coreElement.tags[tagName]}']`;
           } else {
-            tagDefinition = `typeof import('${elementData.absCorePath}')['default']['registryItem']['tags']['${tagName}']`;
+            tagDefinition = `typeof import('${elementData.absCorePath}')['default']['tags']['${coreElement.tags[tagName]}']`;
           }
           break;
         }
@@ -78,8 +78,8 @@ export function createGlobalTypes(elementsData: ElementData[]) {
       const indentedJsdoc = indentJsDoc(jsdoc);
 
       return indentedJsdoc
-        ? `${indentedJsdoc}\n    const ${tagName}: ${tagDefinition};`
-        : `    const ${tagName}: ${tagDefinition};`;
+        ? `${indentedJsdoc}\n  const ${tagName}: ${tagDefinition};`
+        : `  const ${tagName}: ${tagDefinition};`;
     });
 
     const finalDts = `
@@ -96,8 +96,8 @@ ${Object.entries(other)
         ? `type ${typeName} = ${definition};`
         : `const ${typeName}: ${definition};`;
     return indentedJsdoc
-      ? `${indentedJsdoc}\n    ${declaration}`
-      : `    ${declaration}`;
+      ? `${indentedJsdoc}\n  ${declaration}`
+      : `  ${declaration}`;
   })
   .join('\n')}
 }
@@ -250,7 +250,7 @@ function parseGlobalDts(dts: string): {
   return { imports, tags, other };
 }
 
-function indentJsDoc(jsdoc: string, indent: string = '    '): string {
+function indentJsDoc(jsdoc: string, indent: string = '  '): string {
   if (!jsdoc) return '';
   return jsdoc
     .split('\n')