erudit 3.0.0-dev.23 → 3.0.0-dev.25

package/app/pages/contributors.vue

@@ -1,184 +1,100 @@
 <script lang="ts" setup>
-import eruditConfig from '#erudit/config';
-import { createContributorLink } from '@shared/link';
+import type { ListContributor } from '@erudit-js/core/contributor';
 
-const { data: contributorList } = await useFetch(`/api/contributor/list`, {
-    key: 'contributor-list',
-});
+const { showNewsAside } = useAsideMinor();
+showNewsAside();
 
-const editorsNumber = computed(() => {
-    return contributorList.value?.filter((i) => i.isEditor)?.length ?? 0;
-});
+const nuxtApp = useNuxtApp();
+const payloadKey = 'list-contributors';
+const listContributors: ListContributor[] =
+    (nuxtApp.static.data[payloadKey] ||=
+    nuxtApp.payload.data[payloadKey] ||=
+        await $fetch('/api/contributor/list', { responseType: 'json' }));
 
 const phrase = await usePhrases(
     'contributors',
-    'contributors_page_description',
-    'contributors_page_invite',
+    'contributors_description',
+    'contributors_invite',
     'become_contributor',
-    'contributions_explain',
+    'no_contributors',
+    'contribution',
     'editor',
 );
 
-useEruditHead({
+const description =
+    phrase.contributors_description +
+    (ERUDIT.config.project.contributors?.becomeContributorLink
+        ? ' ' + phrase.contributors_invite
+        : '');
+
+useStandartSeo({
     title: phrase.contributors,
-    description: phrase.contributors_page_description,
+    description: phrase.contributors_description,
+    urlPath: PAGES.contributors,
 });
-
-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"
-    />
+    <MainGlow />
+    <MainSectionPreamble>
+        <MainTitle icon="users" :title="phrase.contributors" />
+        <MainDescription :description />
+        <template
+            v-if="ERUDIT.config.project.contributors?.becomeContributorLink"
+        >
+            <div class="h-main-half"></div>
+            <MainAction
+                icon="users"
+                :label="phrase.become_contributor"
+                :link="'https://google.com'"
+            />
+            <div class="h-main-half"></div>
+        </template>
+    </MainSectionPreamble>
     <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,
-                    ),
+        <div
+            v-if="listContributors.length > 0"
+            class="gap-small micro:gap-normal px-main py-main-half
+                columns-[300px]"
+        >
+            <FancyCard
+                v-for="contributor of listContributors"
+                :key="contributor.id"
+                :title="contributor.displayName || contributor.id"
+                :mediaUrl="
+                    contributor.avatarUrl
+                        ? withBaseUrl(contributor.avatarUrl)
+                        : undefined
+                "
+                :description="contributor.short"
+                :link="{
+                    href: PAGES.contributor(contributor.id),
+                    external: false,
                 }"
+                :color="stringColor(contributor.id)"
             >
-                <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>
+                <template
+                    #tags
+                    v-if="contributor.editor || contributor.contributions"
+                >
+                    <FancyCardTag v-if="contributor.editor">
+                        <MyIcon name="graduation" class="text-[1.2em]" />
+                        <span>
+                            {{ formatText(phrase.editor) }}
+                        </span>
+                    </FancyCardTag>
+                    <FancyCardTag v-if="contributor.contributions">
+                        <MyIcon name="draw" class="text-[1.2em]" />
+                        <span>{{ formatText(phrase.contribution) }}</span>
+                        <span class="font-bold">
+                            {{ contributor.contributions }}
+                        </span>
+                    </FancyCardTag>
+                </template>
+            </FancyCard>
+        </div>
+        <div v-else class="text-text-muted px-main py-main text-center">
+            {{ phrase.no_contributors }}
+        </div>
     </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,17 +1,58 @@
