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

package/app/components/tree/TreeItem.vue

@@ -1,89 +1,40 @@
-<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>
+<script lang="ts" setup>
+import type { MaybeMyIconName } from '#my-icons';
+
+defineProps<{
+    level?: number;
+    to?: string;
+    icon?: MaybeMyIconName;
+    main?: string;
+    state?: undefined | 'active' | 'accent';
+}>();
+</script>
+
+<template>
+    <EruditLink :to>
+        <div
+            :style="{ '--level': level ? +level : 0 }"
+            :class="[
+                `px-normal py-small hocus:bg-bg-accent flex cursor-pointer
+                items-center gap-[calc(var(--spacing-normal)/1.6)] text-sm
+                transition-[background,color]`,
+                'pl-[calc(var(--spacing-normal)*(var(--level)+1)-2px)]',
+                {
+                    'text-text-muted hocus:text-text': !state,
+                    'text-brand': state === 'active',
+                    'text-text': state === 'accent',
+                },
+            ]"
+        >
+            <MaybeMyIcon
+                v-if="icon"
+                :name="icon"
+                class="shrink-0 text-[1.2em]"
+            />
+            <div class="flex-1">{{ main }}</div>
+            <div class="shrink-0" v-if="$slots.secondary">
+                <slot name="secondary"></slot>
+            </div>
+        </div>
+    </EruditLink>
+</template>

package/app/composables/ads.ts

@@ -0,0 +1,23 @@
+export function adsAllowed() {
+    const debugAllowed = ERUDIT.config.project.debug?.ads;
+
+    if (debugAllowed === true) {
+        return true;
+    }
+
+    const adsConfig = ERUDIT.config.project.ads;
+
+    if (adsConfig === undefined) {
+        return false;
+    }
+
+    return ERUDIT.config.mode === 'static';
+}
+
+export function adsAsideAllowed() {
+    return adsAllowed() && Boolean(ERUDIT.config.project.ads?.aside);
+}
+
+export function adsBottomAllowed() {
+    return adsAllowed() && Boolean(ERUDIT.config.project.ads?.bottom);
+}

package/app/composables/analytics.ts

@@ -0,0 +1,102 @@
+import type {
+    GoogleAnalytics,
+    YandexAnalytics,
+} from '@erudit-js/core/eruditConfig/analytics';
+
+export function initAnalytics() {
+    const analytics = ERUDIT.config.project.analytics;
+
+    const analyticsEnabled = (() => {
+        const debugValue = ERUDIT.config.project.debug.analytics;
+
+        if (typeof debugValue === 'boolean') {
+            return debugValue;
+        }
+
+        return ERUDIT.config.mode === 'static' ? true : false;
+    })();
+
+    if (!analytics || !analyticsEnabled) {
+        return;
+    }
+
+    if (analytics.google) {
+        googleAnalytics(analytics.google);
+    }
+
+    if (analytics.yandex) {
+        yandexAnalytics(analytics.yandex);
+    }
+}
+
+function googleAnalytics(analytics: GoogleAnalytics) {
+    if (analytics.gtag) {
+        useHead({
+            script: [
+                {
+                    key: 'google-analytics-script',
+                    src: `https://www.googletagmanager.com/gtag/js?id=${analytics.gtag}`,
+                    async: true,
+                },
+                {
+                    key: 'google-analytics-inline-script',
+                    innerHTML: `
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+gtag('config', '${analytics.gtag}');
+                    `.trim(),
+                },
+            ],
+        });
+    }
+
+    if (analytics.verification) {
+        useHead({
+            meta: [
+                {
+                    name: 'google-site-verification',
+                    content: analytics.verification,
+                },
+            ],
+        });
+    }
+}
+
+function yandexAnalytics(analytics: YandexAnalytics) {
+    if (analytics.metricsId) {
+        useHead({
+            script: [
+                {
+                    key: 'yandex-metrica-script',
+                    innerHTML: `
+(function(m,e,t,r,i,k,a){
+    m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
+    m[i].l=1*new Date();
+    k=e.createElement(t),a=e.getElementsByTagName(t)[0],
+    k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
+})(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
+
+ym(${analytics.metricsId}, "init", {
+    clickmap:true,
+    trackLinks:true,
+    accurateTrackBounce:true,
+    webvisor:true
+});
+                    `.trim(),
+                },
+            ],
+        });
+    }
+
+    if (analytics.verification) {
+        useHead({
+            meta: [
+                {
+                    name: 'yandex-verification',
+                    content: analytics.verification,
+                },
+            ],
+        });
+    }
+}

