erudit 3.0.0-dev.2 → 3.0.0-dev.20

package/app/composables/contentData.ts

@@ -1,36 +1,38 @@
-import type { ContentData } from '@shared/content/data';
-
-export function useContentData<T extends ContentData>() {
-    const nuxtApp = useNuxtApp();
-    const contentRoute = useContentRoute();
-
-    const payloadKey = 'content-data';
-    const payload =
-        (nuxtApp.static.data[payloadKey] ||=
-        nuxtApp.payload.data[payloadKey] ||=
-            {});
-
-    const data = ref<T>();
-    let promise: Promise<typeof data> | undefined;
-
-    watchEffect(() => {
-        // @ts-ignore
-        promise = (async () => {
-            if (!contentRoute.value) {
-                data.value = undefined;
-                return;
-            }
-
-            const contentId = contentRoute.value.contentId;
-
-            const payloadValue = (payload[contentId] ||= await $fetch(
-                '/api/content/data',
-                { query: { contentId } },
-            ));
-            data.value = payloadValue as T;
-            return data;
-        })();
-    });
-
-    return promise as any as Promise<Ref<T>>;
-}
+import { trailingSlash } from '@erudit/utils/slash';
+import type { ContentData } from '@shared/content/data';
+
+export function useContentData<T extends ContentData>() {
+    const nuxtApp = useNuxtApp();
+    const contentRoute = useContentRoute();
+
+    const payloadKey = 'content-data';
+    const payload =
+        (nuxtApp.static.data[payloadKey] ||=
+        nuxtApp.payload.data[payloadKey] ||=
+            {});
+
+    const data = ref<T>();
+    let promise: Promise<typeof data> | undefined;
+
+    watchEffect(() => {
+        // @ts-ignore
+        promise = (async () => {
+            if (!contentRoute.value) {
+                data.value = undefined;
+                return;
+            }
+
+            const dataKey = trailingSlash(contentRoute.value.contentId, false);
+
+            const payloadValue = (payload[dataKey] ||= await $fetch(
+                '/api/content/data',
+                { query: { contentId: dataKey } },
+            ));
+
+            data.value = payloadValue as T;
+            return data;
+        })();
+    });
+
+    return promise as any as Promise<Ref<T>>;
+}

package/app/composables/contentPage.ts

