erudit 3.0.0-dev.20 → 3.0.0-dev.21

package/app/components/sponsor/SponsorTier1.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { Tier1Sponsor } from '@erudit-js/cog/schema';
+
+const props = defineProps<{
+    sponsor: Tier1Sponsor;
+}>();
+
+const sponsorColor = computed(() => {
+    return props.sponsor.color ?? stringColor(props.sponsor.sponsorId);
+});
+</script>
+
+<template>
+    <a
+        :href="props.sponsor.link"
+        target="_blank"
+        rel="noopener noreferrer"
+        :class="$style.sponsorItem"
+        :style="{ '--sponsorColor': sponsorColor }"
+    >
+        <Avatar
+            icon="diamond"
+            :src="sponsor.avatar"
+            :color="sponsorColor"
+            :class="$style.avatar"
+            :styling="{ glow: true }"
+        />
+        <div>
+            <div :class="$style.main">
+                <MyRuntimeIcon
+                    v-if="sponsor.icon"
+                    name="sponsor-icon"
+                    :svg="sponsor.icon"
+                    :class="$style.icon"
+                />
+                <span :class="$style.name">{{ sponsor.name }}</span>
+            </div>
+            <div v-if="sponsor.slogan" :class="$style.slogan">
+                {{ sponsor.slogan }}
+            </div>
+        </div>
+    </a>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.sponsorItem {
+    display: flex;
+    gap: var(--gap);
+    align-items: center;
+    padding: var(--gap);
+    font-size: 0.9em;
+    border-radius: 5px;
+    background: transparent;
+    text-decoration: none;
+
+    @include transition(background);
+
+    @include bp.below('mobile') {
+        border-radius: 0;
+    }
+
+    &:hover {
+        background: color-mix(in srgb, var(--bgMain), var(--sponsorColor) 12%);
+    }
+
+    .avatar {
+        --avatarSize: 50px;
+        flex-shrink: 0;
+    }
+
+    .main {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-weight: 600;
+        color: color-mix(in srgb, var(--text), var(--sponsorColor) 50%);
+
+        .icon {
+            opacity: 0.6;
+        }
+    }
+
+    .slogan {
+        color: var(--textMuted);
+    }
+}
+</style>

package/app/components/sponsor/SponsorTier2.vue

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import type { Tier2Sponsor } from '@erudit-js/cog/schema';
+
+const props = defineProps<{
+    sponsor: Tier2Sponsor;
+}>();
+
+const sponsorColor = computed(() => {
+    return props.sponsor.color ?? stringColor(props.sponsor.sponsorId);
+});
+</script>
+
+<template>
+    <a
+        :href="props.sponsor.link"
+        target="_blank"
+        rel="noopener noreferrer"
+        :class="$style.sponsorItem"
+        :style="{ '--sponsorColor': sponsorColor }"
+    >
+        <div :class="$style.avatarWrapper">
+            <Avatar
+                icon="diamond"
+                :src="sponsor.avatar"
+                :color="sponsorColor"
+                :class="$style.avatar"
+                :styling="{ glow: true, border: true }"
+            />
+            <MyRuntimeIcon
+                v-if="sponsor.icon"
+                name="sponsor-icon"
+                :svg="sponsor.icon"
+                :class="$style.icon"
+            />
+        </div>
+        <div :class="$style.info">
+            <div :class="$style.name">{{ sponsor.name }}</div>
+            <div v-if="sponsor.slogan" :class="$style.slogan">
+                {{ sponsor.slogan }}
+            </div>
+        </div>
+    </a>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.sponsorItem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 22px;
+    padding: var(--gap);
+    border-radius: 5px;
+    background: transparent;
+    text-decoration: none;
+    text-align: center;
+
+    @include transition(background);
+
+    @include bp.below('mobile') {
+        border-radius: 0;
+    }
+
+    &:hover {
+        background: color-mix(in srgb, var(--bgMain), var(--sponsorColor) 10%);
+    }
+
+    .avatarWrapper {
+        position: relative;
+
+        .avatar {
+            --avatarSize: 100px;
+        }
+
+        .icon {
+            --iconSize: 26px;
+
+            position: absolute;
+            bottom: calc(-1 * var(--iconSize) / 2);
+            left: 50%;
+            transform: translateX(-50%);
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            color: var(--sponsorColor);
+            font-size: calc(var(--iconSize) / 1.8);
+            width: var(--iconSize);
+            height: var(--iconSize);
+            border-radius: 50%;
+            border: 1.5px solid var(--sponsorColor);
+            background: var(--bgMain);
+        }
+    }
+
+    .info {
+        .name {
+            font-weight: 600;
+            color: color-mix(in srgb, var(--text), var(--sponsorColor) 50%);
+        }
+
+        .slogan {
+            color: var(--textMuted);
+        }
+    }
+}
+</style>