package/app/composables/appElements.ts

@@ -0,0 +1,40 @@
+import type { AppElement } from '@erudit-js/prose/app';
+import { appElements as _appElements } from '#erudit/prose/app';
+
+export const appElements: Record<string, AppElement> = { ..._appElements };
+
+export async function initAppElements() {
+    for (const [name, element] of Object.entries(appElements)) {
+        const languageCode = ERUDIT.config.project.language.current;
+        if (!element.languages[languageCode]) {
+            throw createError({
+                statusCode: 500,
+                statusMessage: `App element "${name}" does not support the current project language "${languageCode}"!`,
+            });
+        }
+    }
+}
+
+export async function getElementIcon(elementName: string) {
+    const appElement = getAppElement(elementName);
+    return await appElement.icon();
+}
+
+export async function getElementPhrase(elementName: string) {
+    const appElement = getAppElement(elementName);
+    const languageCode = ERUDIT.config.project.language.current;
+    return await appElement.languages[languageCode]!();
+}
+
+function getAppElement(elementName: string) {
+    const appElement = appElements[elementName];
+
+    if (!appElement) {
+        throw createError({
+            statusCode: 500,
+            statusMessage: `App element "${elementName}" not found! Make sure it is installed and configured correctly!`,
+        });
+    }
+
+    return appElement;
+}

package/app/composables/aside.ts

@@ -0,0 +1,28 @@
+export enum AsideType {
+    Major = 'major',
+    Minor = 'minor',
+}
+
+export interface AsideState {
+    opened: AsideType | undefined;
+    scrolledUp: boolean;
+}
+
+export const asideTypeSymbol = Symbol() as InjectionKey<AsideType>;
+
+export const useAsideState = () => {
+    return useState<AsideState>('aside-state', () => ({
+        opened: undefined,
+        scrolledUp: true,
+    }));
+};
+
+export const useCanShowAsideSwitches = () => {
+    const asideState = useAsideState();
+    const { previewState } = usePreview();
+    return computed(() => {
+        const noOpenedAsides = !asideState.value.opened;
+        const scrolledUp = asideState.value.scrolledUp;
+        return noOpenedAsides && scrolledUp && !previewState.value.opened;
+    });
+};

package/app/composables/asideMajorPane.ts

@@ -0,0 +1,135 @@
+import { isTopicPart } from '@erudit-js/core/content/topic';
+import { isContentType } from '@erudit-js/core/content/type';
+
+export enum AsideMajorPane {
+    GlobalNav = 'global-nav',
+    BookNav = 'book-nav',
+    Pages = 'pages',
+    Search = 'search',
+    Settings = 'settings',
+    Languages = 'languages',
+}
+
+export const asideMajorPanes = Object.values(AsideMajorPane);
+
+export const useAsideMajorPane = () => {
+    return useState<AsideMajorPane>('aside-major-pane');
+};
+
+export const initAsideMajorPaneWatcher = () => {
+    const asideMajorPane = useAsideMajorPane();
+    const routePath = useRoutePath();
+    const { shortBookId } = useContentId();
+
+    asideMajorPane.value = getActivePane(
+        asideMajorPane.value,
+        routePath.value,
+        shortBookId.value,
+    );
+
+    watch([routePath, shortBookId], () => {
+        asideMajorPane.value = getActivePane(
+            asideMajorPane.value,
+            routePath.value,
+            shortBookId.value,
+        );
+    });
+};
+
+function getActivePane(
+    currentPane: AsideMajorPane,
+    path: string,
+    bookId: string | undefined,
+) {
+    if (currentPane === AsideMajorPane.Search) {
+        // The user might be clicking on search result so keep him in search pane!
+        return AsideMajorPane.Search;
+    }
+
+    if (bookId) {
+        return AsideMajorPane.BookNav;
+    }
+
+    if (path === PAGES.contributors) {
+        return AsideMajorPane.Pages;
+    }
+
+    if (path.startsWith(PAGES.contributor())) {
+        return AsideMajorPane.Pages;
+    }
+
+    if (path === PAGES.sponsors) {
+        return AsideMajorPane.Pages;
+    }
+
+    // Fallback to global nav
+    return AsideMajorPane.GlobalNav;
+}
+
+//
+// Content Nav
+//
+
+export let globalContentNav: FrontGlobalContentNav;
+
+export async function initGlobalContentNav() {
+    const nuxtApp = useNuxtApp();
+    const payloadKey = 'global-content-nav';
+    const payloadValue: FrontGlobalContentNav =
+        (nuxtApp.static.data[payloadKey] ||=
+        nuxtApp.payload.data[payloadKey] ||=
+            await $fetch('/api/aside/major/frontNav/global', {
+                responseType: 'json',
+            }));
+
+    globalContentNav = payloadValue;
+}
+
+export function useContentId() {
+    const routePath = useRoutePath();
+
+    const shortContentId = computed(() => {
+        const path = routePath.value;
+
+        const parts = path.split('/');
+        parts.pop(); // Remove trailing slash part
+        parts.shift(); // Remove leading slash part
+
+        const type = parts.shift();
+        if (isContentType(type) || isTopicPart(type)) {
+            return parts.join('/');
+        }
+
+        return undefined;
+    });
+
+    const shortBookId = computed(() => {
+        const shortId = shortContentId.value;
+
+        if (!shortId) {
+            return undefined;
+        }
+
+        let longestMatch = '';
+        for (const bookShortId of globalContentNav.bookShortIds) {
+            if (shortId.startsWith(bookShortId)) {
+                if (bookShortId.length > longestMatch.length) {
+                    longestMatch = bookShortId;
+                }
+            }
+        }
+
+        return longestMatch || undefined;
+    });
+
+    return {
+        shortContentId,
+        shortBookId,
+    };
+}
+
+//
+// Pages
+//
+
+export const asideMajorPagesKey = 'aside-major-pages';

