erudit 3.0.0-dev.9 → 4.0.0-dev.2

package/app/components/aside/major/SiteInfo.vue

@@ -1,85 +1,68 @@
-<script lang="ts" setup>
-import eruditConfig from '#erudit/config';
-
-const baseUrlPath = useBaseUrlPath();
-
-const phrase = await usePhrases('site_info_title', 'site_info_slogan');
-
-interface SiteInfo {
-    title: string;
-    slogan?: string;
-    logotype?: string;
-}
-
-const siteInfo = computed<SiteInfo>(() => {
-    if (!eruditConfig.site)
-        return {
-            logotype: eruditAsset('logotype.svg'),
-            title: phrase.site_info_title,
-            slogan: phrase.site_info_slogan,
-        };
-
-    return {
-        logotype: eruditConfig.site?.logotype || eruditAsset('logotype.svg'),
-        title: eruditConfig.site?.title || phrase.site_info_title,
-        slogan: eruditConfig.site?.slogan || phrase.site_info_slogan,
-    };
-});
-</script>
-
-<template>
-    <section :class="$style.siteInfo">
-        <NuxtLink v-if="siteInfo.logotype" to="/" :class="$style.logo">
-            <img :src="baseUrlPath(siteInfo.logotype)" :alt="siteInfo.title" />
-        </NuxtLink>
-        <div :class="[$style.textInfo, !siteInfo.logotype && $style.noLogo]">
-            <h1 :class="$style.title">
-                <NuxtLink to="/">{{
-                    siteInfo.title || phrase.site_info_title
-                }}</NuxtLink>
-            </h1>
-            <div v-if="siteInfo.slogan" :class="$style.description">
-                {{ siteInfo.slogan }}
-            </div>
-        </div>
-    </section>
-</template>
-
-<style lang="scss" module>
-.siteInfo {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--gap);
-    padding: var(--gap);
-    padding-bottom: var(--gapSmall);
-}
-
-.logo {
-    width: 50px;
-    height: 50px;
-}
-
-.textInfo {
-    display: flex;
-    flex-direction: column;
-
-    &.noLogo {
-        text-align: center;
-    }
-
-    .title {
-        font-weight: bold;
-        font-size: 1.25em;
-        color: var(--text);
-
-        a {
-            @include hoverLink;
-        }
-    }
-
-    .description {
-        color: var(--textMuted);
-    }
-}
-</style>
+<script lang="ts" setup>
+const siteInfo = ERUDIT.config.project.siteInfo;
+
+const fetchPhrases: LanguagePhraseKey[] = [];
+
+if (!siteInfo.title) {
+    fetchPhrases.push('erudit');
+}
+
+if (!siteInfo.short && siteInfo.short !== false) {
+    fetchPhrases.push('default_site_info_short');
+}
+
+const phrase = await usePhrases(...fetchPhrases);
+
+const title = siteInfo.title || phrase.erudit;
+const short =
+    siteInfo.short === false
+        ? undefined
+        : siteInfo.short || phrase.default_site_info_short;
+
+const logotype = (() => {
+    if (siteInfo.logotype === false) {
+        return false;
+    }
+
+    if (!siteInfo.logotype) {
+        return eruditPublic('logotype.svg');
+    }
+
+    return String(siteInfo.logotype);
+})();
+
+const layout = siteInfo.logotype === false ? 'column' : 'row';
+</script>
+
+<template>
+    <section
+        :class="[
+            'p-normal pb-small',
+            'mx-auto',
+            'flex',
+            {
+                'gap-normal items-center': layout === 'row',
+                'gap-small flex-col': layout === 'column',
+                'text-center':
+                    layout === 'column' || siteInfo.logotype === false,
+            },
+        ]"
+    >
+        <EruditLink v-if="logotype !== false" to="/">
+            <img :src="withBaseUrl(logotype)" alt="Site logotype" />
+        </EruditLink>
+        <div>
+            <div>
+                <EruditLink
+                    class="text-hover-underline text-lg font-bold"
+                    to="/"
+                >
+                    {{ formatText(title) }}
+                </EruditLink>
+            </div>
+            <div v-if="short" class="text-text-muted text-sm">
+                {{ formatText(short) }}
+            </div>
+        </div>
+    </section>
+</template>

