erudit 2.0.0-dev.7

package/app/components/transition/Fade.vue

@@ -0,0 +1,22 @@
+<template>
+    <Transition name="EruditTransitionFade">
+        <slot></slot>
+    </Transition>
+</template>
+
+<style lang="scss">
+.EruditTransitionFade
+{
+    &-enter-active,
+    &-leave-active
+    {
+        transition: opacity var(--transitionSpeed) var(--transitionFunction);
+    }
+
+    &-enter-from,
+    &-leave-to
+    {
+        opacity: 0;
+    }
+}
+</style>

package/app/components/tree/TreeContainer.vue

@@ -0,0 +1,12 @@
+<template>
+    <div :class="$style.treeContainer">
+        <slot></slot>
+    </div>
+</template>
+
+<style lang="scss" module>
+.treeContainer
+{
+    padding: calc(var(--gap) / 2) 0;
+}
+</style>

package/app/components/tree/TreeItem.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+
+defineProps<{
+    label: string;
+    icon?: MyIconName;
+    svg?: string;
+    level?: number;
+    link?: string;
+    active?: boolean;
+    accent?: boolean;
+}>();
+</script>
+
+<template>
+    <NuxtLink
+        :prefetch="false"
+        :to="link"
+        :class="[
+            $style.treeItem,
+            active && $style.active,
+            accent && $style.accent,
+        ]"
+        :style="{ ['--_level']: level ?? 0 }"
+    >
+        <MyIcon v-if="icon" :class="$style.icon" :name="icon" />
+        <MyRuntimeIcon v-else :class="$style.icon" name="tree-item-icon" :svg />
+        <div :class="$style.main">{{ label }}</div>
+        <div v-if="$slots.default" :class="$style.after">
+            <slot></slot>
+        </div>
+    </NuxtLink>
+</template>
+
+<style lang="scss" module>
+.treeItem {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(var(--gap) / 1.6);
+    padding: calc(var(--gap) / 2) var(--gap);
+    padding-left: calc((var(--_level) + 1) * var(--gap));
+    font-size: 0.95em;
+    color: var(--textMuted);
+    text-decoration: none;
+    cursor: pointer;
+
+    @include transition(background);
+
+    &:hover {
+        background: var(--bgAccent);
+        .icon,
+        .main {
+            color: var(--text);
+        }
+    }
+
+    &.active {
+        .icon,
+        .main {
+            color: var(--brand);
+        }
+    }
+    &.accent {
+        .icon,
+        .main {
+            color: var(--text);
+        }
+    }
+
+    .icon,
+    .main {
+        @include transition(color);
+    }
+
+    .main {
+        flex: 1;
+    }
+
+    .icon,
+    .after {
+        flex-shrink: 0;
+    }
+
+    .icon {
+        font-size: 16px;
+    }
+}
+</style>

package/app/composables/bitran.ts

