erudit 3.0.0-dev.2 → 3.0.0-dev.21

package/app/components/aside/AsideMinor.vue

@@ -1,71 +1,97 @@
-<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>
+import { isTopicPart } from '@erudit-js/cog/schema';
+
+import { type AsideMinorNews, type AsideMinorData } from '@shared/aside/minor';
+import { trailingSlash } from '@erudit/utils/url';
+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>

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

@@ -1,63 +1,63 @@
-<script lang="ts" setup>
-import type { MyIconName } from '#my-icons';
-
-defineProps<{
-    paneKey: MajorPaneKey;
-    icon: MyIconName;
-}>();
-
-const { activePane } = useMajorPane();
-</script>
-
-<template>
-    <button
-        @click="activePane = paneKey"
-        :class="[
-            $style.paneSwtichButton,
-            paneKey === activePane ? $style.active : '',
-        ]"
-    >
-        <MyIcon :name="icon" />
-    </button>
-</template>
-
-<style lang="scss" module>
-.paneSwtichButton {
-    --_padding: calc(var(--gapSize) / 2);
-
-    position: relative;
-    padding: var(--_padding);
-    color: var(--textMuted);
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    @include transition(color);
-
-    &::after {
-        content: '';
-        position: absolute;
-        left: var(--_padding);
-        right: var(--_padding);
-        bottom: -1px;
-        height: 3px;
-        background: transparent;
-        @include transition(background);
-    }
-
-    &:hover,
-    &.active {
-        color: var(--text);
-        &::after {
-            background: var(--border);
-        }
-    }
-
-    [my-icon] {
-        display: grid;
-        place-items: center;
-        width: var(--buttonSize);
-        height: var(--buttonSize);
-        font-size: 22px;
-    }
-}
-</style>
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+
+defineProps<{
+    paneKey: MajorPaneKey;
+    icon: MyIconName;
+}>();
+
+const { activePane } = useMajorPane();
+</script>
+
+<template>
+    <button
+        @click="activePane = paneKey"
+        :class="[
+            $style.paneSwtichButton,
+            paneKey === activePane ? $style.active : '',
+        ]"
+    >
+        <MyIcon :name="icon" />
+    </button>
+</template>
+
+<style lang="scss" module>
+.paneSwtichButton {
+    --_padding: calc(var(--gapSize) / 2);
+
+    position: relative;
+    padding: var(--_padding);
+    color: var(--textMuted);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    @include transition(color);
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: var(--_padding);
+        right: var(--_padding);
+        bottom: -1px;
+        height: 3px;
+        background: transparent;
+        @include transition(background);
+    }
+
+    &:hover,
+    &.active {
+        color: var(--text);
+        &::after {
+            background: var(--border);
+        }
+    }
+
+    [my-icon] {
+        display: grid;
+        place-items: center;
+        width: var(--buttonSize);
+        height: var(--buttonSize);
+        font-size: 22px;
+    }
+}
+</style>

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

@@ -1,85 +1,85 @@
-<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>
+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">
+        <EruditLink v-if="siteInfo.logotype" to="/" :class="$style.logo">
+            <img :src="baseUrlPath(siteInfo.logotype)" :alt="siteInfo.title" />
+        </EruditLink>
+        <div :class="[$style.textInfo, !siteInfo.logotype && $style.noLogo]">
+            <h1 :class="$style.title">
+                <EruditLink to="/">{{
+                    siteInfo.title || phrase.site_info_title
+                }}</EruditLink>
+            </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>