package/app/components/aside/major/contentNav/PaneBookNav.vue

@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import ContentNavItem from './items/ContentNavItem.vue';
+
+type BookPayloadValue = {
+    shortBookId: string;
+    frontNav: FrontContentNavBook;
+};
+
+const nuxtApp = useNuxtApp();
+const asideMajorPane = useAsideMajorPane();
+const { shortContentId, shortBookId } = useContentId();
+const frontNavBook = shallowRef<FrontContentNavBook>();
+const loading = ref(true);
+
+await bookChange();
+watch(shortBookId, bookChange);
+
+async function bookChange() {
+    if (shortBookId.value === undefined) {
+        // Changed to nothing, keep already loaded book nav or loading screen
+        return;
+    }
+
+    loading.value = true;
+
+    const payloadKey = 'book-content-nav';
+
+    const fetchPayload = async (): Promise<BookPayloadValue> => {
+        return {
+            shortBookId: shortBookId.value!,
+            frontNav: await $fetch(
+                `/api/aside/major/frontNav/book/${shortBookId.value}`,
+                {
+                    responseType: 'json',
+                },
+            ),
+        };
+    };
+
+    let payloadValue: BookPayloadValue =
+        nuxtApp.static.data[payloadKey] ??
+        nuxtApp.payload.data[payloadKey] ??
+        (await fetchPayload());
+
+    // Cache it if it came from fetch
+    nuxtApp.static.data[payloadKey] ??= payloadValue;
+    nuxtApp.payload.data[payloadKey] ??= payloadValue;
+
+    // Refetch if cached payload is for a different book
+    if (payloadValue.shortBookId !== shortBookId.value) {
+        payloadValue = await fetchPayload();
+        nuxtApp.static.data[payloadKey] = payloadValue;
+        nuxtApp.payload.data[payloadKey] = payloadValue;
+    }
+
+    frontNavBook.value = payloadValue.frontNav;
+
+    loading.value = false;
+}
+
+const pharse = await usePhrases('to_index', 'about_textbook');
+</script>
+
+<template>
+    <AsideMajorPaneTemplate>
+        <TransitionFade>
+            <div
+                v-if="!loading && frontNavBook"
+                class="absolute top-0 left-0 flex h-full w-full flex-col"
+            >
+                <div
+                    class="border-border p-normal shrink-0 border-b text-sm
+                        font-bold"
+                >
+                    {{ frontNavBook.title }}
+                </div>
+                <ScrollHolder direction="rtl" class="flex-1">
+                    <div class="border-border border-b">
+                        <TreeContainer>
+                            <TreeItem
+                                icon="arrow/left"
+                                :main="pharse.to_index"
+                                @click="
+                                    asideMajorPane = AsideMajorPane.GlobalNav
+                                "
+                            />
+                            <TreeItem
+                                icon="book-question"
+                                :main="pharse.about_textbook"
+                                :to="frontNavBook.link"
+                                :state="
+                                    shortContentId === shortBookId
+                                        ? 'active'
+                                        : undefined
+                                "
+                            />
+                        </TreeContainer>
+                    </div>
+                    <TreeContainer>
+                        <ContentNavItem
+                            v-for="navItem in frontNavBook.children!"
+                            :navItem
+                        />
+                    </TreeContainer>
+                </ScrollHolder>
+            </div>
+            <div
+                v-else
+                class="text-text-dimmed absolute top-0 left-0 flex h-full w-full
+                    items-center justify-center text-[50px] transition-opacity"
+            >
+                <MyRuntimeIcon :svg="loadingSvg" />
+            </div>
+        </TransitionFade>
+    </AsideMajorPaneTemplate>
+</template>