@@ -0,0 +1,132 @@
+import {
+    createBitranCore,
+    type GenericProductCore,
+    defaultProductCores,
+} from 'bitran/core';
+import {
+    createBitranRender,
+    createPhrase,
+    type ProductRender,
+    defaultProductRenders,
+} from 'bitran/render';
+
+import eruditConfig from '#erudit/config';
+import bitranConfig from '#erudit/client/bitran';
+import { BitranRenderWrapper } from '#components';
+import type { BitranContext } from '@erudit/shared/bitran/context';
+
+// Erudit Bitran Products
+import { headingName } from '@erudit/shared/bitran/products/heading/shared';
+import { heading as headingCore } from '@erudit/shared/bitran/products/heading/core';
+import { heading as headingRender } from '@erudit/shared/bitran/products/heading/render';
+import { aliasName } from '@erudit/shared/bitran/products/alias/shared';
+import { defineAlias as defineAliasCore } from '@erudit/shared/bitran/products/alias/core';
+import { alias as aliasRender } from '@erudit/shared/bitran/products/alias/render';
+import { includeName } from '@erudit/shared/bitran/products/include/shared';
+import { include as includeCore } from '@erudit/shared/bitran/products/include/core';
+import { include as includeRender } from '@erudit/shared/bitran/products/include/render';
+import { linkName } from '@erudit/shared/bitran/products/link/shared';
+import { link as linkCore } from '@erudit/shared/bitran/products/link/core';
+import { link as linkRender } from '@erudit/shared/bitran/products/link/render';
+
+export async function useBitran(context: BitranContext) {
+    /**
+     * TODO:
+     * Recreating all products every time make create a significant lag on Bitran content change.
+     * Cache products!
+     */
+
+    const formatText = useFormatText();
+
+    const bitranCore = createBitranCore({
+        products: await getProductCores(context),
+    });
+
+    const bitranRender = createBitranRender({
+        formatText,
+        products: await getProductRenders(),
+        RenderWrapper: BitranRenderWrapper,
+    });
+
+    return {
+        bitranCore,
+        bitranRender,
+    };
+}
+
+async function getProductCores(context: BitranContext) {
+    const projectProductCores: Record<string, GenericProductCore> = {};
+
+    for (const [name, definition] of Object.entries(
+        bitranConfig.products || {},
+    )) {
+        projectProductCores[name] = await definition.core();
+    }
+
+    const eruditProductCores: Record<string, GenericProductCore> = {
+        [aliasName]: defineAliasCore(context),
+        [includeName]: includeCore,
+        [headingName]: headingCore,
+        [linkName]: linkCore,
+    };
+
+    return {
+        ...projectProductCores,
+        ...eruditProductCores,
+        ...defaultProductCores,
+    };
+}
+
+let productRenders: Record<string, ProductRender>;
+
+async function getProductRenders() {
+    if (productRenders) return productRenders;
+
+    const projectProductRenders: Record<string, ProductRender> = {};
+
+    for (const [name, definition] of Object.entries(
+        bitranConfig.products || {},
+    )) {
+        projectProductRenders[name] = await definition.render();
+    }
+
+    const eruditProductRenders: Record<string, ProductRender> = {
+        [aliasName]: aliasRender,
+        [includeName]: includeRender,
+        [headingName]: headingRender,
+        [linkName]: linkRender,
+    };
+
+    productRenders = {
+        ...projectProductRenders,
+        ...eruditProductRenders,
+        ...defaultProductRenders,
+    };
+
+    return productRenders;
+}
+
+export async function useBitranProductRender(productName: string) {
+    const productRenders = await getProductRenders();
+    const productRender = productRenders[productName];
+
+    if (!productRender)
+        throw new Error(`Missing Bitran product render "${productName}"!`);
+
+    return productRender;
+}
+
+export async function useBitranProductIcon(productName: string) {
+    const productRender = await useBitranProductRender(productName);
+    if (productRender.icon) return await productRender.icon();
+    return '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><path fill="currentColor" fill-rule="evenodd" d="M448 64v384H64V64zM256 271.085L121.751 405.333h268.497zM106.666 121.751v268.497L240.915 256zm298.667 0L271.085 256l134.248 134.248zm-15.085-15.085H121.751L256 240.915z"/></svg>';
+}
+
+export async function useBitranProductLanguage(productName: string) {
+    const productRender = await useBitranProductRender(productName);
+    return await createPhrase(
+        eruditConfig?.language || 'en',
+        productRender.languages,
+        `erudit:${productName}`,
+    );
+}

package/app/composables/bitranContent.ts

