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

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>

package/app/pages/contributors.vue

@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+import eruditConfig from '#erudit/config';
+
+const { data: contributorList } = await useFetch(`/api/contributor/list`, {
+    key: 'contributor-list',
+});
+
+const editorsNumber = computed(() => {
+    return contributorList.value?.filter((i) => i.isEditor)?.length ?? 0;
+});
+
+const phrase = await usePhrases(
+    'contributors',
+    'contributors_page_description',
+    'contributors_page_invite',
+    'contributions_explain',
+    'editor',
+);
+
+useHead({
+    title:
+        phrase.contributors +
+        ' - ' +
+        (eruditConfig.seo?.title || eruditConfig.site?.title),
+});
+
+useSeoMeta({
+    title:
+        phrase.contributors +
+        ' - ' +
+        (eruditConfig.seo?.title || eruditConfig.site?.title),
+    description: phrase.contributors_page_description,
+});
+
+const fullDescription = (() => {
+    let _description = phrase.contributors_page_description;
+
+    if (eruditConfig.content?.howToImproveLink) {
+        _description +=
+            ' ' +
+            phrase.contributors_page_invite(
+                eruditConfig.content.howToImproveLink,
+            );
+    }
+
+    return _description;
+})();
+</script>
+
+<template>
+    <MainTitle icon="users" :title="phrase.contributors" />
+    <MainDescription
+        :class="$style.pageDescription"
+        :html="true"
+        :description="fullDescription"
+    />
+    <section :class="$style.contributors">
+        <NuxtLink
+            :to="`/contributor/${contributor.contributorId}`"
+            :prefetch="false"
+            v-for="(contributor, i) of contributorList"
+            :class="$style.contributor"
+            :style="{
+                '--contributorColor': stringColor(contributor.contributorId),
+            }"
+        >
+            <ContributorAvatar
+                :contributorId="contributor.contributorId"
+                :avatar="contributor.avatar"
+                :class="$style.avatar"
+            />
+            <div :class="$style.info">
+                <div :class="$style.main">
+                    <div :class="$style.position">
+                        <template v-if="contributor.isEditor">
+                            <MyIcon
+                                :title="phrase.editor"
+                                :class="$style.editor"
+                                name="graduation"
+                            />
+                        </template>
+                        <template v-else>
+                            {{ i - editorsNumber + 1 }}.
+                        </template>
+                    </div>
+                    <div :class="$style.name">
+                        {{
+                            contributor.displayName || contributor.contributorId
+                        }}
+                    </div>
+                </div>
+                <div :class="$style.contributions">
+                    {{
+                        phrase.contributions_explain(contributor.contributions)
+                    }}
+                </div>
+            </div>
+        </NuxtLink>
+    </section>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.pageDescription a {
+    color: inherit;
+    text-decoration-style: dashed;
+    text-decoration-color: var(--textDimmed);
+
+    &:hover {
+        text-decoration-style: solid;
+        text-decoration-color: var(--text);
+    }
+}
+
+.contributors {
+    padding: var(--_pMainY) var(--_pMainX);
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--gap);
+
+    @include bp.below('mobile') {
+        padding: var(--_pMainY) 0;
+        gap: 0;
+    }
+
+    .contributor {
+        display: flex;
+        align-items: center;
+        gap: var(--gap);
+        padding: var(--gap);
+        border-radius: 5px;
+        text-decoration: none;
+        color: inherit;
+        @include transition(background);
+
+        &:hover {
+            background: var(--bgAccent);
+        }
+
+        @include bp.below('mobile') {
+            border-radius: 0;
+        }
+
+        .avatar {
+            --_avatarSize: 50px;
+            flex-shrink: 0;
+            box-shadow: 0 0 5px 5px
+                color-mix(in srgb, var(--contributorColor), transparent 85%);
+        }
+
+        .info {
+            display: flex;
+            flex-direction: column;
+
+            .main {
+                display: flex;
+                align-items: center;
+                gap: 5px;
+
+                .position {
+                    font-size: 0.9em;
+                    font-weight: 600;
+                    color: var(--textMuted);
+
+                    .editor {
+                        cursor: help;
+                    }
+                }
+
+                .name {
+                    font-weight: 600;
+                }
+            }
+
+            .contributions {
+                color: var(--textMuted);
+                font-size: 0.85em;
+            }
+        }
+    }
+}
+</style>