package/app/components/aside/major/contentNav/PaneGlobalNav.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import ContentNavItem from './items/ContentNavItem.vue';
+
+const phrase = await usePhrases('no_content');
+</script>
+
+<template>
+    <AsideMajorPaneTemplate>
+        <ScrollHolder direction="rtl" class="absolute top-0 left-0">
+            <TreeContainer v-if="globalContentNav.frontNavItems.length > 0">
+                <ContentNavItem
+                    v-for="navItem in globalContentNav.frontNavItems"
+                    :navItem
+                />
+            </TreeContainer>
+            <AsidePlainMessage v-else :text="phrase.no_content" />
+        </ScrollHolder>
+    </AsideMajorPaneTemplate>
+</template>

package/app/components/aside/major/contentNav/items/ContentNavBook.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import ItemTemplate from './ItemTemplate.vue';
+
+const { navItem } = defineProps<{ navItem: FrontContentNavTopic }>();
+const { shortBookId } = useContentId();
+const asideMajorPane = useAsideMajorPane();
+
+const active = computed(() => {
+    return navItem.shortId === shortBookId.value;
+});
+</script>
+
+<template>
+    <ItemTemplate
+        icon="book-outline"
+        :navItem
+        :state="active ? 'active' : undefined"
+        :to="active ? '' : navItem.link"
+        @click="asideMajorPane = AsideMajorPane.BookNav"
+    />
+</template>

package/app/components/aside/major/contentNav/items/ContentNavFolder.vue

@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import ItemTemplate from './ItemTemplate.vue';
+import ContentNavItem from './ContentNavItem.vue';
+
+const { navItem } = defineProps<{
+    navItem: FrontContentNavGroup;
+    level?: number;
+}>();
+
+const { shortContentId } = useContentId();
+
+const hasActiveDescendant = computed(() => {
+    return checkActiveDescendant(navItem.children, shortContentId.value);
+});
+
+const hasActiveDirectChild = computed(() => {
+    return checkActiveDirectChild(navItem.children, shortContentId.value);
+});
+
+const state = computed(() => {
+    if (shortContentId.value === navItem.shortId) {
+        return 'active';
+    }
+
+    if (hasActiveDescendant.value) {
+        return 'accent';
+    }
+
+    return undefined;
+});
+
+function checkActiveDescendant(
+    children: FrontContentNavItem[],
+    targetShortId: string | undefined,
+): boolean {
+    if (!children) {
+        return false;
+    }
+
+    for (const child of children) {
+        if (child.shortId === targetShortId) {
+            return true;
+        }
+
+        if (child.type === 'group') {
+            if (checkActiveDescendant(child.children, targetShortId)) {
+                return true;
+            }
+        }
+    }
+
+    return false;
+}
+
+function checkActiveDirectChild(
+    children: FrontContentNavItem[],
+    targetShortId: string | undefined,
+): boolean {
+    if (!children) return false;
+    return children.some((child) => child.shortId === targetShortId);
+}
+</script>
+
+<template>
+    <ItemTemplate
+        :navItem
+        :icon="state ? 'folder-open' : 'folder'"
+        :state
+        :level
+    />
+    <div
+        :class="[
+            'relative overflow-hidden transition-[height]',
+            state ? 'h-auto' : 'h-0',
+        ]"
+    >
+        <div
+            :style="{ '--level': level ? +level : 0 }"
+            :class="[
+                `absolute top-0
+                left-[calc(var(--spacing-normal)*(var(--level)+1)+7px)] h-full
+                border-l opacity-40 transition-[border]`,
+                [hasActiveDirectChild ? 'border-brand' : 'border-text-dimmed'],
+            ]"
+        ></div>
+        <ContentNavItem
+            v-for="child of navItem.children"
+            :navItem="child"
+            :level="level ? level + 1 : 1"
+        />
+    </div>
+</template>