-<script lang="ts" setup>
-import { type ContentGroupData } from '@shared/content/data/type/group';
+<script setup lang="ts">
+const route = useRoute();
+const groupId = Array.isArray(route.params.groupId)
+    ? route.params.groupId.join('/')
+    : route.params.groupId!;
+const contentTypePath = stringifyContentTypePath('group', groupId);
+const mainContent = await useMainContent<MainContentGroup>(contentTypePath);
 
-const groupData = await useContentData<ContentGroupData>();
-await useContentPage(groupData);
+const { showNewsAside, showContentContributionsAside } = useAsideMinor();
+if (ERUDIT.config.project.contributors?.enabled) {
+    showContentContributionsAside(
+        mainContent.contentRelativePath,
+        mainContent.type,
+        undefined,
+        mainContent.contributions,
+    );
+} else {
+    showNewsAside();
+}
 
-const phrase = await usePhrases('group');
+const phrase = await usePhrases('group', 'begin_learning');
+
+await useContentSeo({
+    title: mainContent.title,
+    bookTitle: mainContent.bookTitle,
+    description: mainContent.description,
+    contentTypeSuffix: phrase.group,
+    contentTypePath: {
+        type: 'group',
+        contentId: mainContent.shortId,
+    },
+    seo: mainContent.seo,
+});
 </script>
 
 <template>
-    <GroupLikePage
-        icon="folder-open"
-        :contentLabel="phrase.group"
-        :generic="groupData.generic"
-        :groupLike="groupData.groupLike"
-    />
+    <MainGlow />
+    <MainDecoration :decoration="mainContent.decoration" />
+    <MainSectionPreamble>
+        <MainBreadcrumbs :breadcrumbs="mainContent.breadcrumbs" />
+        <MainTitle icon="folder-open" :title="mainContent.title" />
+        <MainFlags :flags="mainContent.flags" />
+        <MainDescription :description="mainContent.description" />
+        <MainConnections :connections="mainContent.connections" />
+        <MainContentStats mode="single" :stats="mainContent.stats" />
+        <div class="h-main-half"></div>
+        <MainAction
+            icon="rocket"
+            :label="formatText(phrase.begin_learning)"
+            :link="mainContent.children[0]!.link"
+        />
+        <div class="h-main-half"></div>
+    </MainSectionPreamble>
+    <MainContentChildren :children="mainContent.children" />
+    <MainSection>
+        <AdsBannerBottom v-if="adsBottomAllowed()" />
+    </MainSection>
 </template>

package/app/pages/index.vue

@@ -1,205 +1,120 @@
 <script lang="ts" setup>
-import eruditConfig from '#erudit/config';
-import { type IndexData } from '@shared/indexData';
-import { normalizeText } from '@erudit/utils/normalize';
+const { showNewsAside } = useAsideMinor();
+showNewsAside();
 
-const pretty = useFormatText();
+const nuxtApp = useNuxtApp();
+const payloadKey = 'index-page';
+const indexPage: IndexPage =
+    (nuxtApp.static.data[payloadKey] ||=
+    nuxtApp.payload.data[payloadKey] ||=
+        await $fetch<IndexPage>('/api/indexPage', { responseType: 'json' }));
 
-const phrase = await usePhrases(
-    'seo_index_title',
-    'seo_index_description',
-    'topics',
-    'x_contributors',
-    'x_sponsors',
-);
+useIndexSeo(indexPage);
 