package/app/pages/group/[...groupId].vue

@@ -1,66 +1,58 @@
-<script lang="ts" setup>
-import { NO_ALIASES } from '@erudit-js/cog/schema';
-import eruditConfig from '#erudit/config';
-
-import { type ContentGroupData } from '@shared/content/data/type/group';
-import { locationIcon } from '@erudit/shared/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 ContentSection from '@app/components/main/utils/ContentSection.vue';
-
-const location = useBitranLocation();
-
-const groupData = await useContentData<ContentGroupData>();
-await useContentPage(groupData);
-
-const content = await useBitranContent(location);
-const phrase = await usePhrases('group');
-</script>
-
-<template>
-    <ContentDecoration
-        v-if="groupData.generic.decoration"
-        :decoration="groupData.generic.decoration"
-    />
-
-    <Breadcrumb
-        v-if="groupData.generic.context?.length > 1"
-        :context="groupData.generic.context"
-    />
-
-    <ContentTitle
-        :title="
-            groupData.generic?.title ||
-            groupData.generic.contentId.split('/').pop()!
-        "
-        :icon="locationIcon(location!)"
-        :hint="phrase.group"
-    />
-
-    <ContentDescription
-        v-if="groupData.generic?.description"
-        :description="groupData.generic?.description"
-    />
-
-    <ContentPopovers :generic="groupData.generic" />
-
-    <!-- TODO: List of materials in group -->
-
-    <div style="clear: both"></div>
-
-    <hr style="display: none" />
-
-    <ContentSection>
-        <BitranContent
-            :content
-            :context="{ location, aliases: NO_ALIASES() }"
-        />
-    </ContentSection>
-
-    <ContentSection v-if="eruditConfig.ads?.bottom">
-        <AdsBannerBottom />
-    </ContentSection>
-</template>
+<script lang="ts" setup>
+import { type BitranLocation } from '@erudit-js/cog/schema';
+import eruditConfig from '#erudit/config';
+
+import { type ContentGroupData } from '@shared/content/data/type/group';
+import { locationIcon } from '@erudit/shared/icons';
+
+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 ContentSection from '@app/components/main/content/ContentSection.vue';
+
+const location = useBitranLocation() as Ref<BitranLocation>;
+
+const groupData = await useContentData<ContentGroupData>();
+await useContentPage(groupData);
+
+const phrase = await usePhrases('group');
+</script>
+
+<template>
+    <ContentDecoration
+        v-if="groupData.generic.decoration"
+        :decoration="groupData.generic.decoration"
+    />
+
+    <ContentBreadcrumb :context="groupData.generic.context" />
+
+    <MainTitle
+        :title="
+            groupData.generic?.title ||
+            groupData.generic.contentId.split('/').pop()!
+        "
+        :icon="locationIcon(location!)"
+        :hint="phrase.group"
+    />
+
+    <MainDescription
+        v-if="groupData.generic?.description"
+        :description="groupData.generic?.description"
+    />
+
+    <ContentPopovers :generic="groupData.generic" />
+
+    <!-- TODO: List of materials in group -->
+
+    <div style="clear: both"></div>
+
+    <hr style="display: none" />
+
+    <ContentSection>
+        <MainBitranContent :location />
+    </ContentSection>
+
+    <ContentSection v-if="adsAllowed() && eruditConfig.ads?.bottom">
+        <AdsBannerBottom />
+    </ContentSection>
+</template>

package/app/pages/index.vue