@@ -1,156 +1,168 @@
-import eruditConfig from '#erudit/config';
-
-import { createOgImageTags, defaultOgImage } from '@app/scripts/og';
-import type { ContentData } from '@shared/content/data';
-
-export function useContentPage(contentData: Ref<ContentData>) {
-    const contentRoute = useContentRoute();
-    const siteUrl = useSiteUrl();
-    const favicon = useFavicon();
-
-    const phrasePromise = usePhrases(
-        'article',
-        'summary',
-        'practice',
-        'site_info_title',
-        'seo_article_description',
-        'seo_summary_description',
-        'seo_practice_description',
-    );
-
-    //
-    // Favicon
-    //
-
-    const contentFavicon = () => {
-        setTimeout(() => {
-            const newFavicon = (() => {
-                switch (contentRoute.value?.type) {
-                    case 'topic':
-                        const topicPart = contentRoute.value.topicPart;
-                        return (
-                            eruditConfig.site?.favicon?.[topicPart] ||
-                            eruditAsset(`favicon/${topicPart}.svg`)
-                        );
-                }
-
-                return defaultFavicon;
-            })();
-
-            favicon.value = newFavicon;
-        }, 500);
-    };
-
-    //
-    // SEO
-    //
-
-    let seoTitlePromise: Promise<void>, seoDescriptionPromise: Promise<void>;
-
-    const seo = {
-        title: ref<string>(),
-        description: ref<string>(),
-    };
-
-    const setupSeoTitle = () => {
-        seoTitlePromise = (async () => {
-            const phrase = await phrasePromise;
-
-            let title: string = '';
-            title +=
-                contentData.value.generic?.seo?.title ||
-                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]}`;
-            }
-
-            title +=
-                ' - ' + eruditConfig.seo?.title ||
-                eruditConfig.site?.title ||
-                phrase.site_info_title;
-
-            seo.title.value = title;
-        })();
-    };
-
-    const setupSeoDescription = () => {
-        seoDescriptionPromise = (async () => {
-            const phrase = await phrasePromise;
-            const customDescription =
-                contentData.value.generic?.seo?.description ||
-                contentData.value.generic?.description;
-
-            if (customDescription) {
-                seo.description.value = customDescription;
-                return;
-            }
-
-            if (contentRoute.value!.type === 'topic') {
-                const phraseFunc =
-                    phrase[`seo_${contentRoute.value!.topicPart}_description`];
-                seo.description.value = phraseFunc(
-                    contentData.value.generic?.seo?.title ||
-                        contentData.value.generic.title!,
-                );
-                return;
-            }
-
-            seo.description.value = '';
-        })();
-    };
-
-    useSeoMeta({
-        // @ts-ignore
-        title: seo.title,
-        ogTitle: seo.title,
-        description: seo.description,
-        ogDescription: seo.description,
-    });
-
-    const meta = computed(() => {
-        return [
-            ...createOgImageTags(siteUrl, defaultOgImage),
-            ...(contentData.value.generic?.ogImage
-                ? createOgImageTags(siteUrl, contentData.value.generic?.ogImage)
-                : []),
-        ];
-    });
-
-    useHead({
-        meta,
-    });
-
-    //
-    //
-    //
-
-    watchEffect(() => {
-        setupSeoTitle();
-        setupSeoDescription();
-    });
-
-    onMounted(() => {
-        watchEffect(() => {
-            contentFavicon();
-        });
-    });
-
-    onBeforeUnmount(() => {
-        favicon.value = defaultFavicon;
-    });
-
-    //
-    //
-    //
-
-    return Promise.all([seoTitlePromise!, seoDescriptionPromise!]);
-}
+import eruditConfig from '#erudit/config';
+
+import { createOgImageTags, defaultOgImage } from '@app/scripts/og';
+import type { ContentData } from '@shared/content/data';
+
+export function useContentPage(contentData: Ref<ContentData>) {
+    const contentRoute = useContentRoute();
+    const siteUrl = useSiteUrl();
+    const favicon = useFavicon();
+
+    const phrasePromise = usePhrases(
+        'article',
+        'summary',
+        'practice',
+        'site_info_title',
+        'seo_article_description',
+        'seo_summary_description',
+        'seo_practice_description',
+    );
+
+    //
+    // Favicon
+    //
+
+    const contentFavicon = () => {
+        setTimeout(() => {
+            const newFavicon = (() => {
+                switch (contentRoute.value?.type) {
+                    case 'topic':
+                        const topicPart = contentRoute.value.topicPart;
+                        return (
+                            eruditConfig.site?.favicon?.[topicPart] ||
+                            eruditAsset(`favicon/${topicPart}.svg`)
+                        );
+                }
+
+                return defaultFavicon;
+            })();
+
+            favicon.value = newFavicon;
+        }, 500);
+    };
+
+    //
+    // SEO
+    //
+
+    let seoTitlePromise: Promise<void>, seoDescriptionPromise: Promise<void>;
+
+    const seo = {
+        title: ref<string>(),
+        description: ref<string>(),
+    };
+
+    const setupSeoTitle = () => {
+        seoTitlePromise = (async () => {
+            const phrase = await phrasePromise;
+
+            let title: string = '';
+            title +=
+                contentData.value.generic?.seo?.title ||
+                contentData.value.generic.title ||
+                contentData.value.generic.contentId.split('/').pop();
+
+            if (contentRoute.value!.type === 'topic') {
+                const topicPart = contentRoute.value!.topicPart;
+                if (topicPart !== 'article') title += ` | ${phrase[topicPart]}`;
+            }
+
+            // Add book title in the middle section only if not using it as the site title
+            if (
+                contentData.value.type !== 'book' &&
+                contentData.value?.bookTitle &&
+                !eruditConfig.content?.bookSiteTitle
+            ) {
+                title += ` | ${contentData.value.bookTitle}`;
+            }
+
+            // Choose the site title based on configuration
+            const siteTitle =
+                contentData.value.type !== 'book' &&
+                eruditConfig.content?.bookSiteTitle &&
+                contentData.value?.bookTitle
+                    ? contentData.value.bookTitle
+                    : eruditConfig.seo?.title ||
+                      eruditConfig.site?.title ||
+                      phrase.site_info_title;
+
+            title += ' - ' + siteTitle;
+
+            seo.title.value = title;
+        })();
+    };
+
+    const setupSeoDescription = () => {
+        seoDescriptionPromise = (async () => {
+            const phrase = await phrasePromise;
+            const customDescription =
+                contentData.value.generic?.seo?.description ||
+                contentData.value.generic?.description;
+
+            if (customDescription) {
+                seo.description.value = customDescription
+                    .trim()
+                    .replace(/\n/g, ' ');
+                return;
+            }
+
+            if (contentRoute.value!.type === 'topic') {
+                const phraseFunc =
+                    phrase[`seo_${contentRoute.value!.topicPart}_description`];
+                seo.description.value = phraseFunc(
+                    contentData.value.generic?.seo?.title ||
+                        contentData.value.generic.title!,
+                );
+                return;
+            }
+
+            seo.description.value = '';
+        })();
+    };
+
+    useSeoMeta({
+        // @ts-ignore
+        title: seo.title,
+        ogTitle: seo.title,
+        description: seo.description,
+        ogDescription: seo.description,
+    });
+
+    const meta = computed(() => {
+        return [
+            ...createOgImageTags(siteUrl, defaultOgImage),
+            ...(contentData.value.generic?.ogImage
+                ? createOgImageTags(siteUrl, contentData.value.generic?.ogImage)
+                : []),
+        ];
+    });
+
+    useHead({
+        meta,
+    });
+
+    //
+    //
+    //
+
+    watchEffect(() => {
+        setupSeoTitle();
+        setupSeoDescription();
+    });
+
+    onMounted(() => {
+        watchEffect(() => {
+            contentFavicon();
+        });
+    });
+
+    onBeforeUnmount(() => {
+        favicon.value = defaultFavicon;
+    });
+
+    //
+    //
+    //
+
+    return Promise.all([seoTitlePromise!, seoDescriptionPromise!]);
+}

package/app/composables/contentRoute.ts

@@ -1,45 +1,45 @@
-import type { ContentType, TopicPart } from 'erudit-cog/schema';
-
-interface ContentRouteBase {
-    type: ContentType;
-    contentId: string;
-}
-
-interface TopicRoute extends ContentRouteBase {
-    type: 'topic';
-    topicPart: TopicPart;
-}
-
-interface ContentRoute extends ContentRouteBase {
-    type: Exclude<ContentType, 'topic'>;
-}
-
-export function useContentRoute(): ComputedRef<
-    TopicRoute | ContentRoute | undefined
-> {
-    const route = useRoute();
-    return computed(() => {
-        const match = route.path.match(/\/(.+?)\/(.+)/);
-
-        if (!match || !match[1] || !match[2]) return undefined;
-
-        switch (match[1]) {
-            case 'article':
-            case 'summary':
-            case 'practice':
-                return <TopicRoute>{
-                    type: 'topic',
-                    contentId: match[2],
-                    topicPart: match[1],
-                };
-            case 'group':
-            case 'book':
-                return <ContentRoute>{
-                    type: match[1],
-                    contentId: match[2],
-                };
-        }
-
-        return undefined;
-    });
-}
+import type { ContentType, TopicPart } from '@erudit-js/cog/schema';
+
+interface ContentRouteBase {
+    type: ContentType;
+    contentId: string;
+}
+
+interface TopicRoute extends ContentRouteBase {
+    type: 'topic';
+    topicPart: TopicPart;
+}
+
+interface ContentRoute extends ContentRouteBase {
+    type: Exclude<ContentType, 'topic'>;
+}
+
+export function useContentRoute(): ComputedRef<
+    TopicRoute | ContentRoute | undefined
+> {
+    const route = useRoute();
+    return computed(() => {
+        const match = route.path.match(/\/(.+?)\/(.+)/);
+
+        if (!match || !match[1] || !match[2]) return undefined;
+
+        switch (match[1]) {
+            case 'article':
+            case 'summary':
+            case 'practice':
+                return <TopicRoute>{
+                    type: 'topic',
+                    contentId: match[2],
+                    topicPart: match[1],
+                };
+            case 'group':
+            case 'book':
+                return <ContentRoute>{
+                    type: match[1],
+                    contentId: match[2],
+                };
+        }
+
+        return undefined;
+    });
+}

package/app/composables/darkMagic.ts

@@ -1,24 +1,24 @@
-declare let Ya: any;
-
-const getElementId = (bannerId: string) => {
-    return `DarkMagic_${bannerId}`;
-};
-
-const registerBanner = (bannerId: string) => {
-    const { binaryTheme } = useTheme();
-
-    (window['yaContextCb'] ||= []).push(() => {
-        Ya.Context.AdvManager.render({
-            renderTo: getElementId(bannerId),
-            blockId: bannerId,
-            darkTheme: binaryTheme.value === 'dark',
-        });
-    });
-};
-
-export function useDarkMagic() {
-    return {
-        getElementId,
-        registerBanner,
-    };
-}
+declare let Ya: any;
+
+const getElementId = (bannerId: string) => {
+    return `DarkMagic_${bannerId}`;
+};
+
+const registerBanner = (bannerId: string) => {
+    const { binaryTheme } = useTheme();
+
+    (window['yaContextCb'] ||= []).push(() => {
+        Ya.Context.AdvManager.render({
+            renderTo: getElementId(bannerId),
+            blockId: bannerId,
+            darkTheme: binaryTheme.value === 'dark',
+        });
+    });
+};
+
+export function useDarkMagic() {
+    return {
+        getElementId,
+        registerBanner,
+    };
+}