package/app/components/tree/TreeItem.vue

@@ -13,8 +13,7 @@ defineProps<{
 </script>
 
 <template>
-    <NuxtLink
-        :prefetch="false"
+    <EruditLink
         :to="link"
         :class="[
             $style.treeItem,
@@ -24,12 +23,17 @@ defineProps<{
         :style="{ ['--_level']: level ?? 0 }"
     >
         <MyIcon v-if="icon" :class="$style.icon" :name="icon" />
-        <MyRuntimeIcon v-else :class="$style.icon" name="tree-item-icon" :svg />
+        <MyRuntimeIcon
+            v-else
+            :class="$style.icon"
+            name="tree-item-icon"
+            :svg="svg!"
+        />
         <div :class="$style.main">{{ label }}</div>
         <div v-if="$slots.default" :class="$style.after">
             <slot></slot>
         </div>
-    </NuxtLink>
+    </EruditLink>
 </template>
 
 <style lang="scss" module>

package/app/composables/asset.ts

@@ -0,0 +1,12 @@
+/**
+ * @param path Path relative to `PROJECT_DIR`
+ */
+export function useAssetRoute() {
+    const useBaseUrl = useBaseUrlPath();
+    return (path: string) => {
+        if (!path.startsWith('/asset/')) {
+            path = '/asset/' + path.replace(/^\/+/, '');
+        }
+        return useBaseUrl(path);
+    };
+}

package/app/composables/contentData.ts

@@ -1,4 +1,4 @@
-import { trailingSlash } from '@erudit/utils/slash';
+import { trailingSlash } from '@erudit/utils/url';
 import type { ContentData } from '@shared/content/data';
 
 export function useContentData<T extends ContentData>() {

package/app/composables/head.ts

@@ -0,0 +1,24 @@
+import eruditConfig from '#erudit/config';
+
+interface EruditHead {
+    title: string;
+    description?: string;
+}
+
+export function useEruditHead(head: EruditHead) {
+    const siteTitle = getSiteTitle();
+    const title = head.title ? `${head.title} - ${siteTitle}` : siteTitle;
+
+    useHead({ title });
+
+    useSeoMeta({
+        title,
+        ogTitle: title,
+        description: head.description,
+        ogDescription: head.description,
+    });
+}
+
+function getSiteTitle() {
+    return eruditConfig.seo?.title || eruditConfig.site?.title || 'Erudit';
+}

package/app/composables/majorPane.ts

@@ -47,6 +47,7 @@ export function useMajorPane() {
         switch (true) {
             case route.path.startsWith('/contributors'):
             case route.path.startsWith('/contributor/'):
+            case route.path === '/sponsors/':
                 return 'pages';
             default:
                 return 'index';

package/app/composables/url.ts

@@ -1,12 +1,22 @@
 import eruditConfig from '#erudit/config';
+import { trailingSlash, normalizeUrl } from '@erudit/utils/url';
 
 export function useBaseUrlPath() {
     const runtimeConfig = useRuntimeConfig();
+    const baseURL = runtimeConfig.app.baseURL;
+
     return (path: string) => {
-        const baseURL = runtimeConfig.app.baseURL;
-        if (path.startsWith(baseURL)) return path;
-        else if (path.startsWith('/')) return baseURL + path.substring(1);
-        else return path;
+        const normalizedPath = normalizeUrl(path);
+
+        if (normalizedPath.startsWith(baseURL)) {
+            return normalizedPath;
+        }
+
+        if (normalizedPath.startsWith('/')) {
+            return normalizeUrl(baseURL + normalizedPath.substring(1));
+        }
+
+        return normalizedPath;
     };
 }
 
@@ -18,7 +28,7 @@ export function useSiteUrl() {
     if (!import.meta.dev && eruditConfig.site?.buildUrl)
         return eruditConfig.site.buildUrl + baseUrl.slice(0, -1);
 
-    return url.origin;
+    return normalizeUrl(trailingSlash(url.origin, true));
 }
 
 export function usePageUrl() {
@@ -27,7 +37,7 @@ export function usePageUrl() {
 
     return computed(() => {
         if (route.path === '/') return siteUrl;
-
-        return siteUrl + route.path;
+        const fullUrl = siteUrl + route.path;
+        return normalizeUrl(trailingSlash(fullUrl, true));
     });
 }

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

@@ -1,7 +1,6 @@
 <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();
@@ -96,10 +95,16 @@ useSeoMeta({
         :style="{ ['--contributorColor']: contributorColor }"
     >
         <div style="position: relative">
-            <ContributorAvatar
+            <Avatar
+                icon="user"
+                :src="
+                    contributor.avatar
+                        ? `/contributors/${contributor.avatar}`
+                        : undefined
+                "
                 :class="$style.avatar"
-                :contributorId="contributor.contributorId"
-                :avatar="contributor.avatar"
+                :color="stringColor(contributor.contributorId)"
+                :styling="{ glow: true, border: true }"
             />
             <MyIcon
                 v-if="contributor.isEditor"
@@ -147,8 +152,6 @@ useSeoMeta({
 
     .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%);
     }

package/app/pages/contributors.vue

@@ -1,5 +1,6 @@
 <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',
@@ -13,22 +14,13 @@ const phrase = await usePhrases(
     'contributors',
     'contributors_page_description',
     'contributors_page_invite',
+    'become_contributor',
     'contributions_explain',
     'editor',
 );
 
-useHead({
-    title:
-        phrase.contributors +
-        ' - ' +
-        (eruditConfig.seo?.title || eruditConfig.site?.title),
-});
-
-useSeoMeta({
-    title:
-        phrase.contributors +
-        ' - ' +
-        (eruditConfig.seo?.title || eruditConfig.site?.title),
+useEruditHead({
+    title: phrase.contributors,
     description: phrase.contributors_page_description,
 });
 
@@ -36,11 +28,7 @@ const fullDescription = (() => {
     let _description = phrase.contributors_page_description;
 
     if (eruditConfig.content?.howToImproveLink) {
-        _description +=
-            ' ' +
-            phrase.contributors_page_invite(
-                eruditConfig.content.howToImproveLink,
-            );
+        _description += ' ' + phrase.contributors_page_invite;
     }
 
     return _description;
@@ -54,69 +42,80 @@ const fullDescription = (() => {
         :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>
+    <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 :class="$style.name">
+                    <div
+                        v-if="contributor.contributions"
+                        :class="$style.contributions"
+                    >
                         {{
-                            contributor.displayName || contributor.contributorId
+                            phrase.contributions_explain(
+                                contributor.contributions,
+                            )
                         }}
                     </div>
                 </div>
-                <div :class="$style.contributions">
-                    {{
-                        phrase.contributions_explain(contributor.contributions)
-                    }}
-                </div>
-            </div>
-        </NuxtLink>
-    </section>
+            </EruditLink>
+        </section>
+    </MainSection>
 </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);
+    padding: 0 var(--_pMainX);
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
     gap: var(--gap);
 
     @include bp.below('mobile') {
@@ -135,7 +134,11 @@ const fullDescription = (() => {
         @include transition(background);
 
         &:hover {
-            background: var(--bgAccent);
+            background: color-mix(
+                in srgb,
+                var(--bgMain),
+                var(--contributorColor) 12%
+            );
         }
 
         @include bp.below('mobile') {
@@ -143,10 +146,8 @@ const fullDescription = (() => {
         }
 
         .avatar {
-            --_avatarSize: 50px;
+            --avatarSize: 50px;
             flex-shrink: 0;
-            box-shadow: 0 0 5px 5px
-                color-mix(in srgb, var(--contributorColor), transparent 85%);
         }
 
         .info {

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

@@ -8,7 +8,6 @@ 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>;
 
@@ -42,11 +41,13 @@ const phrase = await usePhrases('group');
 
     <ContentPopovers :generic="groupData.generic" />
 
+    <MainCameo />
+
     <div style="clear: both"></div>
 
     <MainBitranContent :location />
 
-    <ContentSection v-if="adsAllowed() && eruditConfig.ads?.bottom">
+    <MainSection v-if="adsAllowed() && eruditConfig.ads?.bottom">
         <AdsBannerBottom />
-    </ContentSection>
+    </MainSection>
 </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>