@@ -0,0 +1,36 @@
+import type { ShallowRef } from 'vue';
+import type { BitranContent } from 'bitran';
+import {
+    encodeBitranLocation,
+    stringifyBitranLocation,
+    type BitranLocation,
+} from '@erudit/shared/bitran/location';
+
+export async function useBitranContent(
+    location: Ref<BitranLocation | undefined>,
+) {
+    const nuxtApp = useNuxtApp();
+    const content = shallowRef<BitranContent>();
+
+    let contentPromise: Promise<ShallowRef<BitranContent>>;
+
+    watchEffect(() => {
+        if (!location.value) {
+            // @ts-ignore
+            contentPromise = (() => {
+                content.value = undefined;
+                return content;
+            })();
+        }
+
+        const apiRoute = `/api/bitran/content/${encodeBitranLocation(stringifyBitranLocation(location.value!))}`;
+        nuxtApp.runWithContext(() => prerenderRoutes(apiRoute));
+        // @ts-ignore
+        contentPromise = (async () => {
+            content.value = (await $fetch(apiRoute)) as BitranContent;
+            return content;
+        })();
+    });
+
+    return contentPromise!;
+}

package/app/composables/bitranLocation.ts

@@ -0,0 +1,7 @@
+import { locationFromPath, type BitranLocation } from '@shared/bitran/location';
+
+export function useBitranLocation(): ComputedRef<BitranLocation | undefined> {
+    const route = useRoute();
+
+    return computed(() => locationFromPath(route.path));
+}

package/app/composables/contentData.ts

@@ -0,0 +1,36 @@
+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>>;
+}

package/app/composables/contentPage.ts

@@ -0,0 +1,156 @@
+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!]);
+}

package/app/composables/contentRoute.ts

@@ -0,0 +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;
+    });
+}

package/app/composables/darkMagic.ts

@@ -0,0 +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,
+    };
+}

package/app/composables/externalApi.ts

@@ -0,0 +1,63 @@
+import type { EruditConfigDebug } from 'erudit-cog/schema';
+
+import eruditConfig from '#erudit/config';
+
+function useFakeUrl(
+    fakeApiTarget: keyof EruditConfigDebug['fakeApi'],
+): boolean {
+    return eruditConfig.debug?.fakeApi?.[fakeApiTarget] ?? import.meta.dev;
+}
+
+function getPayload() {
+    const nuxt = useNuxtApp();
+    const payloadKey = 'external-api';
+    const payload =
+        (nuxt.static.data[payloadKey] ||=
+        nuxt.payload.data[payloadKey] ||=
+            {});
+
+    return payload;
+}
+
+export async function useExternalApiLanguages() {
+    const sharedUrl = eruditConfig.repository?.sharedUrl;
+    if (!sharedUrl) return {};
+
+    const payload = getPayload();
+    const fake = useFakeUrl('languages');
+
+    if (fake) {
+        payload.languages ||= await $fetch('/api/fake/shared/languages');
+    } else {
+        payload.languages ||= await $fetch(
+            `https://api.github.com/repos/${sharedUrl}/contents/languages.json`,
+            {
+                headers: { Accept: 'application/vnd.github.v3.raw' },
+                responseType: 'json',
+                //transform: (response: string) => JSON.parse(response),
+            },
+        );
+    }
+
+    return payload.languages;
+}
+
+export async function useExternalApiRepository() {
+    const repositoryName = eruditConfig.repository?.name;
+    const repositoryBranch = eruditConfig.repository?.branch;
+
+    if (!repositoryName || !repositoryBranch) return undefined;
+
+    const payload = getPayload();
+    const fake = useFakeUrl('repository');
+
+    if (fake) {
+        payload.repository ||= await $fetch('/api/fake/content');
+    } else {
+        payload.repository ||= await $fetch(
+            `https://api.github.com/repos/${repositoryName}/branches/${repositoryBranch}`,
+        );
+    }
+
+    return payload.repository;
+}

package/app/composables/favicon.ts

@@ -0,0 +1,8 @@
+import eruditConfig from '#erudit/config';
+
+export const defaultFavicon =
+    eruditConfig.site?.favicon?.default || eruditAsset('favicon/default.svg');
+
+export function useFavicon() {
+    return useState('favicon', () => defaultFavicon);
+}