package/app/composables/asideMinor.ts

@@ -0,0 +1,109 @@
+import type {
+    ContentContribution,
+    ContributorContribution,
+} from '@erudit-js/core/content/contributions';
+import type { TopicPart } from '@erudit-js/core/content/topic';
+import type { ContentType } from '@erudit-js/core/content/type';
+import type { ResolvedTocItem } from '@erudit-js/prose';
+
+export interface AsideMinorStateNews {
+    type: 'news';
+}
+
+export interface AsideMinorContributor {
+    type: 'contributor';
+    contributions?: ContributorContribution[];
+}
+
+export interface AsideMinorContentContributions {
+    type: 'content-contributions';
+    contentRelativePath: string;
+    contentType: ContentType;
+    topicPart?: TopicPart;
+    contributions?: ContentContribution[];
+}
+
+export interface AsideMinorContentPage {
+    type: 'content-page';
+    contentRelativePath: string;
+    toc?: ResolvedTocItem[];
+    contributions?: ContentContribution[];
+}
+
+export interface AsideMinorContentTopic {
+    type: 'content-topic';
+    topicPart: TopicPart;
+    contentRelativePath: string;
+    shortContentId: string;
+    parts: TopicPart[];
+    toc?: ResolvedTocItem[];
+    contributions?: ContentContribution[];
+}
+
+export type AsideMinorState =
+    | AsideMinorStateNews
+    | AsideMinorContributor
+    | AsideMinorContentContributions
+    | AsideMinorContentPage
+    | AsideMinorContentTopic;
+
+export const useAsideMinor = () => {
+    const asideMinor = useState<AsideMinorState | undefined>('aside-minor');
+
+    return {
+        asideMinorState: asideMinor,
+        showNewsAside() {
+            asideMinor.value = { type: 'news' };
+        },
+        showContributorAside(contributions?: ContributorContribution[]) {
+            asideMinor.value = {
+                type: 'contributor',
+                contributions,
+            };
+        },
+        showContentContributionsAside(
+            contentRelativePath: string,
+            contentType: ContentType,
+            topicPart?: TopicPart,
+            contributions?: ContentContribution[],
+        ) {
+            asideMinor.value = {
+                type: 'content-contributions',
+                contentRelativePath,
+                contentType,
+                topicPart,
+                contributions,
+            };
+        },
+        showContentPageAside(
+            contentRelativePath: string,
+            toc?: ResolvedTocItem[],
+            contributions?: ContentContribution[],
+        ) {
+            asideMinor.value = {
+                type: 'content-page',
+                contentRelativePath,
+                toc,
+                contributions,
+            };
+        },
+        showContentTopicAside(args: {
+            part: TopicPart;
+            parts: TopicPart[];
+            shortContentId: string;
+            contentRelativePath: string;
+            toc?: ResolvedTocItem[];
+            contributions?: ContentContribution[];
+        }) {
+            asideMinor.value = {
+                type: 'content-topic',
+                topicPart: args.part,
+                contentRelativePath: args.contentRelativePath,
+                toc: args.toc,
+                contributions: args.contributions,
+                shortContentId: args.shortContentId,
+                parts: args.parts,
+            };
+        },
+    };
+};

