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

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

@@ -0,0 +1,227 @@
+<script lang="ts" setup>
+import eruditConfig from '#erudit/config';
+import { type PageContributor } from '@shared/contributor';
+
+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">
+            <Avatar
+                icon="user"
+                :src="
+                    contributor.avatar
+                        ? `/contributors/${contributor.avatar}`
+                        : undefined
+                "
+                :class="$style.avatar"
+                :color="stringColor(contributor.contributorId)"
+                :styling="{ glow: true, border: true }"
+            />
+            <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>
+    <MainBitranContent
+        v-if="contributor.hasDescription"
+        :location="{ type: 'contributor', path: contributor.contributorId }"
+    />
+</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;
+        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,184 @@
+<script lang="ts" setup>
+import eruditConfig from '#erudit/config';
+import { createContributorLink } from '@shared/link';
+
+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',
+    'become_contributor',
+    'contributions_explain',
+    'editor',
+);
+
+useEruditHead({
+    title: phrase.contributors,
+    description: phrase.contributors_page_description,
+});
+
+const fullDescription = (() => {
+    let _description = phrase.contributors_page_description;
+
+    if (eruditConfig.content?.howToImproveLink) {
+        _description += ' ' + phrase.contributors_page_invite;
+    }
+
+    return _description;
+})();
+</script>
+
+<template>
+    <MainTitle icon="users" :title="phrase.contributors" />
+    <MainDescription
+        :class="$style.pageDescription"
+        :html="true"
+        :description="fullDescription"
+    />
+    <MainActionButton
+        v-if="eruditConfig.content?.howToImproveLink"
+        icon="users"
+        :label="phrase.become_contributor"
+        :link="eruditConfig.content.howToImproveLink"
+    />
+    <MainSection>
+        <section :class="$style.contributors">
+            <EruditLink
+                :to="createContributorLink(contributor.contributorId)"
+                :prefetch="false"
+                v-for="(contributor, i) of contributorList"
+                :class="$style.contributor"
+                :style="{
+                    '--contributorColor': stringColor(
+                        contributor.contributorId,
+                    ),
+                }"
+            >
+                <Avatar
+                    icon="user"
+                    :src="
+                        contributor.avatar
+                            ? `/contributors/${contributor.avatar}`
+                            : undefined
+                    "
+                    :class="$style.avatar"
+                    :color="stringColor(contributor.contributorId)"
+                    :styling="{ glow: true, border: false }"
+                />
+                <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
+                        v-if="contributor.contributions"
+                        :class="$style.contributions"
+                    >
+                        {{
+                            phrase.contributions_explain(
+                                contributor.contributions,
+                            )
+                        }}
+                    </div>
+                </div>
+            </EruditLink>
+        </section>
+    </MainSection>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.contributors {
+    padding: 0 var(--_pMainX);
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(310px, 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: color-mix(
+                in srgb,
+                var(--bgMain),
+                var(--contributorColor) 12%
+            );
+        }
+
+        @include bp.below('mobile') {
+            border-radius: 0;
+        }
+
+        .avatar {
+            --avatarSize: 50px;
+            flex-shrink: 0;
+        }
+
+        .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,65 +1,53 @@
-<script lang="ts" setup>
-import { NO_ALIASES } from '@erudit-js/bitran-elements/aliases/shared';
-
-import { type ContentGroupData } from '@shared/content/data/type/group';
-import eruditConfig from '#erudit/config';
-
-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';
-import { locationIcon } from '@erudit/shared/icons';
-
-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>
-
-    <AdsBottomBanner v-if="eruditConfig.ads?.bottomBlockId" />
-</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';
+
+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" />
+
+    <MainCameo />
+
+    <div style="clear: both"></div>
+
+    <MainBitranContent :location />
+
+    <MainSection v-if="adsAllowed() && eruditConfig.ads?.bottom">
+        <AdsBannerBottom />
+    </MainSection>
+</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/sponsors.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import eruditConfig from '#erudit/config';
+
+const { data: sponsors } = await useAsyncData(
+    'sponsors',
+    () => $fetch('/api/sponsor/list'),
+    { deep: false },
+);
+
+const phrase = await usePhrases(
+    'sponsors',
+    'sponsors_description',
+    'become_sponsor',
+);
+
+useEruditHead({
+    title: phrase.sponsors,
+    description: phrase.sponsors_description,
+});
+</script>
+
+<template>
+    <MainTitle icon="diamond" :title="phrase.sponsors" />
+    <MainDescription :description="phrase.sponsors_description" />
+    <MainActionButton
+        v-if="eruditConfig.content?.howToImproveLink"
+        icon="diamond"
+        :label="phrase.become_sponsor"
+        :link="eruditConfig.content.howToImproveLink"
+    />
+    <MainSection :class="$style.sponsorSection" v-if="sponsors?.tier2?.length">
+        <template v-slot:header>
+            <h2 :class="$style.tierHeading">
+                {{ eruditConfig.sponsors!.tier2Label }}
+            </h2>
+        </template>
+        <div :class="$style.tier2Grid">
+            <SponsorTier2 v-for="sponsor of sponsors.tier2" :sponsor />
+        </div>
+    </MainSection>
+    <MainSection :class="$style.sponsorSection" v-if="sponsors?.tier1?.length">
+        <template v-slot:header>
+            <h2 :class="$style.tierHeading">
+                {{ eruditConfig.sponsors!.tier1Label }}
+            </h2>
+        </template>
+        <div :class="$style.tier1Grid">
+            <SponsorTier1 v-for="sponsor of sponsors.tier1" :sponsor />
+        </div>
+    </MainSection>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.tierHeading {
+    padding: var(--gap) var(--_pMainX);
+    font-size: 1.4em;
+
+    @include bp.below('mobile') {
+        text-align: center;
+    }
+}
+
+.sponsorSection:nth-child(even of .sponsorSection) {
+    .tierHeading {
+        padding-bottom: 0;
+        padding-top: calc(1.5 * var(--gap));
+    }
+}
+
+.tier2Grid {
+    padding: 0 var(--_pMainX);
+    display: grid;
+    justify-content: center;
+    grid-template-columns: repeat(auto-fit, 310px);
+    gap: var(--gap);
+
+    @include bp.below('mobile') {
+        padding: var(--_pMainY) 0;
+    }
+}
+
+.tier1Grid {
+    padding: 0 var(--_pMainX);
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
+    gap: var(--gap);
+
+    @include bp.below('mobile') {
+        padding: var(--_pMainY) 0;
+        gap: 0;
+    }
+}
+</style>