erudit 3.0.0-dev.9 → 4.0.0-dev.2

package/app/composables/theme.ts

@@ -1,29 +1,71 @@
-const themes = ['auto', 'light', 'dark'] as const;
-
-export type Theme = (typeof themes)[number];
-export type BinaryTheme = 'light' | 'dark';
-
-export function useTheme() {
-    const theme = useState<Theme>('theme', () => {
-        return localStorage.getItem('theme') ?? ('auto' as any);
-    });
-
-    const binaryTheme = computed(() => {
-        return theme.value === 'auto'
-            ? window.matchMedia('(prefers-color-scheme: dark)').matches
-                ? 'dark'
-                : 'light'
-            : theme.value;
-    });
-
-    const cycle = () => {
-        theme.value =
-            themes[(themes.indexOf(theme.value) + 1) % themes.length]!;
-    };
-
-    return {
-        theme,
-        binaryTheme,
-        cycle,
-    };
-}
+const binaryThemes = ['light', 'dark'] as const;
+const themePreferences = [...binaryThemes, 'system'] as const;
+const localStorageKey = 'theme';
+
+export type BinaryTheme = (typeof binaryThemes)[number];
+export type ThemePreference = (typeof themePreferences)[number];
+
+export const useTheme = () => {
+    if (import.meta.server) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: 'Theme composable is not available on server side!',
+        });
+    }
+
+    const preference = useState(
+        'theme-preference',
+        () => localStorage.getItem(localStorageKey) as ThemePreference,
+    );
+
+    return {
+        themePref: preference,
+        binaryTheme: computed(() => pref2binary(preference.value)),
+        setTheme: (newPref: ThemePreference) => {
+            localStorage.setItem(localStorageKey, newPref);
+            preference.value = newPref;
+        },
+        cycleTheme: () => {
+            const current = preference.value;
+            const next =
+                themePreferences[
+                    (themePreferences.indexOf(current) + 1) %
+                        themePreferences.length
+                ]!;
+            localStorage.setItem(localStorageKey, next);
+            preference.value = next;
+        },
+    };
+};
+
+export const initThemeWatcher = () => {
+    onMounted(() => {
+        const { themePref, binaryTheme } = useTheme();
+
+        watch(binaryTheme, (newValue) => {
+            document.documentElement.setAttribute('data-theme', newValue);
+        });
+
+        window
+            .matchMedia('(prefers-color-scheme: dark)')
+            .addEventListener('change', (event) => {
+                const newValue = event.matches ? 'dark' : 'light';
+                if (themePref.value === 'system') {
+                    document.documentElement.setAttribute(
+                        'data-theme',
+                        newValue,
+                    );
+                }
+            });
+    });
+};
+
+function pref2binary(pref: ThemePreference): BinaryTheme {
+    if (binaryThemes.includes(pref as BinaryTheme)) {
+        return pref as BinaryTheme;
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+}

package/app/composables/url.ts

@@ -1,33 +1,22 @@
-import eruditConfig from '#erudit/config';
-
-export function useBaseUrlPath() {
-    const runtimeConfig = useRuntimeConfig();
-    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;
-    };
-}
-
-export function useSiteUrl() {
-    const runtimeConfig = useRuntimeConfig();
-    const baseUrl = runtimeConfig.app.baseURL;
-    const url = useRequestURL();
-
-    if (!import.meta.dev && eruditConfig.site?.buildUrl)
-        return eruditConfig.site.buildUrl + baseUrl.slice(0, -1);
-
-    return url.origin;
-}
-
-export function usePageUrl() {
-    const siteUrl = useSiteUrl();
-    const route = useRoute();
-
-    return computed(() => {
-        if (route.path === '/') return siteUrl;
-
-        return siteUrl + route.path;
-    });
-}
+export function withBaseUrl(path: string): string {
+    if (path.startsWith('/')) {
+        const baseUrl = ERUDIT.config.project.baseUrl;
+        return `${baseUrl}${path.slice(1)}`;
+    }
+
+    return path;
+}
+
+export function withFullUrl(path?: string): string {
+    // Return external URLs as is
+    if (path) {
+        if (!path.startsWith('/')) {
+            return path;
+        }
+    }
+
+    const originUrl = ERUDIT.config.project.originUrl;
+    const fullUrl = slasher(originUrl + withBaseUrl('/') + (path || ''));
+
+    return fullUrl;
+}

package/app/formatters/ru.ts

@@ -0,0 +1,14 @@
+export default (text: string) => {
+    text = ruStickyPrepositions(text);
+    return text;
+};
+
+/**
+ * Formats prepositions in Russian text so that they are always adjacent to the next word and are not left hanging “in the air” when the line breaks.
+ */
+function ruStickyPrepositions(text: string): string {
+    return text.replace(
+        / (в|не|без|для|до|за|из|к|на|над|о|об|от|по|под|при|про|с|у|через|вокруг|около|после|перед|между|внутри|вне|из-за|из-под|ради|сквозь|среди|насчёт|вследствие|благодаря|несмотря|наперекор|вопреки|подле|возле|рядом|навстречу) /gimu,
+        ' $1\xa0',
+    );
+}

