erudit 4.0.0-dev.3 → 4.0.0-dev.5

package/app/composables/og.ts

@@ -1,182 +1,184 @@
-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);
-
-            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;
-                }
-            })();
-
-            setupSeo({
-                title: `${title} [${elementPhrase.element_name}] - ${seoSiteTitle}`,
-                description: 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),
-    });
-}
+import type { ContentSeo } from '@erudit-js/core/content/seo';
+
+export function initOgImage() {
+  const withSiteUrl = useSiteUrl();
+
+  const fallbackOgImage = {
+    src: eruditPublic('og.png'),
+    width: 500,
+    height: 500,
+  };
+
+  const ogImage = ERUDIT.config.seo?.image || fallbackOgImage;
+  useSeoMeta({
+    ogImage: {
+      url: withSiteUrl(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.seo?.siteTitle || ERUDIT.config.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.seo?.useBookSiteTitle;
+
+  const seoSiteTitle =
+    canUseBookTitle && args.bookTitle
+      ? args.bookTitle
+      : ERUDIT.config.seo?.siteTitle ||
+        ERUDIT.config.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);
+
+      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;
+        }
+      })();
+
+      setupSeo({
+        title: `${title} [${elementPhrase.element_name}] - ${seoSiteTitle}`,
+        description: description || '',
+        urlPath: snippet.link,
+      });
+    },
+    { immediate: true },
+  );
+
+  onScopeDispose(() => stopWatch());
+}
+
+function setupSeo(seo: {
+  title: string;
+  description?: string;
+  urlPath: string;
+}) {
+  const withSiteUrl = useSiteUrl();
+
+  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: withSiteUrl(seo.urlPath),
+      },
+    ],
+  });
+
+  useSeoMeta({
+    title,
+    description,
+    ogTitle: title,
+    ogDescription: description,
+    ogUrl: withSiteUrl(seo.urlPath),
+  });
+}

package/app/composables/phrases.ts

@@ -1,15 +1,15 @@
 type PayloadLanguage = {
-    phrases: Partial<Record<LanguagePhraseKey, PayloadLanguagePhraseValue>>;
-    functions?: Record<string, string>;
+  phrases: Partial<Record<LanguagePhraseKey, PayloadLanguagePhraseValue>>;
+  functions?: Record<string, string>;
 };
 
 type PhraseCaller<T extends readonly LanguagePhraseKey[]> = {
-    [K in T[number]]: LanguagePhrases[K];
+  [K in T[number]]: LanguagePhrases[K];
 };
 
 const initialPayloadLanguage = {
-    phrases: {},
-    functions: undefined,
+  phrases: {},
+  functions: undefined,
 };
 
 //
@@ -23,104 +23,104 @@ let functions: Record<string, Function> | undefined = undefined;
 const phrases: Partial<LanguagePhrases> = {};
 
 export function usePhrases<const T extends readonly LanguagePhraseKey[]>(
-    ...phraseKeys: T
+  ...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',
+  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.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',
-                    `
+        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>);
+        )(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>);
 }