erudit 3.0.0-dev.22 → 3.0.0-dev.25

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,43 +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 normalizedPath = normalizeUrl(path);
-
-        if (normalizedPath.startsWith(baseURL)) {
-            return normalizedPath;
-        }
-
-        if (normalizedPath.startsWith('/')) {
-            return normalizeUrl(baseURL + normalizedPath.substring(1));
-        }
-
-        return normalizedPath;
-    };
-}
-
-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 normalizeUrl(trailingSlash(url.origin, true));
-}
-
-export function usePageUrl() {
-    const siteUrl = useSiteUrl();
-    const route = useRoute();
-
-    return computed(() => {
-        if (route.path === '/') return siteUrl;
-        const fullUrl = siteUrl + route.path;
-        return normalizeUrl(trailingSlash(fullUrl, true));
-    });
-}
+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,42 +1,56 @@
-<script lang="ts" setup>
-import type { ContentBookData } from '@erudit/shared/content/data/type/book';
-import type { MyIconName } from '#my-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 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"
-    />
-
-    <ContentBreadcrumb :context="bookData.generic.context" />
-
-    <MainTitle
-        :title="
-            bookData.generic?.title ||
-            bookData.generic.contentId.split('/').pop()!
-        "
-        :icon="<MyIconName>'outline/book'"
-        :hint="phrase.book"
-    />
-
-    <MainDescription
-        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

@@ -1,227 +1,151 @@
 <script lang="ts" setup>
-import eruditConfig from '#erudit/config';
-import { type PageContributor } from '@shared/contributor';
+import type { PageContributor } from '@erudit-js/core/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,
-    };
-});
+const route = useRoute();
+const contributorId = computed(() => String(route.params.contributorId));
 
-let requestCounter = 0;
+const pageContributor = await (async () => {
+    const payloadKey = 'page-contributor';
 
-function getPayloadCache() {
-    const payloadKey = 'contributor';
-    return (nuxtApp.static.data[payloadKey] ||= nuxtApp.payload.data[
-        payloadKey
-    ] ||=
-        {});
-}
+    const cachedContributor: PageContributor | undefined =
+        nuxtApp.static.data[payloadKey] || nuxtApp.payload.data[payloadKey];
 
-async function fetchContributorData(contributorId: string, requestId: number) {
-    const payloadCache = getPayloadCache();
+    if (cachedContributor?.id === contributorId.value) {
+        return cachedContributor;
+    }
 
-    if (!payloadCache[contributorId]) {
-        try {
-            const data = await $fetch(`/api/contributor/page/${contributorId}`);
+    let fetchedContributor: PageContributor = await $fetch(
+        '/api/contributor/page/' + contributorId.value,
+        {
+            responseType: 'json',
+        },
+    );
 
-            if (requestId === requestCounter) {
-                payloadCache[contributorId] = data;
-            }
-        } catch (error) {
-            console.error(
-                `Error fetching contributor ${contributorId}:`,
-                error,
-            );
-        }
-    }
+    fetchedContributor =
+        nuxtApp.static.data[payloadKey] =
+        nuxtApp.payload.data[payloadKey] =
+            fetchedContributor;
 
-    contributor.value = payloadCache[contributorId];
-    contributorColor.value = stringColor(contributor.value.contributorId);
-}
+    return fetchedContributor;
+})();
 
-await fetchContributorData(
-    route.params.contributorId as string,
-    ++requestCounter,
-);
+const { showContributorAside } = useAsideMinor();
+showContributorAside(pageContributor.contributions);
 
+const color = stringColor(contributorId.value);
 const phrase = await usePhrases(
     'contributors',
-    'contributor',
-    'contributor_description',
     'editor',
+    'contributor_page_description',
 );
 
-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),
+useStandartSeo({
+    title: pageContributor.displayName || pageContributor.id,
+    description: phrase.contributor_page_description(
+        pageContributor.displayName || pageContributor.id,
+    ),
+    urlPath: PAGES.contributor(contributorId.value),
 });
 </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"
+    <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 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)]
+                            transition-[border]"
+                    />
+                </div>
+                <div
+                    v-if="pageContributor.editor"
+                    :title="phrase.editor"
+                    class="bg-bg-main micro:size-[28px] absolute bottom-0
+                        left-1/2 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"
                 >
-                    {{ label }}
-                </a>
+                    <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>
-    </header>
-    <MainBitranContent
-        v-if="contributor.hasDescription"
-        :location="{ type: 'contributor', path: contributor.contributorId }"
-    />
+        <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>
-
-<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>