erudit 3.0.0-dev.18 → 3.0.0-dev.19

package/app/assets/icons/graduation.svg

@@ -0,0 +1,3 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path  d="m5.2 18.2q-0.6-0.3-0.9-0.8-0.2-0.5-0.2-1.1v-5l-2.6-1.4q-0.2-0.2-0.4-0.4-0.1-0.2-0.1-0.5 0-0.3 0.1-0.5 0.2-0.3 0.4-0.4l8.9-4.8q0.2-0.2 0.5-0.2 0.2-0.1 0.5-0.1 0.2 0 0.5 0.1 0.2 0 0.5 0.2l9.9 5.4q0.3 0.1 0.4 0.4 0.2 0.2 0.2 0.5v6.7q0 0.4-0.3 0.7-0.3 0.3-0.8 0.3-0.4 0-0.7-0.3-0.3-0.3-0.3-0.7v-6.2l-2.1 1.2v5q0 0.6-0.3 1.1-0.3 0.5-0.8 0.8l-5.2 2.8q-0.3 0.1-0.5 0.2-0.3 0-0.5 0-0.3 0-0.5 0-0.3-0.1-0.5-0.2zm6.2-5.3l7.2-3.9-7.2-3.9-7.2 3.9zm0 6.3l5.3-2.8v-4l-4.2 2.4q-0.3 0.1-0.5 0.2-0.3 0-0.6 0-0.2 0-0.5 0-0.2-0.1-0.5-0.2l-4.2-2.4v4z"/>
+</svg>

package/app/components/aside/AsideMinor.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import type { AsideMinorData } from '@shared/aside/minor';
+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';
 
@@ -7,6 +9,7 @@ import {
     LazyAsideMinorNews,
     LazyAsideMinorTopic,
     LazyAsideMinorContent,
+    LazyAsideMinorContributor,
 } from '#components';
 
 let setupI = 0;