package/app/composables/contentNav.ts

@@ -0,0 +1,7 @@
+const contentNavGlobalKey = 'contentNav-global';
+
+export const contentNavSymbol = Symbol() as InjectionKey<{
+    shortContentId: ComputedRef<string | undefined>;
+    shortBookId: ComputedRef<string | undefined>;
+    showBookNav: Ref<boolean>;
+}>;

package/app/composables/favicon.ts

@@ -1,8 +1,108 @@
-import eruditConfig from '#erudit/config';
+import { isTopicPart, type TopicPart } from '@erudit-js/core/content/topic';
+import { isContentType, type ContentType } from '@erudit-js/core/content/type';
 
-export const defaultFavicon =
-    eruditConfig.site?.favicon?.default || eruditAsset('favicon/default.svg');
+const fallbackFaviconHref = eruditPublic('favicons/default.svg');
+
+export const useFaviconHref = () => {
+    return useState<string>('favicon-href', () => fallbackFaviconHref);
+};
 
 export function useFavicon() {
-    return useState('favicon', () => defaultFavicon);
+    const faviconHref = useFaviconHref();
+
+    function showDefaultFavicon() {
+        const defaultFaviconHref =
+            ERUDIT.config.project.siteInfo?.favicon?.default;
+        faviconHref.value = defaultFaviconHref || fallbackFaviconHref;
+    }
+
+    function showContentFavicon(
+        args:
+            | { type: Exclude<ContentType, 'topic'> }
+            | { type: 'topic'; part: TopicPart },
+    ) {
+        if (args.type === 'topic') {
+            const topicPartHref =
+                ERUDIT.config.project.siteInfo?.favicon?.[args.part];
+            if (topicPartHref) {
+                faviconHref.value = topicPartHref;
+                return;
+            }
+        } else {
+            const typeHref =
+                ERUDIT.config.project.siteInfo?.favicon?.[args.type];
+            if (typeHref) {
+                faviconHref.value = typeHref;
+                return;
+            }
+        }
+
+        showDefaultFavicon();
+    }
+
+    return {
+        showDefaultFavicon,
+        showContentFavicon,
+    };
+}
+
+export function initFavicon() {
+    const faviconHref = useFaviconHref();
+    const { showDefaultFavicon, showContentFavicon } = useFavicon();
+    showDefaultFavicon();
+
+    useHead({
+        link: [
+            computed(() => ({
+                key: 'favicon',
+                rel: 'icon',
+                href: withBaseUrl(faviconHref.value),
+            })),
+        ],
+    });
+
+    const route = useRoute();
+    const contentFaviconDelay = 5000;
+    let contentFaviconChangeTimeout: ReturnType<typeof setTimeout>;
+    let stopWatchingRoute: ReturnType<typeof watch> | undefined;
+    onMounted(() => {
+        stopWatchingRoute = watch(
+            route,
+            () => {
+                clearTimeout(contentFaviconChangeTimeout);
+
+                const firstPathPart = route.path.split('/')[1];
+
+                if (isTopicPart(firstPathPart)) {
+                    contentFaviconChangeTimeout = setTimeout(() => {
+                        showContentFavicon({
+                            type: 'topic',
+                            part: firstPathPart,
+                        });
+                    }, contentFaviconDelay);
+                    return;
+                }
+
+                if (isContentType(firstPathPart)) {
+                    contentFaviconChangeTimeout = setTimeout(() => {
+                        showContentFavicon({
+                            type: firstPathPart as Exclude<
+                                ContentType,
+                                'topic'
+                            >,
+                        });
+                    }, contentFaviconDelay);
+                    return;
+                }
+
+                showDefaultFavicon();
+            },
+            { immediate: true },
+        );
+    });
+
+    onBeforeUnmount(() => {
+        clearTimeout(contentFaviconChangeTimeout);
+        stopWatchingRoute?.();
+    });
 }

package/app/composables/file.ts

@@ -0,0 +1,3 @@
+export function fileUrl(path: string) {
+    return withBaseUrl('/file/' + path);
+}