erudit 2.0.0-dev.7

package/app/components/aside/AsideMinor.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import type { AsideMinorData } from '@shared/asideMinor';
+import { asideMinorKey } from '@app/scripts/aside/minor/state';
+
+import {
+    LazyAsideMinorNews,
+    LazyAsideMinorTopic,
+    LazyAsideMinorContent,
+    LazyAsideMinorContributor,
+} from '#components';
+
+let setupI = 0;
+
+const route = useRoute();
+const nuxtApp = useNuxtApp();
+
+const asideData = shallowRef<AsideMinorData>();
+const AsideMinorPane = shallowRef<Component>();
+
+async function setupAsideMinorData() {
+    const currentSetupI = ++setupI;
+    const path = route.path;
+    const payloadKey = 'aside-minor';
+    const asideMinorPayload =
+        (nuxtApp.static.data[payloadKey] ||=
+        nuxtApp.payload.data[payloadKey] ||=
+            {});
+
+    const data: AsideMinorData = await (async () => {
+        const payloadKeyValue: AsideMinorData | 'news' = (asideMinorPayload[
+            path
+        ] ||= await $fetch(`/api/aside/minor/path`, { query: { path } }));
+
+        if (payloadKeyValue === 'news') {
+            // We do not save news in the payload as it will always have the same content.
+            // So we prerender news once and use the same data for all pages.
+            nuxtApp.runWithContext(() =>
+                prerenderRoutes('/api/aside/minor/news'),
+            );
+            return await $fetch('/api/aside/minor/news');
+        } else return payloadKeyValue;
+    })();
+
+    if (currentSetupI !== setupI) return; // This data is outdated because new `setupAsideMinorData` was called.
+
+    asideData.value = data;
+
+    AsideMinorPane.value = (() => {
+        switch (asideData.value.type) {
+            case 'topic':
+                return LazyAsideMinorTopic;
+            case 'book':
+            case 'group':
+                return LazyAsideMinorContent;
+        }
+
+        return LazyAsideMinorNews;
+    })();
+}
+
+watch(route, setupAsideMinorData);
+await setupAsideMinorData();
+
+provide(asideMinorKey, asideData);
+</script>
+
+<template>
+    <TransitionFade>
+        <component :is="AsideMinorPane" />
+    </TransitionFade>
+</template>

package/app/components/aside/major/PaneContentScroll.vue

@@ -0,0 +1,23 @@
+<template>
+    <div :class="$style.paneContentScroll">
+        <div>
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" module>
+.paneContentScroll {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    direction: rtl;
+    @include scroll;
+
+    > div {
+        width: 100%;
+        height: 100%;
+        direction: ltr;
+    }
+}
+</style>

package/app/components/aside/major/PaneSwitch.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import PaneSwitchButton from './PaneSwitchButton.vue';
+
+const { panes, activePane, getPaneOrder } = useMajorPane();
+
+const phrase = await usePhrases(
+    ...Object.values(panes).map((pane) => pane.phrase),
+);
+</script>
+
+<template>
+    <section :class="$style.paneSwitch">
+        <div :class="$style.inner">
+            <PaneSwitchButton
+                v-for="(pane, paneKey) of panes"
+                :paneKey
+                :icon="pane.icon"
+                :title="phrase[pane.phrase]"
+            />
+
+            <div
+                :class="$style.slider"
+                :style="{ '--_activePane': getPaneOrder(activePane) }"
+            ></div>
+        </div>
+    </section>
+</template>
+
+<style lang="scss" module>
+.paneSwitch {
+    --buttonSize: 40px;
+    --gapSize: var(--gap);
+
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    justify-content: center;
+
+    .inner {
+        position: relative;
+        display: flex;
+    }
+
+    .slider {
+        position: absolute;
+        width: var(--buttonSize);
+        height: 3px;
+        bottom: -1px;
+        margin-left: calc(var(--gapSize) / 2);
+        background: var(--textMuted);
+        left: calc(var(--_activePane) * (var(--buttonSize) + var(--gapSize)));
+        @include transition(left);
+    }
+}
+</style>