@@ -19,7 +22,9 @@ const AsideMinorPane = shallowRef<Component>();
 
 async function setupAsideMinorData() {
     const currentSetupI = ++setupI;
-    const dataKey = trailingSlash(route.path, false);
+    const path = trailingSlash(route.path, false).substring(1);
+    const pathParts = path.split('/');
+
     const payloadKey = 'aside-minor';
     const asideMinorPayload =
         (nuxtApp.static.data[payloadKey] ||=
@@ -27,23 +32,40 @@ async function setupAsideMinorData() {
             {});
 
     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;
+        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) return; // This data is outdated because new `setupAsideMinorData` was called.
+    if (currentSetupI !== setupI) {
+        // This data is outdated because new `setupAsideMinorData` was called
+        return;
+    }
 
     asideData.value = data;
 
@@ -54,6 +76,8 @@ async function setupAsideMinorData() {
             case 'book':
             case 'group':
                 return LazyAsideMinorContent;
+            case 'contributor':
+                return LazyAsideMinorContributor;
         }
 
         return LazyAsideMinorNews;

package/app/components/aside/major/panes/Pages.vue

@@ -3,32 +3,29 @@ import PaneContentScroll from '../PaneContentScroll.vue';
 
 const route = useRoute();
 
-const phrase = await usePhrases('main_page', 'members');
+const phrase = await usePhrases('main_page', 'contributors');
 
-const { data: memberCount } = await useAsyncData<number>('members-count', () =>
-    $fetch('/api/contributor/count'),
+const { data: contributorCount } = await useAsyncData<number>(
+    'contributor-count',
+    () => $fetch('/api/contributor/count'),
 );
-
-function linkAttrs(link: string) {
-    return {
-        link,
-        active: route.path === link,
-    };
-}
 </script>
 
 <template>
     <PaneContentScroll>
         <AsideListItem
             icon="house"
-            v-bind="linkAttrs('/')"
+            link="/"
+            :active="route.path === '/'"
             :main="phrase.main_page"
         />
         <AsideListItem
+            v-if="contributorCount"
             icon="users"
-            v-bind="linkAttrs('/members')"
-            :main="phrase.members"
-            :secondary="memberCount!.toString()"
+            link="/contributors"
+            :active="route.path.startsWith('/contributor')"
+            :main="phrase.contributors"
+            :secondary="contributorCount!.toString()"
         />
     </PaneContentScroll>
 </template>

package/app/components/aside/minor/{Contribute.vue → AsideMinorContribute.vue}

@@ -1,9 +1,14 @@
 <script lang="ts" setup>
 import eruditConfig from '#erudit/config';
+import { injectAsideData } from '@erudit/app/scripts/aside/minor/state';
+import {
+    type AsideMinorContentBase,
+    type AsideMinorTopic,
+} from '@shared/aside/minor';
 
 import AsideOverlayPane from '../utils/AsideOverlayPane.vue';
 
-const props = defineProps<{ contentId: string }>();
+const asideData = injectAsideData<AsideMinorContentBase>();
 const phrase = await usePhrases(
     'make_contribution',
     'material_improvement',
@@ -11,6 +16,7 @@ const phrase = await usePhrases(
     'how_to_improve',
     'report_problem',
 );
+
 const paneVisible = defineModel<boolean>('pane');
 
 const issueLink = computed(() => {
@@ -22,14 +28,35 @@ const issueLink = computed(() => {
 
 const editPageLink = computed(() => {
     const ghRepository = eruditConfig.repository;
-    return ghRepository
-        ? `https://github.com/${ghRepository.name}/tree/${ghRepository.branch}/content/${props.contentId}`
-        : null;
+
+    if (!ghRepository) {
+        return undefined;
+    }
+
+    let link = `https://github.com/${ghRepository.name}/edit/${ghRepository.branch}/content/${asideData.value.fsContentDirectory}/`;
+
+    if (asideData.value.type === 'topic') {
+        link += `${(<AsideMinorTopic>asideData.value).part}.bi`;
+    }
+
+    return link;
+});
+
+const buttonVisible = computed(() => {
+    return (
+        eruditConfig.content?.howToImproveLink ||
+        issueLink.value ||
+        editPageLink.value
+    );
 });
 </script>
 
 <template>
-    <button :class="$style.contribute" @click="paneVisible = true">
+    <button
+        v-if="buttonVisible"
+        :class="$style.contribute"
+        @click="paneVisible = true"
+    >
         <div :class="$style.icon"><MyIcon name="draw" /></div>
         <div :class="$style.label">{{ phrase.make_contribution }}</div>
     </button>
@@ -37,8 +64,11 @@ const editPageLink = computed(() => {
         <AsideOverlayPane v-if="paneVisible" stick="bottom">
             <div :class="$style.paneBottomActions">
                 <AsideListItem
+                    v-if="eruditConfig.content?.howToImproveLink"
                     icon="circle-help"
                     :main="phrase.how_to_improve"
+                    :link="eruditConfig.content.howToImproveLink"
+                    target="_blank"
                 />
                 <AsideListItem
                     v-if="issueLink"

package/app/components/aside/minor/content/AsideMinorContent.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { AsideMinorContent } from '@shared/aside/minor';
+import type { AsideMinorContentBase } from '@shared/aside/minor';
 import { injectAsideData } from '@app/scripts/aside/minor/state';
 
-const contentData = injectAsideData<AsideMinorContent>();
+const contentData = injectAsideData<AsideMinorContentBase>();
 const phrase = await usePhrases('contributors', 'no_contributors');
 const contributePaneVisible = ref(false);
 
@@ -13,8 +13,8 @@ watch(contentData, () => (contributePaneVisible.value = false));
     <AsideMinorPane :class="$style.asideMinorContent">
         <section :class="$style.contentNav">
             <AsideMinorTopLink
-                :title="contentData.nav?.previous?.title"
-                :link="contentData.nav?.previous?.link"
+                :title="contentData.previousNext?.previous?.title"
+                :link="contentData.previousNext?.previous?.link"
                 :icon="'arrow-left'"
             />
 
@@ -24,8 +24,8 @@ watch(contentData, () => (contributePaneVisible.value = false));
             </div>
 
             <AsideMinorTopLink
-                :title="contentData.nav?.next?.title"
-                :link="contentData.nav?.next?.link"
+                :title="contentData.previousNext?.next?.title"
+                :link="contentData.previousNext?.next?.link"
                 :icon="'arrow-left'"
                 class="icon-flip-h"
             />
@@ -39,10 +39,7 @@ watch(contentData, () => (contributePaneVisible.value = false));
         <section v-else :class="$style.noContributors">
             {{ phrase.no_contributors }}
         </section>
-        <AsideMinorContribute
-            :contentId="contentData.contentId"
-            v-model:pane="contributePaneVisible"
-        />
+        <AsideMinorContribute v-model:pane="contributePaneVisible" />
     </AsideMinorPane>
 </template>
 

package/app/components/aside/minor/contributor/AsideMinorContributor.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { type AsideMinorContributor } from '@shared/aside/minor';
+import { CONTENT_TYPE_ICON } from '@shared/icons';
+import { injectAsideData } from '@erudit/app/scripts/aside/minor/state';
+
+import BookContribution from './BookContribution.vue';
+
+const contributorData = injectAsideData<AsideMinorContributor>();
+const phrase = await usePhrases('contribution');
+
+const bookContributions = (() => {
+    const grouped: Record<string, typeof contributorData.value.contributions> =
+        {};
+
+    contributorData.value.contributions.forEach((contribution) => {
+        const bookTitle = contribution.bookTitle || '';
+        if (!grouped[bookTitle]) {
+            grouped[bookTitle] = [];
+        }
+        grouped[bookTitle].push(contribution);
+    });
+
+    return grouped;
+})();
+
+const topLevelContributions = bookContributions[''];
+delete bookContributions[''];
+</script>
+
+<template>
+    <AsideMinorPane>
+        <section :class="$style.contributionsHeader">
+            {{ phrase.contribution }}:
+            <span>{{ contributorData.contributions.length }}</span>
+        </section>
+        <div :class="$style.contributions">
+            <TreeContainer>
+                <template v-for="contribution of topLevelContributions">
+                    <TreeItem
+                        :icon="CONTENT_TYPE_ICON[contribution.contentType]"
+                        :label="contribution.contentTitle"
+                        :link="contribution.contentLink"
+                    />
+                </template>
+                <BookContribution
+                    v-for="(contributions, bookTitle) in bookContributions"
+                    :bookTitle
+                    :contributions
+                />
+            </TreeContainer>
+        </div>
+    </AsideMinorPane>
+</template>
+
+<style lang="scss" module>
+.contributionsHeader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border-bottom: 1px solid var(--border);
+    color: var(--text);
+    font-size: 1.1em;
+    font-weight: 600;
+    height: 62px;
+
+    span {
+        padding-left: var(--gap);
+        color: var(--textMuted);
+    }
+}
+
+.contributions {
+    max-height: calc(100% - 62px);
+    overflow-y: auto;
+    @include scroll;
+}
+</style>

package/app/components/aside/minor/contributor/BookContribution.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import type { Contribution } from '@shared/contributor';
+import { CONTENT_TYPE_ICON } from '@shared/icons';
+
+defineProps<{
+    bookTitle: string;
+    contributions: Contribution[];
+}>();
+
+const expanded = ref(false);
+</script>
+
+<template>
+    <div :class="[$style.bookContainer, expanded && $style.expanded]">
+        <TreeItem
+            :icon="CONTENT_TYPE_ICON.book"
+            :label="bookTitle"
+            :class="$style.bookTitle"
+            @click="expanded = !expanded"
+        >
+            <MyIcon :class="$style.bookExpandIcon" name="plus" />
+        </TreeItem>
+        <div :class="$style.bookContributions">
+            <TreeItem
+                v-for="contribution in contributions"
+                :icon="CONTENT_TYPE_ICON[contribution.contentType]"
+                :label="contribution.contentTitle"
+                :link="contribution.contentLink"
+                :level="1"
+            />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" module>
+.bookContainer {
+    .bookTitle {
+        @include transition(color, background);
+    }
+
+    &.expanded .bookTitle {
+        color: var(--text);
+    }
+
+    .bookExpandIcon {
+        @include transition(transform);
+        transform: rotate(0deg);
+    }
+
+    &.expanded .bookExpandIcon {
+        transform: rotate(45deg);
+    }
+
+    .bookContributions {
+        overflow: hidden;
+        height: 0;
+        @include transition(height);
+    }
+
+    &.expanded .bookContributions {
+        height: auto;
+    }
+}
+</style>

package/app/components/aside/minor/topic/AsideMinorTopic.vue

@@ -17,10 +17,7 @@ watch(topicData, () => (contributePaneVisible.value = false));
         <TopicNav />
         <TopicToc />
         <TopicContributors v-if="topicData.contributors" />
-        <AsideMinorContribute
-            :contentId="topicData.topicId"
-            v-model:pane="contributePaneVisible"
-        />
+        <AsideMinorContribute v-model:pane="contributePaneVisible" />
     </AsideMinorPane>
 </template>
 

package/app/components/aside/minor/topic/TopicContributors.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { injectAsideData } from '@app/scripts/aside/minor/state';
 import { type AsideMinorTopic } from '@shared/aside/minor';
+import type { ContentContributor } from '@shared/contributor';
 
 import AsideOverlayPane from '../../utils/AsideOverlayPane.vue';
-import type { ContentContributor } from '@shared/contributor';
 
 const phrase = await usePhrases('contributors');
 const topicData = injectAsideData<AsideMinorTopic>();
@@ -27,9 +27,9 @@ onMounted(() => {
     watch(
         topicData,
         () => {
-            if (previousFullId === topicData.value.topicId) return;
+            if (previousFullId === topicData.value.fullContentId) return;
 
-            previousFullId = topicData.value.topicId;
+            previousFullId = topicData.value.fullContentId;
             showcase.value = [...topicData.value.contributors!]
                 .sort(() => 0.5 - Math.random())
                 .slice(0, counter.value.showcase);

package/app/components/aside/minor/topic/TopicNav.vue

@@ -10,15 +10,15 @@ const phrase = await usePhrases('article', 'summary', 'practice');
 const topicData = injectAsideData<AsideMinorTopic>();
 
 const currentTopicPart = computed(() => {
-    return topicData.value.location.type as TopicPart;
+    return topicData.value.part as TopicPart;
 });
 </script>
 
 <template>
     <section :class="$style.topicNav">
         <AsideMinorTopLink
-            :title="topicData.nav?.previous?.title"
-            :link="topicData.nav?.previous?.link"
+            :title="topicData.previousNext?.previous?.title"
+            :link="topicData.previousNext?.previous?.link"
             :icon="'arrow-left'"
         />
 
@@ -26,13 +26,13 @@ const currentTopicPart = computed(() => {
             v-for="topicPart of topicParts"
             :title="phrase[topicPart]"
             :icon="TOPIC_PART_ICON[topicPart]"
-            :link="topicData.nav?.[topicPart]"
+            :link="topicData.partLinks?.[topicPart]"
             :active="topicPart === currentTopicPart"
         />
 
         <AsideMinorTopLink
-            :title="topicData.nav?.next?.title"
-            :link="topicData.nav?.next?.link"
+            :title="topicData.previousNext?.next?.title"
+            :link="topicData.previousNext?.next?.link"
             :icon="'arrow-left'"
             class="icon-flip-h"
         />

package/app/components/aside/minor/topic/TopicToc.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { headingName } from '@erudit-js/bitran-elements/heading/shared';
 
-import { stringifyBitranLocation } from '@erudit-js/cog/schema';
 import type { TocItem } from '@erudit/shared/bitran/toc';
 import { topicLocation } from '@app/scripts/aside/minor/topic';
 import { injectAsideData } from '@app/scripts/aside/minor/state';
@@ -172,7 +171,7 @@ onMounted(() => {
         () => {
             disableLiveToc();
 
-            if (!topicData.value.location || !topicLocation.value) return;
+            if (!topicData.value.part || !topicLocation.value) return;
 
             enableLiveToc();
         },

package/app/components/bitran/BitranContent.vue

@@ -1,20 +1,19 @@
 <script lang="ts" setup>
 import { Bitran, type BitranContent } from '@bitran-js/renderer-vue';
-import {
-    setEruditBitranRuntime,
-    type BitranContext,
-} from '@erudit-js/cog/schema';
+import { setEruditBitranRuntime } from '@erudit-js/cog/schema';
 
 import eruditConfig from '#erudit/config';
-
+import type { RawBitranContent } from '@shared/bitran/content';
 import RenderWrapper from './RenderWrapper.vue';
 
 const props = defineProps<{
-    content: BitranContent;
-    context: BitranContext;
+    rawContent: RawBitranContent;
 }>();
 
-/* Remove transpiler from Bitran Vue Component at all? It takes RootNode already... */
+for (const route of props.rawContent.routes) {
+    prerenderRoutes([route]);
+}
+
 const bitranTranspiler = await useBitranTranspiler();
 const bitranRenderers = await useBitranRenderers();
 
@@ -22,17 +21,17 @@ const bitranRenderers = await useBitranRenderers();
     setEruditBitranRuntime(item, {
         eruditConfig,
         insideInclude: false,
-        context: props.context,
+        context: props.rawContent.context,
     });
 });
 
-const formatText = useFormatText();
+const root = await bitranTranspiler.parser.parse(props.rawContent.biCode);
+const bitranContent: BitranContent = {
+    root,
+    renderDataStorage: props.rawContent.storage,
+};
 
-// onMounted(() => {
-//     watch(urlElement, () => {
-//         //console.log('Highlighting product:', urlElement.value);
-//     }, { immediate: true });
-// });
+const formatText = useFormatText();
 
 const isDev = import.meta.dev;
 const isServer = import.meta.server;
@@ -43,7 +42,7 @@ const isServer = import.meta.server;
         :class="$style.eruditBitranContainer"
         :transpiler="bitranTranspiler"
         :renderers="bitranRenderers"
-        :content
+        :content="bitranContent"
         :editMode="false"
         :formatText
         :RenderWrapper

package/app/components/contributor/ContributorAvatar.vue

@@ -28,12 +28,12 @@ const hasAvatar = computed(() => !!props.avatar);
 
 <style lang="scss" module>
 .contributorAvatar {
-    $avatarSize: 40px;
+    --_avatarSize: 40px;
     --_avatarBlendColor: var(--brand);
 
     position: relative;
-    width: #{$avatarSize};
-    height: #{$avatarSize};
+    width: var(--_avatarSize);
+    height: var(--_avatarSize);
     border-radius: 50%;
     overflow: hidden;
     background: var(--border);

package/app/components/main/MainBitranContent.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import {
+    stringifyBitranLocation,
+    type BitranLocation,
+} from '@erudit-js/cog/schema';
+import type { RawBitranContent } from '@erudit/shared/bitran/content';
+
+const props = defineProps<{ location: BitranLocation }>();
+
+const nuxtApp = useNuxtApp();
+const stringLocation = stringifyBitranLocation(props.location);
+
+const payloadKey = `main-bitran-content`;
+const payloadValue: RawBitranContent =
+    (nuxtApp.static.data[payloadKey] ||=
+    nuxtApp.payload.data[payloadKey] ||=
+        {});
+
+const payloadStringLocation = (() => {
+    if (!payloadValue?.context?.location) {
+        return undefined;
+    }
+
+    return stringifyBitranLocation(payloadValue.context.location);
+})();
+
+if (stringLocation !== payloadStringLocation) {
+    const rawBitranContent = await $fetch<RawBitranContent>(
+        `/api/bitran/content/${stringLocation}`,
+        {
+            responseType: 'json',
+        },
+    );
+
+    Object.assign(payloadValue, rawBitranContent);
+}
+</script>
+
+<template>
+    <BitranContent :rawContent="payloadValue" />
+</template>

package/app/components/main/{utils/Breadcrumb.vue → MainBreadcrumb.vue}

@@ -1,27 +1,20 @@
 <script lang="ts" setup>
-import type { MyIconName } from '#my-icons';
-import type { Context } from '@erudit/shared/content/context';
+import type { BreadcrumbItem } from '@erudit/shared/breadcrumb';
 
-defineProps<{ context: Context }>();
-
-const Link = defineNuxtLink({ prefetch: false });
-
-function getIcon(contextIcon: string) {
-    return contextIcon as MyIconName;
-}
+defineProps<{ items: BreadcrumbItem[] }>();
 </script>
 
 <template>
-    <section :class="$style.breadcrumb">
-        <template
-            v-for="contextItem of context
-                .slice(0, -1)
-                .filter((item) => !item.hidden)"
-        >
-            <Link :to="contextItem.href" :class="$style.breadcrumbItem">
-                <MyIcon :name="getIcon(contextItem.icon)" wrapper="span" />
-                {{ contextItem.title }}
-            </Link>
+    <section v-if="items.length" :class="$style.breadcrumb">
+        <template v-for="item in items">
+            <NuxtLink
+                :to="item.link"
+                :prefetch="false"
+                :class="$style.breadcrumbItem"
+            >
+                <MyIcon :name="item.icon" wrapper="span" />
+                {{ item.title }}
+            </NuxtLink>
             <MyIcon :class="$style.sep" name="angle-right" />
         </template>
     </section>