erudit 3.0.0-dev.8 → 4.0.0-dev.1

package/app/composables/formatText.ts

@@ -1,86 +1,100 @@
-import eruditConfig from '#erudit/config';
+import type { FormatTextState, FormatText } from '@erudit-js/core/formatText';
 
-let formatFunction: FormatFunction;
+type LanguageFormatText = (text: string) => string;
 
-export function useFormatText() {
-    if (!formatFunction) {
-        const language = eruditConfig?.language;
-        formatFunction = createFormatFunction(language);
-    }
-
-    return formatFunction;
-}
-
-type FormatFunction = (text: string) => string;
+const formatTextLoaders: Partial<
+    Record<LanguageCode, () => Promise<{ default: LanguageFormatText }>>
+> = {
+    ru: () => import('../formatters/ru'),
+};
 
-function createFormatFunction(language?: string): FormatFunction {
-    const formatters: FormatFunction[] = [];
+export let formatText: FormatText;
 
-    //
-    // Em Dashes
-    //
+export async function initFormatText() {
+    const languageCode = ERUDIT.config.project.language.current;
 
-    formatters.push((text) => text.replace(/(^| )--($| )/gm, '$1—$2'));
+    const formatTextLoader =
+        languageCode in formatTextLoaders
+            ? formatTextLoaders[languageCode]
+            : undefined;
 
-    //
-    // Quotes
-    //
-
-    {
-        const quoteSymbols: [string, string] = (() => {
-            switch (language) {
-                case 'ru':
-                    return ['«', '»'];
-                default:
-                    return ['“', '”'];
-            }
-        })();
-
-        formatters.push((text) => {
-            let open = false;
-            return text.replaceAll(/"/gm, () => {
-                return (open = !open) ? quoteSymbols[0] : quoteSymbols[1];
-            });
-        });
+    let languageFormatText: LanguageFormatText = (text) => text;
+    if (formatTextLoader) {
+        languageFormatText = (await formatTextLoader()).default;
     }
 
-    //
-    // Ellipsis
-    //
-
-    formatters.push((text) => text.replace(/\.\.\./gm, '…'));
-
-    //
-    // Language specific formatters
-    //
-
-    if (language === 'ru') formatters.push(ruStickyPrepositions);
+    function _formatText(text: string, state?: FormatTextState): string;
+    function _formatText(text: undefined, state?: FormatTextState): undefined;
+    function _formatText(
+        text?: string,
+        state?: FormatTextState,
+    ): string | undefined;
+    function _formatText(
+        text?: string,
+        state?: FormatTextState,
+    ): string | undefined {
+        if (text === undefined) {
+            return text;
+        }
+
+        //
+        // Normalize spacing (new lines, spaces)
+        //
+
+        {
+            text = text
+                .trim()
+                .replace(/\r\n/gm, '\n')
+                .replace(/\n{3,}/gm, '\n\n')
+                .replace(/[ \t]+/gm, ' ');
+        }
+
+        //
+        // Normalize dashes
+        //
+
+        {
+            text = text.replace(/(^| )--($| )/gm, '$1—$2');
+        }
+
+        //
+        // Normalize quotes
+        //
+
+        {
+            const quoteSymbols: [string, string] = (() => {
+                switch (languageCode) {
+                    case 'ru':
+                        return ['«', '»'];
+                    default:
+                        return ['“', '”'];
+                }
+            })();
+
+            let quoteOpen = state?.quote === 'opened';
+            text = text.replaceAll(/"/gm, () => {
+                quoteOpen = !quoteOpen;
+                if (state) {
+                    state.quote = quoteOpen ? 'opened' : 'closed';
+                }
+                return quoteOpen ? quoteSymbols[0] : quoteSymbols[1];
+            });
+        }
 
-    //
-    //
-    //
+        //
+        // Normalize ellipsis
+        //
 
-    function formatText(text: string): string {
-        if (!text) return text;
+        {
+            text = text.replace(/\.{3}/gm, '…');
+        }
 
-        for (const formatter of formatters) text = formatter(text);
+        //
+        // Language-specific formatting
+        //
 
-        return text;
+        return languageFormatText(text);
     }
 
-    return formatText;
-}
-
-//
-//
-//
-
-/**
- * Formats prepositions in Russian text so that they are always adjacent to the next word and are not left hanging “in the air” when the line breaks.
- */
-function ruStickyPrepositions(text: string): string {
-    return text.replace(
-        / (в|не|без|для|до|за|из|к|на|над|о|об|от|по|под|при|про|с|у|через|вокруг|около|после|перед|между|внутри|вне|из-за|из-под|ради|сквозь|среди|насчёт|вследствие|благодаря|несмотря|наперекор|вопреки|подле|возле|рядом|навстречу) /gimu,
-        ' $1\xa0',
-    );
+    formatText = _formatText;
 }

package/app/composables/loading.ts

@@ -0,0 +1,2 @@
+export const loadingSvg =
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="10" height="10" x="1" y="1" fill="currentColor" rx="1"><animate id="svgSpinnersBlocksShuffle30" fill="freeze" attributeName="x" begin="0;svgSpinnersBlocksShuffle3b.end" dur="0.2s" values="1;13"/><animate id="svgSpinnersBlocksShuffle31" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle38.end" dur="0.2s" values="1;13"/><animate id="svgSpinnersBlocksShuffle32" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle39.end" dur="0.2s" values="13;1"/><animate id="svgSpinnersBlocksShuffle33" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle3a.end" dur="0.2s" values="13;1"/></rect><rect width="10" height="10" x="1" y="13" fill="currentColor" rx="1"><animate id="svgSpinnersBlocksShuffle34" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle30.end" dur="0.2s" values="13;1"/><animate id="svgSpinnersBlocksShuffle35" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle31.end" dur="0.2s" values="1;13"/><animate id="svgSpinnersBlocksShuffle36" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle32.end" dur="0.2s" values="1;13"/><animate id="svgSpinnersBlocksShuffle37" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle33.end" dur="0.2s" values="13;1"/></rect><rect width="10" height="10" x="13" y="13" fill="currentColor" rx="1"><animate id="svgSpinnersBlocksShuffle38" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle34.end" dur="0.2s" values="13;1"/><animate id="svgSpinnersBlocksShuffle39" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle35.end" dur="0.2s" values="13;1"/><animate id="svgSpinnersBlocksShuffle3a" fill="freeze" attributeName="x" begin="svgSpinnersBlocksShuffle36.end" dur="0.2s" values="1;13"/><animate id="svgSpinnersBlocksShuffle3b" fill="freeze" attributeName="y" begin="svgSpinnersBlocksShuffle37.end" dur="0.2s" values="1;13"/></rect></svg>';

package/app/composables/mainContent.ts

@@ -0,0 +1,31 @@
+type PayloadMainContent = {
+    contentPath: string;
+    mainContent: MainContent;
+};
+
+export async function useMainContent<TMainContent extends MainContent>(
+    contentTypePath: string,
+) {
+    const nuxtApp = useNuxtApp();
+    const payloadKey = 'main-content';
+    const payloadMainContent: PayloadMainContent =
+        (nuxtApp.static.data[payloadKey] ||=
+        nuxtApp.payload.data[payloadKey] ||=
+            {});
+
+    let mainContentPromise = async () => {
+        if (payloadMainContent.contentPath !== contentTypePath) {
+            payloadMainContent.contentPath = contentTypePath;
+            payloadMainContent.mainContent = await $fetch<MainContent>(
+                '/api/main/content/' + contentTypePath,
+                {
+                    responseType: 'json',
+                },
+            );
+        }
+
+        return payloadMainContent.mainContent as TMainContent;
+    };
+
+    return mainContentPromise();
+}

package/app/composables/og.ts

@@ -0,0 +1,165 @@
+import type { ContentSeo } from '@erudit-js/core/content/seo';
+
+export function initOgImage() {
+    const fallbackOgImage = {
+        src: eruditPublic('og.png'),
+        width: 500,
+        height: 500,
+    };
+
+    const ogImage = ERUDIT.config.project.seo?.image || fallbackOgImage;
+    useSeoMeta({
+        ogImage: {
+            url: withFullUrl(ogImage.src),
+            width: ogImage.width,
+            height: ogImage.height,
+        },
+    });
+}
+
+export function useIndexSeo(indexPage: IndexPage) {
+    setupSeo({
+        title: indexPage.seo?.title || indexPage.title,
+        description: indexPage.seo?.description || indexPage.description,
+        urlPath: '/',
+    });
+}
+
+export function useStandartSeo(args: {
+    title: string;
+    description?: string;
+    urlPath: string;
+}) {
+    const seoSiteTitle =
+        ERUDIT.config.project.seo?.siteTitle ||
+        ERUDIT.config.project.siteInfo.title ||
+        'Erudit';
+
+    const fullTitle = args.title + ' - ' + seoSiteTitle;
+
+    setupSeo({
+        title: fullTitle,
+        description: args.description,
+        urlPath: args.urlPath,
+    });
+}
+
+export async function useContentSeo(args: {
+    title: string;
+    bookTitle?: string;
+    contentTypeSuffix?: string;
+    contentTypePath: ContentTypePath;
+    description?: string;
+    seo?: ContentSeo;
+    snippets?: ElementSnippet[];
+}) {
+    const canUseBookTitle = ERUDIT.config.project.seo?.useBookSiteTitle;
+
+    const seoSiteTitle =
+        canUseBookTitle && args.bookTitle
+            ? args.bookTitle
+            : ERUDIT.config.project.seo?.siteTitle ||
+              ERUDIT.config.project.siteInfo.title ||
+              'Erudit';
+
+    const fullTitle =
+        (args.seo?.title || args.title) +
+        (args.contentTypeSuffix ? ' [' + args.contentTypeSuffix + ']' : '') +
+        ' - ' +
+        seoSiteTitle;
+
+    const canonicalPath =
+        args.contentTypePath.type === 'topic'
+            ? PAGES.topic(
+                  args.contentTypePath.topicPart,
+                  args.contentTypePath.contentId,
+              )
+            : PAGES[args.contentTypePath.type](args.contentTypePath.contentId);
+
+    const baseSeo = {
+        title: fullTitle,
+        description: args.seo?.description || args.description,
+        urlPath: canonicalPath,
+    } satisfies Parameters<typeof setupSeo>[0];
+
+    setupSeo(baseSeo);
+
+    //
+    // SEO snippets
+    //
+
+    const seoSnippets = args.snippets?.filter((snippet) => snippet.seo);
+
+    if (!import.meta.client || !seoSnippets || seoSnippets.length === 0) {
+        return;
+    }
+
+    const route = useRoute();
+    const anchor = computed(() => route.hash.replace('#', ''));
+
+    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;
+
+            if (!snippet) {
+                setupSeo(baseSeo);
+                return;
+            }
+
+            const elementPhrase = await getElementPhrase(snippet.schemaName);
+            setupSeo({
+                title: `${snippet.title} [${elementPhrase.element_name}] - ${seoSiteTitle}`,
+                description: snippet.description || '',
+                urlPath: snippet.link,
+            });
+        },
+        { immediate: true },
+    );
+
+    onScopeDispose(() => stopWatch());
+}
+
+function setupSeo(seo: {
+    title: string;
+    description?: string;
+    urlPath: string;
+}) {
+    function seoNormalize(text: string): string;
+    function seoNormalize(text: undefined): undefined;
+    function seoNormalize(text: string | undefined): string | undefined;
+    function seoNormalize(text?: string): string | undefined {
+        return text?.replace(/\s+/g, ' ').trim();
+    }
+
+    const title = seoNormalize(formatText(seo.title));
+    const description = seoNormalize(formatText(seo?.description));
+
+    useHead({
+        link: [
+            {
+                key: 'canonical',
+                rel: 'canonical',
+                href: withFullUrl(seo.urlPath),
+            },
+        ],
+    });
+
+    useSeoMeta({
+        title,
+        description,
+        ogTitle: title,
+        ogDescription: description,
+        ogUrl: withFullUrl(seo.urlPath),
+    });
+}