@@ -1,32 +1,32 @@
-<script lang="ts" setup>
-import eruditConfig from '#erudit/config';
-
-const phrase = await usePhrases('seo_index_title', 'seo_index_description');
-
-const seoTitle =
-    eruditConfig.seo?.indexTitle ||
-    eruditConfig.seo?.title ||
-    phrase.seo_index_title;
-const seoDescription =
-    eruditConfig.seo?.indexDescription || phrase.seo_index_description;
-
-useSeoMeta({
-    title: seoTitle,
-    ogTitle: seoTitle,
-    description: seoDescription,
-    ogDescription: seoDescription,
-});
-</script>
-
-<template>
-    <div style="padding: var(--_pMainY) var(--_pMainX)">
-        <h1>
-            {{
-                eruditConfig.seo?.title ||
-                eruditConfig.site?.title ||
-                phrase.seo_index_title
-            }}
-        </h1>
-        <p>TODO</p>
-    </div>
-</template>
+<script lang="ts" setup>
+import eruditConfig from '#erudit/config';
+
+const phrase = await usePhrases('seo_index_title', 'seo_index_description');
+
+const seoTitle =
+    eruditConfig.seo?.indexTitle ||
+    eruditConfig.seo?.title ||
+    phrase.seo_index_title;
+const seoDescription =
+    eruditConfig.seo?.indexDescription || phrase.seo_index_description;
+
+useSeoMeta({
+    title: seoTitle,
+    ogTitle: seoTitle,
+    description: seoDescription,
+    ogDescription: seoDescription,
+});
+</script>
+
+<template>
+    <div style="padding: var(--_pMainY) var(--_pMainX)">
+        <h1>
+            {{
+                eruditConfig.seo?.title ||
+                eruditConfig.site?.title ||
+                phrase.seo_index_title
+            }}
+        </h1>
+        <p>TODO</p>
+    </div>
+</template>

package/app/pages/practice/[...practice].vue

@@ -1,3 +1,3 @@
-<template>
-    <MainTopic />
-</template>
+<template>
+    <MainTopic />
+</template>

package/app/pages/summary/[...summaryId].vue

@@ -1,3 +1,3 @@
-<template>
-    <MainTopic />
-</template>
+<template>
+    <MainTopic />
+</template>

package/app/plugins/analytics.ts

@@ -8,6 +8,14 @@ export default defineNuxtPlugin({
                 return;
             }
 
+            if (typeof eruditConfig?.debug?.analytics === 'undefined') {
+                if (import.meta.dev) {
+                    return;
+                }
+            } else if (!Boolean(eruditConfig?.debug?.analytics)) {
+                return;
+            }
+
             if (eruditConfig.analytics.yandex) {
                 const yandex = eruditConfig.analytics.yandex;
 

package/app/plugins/prerender.server.ts

@@ -1,22 +1,22 @@
-let alreadyPrerendered = false;
-let isPrerendering = false;
-
-export default defineNuxtPlugin({
-    name: 'erudit-prerender',
-    async setup(_nuxt) {
-        if (import.meta.dev) {
-            return; // Server is available so no need to prerender in dev mode
-        }
-
-        if (alreadyPrerendered || isPrerendering) {
-            return;
-        }
-
-        isPrerendering = true;
-
-        const routesToPrerender = await $fetch<string[]>('/api/prerender');
-        _nuxt.runWithContext(() => prerenderRoutes(routesToPrerender));
-
-        alreadyPrerendered = true;
-    },
-});
+let alreadyPrerendered = false;
+let isPrerendering = false;
+
+export default defineNuxtPlugin({
+    name: 'erudit-prerender',
+    async setup(_nuxt) {
+        if (import.meta.dev) {
+            return; // Server is available so no need to prerender in dev mode
+        }
+
+        if (alreadyPrerendered || isPrerendering) {
+            return;
+        }
+
+        isPrerendering = true;
+
+        const routesToPrerender = await $fetch<string[]>('/api/prerender');
+        _nuxt.runWithContext(() => prerenderRoutes(routesToPrerender));
+
+        alreadyPrerendered = true;
+    },
+});