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

package/app/components/aside/AsideListItem.vue

@@ -1,74 +1,66 @@
-<script lang="ts" setup>
-import type { MyIconName } from '#my-icons';
-
-const props = defineProps<{
-    link?: string;
-    icon?: MyIconName;
-    main?: string;
-    active?: boolean;
-    secondary?: string;
-}>();
-
-const vnode = h(props.link ? defineNuxtLink({}) : 'div');
-</script>
-
-<template>
-    <component
-        :is="vnode"
-        :to="link"
-        :class="[$style.asideListItem, active ? $style.active : '']"
-    >
-        <slot>
-            <MyIcon v-if="icon" :name="icon" />
-            <div :class="$style.main">{{ main }}</div>
-            <div v-if="secondary" :class="$style.secondary">
-                {{ secondary }}
-            </div>
-        </slot>
-    </component>
-</template>
-
-<style lang="scss" module>
-.asideListItem {
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    padding: var(--gap);
-    height: 60px;
-    border-bottom: 1px solid var(--border);
-    color: var(--textMuted);
-    text-decoration: none;
-    background: transparent;
-    cursor: pointer;
-    @include transition(color, background);
-
-    &:hover {
-        color: var(--text);
-        background: var(--bgAccent);
-    }
-
-    [my-icon] {
-        position: relative;
-        top: 1px;
-        flex-shrink: 0;
-        font-size: 20px;
-    }
-
-    .secondary {
-        font-weight: 500;
-        color: var(--textDimmed);
-    }
-
-    [my-icon],
-    .main {
-        @include transition(color);
-    }
-
-    &.active {
-        [my-icon],
-        .main {
-            color: var(--brand);
-        }
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { MaybeMyIconName } from '#my-icons';
+
+const { to, hoverable = true } = defineProps<{
+    to?: string;
+    icon?: MaybeMyIconName;
+    main?: string;
+    secondary?: string | number;
+    active?: boolean;
+    hoverable?: boolean;
+}>();
+
+const isExternalLink = computed(() => {
+    return to?.startsWith('http');
+});
+</script>
+
+<template>
+    <EruditLink
+        :class="[
+            `border-border block min-h-(--h-min-aside-item) border-b
+            bg-transparent text-sm transition-[background,color]`,
+            hoverable && 'hocus:bg-bg-accent cursor-pointer',
+            active
+                ? 'text-brand'
+                : ['text-text-muted', hoverable && 'hocus:text-text'],
+        ]"
+        :to
+    >
+        <slot>
+            <div
+                class="gap-normal px-normal flex min-h-(--h-min-aside-item)
+                    items-center"
+            >
+                <MaybeMyIcon
+                    v-if="icon"
+                    :name="icon"
+                    class="shrink-0 text-[23px]"
+                />
+                <slot name="icon" v-else-if="$slots.icon"></slot>
+
+                <span v-if="main" class="relative">
+                    {{ main }}
+                    <MyIcon
+                        v-if="isExternalLink"
+                        name="arrow/outward"
+                        class="text-text-dimmed absolute -top-[1px]
+                            -right-[16px] text-xs"
+                    />
+                </span>
+                <slot name="main" v-else-if="$slots.main"></slot>
+
+                <span
+                    v-if="secondary"
+                    :class="[
+                        'text-text-dimmed text-xs font-[500]',
+                        isExternalLink && 'ps-[5px]',
+                    ]"
+                >
+                    {{ secondary }}
+                </span>
+                <slot name="secondary" v-else-if="$slots.secondary"></slot>
+            </div>
+        </slot>
+    </EruditLink>
+</template>

package/app/components/aside/AsideMajor.vue