package/app/components/aside/major/PaneSwitchButton.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+
+defineProps<{
+    paneKey: MajorPaneKey;
+    icon: MyIconName;
+}>();
+
+const { activePane } = useMajorPane();
+</script>
+
+<template>
+    <button
+        @click="activePane = paneKey"
+        :class="[
+            $style.paneSwtichButton,
+            paneKey === activePane ? $style.active : '',
+        ]"
+    >
+        <MyIcon :name="icon" />
+    </button>
+</template>
+
+<style lang="scss" module>
+.paneSwtichButton {
+    --_padding: calc(var(--gapSize) / 2);
+
+    position: relative;
+    padding: var(--_padding);
+    color: var(--textMuted);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    @include transition(color);
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: var(--_padding);
+        right: var(--_padding);
+        bottom: -1px;
+        height: 3px;
+        background: transparent;
+        @include transition(background);
+    }
+
+    &:hover,
+    &.active {
+        color: var(--text);
+        &::after {
+            background: var(--border);
+        }
+    }
+
+    [my-icon] {
+        display: grid;
+        place-items: center;
+        width: var(--buttonSize);
+        height: var(--buttonSize);
+        font-size: 22px;
+    }
+}
+</style>

package/app/components/aside/major/SiteInfo.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import eruditConfig from '#erudit/config';
+
+const baseUrlPath = useBaseUrlPath();
+
+const phrase = await usePhrases('site_info_title', 'site_info_slogan');
+
+interface SiteInfo {
+    title: string;
+    slogan?: string;
+    logotype?: string;
+}
+
+const siteInfo = computed<SiteInfo>(() => {
+    if (!eruditConfig.site)
+        return {
+            logotype: eruditAsset('logotype.svg'),
+            title: phrase.site_info_title,
+            slogan: phrase.site_info_slogan,
+        };
+
+    return {
+        logotype: eruditConfig.site?.logotype,
+        title: eruditConfig.site?.title || phrase.site_info_title,
+        slogan: eruditConfig.site?.slogan,
+    };
+});
+</script>
+
+<template>
+    <section :class="$style.siteInfo">
+        <NuxtLink v-if="siteInfo.logotype" to="/" :class="$style.logo">
+            <img :src="baseUrlPath(siteInfo.logotype)" :alt="siteInfo.title" />
+        </NuxtLink>
+        <div :class="[$style.textInfo, !siteInfo.logotype && $style.noLogo]">
+            <h1 :class="$style.title">
+                <NuxtLink to="/">{{
+                    siteInfo.title || phrase.site_info_title
+                }}</NuxtLink>
+            </h1>
+            <div v-if="siteInfo.slogan" :class="$style.description">
+                {{ siteInfo.slogan }}
+            </div>
+        </div>
+    </section>
+</template>
+
+<style lang="scss" module>
+.siteInfo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--gap);
+    padding: var(--gap);
+    padding-bottom: var(--gapSmall);
+}
+
+.logo {
+    width: 50px;
+    height: 50px;
+}
+
+.textInfo {
+    display: flex;
+    flex-direction: column;
+
+    &.noLogo {
+        text-align: center;
+    }
+
+    .title {
+        font-weight: bold;
+        font-size: 1.25em;
+        color: var(--text);
+
+        a {
+            @include hoverLink;
+        }
+    }
+
+    .description {
+        color: var(--textMuted);
+    }
+}
+</style>

