erudit 3.0.0-dev.2 → 3.0.0-dev.21

package/app/composables/phrases.ts

@@ -1,80 +1,77 @@
-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,
-            )) 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 PhraseCaller<T extends EruditPhraseId[]> = {
+    [K in T[number]]: EruditPhrases[K];
+};
+
+const payloadKey = 'language';
+
+interface LanguagePayload {
+    strPhrases: Partial<Record<EruditPhraseId, string>>;
+    strFunctions: Record<string, string>;
+}
+
+let functions: Record<string, Function>;
+const functionPhrases: Record<string, Function> = {};
+
+const phraseApiRoute = (phraseId: EruditPhraseId) =>
+    `/api/language/phrase/${phraseId}`;
+const functionsApiRoute = '/api/language/functions';
+
+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 prepareFunctionsPromise = prepareFunctions(payload);
+
+    return (async () => {
+        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(
+                    'funcs',
+                    `
+                    with(funcs) {
+                        ${strFunction}
+                    }
+                `,
+                )(functions);
+                phraseCaller[phraseId] = functionPhrases[phraseId];
+            } else {
+                phraseCaller[phraseId] = strPhrase;
+            }
+        }
+
+        return phraseCaller as PhraseCaller<T>;
+    })();
+}
+
+async function prepareFunctions(payload: LanguagePayload) {
+    payload.strFunctions ||= await $fetch(functionsApiRoute, {
+        responseType: 'json',
+    });
+
+    functions ||= (() => {
+        const _functions: Record<string, Function> = {};
+        for (const [funcName, strFunc] of Object.entries(
+            payload.strFunctions,
+        )) {
+            _functions[funcName] = new Function(strFunc)();
+        }
+        return _functions;
+    })();
+}

package/app/composables/theme.ts

@@ -1,29 +1,29 @@
-const themes = ['auto', 'light', 'dark'] as const;
-
-export type Theme = (typeof themes)[number];
-export type BinaryTheme = 'light' | 'dark';
-
-export function useTheme() {
-    const theme = useState<Theme>('theme', () => {
-        return localStorage.getItem('theme') ?? ('auto' as any);
-    });
-
-    const binaryTheme = computed(() => {
-        return theme.value === 'auto'
-            ? window.matchMedia('(prefers-color-scheme: dark)').matches
-                ? 'dark'
-                : 'light'
-            : theme.value;
-    });
-
-    const cycle = () => {
-        theme.value =
-            themes[(themes.indexOf(theme.value) + 1) % themes.length]!;
-    };
-
-    return {
-        theme,
-        binaryTheme,
-        cycle,
-    };
-}
+const themes = ['auto', 'light', 'dark'] as const;
+
+export type Theme = (typeof themes)[number];
+export type BinaryTheme = 'light' | 'dark';
+
+export function useTheme() {
+    const theme = useState<Theme>('theme', () => {
+        return localStorage.getItem('theme') ?? ('auto' as any);
+    });
+
+    const binaryTheme = computed(() => {
+        return theme.value === 'auto'
+            ? window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : 'light'
+            : theme.value;
+    });
+
+    const cycle = () => {
+        theme.value =
+            themes[(themes.indexOf(theme.value) + 1) % themes.length]!;
+    };
+
+    return {
+        theme,
+        binaryTheme,
+        cycle,
+    };
+}

package/app/composables/url.ts

@@ -1,33 +1,43 @@
-import eruditConfig from '#erudit/config';
-
-export function useBaseUrlPath() {
-    const runtimeConfig = useRuntimeConfig();
-    return (path: string) => {
-        const baseURL = runtimeConfig.app.baseURL;
-        if (path.startsWith(baseURL)) return path;
-        else if (path.startsWith('/')) return baseURL + path.substring(1);
-        else return path;
-    };
-}
-
-export function useSiteUrl() {
-    const runtimeConfig = useRuntimeConfig();
-    const baseUrl = runtimeConfig.app.baseURL;
-    const url = useRequestURL();
-
-    if (!import.meta.dev && eruditConfig.site?.buildUrl)
-        return eruditConfig.site.buildUrl + baseUrl.slice(0, -1);
-
-    return url.origin;
-}
-
-export function usePageUrl() {
-    const siteUrl = useSiteUrl();
-    const route = useRoute();
-
-    return computed(() => {
-        if (route.path === '/') return siteUrl;
-
-        return siteUrl + route.path;
-    });
-}
+import eruditConfig from '#erudit/config';
+import { trailingSlash, normalizeUrl } from '@erudit/utils/url';
+
+export function useBaseUrlPath() {
+    const runtimeConfig = useRuntimeConfig();
+    const baseURL = runtimeConfig.app.baseURL;
+
+    return (path: string) => {
+        const normalizedPath = normalizeUrl(path);
+
+        if (normalizedPath.startsWith(baseURL)) {
+            return normalizedPath;
+        }
+
+        if (normalizedPath.startsWith('/')) {
+            return normalizeUrl(baseURL + normalizedPath.substring(1));
+        }
+
+        return normalizedPath;
+    };
+}
+
+export function useSiteUrl() {
+    const runtimeConfig = useRuntimeConfig();
+    const baseUrl = runtimeConfig.app.baseURL;
+    const url = useRequestURL();
+
+    if (!import.meta.dev && eruditConfig.site?.buildUrl)
+        return eruditConfig.site.buildUrl + baseUrl.slice(0, -1);
+
+    return normalizeUrl(trailingSlash(url.origin, true));
+}
+
+export function usePageUrl() {
+    const siteUrl = useSiteUrl();
+    const route = useRoute();
+
+    return computed(() => {
+        if (route.path === '/') return siteUrl;
+        const fullUrl = siteUrl + route.path;
+        return normalizeUrl(trailingSlash(fullUrl, true));
+    });
+}

