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

package/app/components/main/MainDescription.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+defineProps<{ description: string; html?: boolean }>();
+const pretty = useFormatText();
+</script>
+
+<template>
+    <section
+        v-if="html"
+        :class="$style.contentDescription"
+        v-html="description"
+    ></section>
+    <section v-else :class="$style.contentDescription">
+        {{ pretty(description) }}
+    </section>
+</template>
+
+<style lang="scss" module>
+.contentDescription {
+    padding: var(--_pMainY) var(--_pMainX);
+    font-weight: 500;
+    font-size: 1.1em;
+    color: var(--text);
+}
+</style>

package/app/components/main/{utils/ContentTitle.vue → MainTitle.vue}

@@ -6,12 +6,18 @@ defineProps<{ icon: string; title: string; hint?: string }>();
 
 <template>
     <section :class="$style.contentTitle">
-        <MyIcon v-if="isMyIcon(icon)" :name="icon as any" :title="hint" />
+        <MyIcon
+            v-if="isMyIcon(icon)"
+            :name="icon as any"
+            :title="hint"
+            :class="{ [$style.hasHint]: !!hint }"
+        />
         <MyRuntimeIcon
             v-else
             name="content-title-icon"
             :svg="icon"
             :title="hint"
+            :class="{ [$style.hasHint]: !!hint }"
         />
         <h1>{{ title }}</h1>
     </section>
@@ -24,7 +30,7 @@ defineProps<{ icon: string; title: string; hint?: string }>();
     display: flex;
     align-items: center;
     gap: var(--gap);
-    padding: 0 var(--_pMainX);
+    padding: var(--_pMainY) var(--_pMainX);
 
     [my-icon] {
         flex-shrink: 0;
@@ -32,6 +38,9 @@ defineProps<{ icon: string; title: string; hint?: string }>();
         color: var(--textMuted);
         position: relative;
         top: 1px;
+    }
+
+    .hasHint {
         cursor: help;
     }
 

package/app/components/main/content/ContentBreadcrumb.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+import type { BreadcrumbItem } from '@shared/breadcrumb';
+import type { Context } from '@shared/content/context';
+
+defineProps<{ context: Context }>();
+</script>
+
+<template>
+    <MainBreadcrumb
+        v-if="context?.length > 1"
+        :items="
+            context.reduce((acc, item, i, arr) => {
+                if (item.hidden || i === arr.length - 1) {
+                    return acc;
+                }
+
+                acc.push({
+                    title: item.title,
+                    icon: item.icon as MyIconName,
+                    link: item.href,
+                });
+
+                return acc;
+            }, [] as BreadcrumbItem[])
+        "
+    />
+</template>

package/app/components/main/{utils → content}/ContentSection.vue

@@ -23,7 +23,7 @@
         content: '';
     }
 
-    &:nth-of-type(even) {
+    &:nth-of-type(odd) {
         &::before {
             @include shade;
         }
@@ -32,7 +32,7 @@
         }
     }
 