package/app/pages/article/[...articleId].vue

@@ -1,3 +1,12 @@
+<script setup lang="ts">
+const route = useRoute();
+const articleId = Array.isArray(route.params.articleId)
+    ? route.params.articleId.join('/')
+    : route.params.articleId!;
+const contentTypePath = stringifyContentTypePath('article', articleId);
+const mainContent = await useMainContent<MainContentTopicPart>(contentTypePath);
+</script>
+
 <template>
-    <MainTopic />
+    <MainTopicPartPage :mainContent />
 </template>

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

@@ -1,47 +1,56 @@
-<script lang="ts" setup>
-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';
-
-const bookData = await useContentData<ContentBookData>();
-await useContentPage(bookData);
-
-const phrase = await usePhrases('book');
+<script setup lang="ts">
+const route = useRoute();
+const bookId = Array.isArray(route.params.bookId)
+    ? route.params.bookId.join('/')
+    : route.params.bookId!;
+const contentTypePath = stringifyContentTypePath('book', bookId);
+const mainContent = await useMainContent<MainContentBook>(contentTypePath);
+
+const { showNewsAside, showContentContributionsAside } = useAsideMinor();
+if (ERUDIT.config.project.contributors?.enabled) {
+    showContentContributionsAside(
+        mainContent.contentRelativePath,
+        mainContent.type,
+        undefined,
+        mainContent.contributions,
+    );
+} else {
+    showNewsAside();
+}
+
+const phrase = await usePhrases('begin_learning');
+
+await useContentSeo({
+    title: mainContent.title,
+    description: mainContent.description,
+    contentTypePath: {
+        type: 'book',
+        contentId: mainContent.shortId,
+    },
+    seo: mainContent.seo,
+});
 </script>
 
 <template>
-    <ContentDecoration
-        v-if="bookData.generic.decoration"
-        :decoration="bookData.generic.decoration"
-    />
-
-    <Breadcrumb
-        v-if="bookData.generic.context?.length > 1"
-        :context="bookData.generic.context"
-    />
-
-    <ContentTitle
-        :title="
-            bookData.generic?.title ||
-            bookData.generic.contentId.split('/').pop()!
-        "
-        :icon="<MyIconName>'outline/book'"
-        :hint="phrase.book"
-    />
-
-    <ContentDescription
-        v-if="bookData.generic?.description"
-        :description="bookData.generic?.description"
-    />
-
-    <ContentPopovers :generic="bookData.generic" />
-
-    <!-- Counters, fancy "GO LEARN" button and etc. -->
-
-    <div style="clear: both"></div>
+    <MainGlow />
+    <MainDecoration :decoration="mainContent.decoration" />
+    <MainSectionPreamble>
+        <MainBreadcrumbs :breadcrumbs="mainContent.breadcrumbs" />
+        <MainTitle icon="book" :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/contributor/[contributorId].vue

