erudit 3.0.0-dev.10 → 3.0.0-dev.12

package/app/components/SiteMain.vue

@@ -1,8 +1,6 @@
 <template>
     <main :class="$style.main" erudit-main>
-        <ClientOnly>
-            <Preview />
-        </ClientOnly>
+        <Preview />
         <div :class="$style.mainInner">
             <slot></slot>
         </div>
@@ -24,7 +22,7 @@
 
     @include bp.below('mobile') {
         --_pMainBase: var(--_bitran_asideWidth);
-        font-size: 14px;
+        font-size: 15px;
     }
 
     .mainInner {

package/app/components/aside/major/panes/Pages.vue

@@ -27,7 +27,7 @@ function linkAttrs(link: string) {
         <AsideListItem
             icon="users"
             v-bind="linkAttrs('/members')"
-            :main="phrase.members + ':'"
+            :main="phrase.members"
             :secondary="memberCount!.toString()"
         />
     </PaneContentScroll>

package/app/components/aside/major/panes/nav/Nav.vue

@@ -7,6 +7,8 @@ import {
     navBookVisible,
 } from '@app/scripts/aside/major/nav';
 
+import { detectContentBookId } from '@shared/content/bookId';
+
 import NavGlobal from './NavGlobal.vue';
 import NavBook from './NavBook.vue';
 
@@ -23,12 +25,15 @@ asideMajorNav.globalNav ||= (await $fetch('/api/aside/major/nav/global', {
 
 const checkIfInsideBook = () => {
     if (contentRoute.value) {
-        for (const bookId of asideMajorNav.booksIds) {
-            if (contentRoute.value.contentId.startsWith(bookId)) {
-                navBookId.value = bookId;
-                insideNavBook.value = true;
-                return;
-            }
+        const bookId = detectContentBookId(
+            contentRoute.value.contentId,
+            asideMajorNav.booksIds
+        );
+
+        if (bookId) {
+            navBookId.value = bookId;
+            insideNavBook.value = true;
+            return;
         }
     }
 

package/app/components/aside/major/panes/nav/fnav/FNavFlags.vue

@@ -2,7 +2,7 @@
 import type { ContentFlag } from '@erudit-js/cog/schema';
 import { flagsData } from '@app/scripts/flag';
 
-defineProps<{ flags: Record<ContentFlag, boolean> }>();
+defineProps<{ flags: Partial<Record<ContentFlag, boolean>> }>();
 
 const phrases = Object.values(flagsData).map((data) => data.title);
 const phrase = await usePhrases(...phrases);

package/app/components/aside/major/panes/other/ItemContent.vue

@@ -23,7 +23,7 @@ if (strDate) {
         :link="`https://github.com/${eruditConfig.repository?.name}`"
         target="_blank"
         icon="draw"
-        :main="phrase.content + ':'"
+        :main="phrase.content"
         :secondary
     />
 </template>

package/app/components/aside/major/panes/other/ItemGenerator.vue

@@ -7,7 +7,7 @@ import { version } from '@erudit/package.json';
         link="https://github.com/erudit-js/erudit"
         target="_blank"
         icon="chip"
-        main="Erudit:"
+        main="Erudit"
         :secondary="version"
     />
 </template>

package/app/components/aside/major/panes/other/ItemTheme.vue

@@ -47,7 +47,7 @@ onMounted(() => {
         <AsideListItem
             @click="_cycle"
             :icon="themeItem![0]"
-            :main="phrase.theme + ':'"
+            :main="phrase.theme"
             :secondary="themeItem![1]"
         />
     </ClientOnly>

package/app/components/aside/minor/Contribute.vue

@@ -3,7 +3,7 @@ import eruditConfig from '#erudit/config';
 
 import AsideOverlayPane from '../utils/AsideOverlayPane.vue';
 
-const props = defineProps<{ fullContentId: string }>();
+const props = defineProps<{ contentId: string }>();
 const phrase = await usePhrases(
     'make_contribution',
     'material_improvement',
@@ -23,7 +23,7 @@ const issueLink = computed(() => {
 const editPageLink = computed(() => {
     const ghRepository = eruditConfig.repository;
     return ghRepository
-        ? `https://github.com/${ghRepository.name}/tree/${ghRepository.branch}/content/${props.fullContentId}`
+        ? `https://github.com/${ghRepository.name}/tree/${ghRepository.branch}/content/${props.contentId}`
         : null;
 });
 </script>

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

@@ -40,7 +40,7 @@ watch(contentData, () => (contributePaneVisible.value = false));
             {{ phrase.no_contributors }}
         </section>
         <AsideMinorContribute
-            :fullContentId="contentData.fullContentId"
+            :contentId="contentData.contentId"
             v-model:pane="contributePaneVisible"
         />
     </AsideMinorPane>

package/app/components/aside/minor/topic/AsideMinorTopic.vue

@@ -18,7 +18,7 @@ watch(topicData, () => (contributePaneVisible.value = false));
         <TopicToc />
         <TopicContributors v-if="topicData.contributors" />
         <AsideMinorContribute
-            :fullContentId="topicData.fullContentId"
+            :contentId="topicData.topicId"
             v-model:pane="contributePaneVisible"
         />
     </AsideMinorPane>

package/app/components/aside/minor/topic/TopicContributors.vue

@@ -27,9 +27,9 @@ onMounted(() => {
     watch(
         topicData,
         () => {
-            if (previousFullId === topicData.value.fullContentId) return;
+            if (previousFullId === topicData.value.topicId) return;
 
-            previousFullId = topicData.value.fullContentId;
+            previousFullId = topicData.value.topicId;
             showcase.value = [...topicData.value.contributors!]
                 .sort(() => 0.5 - Math.random())
                 .slice(0, counter.value.showcase);

package/app/components/aside/minor/topic/TopicToc.vue

@@ -174,12 +174,7 @@ onMounted(() => {
 
             if (!topicData.value.location || !topicLocation.value) return;
 
-            if (
-                stringifyBitranLocation(topicData.value.location) ===
-                stringifyBitranLocation(topicLocation.value)
-            ) {
-                enableLiveToc();
-            }
+            enableLiveToc();
         },
         { immediate: true },
     );

package/app/components/aside/minor/topic/TopicTocItem.vue

@@ -6,6 +6,8 @@ const productName = props.tocItem.productName;
 const productIcon = await useBitranElementIcon(productName);
 const productPhrase = await useBitranElementLanguage(productName);
 
+const pretty = useFormatText();
+
 function tocItemClick(event: MouseEvent): void {
     navigateTo({
         query: {
@@ -20,7 +22,7 @@ function tocItemClick(event: MouseEvent): void {
 
 <template>
     <TreeItem
-        :label="tocItem.title || productPhrase('_element_title')"
+        :label="pretty(tocItem.title || productPhrase('_element_title'))"
         :level="tocItem.level"
         :link="`?element=${tocItem.id}`"
         :svg="productIcon"

package/app/components/bitran/BitranContent.vue

@@ -56,7 +56,7 @@ const isServer = import.meta.server;
 <style lang="scss" module>
 @use '$/def/bp';
 
-.eruditBitranContainer {
+:global(.bitran-component).eruditBitranContainer {
     padding: var(--_pMainY) var(--_pMainX);
     padding-left: calc(var(--_pMainX) - var(--_bitran_asideWidth));
 

package/app/components/main/utils/Breadcrumb.vue

@@ -13,7 +13,7 @@ function getIcon(contextIcon: string) {
 
 <template>
     <section :class="$style.breadcrumb">
-        <template v-for="contextItem of context.slice(0, -1)">
+        <template v-for="contextItem of context.slice(0, -1).filter(item => !item.hidden)">
             <Link :to="contextItem.href" :class="$style.breadcrumbItem">
                 <MyIcon :name="getIcon(contextItem.icon)" wrapper="span" />
                 {{ contextItem.title }}

package/app/components/preview/PreviewScreen.vue

@@ -5,7 +5,7 @@ import { buildPreviewData } from '@app/scripts/preview/build';
 import { getPreviewDisplayComponent } from '@app/scripts/preview/display';
 import { createPreviewError } from '@app/scripts/preview/data/alert';
 
-import { PreviewDisplayAlert } from '#components';
+import { LazyPreviewDisplayAlert } from '#components';
 
 const { request } = defineProps<{ request: PreviewRequest }>();
 const height = defineModel<number>('height');
@@ -35,7 +35,7 @@ const setupDisplay = setTimeout(async () => {
             message: error?.message || error,
         });
 
-        DisplayComponent.value = PreviewDisplayAlert;
+        DisplayComponent.value = LazyPreviewDisplayAlert;
     }
 
     await nextTick();

package/app/components/preview/display/PageLink.vue

@@ -9,7 +9,7 @@ const phrase = await usePhrases('internal_link_warn');
 
 <template>
     <PreviewDisplay :footer="data.footer">
-        <div :class="$style.wrapper">{{ phrase.internal_link_warn }}</div>
+        <div :class="$style.wrapper">{{ data.description || phrase.internal_link_warn }}</div>
     </PreviewDisplay>
 </template>
 

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

@@ -21,7 +21,7 @@ const root = await bitranTranspiler.parser.parse(data.bitran.content.biCode);
             <BitranContent
                 :content="{
                     root,
-                    preRenderData: data.bitran.content.preRenderData,
+                    renderDataStorage: data.bitran.content.renderDataStorage,
                 }"
                 :context="data.bitran.context"
             />

package/app/composables/bitran.ts

@@ -88,7 +88,7 @@ export async function useBitranRenderers() {
 
 export async function useBitranElementRenderer(productName: string) {
     const renderer =
-        (await useBitranRenderers())[productName] ||
+        (await getRenderers())[productName] ||
         getDefaultBitranRenderers()[productName];
 
     if (!renderer)

package/app/composables/bitranContent.ts

@@ -7,6 +7,7 @@ import {
     stringifyBitranLocation,
     type BitranLocation,
 } from '@erudit-js/cog/schema';
+
 import type { StringBitranContent } from '@erudit/shared/bitran/stringContent';
 
 import eruditConfig from '#erudit/config';
@@ -28,14 +29,37 @@ export async function useBitranContent(
             })();
         }
 
-        const apiRoute = `/api/bitran/content/${encodeBitranLocation(stringifyBitranLocation(location.value!))}`;
-        nuxtApp.runWithContext(() => prerenderRoutes(apiRoute));
+        const contentApiRoute = `/api/bitran/content/${encodeBitranLocation(stringifyBitranLocation(location.value!))}`;
+        nuxtApp.runWithContext(() => prerenderRoutes(contentApiRoute));
 
         // @ts-ignore
         contentPromise = (async () => {
-            const stringContent = (await $fetch(apiRoute, {
-                responseType: 'json',
-            })) as StringBitranContent;
+            const locationString = encodeBitranLocation(
+                stringifyBitranLocation(location.value!),
+            );
+
+            const payloadKey = `content`;
+            const payload =
+                (nuxtApp.static.data[payloadKey] ||=
+                nuxtApp.payload.data[payloadKey] ||=
+                    {});
+
+            let stringContent: StringBitranContent;
+
+            if (payload.location === locationString) {
+                stringContent = payload;
+            } else {
+                stringContent = await $fetch(contentApiRoute, {
+                    responseType: 'json',
+                });
+
+                // Clear the payload and set new data
+                Object.keys(payload).forEach((key) => delete payload[key]);
+                Object.assign(payload, {
+                    ...stringContent,
+                    location: locationString,
+                });
+            }
 
             const bitranTranspiler = await useBitranTranspiler();
 
@@ -58,7 +82,7 @@ export async function useBitranContent(
 
             content.value = {
                 root,
-                preRenderData: stringContent.preRenderData,
+                renderDataStorage: stringContent.renderDataStorage,
             };
 
             return content;

package/app/composables/contentPage.ts

@@ -62,17 +62,16 @@ export function useContentPage(contentData: Ref<ContentData>) {
                 contentData.value.generic.title ||
                 contentData.value.generic.contentId.split('/').pop();
 
-            if (contentData.value.type !== 'book') {
-                const bookTitle = contentData.value?.bookTitle;
-                title += bookTitle ? ` | ${bookTitle}` : '';
-            }
-
             if (contentRoute.value!.type === 'topic') {
                 const topicPart = contentRoute.value!.topicPart;
-
                 if (topicPart !== 'article') title += ` | ${phrase[topicPart]}`;
             }
 
+            if (contentData.value.type !== 'book') {
+                const bookTitle = contentData.value?.bookTitle;
+                title += bookTitle ? ` | ${bookTitle}` : '';
+            }
+
             title +=
                 ' - ' +
                 (eruditConfig.seo?.title ||
@@ -91,7 +90,9 @@ export function useContentPage(contentData: Ref<ContentData>) {
                 contentData.value.generic?.description;
 
             if (customDescription) {
-                seo.description.value = customDescription;
+                seo.description.value = customDescription
+                    .trim()
+                    .replace(/\n/g, ' ');
                 return;
             }
 

package/app/composables/formatText.ts

@@ -1,5 +1,16 @@
 import eruditConfig from '#erudit/config';
 
+export interface FormatState {
+    quoteOpen: boolean;
+}
+
+const defaultFormatState: FormatState = {
+    quoteOpen: false,
+};
+
+export type FormatFunction = (text: string, state?: FormatState) => string;
+export type FormatterFunction = (text: string, state: FormatState) => string;
+
 let formatFunction: FormatFunction;
 
 export function useFormatText() {
@@ -11,10 +22,8 @@ export function useFormatText() {
     return formatFunction;
 }
 
-type FormatFunction = (text: string) => string;
-
 function createFormatFunction(language?: string): FormatFunction {
-    const formatters: FormatFunction[] = [];
+    const formatters: FormatterFunction[] = [];
 
     //
     // Em Dashes
@@ -36,10 +45,11 @@ function createFormatFunction(language?: string): FormatFunction {
             }
         })();
 
-        formatters.push((text) => {
-            let open = false;
+        formatters.push((text, state) => {
             return text.replaceAll(/"/gm, () => {
-                return (open = !open) ? quoteSymbols[0] : quoteSymbols[1];
+                return (state.quoteOpen = !state.quoteOpen)
+                    ? quoteSymbols[0]
+                    : quoteSymbols[1];
             });
         });
     }
@@ -60,10 +70,13 @@ function createFormatFunction(language?: string): FormatFunction {
     //
     //
 
-    function formatText(text: string): string {
+    function formatText(
+        text: string,
+        state: FormatState = defaultFormatState,
+    ): string {
         if (!text) return text;
 
-        for (const formatter of formatters) text = formatter(text);
+        for (const formatter of formatters) text = formatter(text, state);
 
         return text;
     }

package/app/composables/phrases.ts

@@ -15,7 +15,6 @@ const functionPhrases: Record<string, Function> = {};
 const phraseApiRoute = (phraseId: EruditPhraseId) =>
     `/api/language/phrase/${phraseId}`;
 const functionsApiRoute = '/api/language/functions';
-const phraseIdsApiRoute = '/api/language/phraseIds';
 
 export function usePhrases<T extends EruditPhraseId[]>(
     ...phraseIds: T
@@ -26,11 +25,9 @@ export function usePhrases<T extends EruditPhraseId[]>(
         nuxt.payload.data[payloadKey] ||=
             {});
 
-    const prerenderAllPromise = prerenderAllPhrases();
     const prepareFunctionsPromise = prepareFunctions(payload);
 
     return (async () => {
-        await prerenderAllPromise;
         await prepareFunctionsPromise;
 
         payload.strPhrases ||= {};
@@ -58,19 +55,6 @@ export function usePhrases<T extends EruditPhraseId[]>(
     })();
 }
 
-async function prerenderAllPhrases() {
-    if (import.meta.dev) return;
-
-    if (import.meta.client) return;
-
-    const nuxt = useNuxtApp();
-
-    const phraseIds = await $fetch(phraseIdsApiRoute);
-    nuxt.runWithContext(() =>
-        prerenderRoutes(phraseIds.map((phraseId) => phraseApiRoute(phraseId))),
-    );
-}
-
 async function prepareFunctions(payload: LanguagePayload) {
     if (payload?.strFunctions) return;
 

package/app/plugins/prerender.server.ts

@@ -0,0 +1,22 @@
+let alreadyPrerendered = false;
+let isPrerendering = false;
+
+export default defineNuxtPlugin({
+    name: 'erudit-prerender',
+    async setup(_nuxt) {
+        if (import.meta.dev) {
+            return; // Server is available so no need to prerender in dev mode
+        }
+
+        if (alreadyPrerendered || isPrerendering) {
+            return;
+        }
+
+        isPrerendering = true;
+
+        const routesToPrerender = await $fetch<string[]>('/api/prerender');
+        _nuxt.runWithContext(() => prerenderRoutes(routesToPrerender));
+
+        alreadyPrerendered = true;
+    },
+});

package/app/scripts/preview/build.ts

@@ -1,13 +1,16 @@
 import { PreviewDataType, type PreviewData } from './data';
-import { PreviewRequestType, type PreviewRequest } from './request';
-
-import { buildGenericLink } from './data/genericLink';
-import { buildPageLink } from './data/pageLink';
-import { buildUnique } from './data/unique';
 import { createPreviewError } from './data/alert';
+import { PreviewRequestType, type PreviewRequest } from './request';
 import { PreviewThemeName } from './state';
 
-const builders = [buildGenericLink, buildPageLink, buildUnique];
+const builders = [
+    async (request: PreviewRequest) =>
+        (await import('./data/genericLink')).buildGenericLink(request),
+    async (request: PreviewRequest) =>
+        (await import('./data/pageLink')).buildPageLink(request),
+    async (request: PreviewRequest) =>
+        (await import('./data/unique')).buildUnique(request),
+];
 
 export async function buildPreviewData(
     request: PreviewRequest,

package/app/scripts/preview/data/pageLink.ts

@@ -5,6 +5,7 @@ import type { PreviewFooter } from '../footer';
 export interface PreviewDataPageLink extends PreviewDataBase {
     type: PreviewDataType.PageLink;
     footer: PreviewFooter;
+    description?: string;
 }
 
 export async function buildPageLink(

package/app/styles/normalize.scss

@@ -47,17 +47,3 @@ h5,
 h6 {
     overflow-wrap: break-word;
 }
-
-/* 8. Improve line wrapping */
-p {
-    text-wrap: pretty;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    text-wrap: balance;
-}

package/globals/content.ts

@@ -1,6 +1,7 @@
 import type {
     BookConfig,
     ContentReferences,
+    ContentReferenceSource,
     GroupConfig,
     TopicConfig,
 } from '@erudit-js/cog/schema';
@@ -20,3 +21,7 @@ export function defineTopic(topic: Partial<TopicConfig>) {
 export function defineContentReferences(references: ContentReferences) {
     return references;
 }
+
+export function defineContentSource(source: ContentReferenceSource) {
+    return source;
+}

package/module/imports.ts

@@ -27,12 +27,18 @@ export function setupGlobalImports() {
                 'defineGroup',
                 'defineTopic',
                 'defineContentReferences',
+                'defineContentSource',
             ];
             return imports.map((name) => ({
                 name,
                 from: eruditPath(`globals/content`),
             }));
         })(),
+        // Problems Generation
+        {
+            name: 'defineProblemGenerator',
+            from: '@erudit-js/bitran-elements/problem/generator',
+        },
         // Helper Asset Path Functions
         ...(() => {
             const imports = [

package/module/index.ts

@@ -7,6 +7,7 @@ import { logger } from '@erudit/module/logger';
 import { setupGlobalImports } from '@erudit/module/imports';
 import { setupBitranTemplates } from './bitran';
 import { setupGlobalPaths } from './paths';
+import { setupProblemGenerators } from './problemGenerators';
 
 export default defineNuxtModule({
     meta: { name: 'Erudit', configKey: 'erudit' },
@@ -18,6 +19,7 @@ export default defineNuxtModule({
 
         const eruditConfig = await setupEruditConfig(_nuxt);
         await setupBitranTemplates(_nuxt);
+        await setupProblemGenerators(_nuxt);
         setupGlobalPaths(_nuxt);
 
         if (eruditConfig.site?.baseUrl) {

package/module/problemGenerators.ts

@@ -0,0 +1,46 @@
+import { addTemplate } from 'nuxt/kit';
+import type { Nuxt } from 'nuxt/schema';
+import { globSync } from 'glob';
+
+import { eruditEndNuxtPath, projectPath } from '@erudit/globalPath';
+import { getContentPath } from '@erudit/utils/contentPath';
+
+export async function setupProblemGenerators(_nuxt: Nuxt) {
+    const templateName = '#erudit/problemGenerators.ts';
+
+    addTemplate({
+        filename: templateName,
+        write: true,
+        async getContents() {
+            const generatorFiles = findGenerators();
+
+            return `
+export const loaders = {
+${generatorFiles
+    .map((file) => {
+        const filePath = projectPath('content/' + file);
+        const contentPath = getContentPath(
+            file,
+            projectPath('content'),
+        ).replace(/\.gen\.(js|ts)$/, '');
+        return `    '${contentPath}': async () => (await import('${filePath}')).default,`;
+    })
+    .join('\n')}
+}
+            `.trim();
+        },
+    });
+
+    const alias = (_nuxt.options.alias ||= {});
+    alias['#erudit/problemGenerators'] = eruditEndNuxtPath(
+        `.nuxt/${templateName}`,
+    );
+}
+
+function findGenerators() {
+    const generatorFiles = globSync('**/*.gen.{js,ts}', {
+        cwd: projectPath('content'),
+        posix: true,
+    });
+    return generatorFiles;
+}

package/nuxt.config.ts

@@ -18,11 +18,17 @@ export default defineNuxtConfig({
         '@shared': eruditPath('shared'),
         '@app': eruditPath('app'),
         $: eruditPath('app/styles'),
+        //
+        '#project': projectPath(),
+        '#content': projectPath('content'),
     },
     modules: [eruditPath('module'), 'nuxt-my-icons'],
     myicons: {
         iconsDir: eruditPath('app/assets/icons'),
     },
+    features: {
+        inlineStyles: false,
+    },
     typescript: {
         tsConfig: {
             include: [eruditPath('**/*'), projectPath('**/*')],
@@ -47,11 +53,6 @@ export default defineNuxtConfig({
             projectPath(`contributors/${pattern}`),
         ),
     ],
-    esbuild: {
-        options: {
-            charset: 'utf8',
-        },
-    },
     nitro: {
         preset: 'github-pages',
         plugins: [eruditPath('server/plugin')],
@@ -88,6 +89,7 @@ export default defineNuxtConfig({
         ],
         esbuild: {
             options: {
+                charset: 'utf8',
                 tsconfigRaw: {
                     compilerOptions: {
                         experimentalDecorators: true, // Make TypeORM work with Nuxt,