@@ -1,56 +1,8 @@
-<script lang="ts" setup>
-import eruditConfig from '#erudit/config';
-
-import PaneSwitch from './major/PaneSwitch.vue';
-
-const { panes, activePane, getPaneOrder } = useMajorPane();
-
-function paneStyle(paneKey: MajorPaneKey) {
-    const thisPaneOrder = getPaneOrder(paneKey);
-    const activePaneOrder = getPaneOrder(activePane.value);
-
-    return {
-        left: `calc(${Math.sign(thisPaneOrder - activePaneOrder)} * var(--wAside))`,
-        opacity: thisPaneOrder === activePaneOrder ? 1 : 0,
-    };
-}
-</script>
-
-<template>
-    <div :class="$style.asideInner">
-        <AsideMajorSiteInfo />
-        <PaneSwitch />
-        <div :class="$style.paneHolder">
-            <component
-                v-for="(pane, paneKey) of panes"
-                :is="pane.content"
-                :class="$style.pane"
-                :style="paneStyle(paneKey)"
-            />
-        </div>
-        <AdsLeftBanner v-if="eruditConfig.ads?.leftBlockId" />
-    </div>
-</template>
-
-<style lang="scss" module>
-.asideInner {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.paneHolder {
-    flex: 1;
-    position: relative;
-    overflow-x: hidden;
-}
-
-.pane {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    @include transition(left, opacity);
-}
-</style>
+<template>
+    <div class="flex h-full flex-col">
+        <AsideMajorSiteInfo />
+        <AsideMajorPaneSwitcher />
+        <AsideMajorPaneHolder />
+        <AdsBannerAside v-if="adsAsideAllowed()" />
+    </div>
+</template>

package/app/components/aside/AsideMinor.vue

@@ -1,71 +1,76 @@
-<script lang="ts" setup>
-import type { AsideMinorData } from '@shared/asideMinor';
-import { asideMinorKey } from '@app/scripts/aside/minor/state';
-
-import {
-    LazyAsideMinorNews,
-    LazyAsideMinorTopic,
-    LazyAsideMinorContent,
-    LazyAsideMinorContributor,
-} from '#components';
-
-let setupI = 0;
-
-const route = useRoute();
-const nuxtApp = useNuxtApp();
-
-const asideData = shallowRef<AsideMinorData>();
-const AsideMinorPane = shallowRef<Component>();
-
-async function setupAsideMinorData() {
-    const currentSetupI = ++setupI;
-    const path = route.path;
-    const payloadKey = 'aside-minor';
-    const asideMinorPayload =
-        (nuxtApp.static.data[payloadKey] ||=
-        nuxtApp.payload.data[payloadKey] ||=
-            {});
-
-    const data: AsideMinorData = await (async () => {
-        const payloadKeyValue: AsideMinorData | 'news' = (asideMinorPayload[
-            path
-        ] ||= await $fetch(`/api/aside/minor/path`, { query: { path } }));
-
-        if (payloadKeyValue === 'news') {
-            // We do not save news in the payload as it will always have the same content.
-            // So we prerender news once and use the same data for all pages.
-            nuxtApp.runWithContext(() =>
-                prerenderRoutes('/api/aside/minor/news'),
-            );
-            return await $fetch('/api/aside/minor/news');
-        } else return payloadKeyValue;
-    })();
-
-    if (currentSetupI !== setupI) return; // This data is outdated because new `setupAsideMinorData` was called.
-
-    asideData.value = data;
-
-    AsideMinorPane.value = (() => {
-        switch (asideData.value.type) {
-            case 'topic':
-                return LazyAsideMinorTopic;
-            case 'book':
-            case 'group':
-                return LazyAsideMinorContent;
-        }
-
-        return LazyAsideMinorNews;
-    })();
-}
-
-watch(route, setupAsideMinorData);
-await setupAsideMinorData();
-
-provide(asideMinorKey, asideData);
-</script>
-
-<template>
-    <TransitionFade>
-        <component :is="AsideMinorPane" />
-    </TransitionFade>
-</template>
+<script lang="ts" setup>
+const { asideMinorState } = useAsideMinor();
+const mouted = ref(false);
+const showLoadingIcon = ref(false);
+const loadingIconDelay = 500;
+let loadingTimer: ReturnType<typeof setTimeout> | null = null;
+
+onMounted(() => {
+    mouted.value = true;
+});
+
+watch(
+    asideMinorState,
+    () => {
+        if (loadingTimer) {
+            clearTimeout(loadingTimer);
+            loadingTimer = null;
+        }
+
+        showLoadingIcon.value = false;
+
+        loadingTimer = setTimeout(() => {
+            showLoadingIcon.value = true;
+        }, loadingIconDelay);
+    },
+    { immediate: true },
+);
+
+onUnmounted(() => {
+    if (loadingTimer) {
+        clearTimeout(loadingTimer);
+    }
+});
+</script>
+
+<template>
+    <div class="absolute top-0 left-0 h-full w-full">
+        <TransitionFade>
+            <Suspense v-if="mouted" :key="asideMinorState?.type">
+                <template #default :timeout="10">
+                    <LazyAsideMinorNews
+                        v-if="asideMinorState?.type === 'news'"
+                    />
+                    <LazyAsideMinorContributor
+                        v-else-if="asideMinorState?.type === 'contributor'"
+                    />
+                    <LazyAsideMinorContentContributions
+                        v-else-if="
+                            asideMinorState?.type === 'content-contributions'
+                        "
+                    />
+                    <LazyAsideMinorContentPage
+                        v-else-if="asideMinorState?.type === 'content-page'"
+                    />
+                    <LazyAsideMinorContentTopic
+                        v-else-if="asideMinorState?.type === 'content-topic'"
+                    />
+                    <div v-else></div>
+                </template>
+                <template #fallback>
+                    <div
+                        v-if="showLoadingIcon"
+                        class="absolute top-0 left-0 grid h-full w-full
+                            place-items-center"
+                    >
+                        <MyRuntimeIcon
+                            :svg="loadingSvg"
+                            class="text-text-disabled text-[60px]"
+                        />
+                    </div>
+                    <div v-else></div>
+                </template>
+            </Suspense>
+        </TransitionFade>
+    </div>
+</template>

package/app/components/aside/AsidePlainMessage.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+defineProps<{ text: string }>();
+</script>
+
+<template>
+    <p class="text-text-dimmed px-normal py-big text-center font-semibold">
+        {{ formatText(text) }}
+    </p>
+</template>

package/app/components/aside/AsideSwitch.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+const asideState = useAsideState();
+const canShowSwitches = useCanShowAsideSwitches();
+const asideType = inject(asideTypeSymbol);
+
+const isMajor = computed(() => asideType === AsideType.Major);
+const isMinor = computed(() => asideType === AsideType.Minor);
+
+if (import.meta.client) {
+    callOnce(async () => {
+        // Wait for possible layout shifts triggering scroll events
+        await new Promise((resolve) => setTimeout(resolve, 100));
+
+        let lastY = window.scrollY;
+        let sumDelta = 0;
+        let scrollTimeout: any;
+
+        window.addEventListener('scroll', () => {
+            const currentY = window.scrollY;
+            const delta = currentY - lastY;
+
+            sumDelta += delta;
+
+            asideState.value.scrolledUp = sumDelta <= 5;
+
+            lastY = currentY;
+
+            clearTimeout(scrollTimeout);
+            scrollTimeout = setTimeout(() => {
+                sumDelta = 0;
+            }, 200);
+        });
+    });
+}
+</script>
+
+<template>
+    <div
+        :class="[
+            /* Variables */
+            `micro:[--_switchSize:110px] [--_switchGap:var(--spacing-main)]
+            [--_switchSize:80px]`,
+            /* */
+            `fixed bottom-0 flex size-(--_switchSize) items-center
+            justify-center pb-(--_switchGap) pl-(--_switchGap)
+            transition-[left,right,opacity]`,
+            {
+                //
+                // Major Global
+                //
+                'aside1:opacity-0': isMajor,
+                // Major Can Show
+                'left-0 opacity-100': isMajor && canShowSwitches,
+                // Major Cannot Show
+                '-left-(--_switchSize) opacity-0': isMajor && !canShowSwitches,
+
+                //
+                // Minor Global
+                //
+                'aside2:opacity-0 -scale-x-100': isMinor,
+                // Minor Can Show
+                'right-0 opacity-100': isMinor && canShowSwitches,
+                // Minor Cannot Show
+                '-right-(--_switchSize) opacity-0': isMinor && !canShowSwitches,
+            },
+        ]"
+    >
+        <button
+            @click="asideState.opened = asideType"
+            class="hocus:opacity-100 flex size-full cursor-pointer items-center
+                justify-center bg-neutral-500 opacity-90
+                shadow-[0_0_20px_20px_var(--color-bg-main)] transition-opacity"
+        >
+            <MyIcon name="aside-open" class="text-bg-main size-[60%]" />
+        </button>
+    </div>
+</template>

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