package/app/pages/_test/preview.vue

@@ -1,110 +1,110 @@
-<script lang="ts" setup>
-import { PreviewDataType } from '@app/scripts/preview/data';
-import { createPreviewError } from '@app/scripts/preview/data/alert';
-import { PreviewRequestType } from '@app/scripts/preview/request';
-import {
-    PreviewThemeName,
-    showPreview,
-    togglePreview,
-} from '@app/scripts/preview/state';
-
-function showCustom() {
-    showPreview({
-        type: PreviewRequestType.Data,
-        data: {
-            type: PreviewDataType.Custom,
-            message: 'This is custom message for preview!',
-            footer: {
-                //iconName: 'arrow-left',
-                iconSvg:
-                    '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.42436 0H9.57565L14.995 16H11.8276L10.8115 13H5.18855L4.17242 16H1.005L6.42436 0ZM6.20468 10H9.79533L8 4.69952L6.20468 10Z"></path> </g></svg>',
-                secondary: 'Secondary raw text',
-                primary: 'Primary raw text',
-                href: 'https://google.com',
-            },
-        },
-    });
-}
-
-function showAlert(theme: PreviewThemeName) {
-    showPreview({
-        type: PreviewRequestType.Data,
-        data: createPreviewError({
-            theme,
-            message: 'This is message!',
-            title: 'Custom Title',
-            pre: JSON.stringify(
-                {
-                    foo: 1337,
-                    bar: 'Some text',
-                },
-                null,
-                4,
-            ),
-        }),
-    });
-}
-</script>
-
-<template>
-    <button @click="() => togglePreview()">Toggle Preview</button>
-    <div>
-        Show:
-        <br />
-        <button :class="$style.button" @click="showCustom">Custom</button>
-        <br />
-        <button
-            :class="$style.button"
-            v-for="theme in PreviewThemeName"
-            @click="() => showAlert(theme)"
-        >
-            Alert {{ theme }}
-        </button>
-        <br />
-        <button
-            :class="$style.button"
-            @click="
-                showPreview({
-                    type: PreviewRequestType.MissingElement,
-                    elementId: 'foo-id',
-                })
-            "
-        >
-            Missing element
-        </button>
-        <button
-            :class="$style.button"
-            @click="
-                showPreview({
-                    type: PreviewRequestType.MissingElement,
-                    elementId: 'foo-id',
-                    hashMismatch: { current: 'bar', expected: 'baz' },
-                })
-            "
-        >
-            Missing element + hash mismatch
-        </button>
-        <br />
-        <button
-            :class="$style.button"
-            @click="
-                showPreview({
-                    type: PreviewRequestType.HashMismatch,
-                    currentHash: 'foo',
-                    expectedHash: 'bar',
-                })
-            "
-        >
-            Hash mismatch
-        </button>
-    </div>
-</template>
-
-<style lang="scss" module>
-.button {
-    border: 2px solid var(--border);
-    border-radius: 3px;
-    padding: 3px;
-    margin: 3px;
-}
-</style>
+<script lang="ts" setup>
+import { PreviewDataType } from '@app/scripts/preview/data';
+import { createPreviewError } from '@app/scripts/preview/data/alert';
+import { PreviewRequestType } from '@app/scripts/preview/request';
+import {
+    PreviewThemeName,
+    showPreview,
+    togglePreview,
+} from '@app/scripts/preview/state';
+
+function showCustom() {
+    showPreview({
+        type: PreviewRequestType.Data,
+        data: {
+            type: PreviewDataType.Custom,
+            message: 'This is custom message for preview!',
+            footer: {
+                //iconName: 'arrow-left',
+                iconSvg:
+                    '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.42436 0H9.57565L14.995 16H11.8276L10.8115 13H5.18855L4.17242 16H1.005L6.42436 0ZM6.20468 10H9.79533L8 4.69952L6.20468 10Z"></path> </g></svg>',
+                secondary: 'Secondary raw text',
+                primary: 'Primary raw text',
+                href: 'https://google.com',
+            },
+        },
+    });
+}
+
+function showAlert(theme: PreviewThemeName) {
+    showPreview({
+        type: PreviewRequestType.Data,
+        data: createPreviewError({
+            theme,
+            message: 'This is message!',
+            title: 'Custom Title',
+            pre: JSON.stringify(
+                {
+                    foo: 1337,
+                    bar: 'Some text',
+                },
+                null,
+                4,
+            ),
+        }),
+    });
+}
+</script>
+
+<template>
+    <button @click="() => togglePreview()">Toggle Preview</button>
+    <div>
+        Show:
+        <br />
+        <button :class="$style.button" @click="showCustom">Custom</button>
+        <br />
+        <button
+            :class="$style.button"
+            v-for="theme in PreviewThemeName"
+            @click="() => showAlert(theme)"
+        >
+            Alert {{ theme }}
+        </button>
+        <br />
+        <button
+            :class="$style.button"
+            @click="
+                showPreview({
+                    type: PreviewRequestType.MissingElement,
+                    elementId: 'foo-id',
+                })
+            "
+        >
+            Missing element
+        </button>
+        <button
+            :class="$style.button"
+            @click="
+                showPreview({
+                    type: PreviewRequestType.MissingElement,
+                    elementId: 'foo-id',
+                    hashMismatch: { current: 'bar', expected: 'baz' },
+                })
+            "
+        >
+            Missing element + hash mismatch
+        </button>
+        <br />
+        <button
+            :class="$style.button"
+            @click="
+                showPreview({
+                    type: PreviewRequestType.HashMismatch,
+                    currentHash: 'foo',
+                    expectedHash: 'bar',
+                })
+            "
+        >
+            Hash mismatch
+        </button>
+    </div>
+</template>
+
+<style lang="scss" module>
+.button {
+    border: 2px solid var(--border);
+    border-radius: 3px;
+    padding: 3px;
+    margin: 3px;
+}
+</style>