-    &:nth-of-type(odd) {
+    &:nth-of-type(even) {
         &::before {
             @include simple;
         }

package/app/components/main/topic/MainTopic.vue

@@ -1,22 +1,20 @@
 <script lang="ts" setup>
-import { NO_ALIASES, type TopicPart } from '@erudit-js/cog/schema';
+import { type BitranLocation, type TopicPart } from '@erudit-js/cog/schema';
 
 import eruditConfig from '#erudit/config';
 
-import { type ContentTopicData } from '@erudit/shared/content/data/type/topic';
+import { type ContentTopicData } from '@shared/content/data/type/topic';
+import { TOPIC_PART_ICON } from '@shared/icons';
 import { topicLocation } from '@app/scripts/aside/minor/topic';
 
-import ContentDecoration from '../utils/ContentDecoration.vue';
-import ContentTitle from '../utils/ContentTitle.vue';
-import ContentDescription from '../utils/ContentDescription.vue';
+import ContentBreadcrumb from '@app/components/main/content/ContentBreadcrumb.vue';
+import ContentDecoration from '@app/components/main/content/ContentDecoration.vue';
+import ContentPopovers from '@app/components/main/content/ContentPopovers.vue';
+import ContentReferences from '@app/components/main/content/ContentReferences.vue';
+import ContentSection from '@app/components/main/content/ContentSection.vue';
 import TopicPartSwitch from './TopicPartSwitch.vue';
-import Breadcrumb from '../utils/Breadcrumb.vue';
-import ContentPopovers from '../utils/ContentPopovers.vue';
-import ContentReferences from '../utils/ContentReferences.vue';
-import ContentSection from '../utils/ContentSection.vue';
-import { TOPIC_PART_ICON } from '@erudit/shared/icons';
 
-const location = useBitranLocation();
+const location = useBitranLocation() as Ref<BitranLocation>;
 const topicPart = computed(() => location.value?.type as TopicPart);
 
 const topicData = await useContentData<ContentTopicData>();
@@ -24,8 +22,6 @@ await useContentPage(topicData);
 
 const phrase = await usePhrases('article', 'summary', 'practice');
 
-const content = await useBitranContent(location);
-
 onMounted(() => {
     watchEffect(() => {
         // Telling live toc that content is mounted
@@ -40,12 +36,9 @@ onMounted(() => {
         :decoration="topicData.generic.decoration"
     />
 
-    <Breadcrumb
-        v-if="topicData.generic.context?.length > 1"
-        :context="topicData.generic.context"
-    />
+    <ContentBreadcrumb :context="topicData.generic.context" />
 
-    <ContentTitle
+    <MainTitle
         :title="
             topicData.generic?.title ||
             topicData.generic.contentId.split('/').pop()!
@@ -54,7 +47,7 @@ onMounted(() => {
         :hint="phrase[location!.type as TopicPart]"
     />
 
-    <ContentDescription
+    <MainDescription
         v-if="topicData.generic?.description"
         :description="topicData.generic?.description"
     />
@@ -68,7 +61,9 @@ onMounted(() => {
 
     <div style="clear: both"></div>
 
-    <BitranContent :content :context="{ location, aliases: NO_ALIASES() }" />
+    <ContentSection>
+        <MainBitranContent :location />
+    </ContentSection>
 
     <ContentSection v-if="topicData.generic.references">
         <ContentReferences :references="topicData.generic.references" />

package/app/components/main/topic/TopicPartSwitch.vue

@@ -33,17 +33,23 @@ const Link = defineNuxtLink({ prefetch: false });
 .topicPartSwitch {
     --height: 50px;
 
+    position: relative;
+    top: 65px;
+
     display: flex;
     align-items: end;
     justify-content: center;
     gap: var(--gapBig);
     margin: var(--_pMainY) 0;
-    margin-top: var(--gapBig);
+    margin-top: -30px;
 
     width: 100%;
     height: var(--height);
-    background: linear-gradient(to bottom, transparent, var(--bgAside));
-    border-bottom: 2px solid var(--border);
+    border-bottom: 2px solid transparent;
+
+    @include bp.below('mobile') {
+        top: 56px;
+    }
 }
 
 .partButton {

package/app/components/preview/display/Unique.vue

@@ -5,9 +5,6 @@ import type { PreviewDataUnique } from '@app/scripts/preview/data/unique';
 import type { PreviewDisplayProps } from '@app/scripts/preview/display';
 
 const { data } = defineProps<PreviewDisplayProps<PreviewDataUnique>>();
-
-const bitranTranspiler = await useBitranTranspiler();
-const root = await bitranTranspiler.parser.parse(data.bitran.content.biCode);
 </script>
 
 <template>
@@ -15,16 +12,10 @@ const root = await bitranTranspiler.parser.parse(data.bitran.content.biCode);
         <div
             :class="[
                 $style.bitranPreviewContent,
-                data.productName === headingName && $style.heading,
+                data.elementName === headingName && $style.heading,
             ]"
         >
-            <BitranContent
-                :content="{
-                    root,
-                    renderDataStorage: data.bitran.content.renderDataStorage,
-                }"
-                :context="data.bitran.context"
-            />
+            <BitranContent :rawContent="data.rawBitranContent" />
         </div>
     </PreviewDisplay>
 </template>

package/app/composables/adsAllowed.ts

@@ -2,7 +2,7 @@ import eruditConfig from '#erudit/config';
 
 export function adsAllowed() {
     if (typeof eruditConfig?.debug?.ads === 'undefined') {
-        return false;
+        return import.meta.dev ? false : true;
     } else if (!Boolean(eruditConfig?.debug?.ads)) {
         return false;
     }

package/app/composables/majorPane.ts

@@ -44,8 +44,9 @@ export function useMajorPane() {
     const route = useRoute();
 
     const activePane = useState<MajorPaneKey>('major-pane', () => {
-        switch (route.path) {
-            case '/members':
+        switch (true) {
+            case route.path.startsWith('/contributors'):
+            case route.path.startsWith('/contributor/'):
                 return 'pages';
             default:
                 return 'index';

package/app/composables/phrases.ts

@@ -9,7 +9,7 @@ interface LanguagePayload {
     strFunctions: Record<string, string>;
 }
 
-const functions: Record<string, Function> = {};
+let functions: Record<string, Function>;
 const functionPhrases: Record<string, Function> = {};
 
 const phraseApiRoute = (phraseId: EruditPhraseId) =>
@@ -42,9 +42,14 @@ export function usePhrases<T extends EruditPhraseId[]>(
 
             if (strPhrase.startsWith('~!~FUNC~!~')) {
                 const strFunction = strPhrase.replace('~!~FUNC~!~', '');
-                functionPhrases[phraseId] ||= new Function(strFunction).bind(
-                    functions,
-                )();
+                functionPhrases[phraseId] ||= new Function(
+                    'funcs',
+                    `
+                    with(funcs) {
+                        ${strFunction}
+                    }
+                `,
+                )(functions);
                 phraseCaller[phraseId] = functionPhrases[phraseId];
             } else {
                 phraseCaller[phraseId] = strPhrase;
@@ -56,10 +61,17 @@ export function usePhrases<T extends EruditPhraseId[]>(
 }
 
 async function prepareFunctions(payload: LanguagePayload) {
-    if (payload?.strFunctions) return;
+    payload.strFunctions ||= await $fetch(functionsApiRoute, {
+        responseType: 'json',
+    });
 
-    payload.strFunctions = await $fetch(functionsApiRoute);
-
-    for (const [funcName, strFunc] of Object.entries(payload.strFunctions))
-        functions[funcName] = new Function(strFunc)();
+    functions ||= (() => {
+        const _functions: Record<string, Function> = {};
+        for (const [funcName, strFunc] of Object.entries(
+            payload.strFunctions,
+        )) {
+            _functions[funcName] = new Function(strFunc)();
+        }
+        return _functions;
+    })();
 }

package/app/pages/book/[...bookId].vue

@@ -2,11 +2,9 @@
 import type { ContentBookData } from '@erudit/shared/content/data/type/book';
 import type { MyIconName } from '#my-icons';
 
-import ContentDecoration from '@app/components/main/utils/ContentDecoration.vue';
-import Breadcrumb from '@app/components/main/utils/Breadcrumb.vue';
-import ContentTitle from '@app/components/main/utils/ContentTitle.vue';
-import ContentDescription from '@app/components/main/utils/ContentDescription.vue';
-import ContentPopovers from '@app/components/main/utils/ContentPopovers.vue';
+import ContentBreadcrumb from '@app/components/main/content/ContentBreadcrumb.vue';
+import ContentDecoration from '@app/components/main/content/ContentDecoration.vue';
+import ContentPopovers from '@app/components/main/content/ContentPopovers.vue';
 
 const bookData = await useContentData<ContentBookData>();
 await useContentPage(bookData);
@@ -20,12 +18,9 @@ const phrase = await usePhrases('book');
         :decoration="bookData.generic.decoration"
     />
 
-    <Breadcrumb
-        v-if="bookData.generic.context?.length > 1"
-        :context="bookData.generic.context"
-    />
+    <ContentBreadcrumb :context="bookData.generic.context" />
 
-    <ContentTitle
+    <MainTitle
         :title="
             bookData.generic?.title ||
             bookData.generic.contentId.split('/').pop()!
@@ -34,7 +29,7 @@ const phrase = await usePhrases('book');
         :hint="phrase.book"
     />
 
-    <ContentDescription
+    <MainDescription
         v-if="bookData.generic?.description"
         :description="bookData.generic?.description"
     />

package/app/pages/contributor/[contributorId].vue

@@ -0,0 +1,225 @@
+<script lang="ts" setup>
+import eruditConfig from '#erudit/config';
+import { type PageContributor } from '@shared/contributor';
+import ContentSection from '@app/components/main/content/ContentSection.vue';
+
+const route = useRoute();
+const nuxtApp = useNuxtApp();
+const contributor = shallowRef<PageContributor>(null as any);
+const contributorColor = ref<string>('');
+const resolved = computed(() => {
+    const title = (() => {
+        return contributor.value.displayName || contributor.value.contributorId;
+    })();
+
+    return {
+        title,
+    };
+});
+
+let requestCounter = 0;
+
+function getPayloadCache() {
+    const payloadKey = 'contributor';
+    return (nuxtApp.static.data[payloadKey] ||= nuxtApp.payload.data[
+        payloadKey
+    ] ||=
+        {});
+}
+
+async function fetchContributorData(contributorId: string, requestId: number) {
+    const payloadCache = getPayloadCache();
+
+    if (!payloadCache[contributorId]) {
+        try {
+            const data = await $fetch(`/api/contributor/page/${contributorId}`);
+
+            if (requestId === requestCounter) {
+                payloadCache[contributorId] = data;
+            }
+        } catch (error) {
+            console.error(
+                `Error fetching contributor ${contributorId}:`,
+                error,
+            );
+        }
+    }
+
+    contributor.value = payloadCache[contributorId];
+    contributorColor.value = stringColor(contributor.value.contributorId);
+}
+
+await fetchContributorData(
+    route.params.contributorId as string,
+    ++requestCounter,
+);
+
+const phrase = await usePhrases(
+    'contributors',
+    'contributor',
+    'contributor_description',
+    'editor',
+);
+
+useHead({
+    title:
+        resolved.value.title +
+        ' | ' +
+        (contributor.value.isEditor ? phrase.editor : phrase.contributor) +
+        ' - ' +
+        (eruditConfig.seo?.title || eruditConfig.site?.title),
+});
+
+useSeoMeta({
+    ogTitle:
+        resolved.value.title +
+        ' | ' +
+        (contributor.value.isEditor ? phrase.editor : phrase.contributor) +
+        ' - ' +
+        (eruditConfig.seo?.title || eruditConfig.site?.title),
+    description: phrase.contributor_description(resolved.value.title),
+});
+</script>
+
+<template>
+    <MainBreadcrumb
+        :items="[
+            {
+                title: phrase.contributors,
+                icon: 'users',
+                link: '/contributors',
+            },
+        ]"
+    />
+    <header
+        :class="$style.header"
+        :style="{ ['--contributorColor']: contributorColor }"
+    >
+        <div style="position: relative">
+            <ContributorAvatar
+                :class="$style.avatar"
+                :contributorId="contributor.contributorId"
+                :avatar="contributor.avatar"
+            />
+            <MyIcon
+                v-if="contributor.isEditor"
+                name="graduation"
+                :class="$style.editorIcon"
+                :title="phrase.editor"
+            />
+        </div>
+        <h1 :class="$style.name">
+            {{ resolved.title }}
+        </h1>
+        <div v-if="contributor.slogan" :class="$style.slogan">
+            {{ contributor.slogan }}
+        </div>
+        <div v-if="contributor.links" :class="$style.links">
+            <div v-for="(link, label) of contributor.links">
+                <a
+                    :href="link"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    :class="$style.link"
+                >
+                    {{ label }}
+                </a>
+            </div>
+        </div>
+    </header>
+    <ContentSection v-if="contributor.hasDescription">
+        <MainBitranContent
+            :location="{ type: 'contributor', path: contributor.contributorId }"
+        />
+    </ContentSection>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--gap);
+    padding-top: 20px;
+    padding-left: var(--gapBig);
+    padding-right: var(--gapBig);
+
+    .avatar {
+        --_avatarSize: 110px;
+        border: 2px solid var(--bgMain);
+        outline: 2px solid var(--contributorColor);
+        box-shadow: 0 0 100px 100px
+            color-mix(in srgb, var(--contributorColor), transparent 90%);
+    }
+
+    .editorIcon {
+        position: absolute;
+        right: 50%;
+        transform: translate(50%, -50%);
+        color: color-mix(in srgb, var(--text), var(--contributorColor) 50%);
+        font-size: 16px;
+        background: var(--bgMain);
+        padding: 4px;
+        border-radius: 50%;
+        outline: 2px solid var(--contributorColor);
+        cursor: help;
+    }
+
+    .name,
+    .slogan,
+    .links {
+        text-align: center;
+    }
+
+    .name {
+        padding-top: 6px;
+        line-height: 1.2;
+        font-size: 2em;
+        color: color-mix(in srgb, var(--textDeep), var(--contributorColor) 15%);
+        text-shadow: 2px 2px
+            color-mix(in srgb, var(--contributorColor), transparent 80%);
+
+        @include bp.below('mobile') {
+            font-size: 1.8em;
+        }
+    }
+
+    .slogan {
+        font-size: 1.2em;
+        font-weight: 600;
+        padding-bottom: 8px;
+        color: var(--textMuted);
+    }
+
+    .links {
+        display: flex;
+        gap: var(--gap);
+        justify-content: center;
+        flex-wrap: wrap;
+
+        .link {
+            line-height: 2;
+            font-size: 1em;
+            font-weight: 600;
+            color: color-mix(in srgb, var(--text), var(--contributorColor) 20%);
+            border: 1.5px solid
+                color-mix(in srgb, var(--contributorColor), transparent 50%);
+            border-radius: 3px;
+            padding: 4px 10px;
+            text-decoration: none;
+
+            @include transition(background);
+
+            &:hover {
+                background: color-mix(
+                    in srgb,
+                    var(--contributorColor),
+                    transparent 90%
+                );
+            }
+        }
+    }
+}
+</style>