package/app/composables/phrases.ts

@@ -1,81 +1,126 @@
-type PhraseCaller<T extends EruditPhraseId[]> = {
-    [K in T[number]]: EruditPhrases[K];
-};
-
-const payloadKey = 'language';
-
-interface LanguagePayload {
-    strPhrases: Partial<Record<EruditPhraseId, string>>;
-    strFunctions: Record<string, string>;
-}
-
-const functions: Record<string, Function> = {};
-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
-): Promise<PhraseCaller<T>> {
-    const nuxt = useNuxtApp();
-    const payload: LanguagePayload =
-        (nuxt.static.data[payloadKey] ||=
-        nuxt.payload.data[payloadKey] ||=
-            {});
-
-    const prerenderAllPromise = prerenderAllPhrases();
-    const prepareFunctionsPromise = prepareFunctions(payload);
-
-    return (async () => {
-        await prerenderAllPromise;
-        await prepareFunctionsPromise;
-
-        payload.strPhrases ||= {};
-        const phraseCaller: any = {};
-
-        for (const phraseId of phraseIds) {
-            const apiRoute = phraseApiRoute(phraseId);
-            const strPhrase = (payload.strPhrases[phraseId] ||= (await $fetch(
-                apiRoute,
-                { responseType: 'text' },
-            )) as string);
-
-            if (strPhrase.startsWith('~!~FUNC~!~')) {
-                const strFunction = strPhrase.replace('~!~FUNC~!~', '');
-                functionPhrases[phraseId] ||= new Function(strFunction).bind(
-                    functions,
-                )();
-                phraseCaller[phraseId] = functionPhrases[phraseId];
-            } else {
-                phraseCaller[phraseId] = strPhrase;
-            }
-        }
-
-        return phraseCaller as PhraseCaller<T>;
-    })();
-}
-
-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;
-
-    payload.strFunctions = await $fetch(functionsApiRoute);
-
-    for (const [funcName, strFunc] of Object.entries(payload.strFunctions))
-        functions[funcName] = new Function(strFunc)();
-}
+type PayloadLanguage = {
+    phrases: Partial<Record<LanguagePhraseKey, PayloadLanguagePhraseValue>>;
+    functions?: Record<string, string>;
+};
+
+type PhraseCaller<T extends readonly LanguagePhraseKey[]> = {
+    [K in T[number]]: LanguagePhrases[K];
+};
+
+const initialPayloadLanguage = {
+    phrases: {},
+    functions: undefined,
+};
+
+//
+// "functions" and "phrases" exist both on server and client side
+// On server side they serve as module-cache
+// On client side they act as singletons for whole Nuxt App
+// This is okay because language can't be changed after server initialization
+//
+
+let functions: Record<string, Function> | undefined = undefined;
+const phrases: Partial<LanguagePhrases> = {};
+
+export function usePhrases<const T extends readonly LanguagePhraseKey[]>(
+    ...phraseKeys: T
+): Promise<PhraseCaller<T>> {
+    const nuxtApp = useNuxtApp();
+    const payloadKey = 'raw-language';
+    const payloadLanguage: PayloadLanguage =
+        (nuxtApp.static.data[payloadKey] ||=
+        nuxtApp.payload.data[payloadKey] ||=
+            initialPayloadLanguage);
+
+    const ensureFunctionsInPayload = async () => {
+        if (payloadLanguage.functions) {
+            return;
+        }
+
+        const strFunctions = await $fetch<Record<string, string>>(
+            '/api/language/functions',
+        );
+
+        payloadLanguage.functions = strFunctions;
+    };
+
+    const restoreFunctionsFromPayload = async () => {
+        if (functions) {
+            return;
+        }
+
+        functions = {};
+        for (const [funcName, funcBody] of Object.entries(
+            payloadLanguage.functions!,
+        )) {
+            functions[funcName] = new Function('return ' + funcBody)();
+        }
+    };
+
+    const processPhrase = async (phraseKey: LanguagePhraseKey) => {
+        const phraseInPayload = payloadLanguage.phrases[phraseKey];
+        const phraseRestored = phrases[phraseKey];
+
+        let payloadPhraseValue: PayloadLanguagePhraseValue;
+
+        if (phraseInPayload) {
+            payloadPhraseValue = phraseInPayload;
+        } else {
+            try {
+                payloadPhraseValue = await $fetch<PayloadLanguagePhraseValue>(
+                    `/api/language/phrase/${phraseKey}`,
+                    {
+                        responseType: 'json',
+                    },
+                );
+
+                payloadLanguage.phrases[phraseKey] = payloadPhraseValue;
+            } catch {
+                throw createError({
+                    statusCode: 503,
+                    statusMessage: 'Service Unavailable',
+                    message: `Failed to fetch phrase "${phraseKey}"!`,
+                });
+            }
+        }
+
+        if (payloadPhraseValue.type === 'missing') {
+            throw createError({
+                statusCode: 404,
+                statusMessage: 'Unknown phrase!',
+                message: `There is no phrase with key "${phraseKey}"!`,
+            });
+        }
+
+        if (phraseRestored) {
+            return;
+        }
+
+        switch (payloadPhraseValue.type) {
+            case 'string':
+                phrases[phraseKey] = payloadPhraseValue.value as any;
+                break;
+            case 'function':
+                phrases[phraseKey] = new Function(
+                    'funcs',
+                    `
+                            with (funcs) {
+                                return ${payloadPhraseValue.value};
+                            }
+                        `,
+                )(functions!);
+                break;
+        }
+    };
+
+    return Promise.resolve()
+        .then(ensureFunctionsInPayload)
+        .then(restoreFunctionsFromPayload)
+        .then(() =>
+            phraseKeys.reduce<Promise<void>>(
+                (p, key) => p.then(() => processPhrase(key)),
+                Promise.resolve(),
+            ),
+        )
+        .then(() => phrases as PhraseCaller<T>);
+}