package/app/pages/article/[...articleId].vue

@@ -1,3 +1,3 @@
-<template>
-    <MainTopic />
-</template>
+<template>
+    <MainTopic />
+</template>

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

@@ -1,47 +1,42 @@
-<script lang="ts" setup>
-import type { ContentBookData } from '@erudit/shared/content/data/type/book';
-import type { MyIconName } from '#my-icons';
-
-import ContentDecoration from '@app/components/main/utils/ContentDecoration.vue';
-import Breadcrumb from '@app/components/main/utils/Breadcrumb.vue';
-import ContentTitle from '@app/components/main/utils/ContentTitle.vue';
-import ContentDescription from '@app/components/main/utils/ContentDescription.vue';
-import ContentPopovers from '@app/components/main/utils/ContentPopovers.vue';
-
-const bookData = await useContentData<ContentBookData>();
-await useContentPage(bookData);
-
-const phrase = await usePhrases('book');
-</script>
-
-<template>
-    <ContentDecoration
-        v-if="bookData.generic.decoration"
-        :decoration="bookData.generic.decoration"
-    />
-
-    <Breadcrumb
-        v-if="bookData.generic.context?.length > 1"
-        :context="bookData.generic.context"
-    />
-
-    <ContentTitle
-        :title="
-            bookData.generic?.title ||
-            bookData.generic.contentId.split('/').pop()!
-        "
-        :icon="<MyIconName>'outline/book'"
-        :hint="phrase.book"
-    />
-
-    <ContentDescription
-        v-if="bookData.generic?.description"
-        :description="bookData.generic?.description"
-    />
-
-    <ContentPopovers :generic="bookData.generic" />
-
-    <!-- Counters, fancy "GO LEARN" button and etc. -->
-
-    <div style="clear: both"></div>
-</template>
+<script lang="ts" setup>
+import type { ContentBookData } from '@erudit/shared/content/data/type/book';
+import type { MyIconName } from '#my-icons';
+
+import ContentBreadcrumb from '@app/components/main/content/ContentBreadcrumb.vue';
+import ContentDecoration from '@app/components/main/content/ContentDecoration.vue';
+import ContentPopovers from '@app/components/main/content/ContentPopovers.vue';
+
+const bookData = await useContentData<ContentBookData>();
+await useContentPage(bookData);
+
+const phrase = await usePhrases('book');
+</script>
+
+<template>
+    <ContentDecoration
+        v-if="bookData.generic.decoration"
+        :decoration="bookData.generic.decoration"
+    />
+
+    <ContentBreadcrumb :context="bookData.generic.context" />
+
+    <MainTitle
+        :title="
+            bookData.generic?.title ||
+            bookData.generic.contentId.split('/').pop()!
+        "
+        :icon="<MyIconName>'outline/book'"
+        :hint="phrase.book"
+    />
+
+    <MainDescription
+        v-if="bookData.generic?.description"
+        :description="bookData.generic?.description"
+    />
+
+    <ContentPopovers :generic="bookData.generic" />
+
+    <!-- Counters, fancy "GO LEARN" button and etc. -->
+
+    <div style="clear: both"></div>
+</template>