package/app/components/aside/major/contentNav/items/ContentNavItem.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import ContentNavTopic from './ContentNavTopic.vue';
+import ContentNavPage from './ContentNavPage.vue';
+import ContentNavBook from './ContentNavBook.vue';
+import ContentNavSeparator from './ContentNavSeparator.vue';
+import ContentNavFolder from './ContentNavFolder.vue';
+import ContentNavFlags from './Flags.vue';
+
+const { navItem } = defineProps<{
+    navItem: FrontContentNavItem;
+}>();
+
+const NavItemComponent = (() => {
+    switch (navItem.type) {
+        case 'topic':
+            return ContentNavTopic;
+        case 'page':
+            return ContentNavPage;
+        case 'book':
+            return ContentNavBook;
+        case 'group':
+            return navItem.separator ? ContentNavSeparator : ContentNavFolder;
+    }
+})();
+</script>
+
+<template>
+    <NavItemComponent :navItem="navItem as any">
+        <template v-slot:secondary>
+            <ContentNavFlags v-if="navItem.flags" :flags="navItem.flags" />
+        </template>
+    </NavItemComponent>
+</template>

package/app/components/aside/major/contentNav/items/ContentNavPage.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import ItemTemplate from './ItemTemplate.vue';
+
+const { navItem } = defineProps<{ navItem: FrontContentNavTopic }>();
+const { shortContentId } = useContentId();
+
+const active = computed(() => {
+    return navItem.shortId === shortContentId.value;
+});
+</script>
+
+<template>
+    <ItemTemplate
+        icon="lines"
+        :navItem
+        :state="active ? 'active' : undefined"
+    />
+</template>

package/app/components/aside/major/contentNav/items/ContentNavSeparator.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import ItemTemplate from './ItemTemplate.vue';
+import ContentNavItem from './ContentNavItem.vue';
+
+const { navItem } = defineProps<{ navItem: FrontContentNavGroup }>();
+
+const { shortContentId } = useContentId();
+
+const hasActiveDescendant = computed(() => {
+    return checkActiveDescendant(navItem.children, shortContentId.value);
+});
+
+const state = computed(() => {
+    if (shortContentId.value === navItem.shortId) {
+        return 'active';
+    }
+
+    if (hasActiveDescendant.value) {
+        return 'accent';
+    }
+
+    return undefined;
+});
+
+function checkActiveDescendant(
+    children: FrontContentNavItem[],
+    targetShortId: string | undefined,
+): boolean {
+    if (!children) {
+        return false;
+    }
+
+    for (const child of children) {
+        if (child.shortId === targetShortId) {
+            return true;
+        }
+
+        if (child.type === 'group') {
+            if (checkActiveDescendant(child.children, targetShortId)) {
+                return true;
+            }
+        }
+    }
+
+    return false;
+}
+</script>
+
+<template>
+    <div
+        class="my-small py-small border-border mx-0 border-y px-0 first:mt-0
+            first:border-t-0 first:pt-0 [&+div]:mt-0 [&+div]:border-t-0
+            [&+div]:pt-0"
+    >
+        <ItemTemplate :navItem :state :class="['font-semibold']" />
+        <ContentNavItem
+            v-for="(child, i) in navItem.children"
+            :key="child.shortId"
+            :navItem="child"
+        />
+    </div>
+</template>

package/app/components/aside/major/contentNav/items/ContentNavTopic.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import ItemTemplate from './ItemTemplate.vue';
+
+const { navItem } = defineProps<{ navItem: FrontContentNavTopic }>();
+const { shortContentId } = useContentId();
+
+const active = computed(() => {
+    return navItem.shortId === shortContentId.value;
+});
+</script>
+
+<template>
+    <ItemTemplate
+        icon="array-lines"
+        :navItem
+        :state="active ? 'active' : undefined"
+    />
+</template>