package/app/composables/preview.ts

@@ -0,0 +1,53 @@
+export const usePreview = () => {
+    const previewState = useState<PreviewState>('preview', () => ({
+        opened: false,
+        request: undefined,
+        history: [],
+        blink: 0,
+    }));
+
+    const hasPreviousRequest = computed(
+        () => previewState.value.history.length > 0,
+    );
+
+    function setPreview(request: PreviewRequest) {
+        if (toStringEqual(request, previewState.value.request)) {
+            if (previewState.value.opened) {
+                previewState.value.blink += 1;
+            } else {
+                previewState.value.opened = true;
+            }
+            return;
+        }
+
+        if (previewState.value.request) {
+            previewState.value.history.push(previewState.value.request);
+        }
+
+        previewState.value.request = request;
+        previewState.value.opened = true;
+    }
+
+    function setPreviousPreview() {
+        if (!hasPreviousRequest.value) {
+            return;
+        }
+
+        previewState.value.request = previewState.value.history.pop();
+        previewState.value.opened = true;
+    }
+
+    function closePreview() {
+        previewState.value.opened = false;
+        previewState.value.request = undefined;
+        previewState.value.history = [];
+    }
+
+    return {
+        previewState,
+        hasPreviousRequest,
+        setPreview,
+        setPreviousPreview,
+        closePreview,
+    };
+};

package/app/composables/route.ts

@@ -0,0 +1,4 @@
+export function useRoutePath() {
+    const route = useRoute();
+    return computed(() => slasher(route.path, { trailing: true }));
+}