@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import type { PageContributor } from '@erudit-js/core/contributor';
+
+const nuxtApp = useNuxtApp();
+const route = useRoute();
+const contributorId = computed(() => String(route.params.contributorId));
+
+const pageContributor = await (async () => {
+    const payloadKey = 'page-contributor';
+
+    const cachedContributor: PageContributor | undefined =
+        nuxtApp.static.data[payloadKey] || nuxtApp.payload.data[payloadKey];
+
+    if (cachedContributor?.id === contributorId.value) {
+        return cachedContributor;
+    }
+
+    let fetchedContributor: PageContributor = await $fetch(
+        '/api/contributor/page/' + contributorId.value,
+        {
+            responseType: 'json',
+        },
+    );
+
+    fetchedContributor =
+        nuxtApp.static.data[payloadKey] =
+        nuxtApp.payload.data[payloadKey] =
+            fetchedContributor;
+
+    return fetchedContributor;
+})();
+
+const { showContributorAside } = useAsideMinor();
+showContributorAside(pageContributor.contributions);
+
+const color = stringColor(contributorId.value);
+const phrase = await usePhrases(
+    'contributors',
+    'editor',
+    'contributor_page_description',
+);
+
+useStandartSeo({
+    title: pageContributor.displayName || pageContributor.id,
+    description: phrase.contributor_page_description(
+        pageContributor.displayName || pageContributor.id,
+    ),
+    urlPath: PAGES.contributor(contributorId.value),
+});
+</script>
+
+<template>
+    <MainGlow :color />
+    <MainSectionPreamble>
+        <MainBreadcrumbs
+            :breadcrumbs="[
+                {
+                    icon: 'users',
+                    link: PAGES.contributors,
+                    title: phrase.contributors,
+                },
+            ]"
+        />
+        <div
+            :style="{
+                '--color': color,
+                '--colorBorder':
+                    'color-mix(in srgb, var(--color), var(--color-border) 70%)',
+                '--colorBg':
+                    'color-mix(in srgb, var(--color), var(--color-bg-main) 85%)',
+                '--colorText':
+                    'color-mix(in srgb, var(--color), var(--color-text) 85%)',
+                '--colorIcon':
+                    'color-mix(in srgb, var(--color), var(--color-text) 30%)',
+            }"
+            class="px-main py-main-half gap-main flex flex-col items-center"
+        >
+            <div class="relative">
+                <div class="rounded-full ring-2 ring-(--colorBorder)">
+                    <SmartMedia
+                        :url="
+                            pageContributor.avatarUrl
+                                ? withBaseUrl(pageContributor.avatarUrl)
+                                : 'user'
+                        "
+                        :style="{ '--mediaColor': color }"
+                        class="border-bg-main micro:size-[110px] size-[80px]
+                            rounded-full border-2
+                            [box-shadow:0_0_16px_0_var(--color)]"
+                    />
+                </div>
+                <div
+                    v-if="pageContributor.editor"
+                    :title="phrase.editor"
+                    class="bg-bg-main micro:size-[28px] absolute bottom-0
+                        left-1/2 z-10 grid size-[24px] -translate-x-1/2
+                        translate-y-1/2 cursor-help place-items-center
+                        rounded-full border-2 border-(--colorBorder)"
+                >
+                    <MyIcon
+                        name="graduation"
+                        class="size-[82%] text-(--colorIcon)"
+                    />
+                </div>
+            </div>
+            <div class="gap-normal flex flex-col text-center">
+                <h1>
+                    <FancyBold
+                        :text="
+                            pageContributor.displayName ?? pageContributor.id
+                        "
+                        :color="color"
+                        class="text-size-h1"
+                    />
+                </h1>
+                <div
+                    v-if="pageContributor.short"
+                    class="micro:text-[1.3em] text-text-muted relative -top-1
+                        text-[1.1em] font-semibold"
+                >
+                    {{ formatText(pageContributor!.short) }}
+                </div>
+                <div
+                    v-if="pageContributor.links"
+                    class="gap-normal flex flex-wrap justify-center"
+                >
+                    <a
+                        v-for="(link, label) of pageContributor.links"
+                        :href="link"
+                        target="_blank"
+                        class="text-main-sm hocus:bg-(--colorBg) rounded
+                            border-2 border-(--colorBorder) bg-transparent px-2
+                            py-1 font-semibold text-(--colorText)
+                            transition-[background]"
+                    >
+                        {{ formatText(label) }}
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="h-main-half"></div>
+    </MainSectionPreamble>
+    <MainSection v-if="pageContributor.description">
+        <Prose
+            :element="pageContributor.description.proseElement"
+            :storage="pageContributor.description.storage"
+            :useHashUrl="false"
+        />
+    </MainSection>
+</template>

package/app/pages/contributors.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import type { ListContributor } from '@erudit-js/core/contributor';
+
+const { showNewsAside } = useAsideMinor();
+showNewsAside();
+
+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_description',
+    'contributors_invite',
+    'become_contributor',
+    'no_contributors',
+    'contribution',
+    'editor',
+);
+
+const description =
+    phrase.contributors_description +
+    (ERUDIT.config.project.contributors?.becomeContributorLink
+        ? ' ' + phrase.contributors_invite
+        : '');
+
+useStandartSeo({
+    title: phrase.contributors,
+    description: phrase.contributors_description,
+    urlPath: PAGES.contributors,
+});
+</script>
+
+<template>
+    <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>
+        <div
+            v-if="listContributors.length > 0"
+            class="gap-small micro:gap-normal px-main py-main 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)"
+            >
+                <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>

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

@@ -1,64 +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 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 { showNewsAside, showContentContributionsAside } = useAsideMinor();
+if (ERUDIT.config.project.contributors?.enabled) {
+    showContentContributionsAside(
+        mainContent.contentRelativePath,
+        mainContent.type,
+        undefined,
+        mainContent.contributions,
+    );
+} else {
+    showNewsAside();
+}
+
+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>
-    <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() }"
+    <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"
         />
-    </ContentSection>
-
-    <AdsBottomBanner v-if="eruditConfig.ads?.bottomBlockId" />
+        <div class="h-main-half"></div>
+    </MainSectionPreamble>
+    <MainContentChildren :children="mainContent.children" />
+    <MainSection>
+        <AdsBannerBottom v-if="adsBottomAllowed()" />
+    </MainSection>
 </template>