-const seoTitle = pretty(
-    eruditConfig.seo?.indexTitle ||
-        eruditConfig.seo?.title ||
-        phrase.seo_index_title,
-);
+const logotypeInvertClass = computed(() => {
+    if (!indexPage.logotype?.invert) return '';
 
-const seoDescription = pretty(
-    normalizeText(
-        eruditConfig.seo?.indexDescription || phrase.seo_index_description,
-    ),
-);
-
-useSeoMeta({
-    title: seoTitle,
-    ogTitle: seoTitle,
-    description: seoDescription,
-    ogDescription: seoDescription,
-});
-
-const { data: indexData } = (await useAsyncData('index', () =>
-    $fetch('/api/index/data'),
-)) as { data: Ref<IndexData> };
-
-const logotype = computed(() => {
-    return eruditConfig.index?.logotype
-        ? {
-              src: eruditConfig.index.logotype.src,
-              maxWidth: eruditConfig.index.logotype.maxWidth || '100%',
-              invert: eruditConfig.index.logotype.invert,
-          }
-        : undefined;
-});
-
-const title = computed(() => {
-    return pretty(
-        eruditConfig.index?.title ||
-            eruditConfig.seo?.title ||
-            eruditConfig.site?.title ||
-            phrase.seo_index_title,
-    );
-});
-
-const slogan = computed(() => {
-    return eruditConfig.index?.slogan;
-});
-
-const canShowStats = computed(() => {
-    const hasElementStats =
-        indexData.value.elementStats && indexData.value.elementStats.length > 0;
-
-    const hasTopics =
-        indexData.value.topicCount && indexData.value.topicCount > 0;
+    if (indexPage.logotype.invert === 'dark') {
+        return 'dark:hue-rotate-180 dark:invert-100';
+    }
 
-    return hasElementStats || hasTopics;
-});
+    if (indexPage.logotype.invert === 'light') {
+        return 'hue-rotate-180 invert-100 dark:hue-rotate-0 dark:invert-0';
+    }
 
-const description = computed(() => {
-    return eruditConfig.index?.description;
+    return '';
 });
 
-const canShowParticipants = computed(() => {
-    return (
-        indexData.value.contributors.length > 0 ||
-        indexData.value.sponsors.length > 0
-    );
-});
+const phrase = await usePhrases('x_contributors', 'x_sponsors');
 </script>
 
 <template>
-    <header :class="$style.indexHeader">
+    <MainGlow />
+    <MainSectionPreamble>
+        <!-- Logotype -->
         <img
-            v-if="logotype"
-            :src="logotype.src"
-            :style="{ maxWidth: logotype.maxWidth }"
+            v-if="indexPage.logotype"
+            :src="withBaseUrl(indexPage.logotype.src)"
+            :style="{
+                'max-width': `min(${indexPage.logotype.maxWidth || '100%'}, 100%)`,
+            }"
             :class="[
-                $style.logotype,
-                logotype.invert === 'dark' ? $style.invertDark : '',
-                logotype.invert === 'light' ? $style.invertLight : '',
+                'pt-main-half px-main mx-auto block transition-[filter]',
+                logotypeInvertClass,
             ]"
         />
-        <h1 :class="$style.title">{{ pretty(title) }}</h1>
-        <section v-if="slogan" :class="$style.slogan">
-            {{ pretty(slogan) }}
-        </section>
-        <Stats
-            v-if="canShowStats"
-            :stats="[
-                {
-                    type: 'custom',
-                    icon: 'files',
-                    label: phrase.topics,
-                    count: indexData.topicCount,
-                },
-                ...indexData.elementStats,
-            ]"
-            :class="$style.stats"
-        />
-        <section v-if="description" :class="$style.description">
-            {{ pretty(description) }}
-        </section>
-        <section v-if="canShowParticipants" :class="$style.participants">
-            <IndexAvatars
-                v-if="indexData.contributors.length > 0"
-                :label="phrase.x_contributors(indexData.contributors.length)"
-                link="/contributors/"
-                :max="4"
-                icon="user"
-                :namesAvatars="indexData.contributors"
-            />
 
