erudit 3.0.0-dev.17 → 3.0.0-dev.19

package/app/components/SiteMain.vue

@@ -1,32 +1,32 @@
-<template>
-    <main :class="$style.main" erudit-main>
-        <Preview />
-        <div :class="$style.mainInner">
-            <slot></slot>
-        </div>
-    </main>
-</template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.main {
-    --_pMainBase: var(--gapBig);
-    --_pMainX: var(--_pMainBase);
-    --_pMainY: calc(var(--_pMainBase) / 2);
-
-    position: relative;
-    min-height: 100dvh;
-    background: var(--bgMain);
-    font-size: 18px;
-
-    @include bp.below('mobile') {
-        --_pMainBase: var(--_bitran_asideWidth);
-        font-size: 15px;
-    }
-
-    .mainInner {
-        padding: var(--_pMainY) 0;
-    }
-}
-</style>
+<template>
+    <main :class="$style.main" erudit-main>
+        <Preview />
+        <div :class="$style.mainInner">
+            <slot></slot>
+        </div>
+    </main>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.main {
+    --_pMainBase: var(--gapBig);
+    --_pMainX: var(--_pMainBase);
+    --_pMainY: calc(var(--_pMainBase) / 2);
+
+    position: relative;
+    min-height: 100dvh;
+    background: var(--bgMain);
+    font-size: 18px;
+
+    @include bp.below('mobile') {
+        --_pMainBase: var(--_bitran_asideWidth);
+        font-size: 15px;
+    }
+
+    .mainInner {
+        padding: var(--_pMainY) 0;
+    }
+}
+</style>

package/app/components/aside/AsideListItem.vue