package/app/components/aside/major/contentNav/items/Flags.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import type { ContentFlags, ContentFlag } from '@erudit-js/core/content/flags';
+
+import type { MyIconName } from '#my-icons';
+
+defineProps<{ flags: ContentFlags }>();
+
+const phrase = await usePhrases(
+    'flag_title_dev',
+    'flag_title_advanced',
+    'flag_title_secondary',
+);
+
+const flagData = ((flagType: ContentFlag) => {
+    switch (flagType) {
+        case 'dev':
+            return {
+                icon: 'construction',
+                title: phrase.flag_title_dev,
+            };
+        case 'advanced':
+            return {
+                icon: 'asterisk',
+                title: phrase.flag_title_advanced,
+            };
+        case 'secondary':
+            return {
+                icon: 'puzzle',
+                title: phrase.flag_title_secondary,
+            };
+    }
+}) as (flagType: ContentFlag) => { icon: MyIconName; title: string };
+
+const flagOrder: ContentFlag[] = ['secondary', 'advanced', 'dev'];
+</script>
+
+<template>
+    <div class="gap-small flex items-center text-xs">
+        <div
+            v-for="flagType in flagOrder.filter(
+                (f) => flags[f] && flags[f] === true,
+            )"
+            :title="flagData(flagType).title"
+        >
+            <MyIcon
+                :name="flagData(flagType).icon"
+                class="text-text-disabled hocus:text-text-dimmed cursor-help
+                    text-base transition-[color]"
+            />
+        </div>
+    </div>
+</template>

package/app/components/aside/major/contentNav/items/ItemTemplate.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+import Flags from './Flags.vue';
+
+const { navItem, to } = defineProps<{
+    navItem: FrontContentNavItem;
+    icon?: MyIconName;
+    state: undefined | 'active' | 'accent';
+    to?: string;
+}>();
+
+const resolvedTo = computed(() => {
+    if (to === '') {
+        return undefined;
+    }
+
+    return to ?? navItem.link;
+});
+</script>
+
+<template>
+    <TreeItem :icon :main="navItem.title" :state :to="resolvedTo">
+        <template v-slot:secondary v-if="navItem.flags">
+            <Flags :flags="navItem.flags" />
+        </template>
+    </TreeItem>
+</template>

package/app/components/aside/major/languages/PaneLanguages.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { EruditTranslations } from '@erudit-js/core/eruditConfig/language';
+
+const currentLanguage = ERUDIT.config.project.language.current;
+const translations = ERUDIT.config.project.language.translations;
+const contribute = ERUDIT.config.project.language.contribute;
+
+const sortedTranslations = <EruditTranslations>(() => {
+    if (!translations || !currentLanguage) {
+        return {};
+    }
+
+    const { [currentLanguage]: current, ...rest } = translations;
+
+    if (current) {
+        const sortedRestEntries = Object.entries(rest).sort(([a], [b]) =>
+            a.localeCompare(b),
+        );
+        return <EruditTranslations>{
+            [currentLanguage]: current,
+            ...Object.fromEntries(sortedRestEntries),
+        };
+    }
+
+    return translations;
+})();
+
+const phrase = await usePhrases('add_translation');
+</script>
+
+<template>
+    <AsideMajorPaneTemplate v-if="translations">
+        <ScrollHolder direction="rtl">
+            <AsideListItem
+                v-for="(language, code) in sortedTranslations"
+                :main="language.name"
+                :to="code !== currentLanguage ? language.link : undefined"
+                :hoverable="code !== currentLanguage"
+                :active="code === currentLanguage"
+                target="_blank"
+            >
+                <template v-slot:icon>
+                    <div class="font-bold uppercase">{{ code }}</div>
+                </template>
+            </AsideListItem>
+            <AsideListItem
+                v-if="contribute"
+                :to="contribute"
+                target="_blank"
+                icon="plus-circle"
+                :main="phrase.add_translation"
+            />
+        </ScrollHolder>
+    </AsideMajorPaneTemplate>
+</template>