package/app/components/aside/major/panes/Language.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import PaneContentScroll from '../PaneContentScroll.vue';
+
+const phrase = await usePhrases(
+    '_language_code',
+    '_language_title',
+    'add_translation',
+);
+
+interface ClientLanguage {
+    code: string;
+    name: string;
+    link?: string;
+    active?: boolean;
+}
+
+function defineLanguage(clientLanguage: ClientLanguage): ClientLanguage {
+    if (phrase._language_code === clientLanguage.code)
+        clientLanguage.active = true;
+
+    return clientLanguage;
+}
+
+const languages = ref<ClientLanguage[]>([
+    defineLanguage({
+        code: phrase._language_code,
+        name: phrase._language_title,
+    }),
+]);
+
+const apiLanguages = await useExternalApiLanguages();
+
+for (const [code, data] of Object.entries(apiLanguages) as any) {
+    if (code === phrase._language_code) continue;
+
+    languages.value.push({
+        code,
+        name: data.name,
+        link: data.link,
+    });
+}
+
+function wip() {
+    alert(
+        'Work in progress. If you want to add your translation, contact me. Telegram: @math_head',
+    );
+}
+</script>
+
+<template>
+    <PaneContentScroll>
+        <AsideListItem
+            v-for="clientLanguage of languages"
+            :class="[clientLanguage.active ? $style.active : '']"
+            :link="clientLanguage.active ? undefined : clientLanguage.link"
+        >
+            <div :class="$style.code">{{ clientLanguage.code }}</div>
+            <div :class="$style.name">{{ clientLanguage.name }}</div>
+        </AsideListItem>
+        <AsideListItem
+            icon="plus-circle"
+            :main="phrase.add_translation"
+            @click="wip"
+        />
+    </PaneContentScroll>
+</template>
+
+<style lang="scss" module>
+.active {
+    color: var(--brand) !important;
+    background: transparent !important;
+    cursor: default;
+}
+
+.code {
+    text-transform: uppercase;
+    font-weight: 650;
+}
+</style>

package/app/components/aside/major/panes/Pages.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import PaneContentScroll from '../PaneContentScroll.vue';
+
+const route = useRoute();
+
+const phrase = await usePhrases('main_page', 'members');
+
+const { data: memberCount } = await useAsyncData<number>('members-count', () =>
+    $fetch('/api/contributor/count'),
+);
+
+function linkAttrs(link: string) {
+    return {
+        link,
+        active: route.path === link,
+    };
+}
+</script>
+
+<template>
+    <PaneContentScroll>
+        <AsideListItem
+            icon="house"
+            v-bind="linkAttrs('/')"
+            :main="phrase.main_page"
+        />
+        <AsideListItem
+            icon="users"
+            v-bind="linkAttrs('/members')"
+            :main="phrase.members + ':'"
+            :secondary="memberCount!.toString()"
+        />
+    </PaneContentScroll>
+</template>

package/app/components/aside/major/panes/Search.vue

@@ -0,0 +1,3 @@
+<template>
+    <div :style="{ padding: 'var(--gap)', color: 'var(--textMuted)', textAlign: 'center' }">Here be dragons...</div>
+</template>

package/app/components/aside/major/panes/nav/Nav.vue

@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import type { FrontNav } from '@shared/frontNav';
+import {
+    getAsideMajorNavPayload,
+    insideNavBook,
+    navBookId,
+    navBookVisible,
+} from '@app/scripts/aside/major/nav';
+
+import NavGlobal from './NavGlobal.vue';
+import NavBook from './NavBook.vue';
+
+const contentRoute = useContentRoute();
+const asideMajorNav = getAsideMajorNavPayload();
+
+asideMajorNav.booksIds ||= (await $fetch(
+    '/api/aside/major/nav/bookIds',
+)) as string[];
+
+asideMajorNav.globalNav ||= (await $fetch(
+    '/api/aside/major/nav/global',
+)) as FrontNav;
+
+//
+// Check if inside book from start
+//
+
+// Reset server-leaked state from other pages
+navBookId.value = undefined;
+insideNavBook.value = false;
+
+if (contentRoute.value) {
+    for (const bookId of asideMajorNav.booksIds) {
+        if (contentRoute.value.contentId.startsWith(bookId)) {
+            navBookId.value = bookId;
+            insideNavBook.value = true;
+            break;
+        }
+    }
+}
+
+onMounted(() => {
+    watch(
+        contentRoute,
+        () =>
+            (insideNavBook.value = insideNavBook.value
+                ? !!contentRoute.value
+                : false),
+    );
+});
+</script>
+
+<template>
+    <div :class="[$style.navHolder, navBookVisible && $style.navBookVisible]">
+        <NavGlobal :class="$style.navGlobal" />
+        <NavBook :class="$style.navBook" />
+    </div>
+</template>
+
+<style lang="scss" module>
+.navHolder {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .navGlobal,
+    .navBook {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 1;
+        @include transition(left, opacity);
+    }
+
+    &.navBookVisible {
+        .navGlobal {
+            left: calc(-1 * var(--wAside));
+            opacity: 0;
+        }
+    }
+
+    &:not(.navBookVisible) {
+        .navBook {
+            left: calc(1 * var(--wAside));
+            opacity: 0;
+        }
+    }
+}
+</style>