-            <IndexAvatars
-                v-if="indexData.sponsors.length > 0"
-                :label="phrase.x_sponsors(indexData.sponsors.length)"
-                link="/sponsors/"
-                :max="4"
-                icon="diamond"
-                :namesAvatars="indexData.sponsors"
+        <!-- Main Data -->
+        <div
+            class="px-main gap-normal py-main flex flex-col items-center
+                text-center"
+        >
+            <h1>
+                <FancyBold :text="indexPage.title" class="text-size-h1" />
+            </h1>
+            <div
+                class="micro:text-[1.3em] text-text-muted text-[1.1em]
+                    font-semibold"
+            >
+                {{ formatText(indexPage.short) }}
+            </div>
+            <div
+                v-if="indexPage.stats"
+                class="gap-small micro:gap-normal micro:text-[1.2em] flex
+                    flex-wrap justify-center text-[1.1em]"
+            >
+                <MainContentStatsItemMaterials
+                    v-if="indexPage.stats.materials"
+                    :count="indexPage.stats.materials"
+                    mode="compact"
+                />
+                <MainContentStatsItemElement
+                    v-if="indexPage.stats.elements"
+                    v-for="(count, schemaName) of indexPage.stats.elements"
+                    :schemaName
+                    :count
+                    mode="compact"
+                />
+            </div>
+        </div>
+
+        <!-- Description -->
+        <div
+            v-if="indexPage.description"
+            class="micro:text-justify px-main pb-main text-center"
+        >
+            {{ formatText(indexPage.description) }}
+        </div>
+
+        <!-- Contributors and Sponsors -->
+        <div
+            v-if="indexPage.contributors || indexPage.sponsors"
+            class="px-main pb-main gap-main flex flex-wrap justify-around"
+        >
+            <IndexPagePersons
+                v-if="indexPage.contributors"
+                personType="contributor"
+                :title="
+                    phrase.x_contributors(
+                        Object.keys(indexPage.contributors).length,
+                    )
+                "
+                :link="PAGES.contributors"
+                :persons="indexPage.contributors"
+            />
+            <IndexPagePersons
+                v-if="indexPage.sponsors"
+                personType="sponsor"
+                :title="
+                    phrase.x_sponsors(Object.keys(indexPage.sponsors).length)
+                "
+                :link="PAGES.sponsors"
+                :persons="indexPage.sponsors"
             />
-        </section>
-    </header>
-    <MainToc v-if="indexData.contentToc" :toc="indexData.contentToc" />
+        </div>
+    </MainSectionPreamble>
+    <MainContentChildren
+        v-if="indexPage.children"
+        :children="indexPage.children"
+    />
 </template>
-
-<style lang="scss" module>
-@use '$/def/bp';
-
-.indexHeader {
-    display: flex;
-    flex-direction: column;
-    gap: calc(1.5 * var(--_pMainY));
-    //padding: var(--_pMainY) 5.5vw;
-    padding: var(--_pMainY) var(--_pMainX);
-
-    @include bp.below('mobile') {
-        padding: var(--_pMainY) var(--_pMainX);
-    }
-
-    .logotype {
-        margin: 0 auto;
-        margin-bottom: var(--_pMainY);
-        width: 100%;
-
-        [data-theme='dark'] &.invertDark,
-        [data-theme='light'] &.invertLight {
-            filter: invert(1) hue-rotate(180deg);
-        }
-    }
-
-    .title {
-        font-size: clamp(2em, 2vw + 1em, 2.6em);
-        text-align: center;
-        text-shadow: 3px 3px color-mix(in srgb, var(--brand), transparent 70%);
-        line-height: 1;
-    }
-
-    .slogan {
-        text-align: center;
-        font-weight: 600;
-        font-size: 1.4em;
-        color: var(--textMuted);
-    }
-
-    .stats {
-        font-size: 1.4em;
-        gap: var(--gapBig);
-        justify-content: center;
-
-        @include bp.below('mobile') {
-            gap: var(--gap);
-        }
-    }
-
-    .description {
-        font-size: 1.1em;
-        //text-align: justify;
-    }
-
-    .participants {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-around;
-        align-items: center;
-        gap: var(--gapBig);
-
-        @include bp.below('mobile') {
-            gap: var(--gap);
-        }
-    }
-}
-</style>