@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import PaneGlobalNav from './contentNav/PaneGlobalNav.vue';
+import PaneBookNav from './contentNav/PaneBookNav.vue';
+import PaneLanguages from './languages/PaneLanguages.vue';
+import PanePages from './pages/PanePages.vue';
+import PaneSearch from './search/PaneSearch.vue';
+import PaneSettings from './settings/PaneSettings.vue';
+
+const paneMap: Record<AsideMajorPane, Component> = {
+    [AsideMajorPane.GlobalNav]: PaneGlobalNav,
+    [AsideMajorPane.BookNav]: PaneBookNav,
+    [AsideMajorPane.Languages]: PaneLanguages,
+    [AsideMajorPane.Pages]: PanePages,
+    [AsideMajorPane.Search]: PaneSearch,
+    [AsideMajorPane.Settings]: PaneSettings,
+};
+
+const route = useRoute();
+const asideMajorPane = useAsideMajorPane();
+const asideState = useAsideState();
+const direction = ref<'forward' | 'backward'>('forward');
+const activePaneComponent = computed(() => paneMap[asideMajorPane.value]);
+
+watch(asideMajorPane, (next, prev) => {
+    const nextIdx = asideMajorPanes.indexOf(next);
+    const prevIdx = asideMajorPanes.indexOf(prev);
+
+    if (nextIdx === -1 || prevIdx === -1) {
+        direction.value = 'forward';
+        return;
+    }
+
+    direction.value = nextIdx > prevIdx ? 'forward' : 'backward';
+});
+
+const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.shiftKey && event.code === 'KeyF') {
+        event.preventDefault();
+        asideMajorPane.value = AsideMajorPane.Search;
+        const styles = getComputedStyle(document.documentElement);
+        const aside1Bp = styles.getPropertyValue('--breakpoint-aside1');
+        if (window.matchMedia(`(max-width: ${aside1Bp})`).matches) {
+            asideState.value.opened = AsideType.Major;
+        }
+    }
+};
+
+onMounted(() => {
+    if (route.query.q) {
+        asideMajorPane.value = AsideMajorPane.Search;
+        const styles = getComputedStyle(document.documentElement);
+        const aside1Bp = styles.getPropertyValue('--breakpoint-aside1');
+        if (window.matchMedia(`(max-width: ${aside1Bp})`).matches) {
+            asideState.value.opened = AsideType.Major;
+        }
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('keydown', handleKeyDown);
+});
+
+// Prefetch pages data
+await useFetch('/api/aside/major/pages', {
+    key: asideMajorPagesKey,
+    deep: false,
+    responseType: 'json',
+});
+
+// Prefetch phrases
+await usePhrases(
+    'theme',
+    'theme_light',
+    'theme_dark',
+    'theme_system',
+    'built',
+    'content',
+    'erudit',
+    'add_translation',
+    'main_page',
+    'contributors',
+    'sponsors',
+    'search_the_site',
+    'searching_more',
+    'no_results',
+    'no_more_results',
+    'no_content',
+    'to_index',
+    'about_textbook',
+    'flag_title_dev',
+    'flag_title_advanced',
+    'flag_title_secondary',
+);
+</script>
+
+<template>
+    <section class="relative flex-1 overflow-clip">
+        <TransitionSlide :direction>
+            <KeepAlive>
+                <component :key="asideMajorPane" :is="activePaneComponent" />
+            </KeepAlive>
+        </TransitionSlide>
+    </section>
+</template>

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

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import PaneSwitcherButton from './PaneSwitcherButton.vue';
+
+const asideMajorPane = useAsideMajorPane();
+
+const translations = ERUDIT.config.project.language.translations;
+
+const underlinePaneIndex = computed(() => {
+    const paneIndex = asideMajorPanes.indexOf(asideMajorPane.value);
+    return Math.max(paneIndex - 1, 0);
+});
+
+const { shortBookId } = useContentId();
+
+const phrase = await usePhrases(
+    'content_nav',
+    'pages',
+    'search',
+    'languages',
+    'settings',
+);
+</script>
+
+<template>
+    <section class="border-border z-1 border-b">
+        <div
+            style="--_button-size: 56px; --_underline-p: 6px"
+            class="relative mx-auto flex w-max"
+        >
+            <PaneSwitcherButton
+                :pane="
+                    shortBookId
+                        ? AsideMajorPane.BookNav
+                        : AsideMajorPane.GlobalNav
+                "
+                :hint="phrase.content_nav"
+                icon="book"
+            />
+            <PaneSwitcherButton
+                :pane="AsideMajorPane.Pages"
+                :hint="phrase.pages"
+                icon="file-lines"
+            />
+            <PaneSwitcherButton
+                :pane="AsideMajorPane.Search"
+                :hint="phrase.search"
+                icon="search/glass"
+            />
+            <PaneSwitcherButton
+                :pane="AsideMajorPane.Settings"
+                :hint="phrase.settings"
+                icon="cog"
+            />
+            <PaneSwitcherButton
+                v-if="translations"
+                :pane="AsideMajorPane.Languages"
+                :hint="phrase.languages"
+                icon="translate"
+            />
+            <!-- Active button underline -->
+            <div
+                :style="`left: calc(${underlinePaneIndex} * var(--_button-size))`"
+                :class="'absolute bottom-0 w-(--_button-size) transition-[left]'"
+            >
+                <div
+                    class="bg-text-muted absolute right-(--_underline-p)
+                        bottom-[-2px] left-(--_underline-p) h-[3px]
+                        rounded-[20px]"
+                ></div>
+            </div>
+        </div>
+    </section>
+</template>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { MyIconName } from '#my-icons';
+
+const props = defineProps<{
+    pane: AsideMajorPane;
+    icon: MyIconName;
+    hint: string;
+}>();
+
+const asideMajorPane = useAsideMajorPane();
+
+const active = computed(() => {
+    return asideMajorPane.value === props.pane;
+});
+</script>
+
+<template>
+    <button
+        @click="asideMajorPane = pane"
+        :title="hint"
+        :class="[
+            `group relative flex size-(--_button-size) cursor-pointer
+            items-center justify-center transition-[color]`,
+            {
+                'text-text': active,
+                'text-text-muted hocus:text-text': !active,
+            },
+        ]"
+    >
+        <MyIcon :name="icon" class="size-[48%]" />
+        <!-- Button underline -->
+        <div
+            class="group-hocus:bg-border absolute right-(--_underline-p)
+                bottom-[-2px] left-(--_underline-p) h-[3px] rounded-[20px]
+                bg-transparent transition-[background]"
+        ></div>
+    </button>
+</template>

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

@@ -0,0 +1,5 @@
+<template>
+    <div class="absolute top-0 left-0 h-full w-full">
+        <slot></slot>
+    </div>
+</template>