package/app/components/aside/major/panes/nav/NavBook.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import type { FrontNavBook } from '@shared/frontNav';
+import { insideNavBook, navBookId } from '@app/scripts/aside/major/nav';
+
+import PaneContentScroll from '../../PaneContentScroll.vue';
+import FNav from './fnav/FNav.vue';
+import FNavFlags from './fnav/FNavFlags.vue';
+import NavBookLoading from './NavBookLoading.vue';
+
+const loading = ref(true);
+
+const nuxtApp = useNuxtApp();
+const contentRoute = useContentRoute();
+const book = shallowRef<FrontNavBook>();
+
+async function setupNavBook() {
+    loading.value = true;
+
+    if (!navBookId.value) return;
+
+    nuxtApp.runWithContext(() =>
+        prerenderRoutes(`/api/aside/major/nav/bookNav/${navBookId.value}`),
+    );
+    book.value = await $fetch(
+        `/api/aside/major/nav/bookNav/${navBookId.value}`,
+    );
+
+    loading.value = false;
+}
+
+watch(navBookId, setupNavBook);
+await setupNavBook();
+const pharse = await usePhrases('to_index', 'about_book');
+</script>
+
+<template>
+    <div>
+        <PaneContentScroll v-if="book">
+            <section :class="$style.bookHeader">
+                <div :class="$style.title">{{ book.label }}</div>
+                <FNavFlags
+                    v-if="book.flags"
+                    :flags="book.flags"
+                    :class="$style.flags"
+                />
+            </section>
+            <FNav :nav="book.children!" :contentId="contentRoute?.contentId">
+                <template v-slot:before>
+                    <TreeItem
+                        icon="arrow-left"
+                        :label="pharse.to_index"
+                        @click="insideNavBook = false"
+                    />
+                    <TreeItem
+                        icon="book-question"
+                        :label="pharse.about_book"
+                        :active="contentRoute?.contentId === book.id"
+                        :link="`/book/${book.id}`"
+                    />
+                </template>
+            </FNav>
+        </PaneContentScroll>
+        <TransitionFade>
+            <NavBookLoading v-if="loading" />
+        </TransitionFade>
+    </div>
+</template>
+
+<style lang="scss" module>
+.bookHeader {
+    display: flex;
+    align-items: center;
+    padding: var(--gap);
+    border-bottom: 1px solid var(--border);
+
+    .title {
+        flex: 1;
+        font-weight: 600;
+        color: var(--text);
+    }
+
+    .flags {
+        flex-shrink: 0;
+    }
+}
+</style>

package/app/components/aside/major/panes/nav/NavBookLoading.vue

@@ -0,0 +1,24 @@
+<template>
+    <div :class="$style.navBookLoading">
+        <Loading />
+    </div>
+</template>
+
+<style lang="scss" module>
+.navBookLoading {
+    position: absolute;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--bgAside);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 60px;
+
+    @include transition(opacity, box-shadow);
+}
+</style>

package/app/components/aside/major/panes/nav/NavGlobal.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { getAsideMajorNavPayload } from '@app/scripts/aside/major/nav';
+
+import FNav from './fnav/FNav.vue';
+import PaneContentScroll from '../../PaneContentScroll.vue';
+
+const contentRoute = useContentRoute();
+const asideMajorNav = getAsideMajorNavPayload();
+const globalNav = asideMajorNav.globalNav;
+</script>
+
+<template>
+    <PaneContentScroll>
+        <FNav :nav="globalNav" :contentId="contentRoute?.contentId" />
+    </PaneContentScroll>
+</template>