@@ -1,74 +1,74 @@
-<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 { 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>

package/app/components/aside/AsideMajor.vue

@@ -1,56 +1,56 @@
-<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>
-        <AdsBannerAside v-if="eruditConfig.ads?.aside" />
-    </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>
+<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>
+        <AdsBannerAside v-if="adsAllowed() && eruditConfig.ads?.aside" />
+    </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>

package/app/components/aside/AsideMinor.vue

@@ -1,73 +1,97 @@
-<script lang="ts" setup>
-import type { AsideMinorData } from '@shared/aside/minor';
-import { trailingSlash } from '@erudit/utils/slash';
-import { asideMinorKey } from '@app/scripts/aside/minor/state';
-
-import {
-    LazyAsideMinorNews,
-    LazyAsideMinorTopic,
-    LazyAsideMinorContent,
-} 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 dataKey = trailingSlash(route.path, false);
-    const payloadKey = 'aside-minor';
-    const asideMinorPayload =
-        (nuxtApp.static.data[payloadKey] ||=
-        nuxtApp.payload.data[payloadKey] ||=
-            {});
-
-    const data: AsideMinorData = await (async () => {
-        const payloadKeyValue: AsideMinorData | 'news' = (asideMinorPayload[
-            dataKey
-        ] ||= await $fetch(`/api/aside/minor/path`, {
-            query: { path: dataKey },
-        }));
-
-        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>
+import { isTopicPart } from '@erudit-js/cog/schema';
+
+import { type AsideMinorNews, type AsideMinorData } from '@shared/aside/minor';
+import { trailingSlash } from '@erudit/utils/slash';
+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 = trailingSlash(route.path, false).substring(1);
+    const pathParts = path.split('/');
+
+    const payloadKey = 'aside-minor';
+    const asideMinorPayload =
+        (nuxtApp.static.data[payloadKey] ||=
+        nuxtApp.payload.data[payloadKey] ||=
+            {});
+
+    const data: AsideMinorData = await (async () => {
+        const firstPathPart = pathParts[0];
+
+        if (isTopicPart(firstPathPart)) {
+            return (asideMinorPayload[path] ||= await $fetch(
+                `/api/aside/minor/topic`,
+                {
+                    query: {
+                        topicPart: firstPathPart,
+                        topicId: pathParts.slice(1).join('/'),
+                    },
+                },
+            ));
+        }
+
+        switch (firstPathPart) {
+            case 'book':
+            case 'group':
+                return (asideMinorPayload[path] ||= await $fetch(
+                    `/api/aside/minor/${pathParts.join('/')}`,
+                ));
+            case 'contributor':
+                return (asideMinorPayload[path] ||= await $fetch(
+                    `/api/aside/minor/contributor/${pathParts[1]}`,
+                ));
+            default:
+                prerenderRoutes(['/api/aside/minor/news']);
+                return await $fetch<AsideMinorNews>(`/api/aside/minor/news`);
+        }
+    })();
+
+    if (currentSetupI !== setupI) {
+        // This data is outdated because new `setupAsideMinorData` was called
+        return;
+    }
+
+    asideData.value = data;
+
+    AsideMinorPane.value = (() => {
+        switch (asideData.value.type) {
+            case 'topic':
+                return LazyAsideMinorTopic;
+            case 'book':
+            case 'group':
+                return LazyAsideMinorContent;
+            case 'contributor':
+                return LazyAsideMinorContributor;
+        }
+
+        return LazyAsideMinorNews;
+    })();
+}
+
+watch(route, setupAsideMinorData);
+await setupAsideMinorData();
+
+provide(asideMinorKey, asideData);
+</script>
+
+<template>
+    <TransitionFade>
+        <component :is="AsideMinorPane" />
+    </TransitionFade>
+</template>

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

@@ -1,23 +1,23 @@
-<template>
-    <div :class="$style.paneContentScroll">
-        <div>
-            <slot></slot>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" module>
-.paneContentScroll {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    direction: rtl;
-    @include scroll;
-
-    > div {
-        width: 100%;
-        height: 100%;
-        direction: ltr;
-    }
-}
-</style>
+<template>
+    <div :class="$style.paneContentScroll">
+        <div>
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" module>
+.paneContentScroll {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    direction: rtl;
+    @include scroll;
+
+    > div {
+        width: 100%;
+        height: 100%;
+        direction: ltr;
+    }
+}
+</style>

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

@@ -1,54 +1,54 @@
-<script lang="ts" setup>
-import PaneSwitchButton from './PaneSwitchButton.vue';
-
-const { panes, activePane, getPaneOrder } = useMajorPane();
-
-const phrase = await usePhrases(
-    ...Object.values(panes).map((pane) => pane.phrase),
-);
-</script>
-
-<template>
-    <section :class="$style.paneSwitch">
-        <div :class="$style.inner">
-            <PaneSwitchButton
-                v-for="(pane, paneKey) of panes"
-                :paneKey
-                :icon="pane.icon"
-                :title="phrase[pane.phrase]"
-            />
-
-            <div
-                :class="$style.slider"
-                :style="{ '--_activePane': getPaneOrder(activePane) }"
-            ></div>
-        </div>
-    </section>
-</template>
-
-<style lang="scss" module>
-.paneSwitch {
-    --buttonSize: 40px;
-    --gapSize: var(--gap);
-
-    border-bottom: 1px solid var(--border);
-    display: flex;
-    justify-content: center;
-
-    .inner {
-        position: relative;
-        display: flex;
-    }
-
-    .slider {
-        position: absolute;
-        width: var(--buttonSize);
-        height: 3px;
-        bottom: -1px;
-        margin-left: calc(var(--gapSize) / 2);
-        background: var(--textMuted);
-        left: calc(var(--_activePane) * (var(--buttonSize) + var(--gapSize)));
-        @include transition(left);
-    }
-}
-</style>
+<script lang="ts" setup>
+import PaneSwitchButton from './PaneSwitchButton.vue';
+
+const { panes, activePane, getPaneOrder } = useMajorPane();
+
+const phrase = await usePhrases(
+    ...Object.values(panes).map((pane) => pane.phrase),
+);
+</script>
+
+<template>
+    <section :class="$style.paneSwitch">
+        <div :class="$style.inner">
+            <PaneSwitchButton
+                v-for="(pane, paneKey) of panes"
+                :paneKey
+                :icon="pane.icon"
+                :title="phrase[pane.phrase]"
+            />
+
+            <div
+                :class="$style.slider"
+                :style="{ '--_activePane': getPaneOrder(activePane) }"
+            ></div>
+        </div>
+    </section>
+</template>
+
+<style lang="scss" module>
+.paneSwitch {
+    --buttonSize: 40px;
+    --gapSize: var(--gap);
+
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    justify-content: center;
+
+    .inner {
+        position: relative;
+        display: flex;
+    }
+
+    .slider {
+        position: absolute;
+        width: var(--buttonSize);
+        height: 3px;
+        bottom: -1px;
+        margin-left: calc(var(--gapSize) / 2);
+        background: var(--textMuted);
+        left: calc(var(--_activePane) * (var(--buttonSize) + var(--gapSize)));
+        @include transition(left);
+    }
+}
+</style>