erudit 3.0.0-dev.2 → 3.0.0-dev.20

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

@@ -1,79 +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>
+<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

@@ -1,34 +1,31 @@
-<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>
+<script setup lang="ts">
+import PaneContentScroll from '../PaneContentScroll.vue';
+
+const route = useRoute();
+
+const phrase = await usePhrases('main_page', 'contributors');
+
+const { data: contributorCount } = await useAsyncData<number>(
+    'contributor-count',
+    () => $fetch('/api/contributor/count'),
+);
+</script>
+
+<template>
+    <PaneContentScroll>
+        <AsideListItem
+            icon="house"
+            link="/"
+            :active="route.path === '/'"
+            :main="phrase.main_page"
+        />
+        <AsideListItem
+            v-if="contributorCount"
+            icon="users"
+            link="/contributors"
+            :active="route.path.startsWith('/contributor')"
+            :main="phrase.contributors"
+            :secondary="contributorCount!.toString()"
+        />
+    </PaneContentScroll>
+</template>

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

@@ -1,11 +1,11 @@
-<template>
-    <div
-        :style="{
-            padding: 'var(--gap)',
-            color: 'var(--textMuted)',
-            textAlign: 'center',
-        }"
-    >
-        Here be dragons...
-    </div>
-</template>
+<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

@@ -1,91 +1,92 @@
-<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>
+<script lang="ts" setup>
+import type { FrontNav } from '@shared/frontNav';
+import { detectContentBookId } from '@shared/content/bookId';
+
+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', {
+    responseType: 'json',
+})) as string[];
+
+asideMajorNav.globalNav ||= (await $fetch('/api/aside/major/nav/global', {
+    responseType: 'json',
+})) as FrontNav;
+
+const checkIfInsideBook = () => {
+    if (contentRoute.value) {
+        const bookId = detectContentBookId(
+            contentRoute.value.contentId,
+            asideMajorNav.booksIds,
+        );
+
+        if (bookId) {
+            navBookId.value = bookId;
+            insideNavBook.value = true;
+            return;
+        }
+    }
+
+    // If we get here, we're not in any book
+    navBookId.value = undefined;
+    insideNavBook.value = false;
+};
+
+checkIfInsideBook();
+
+onMounted(() => {
+    watch(contentRoute, () => {
+        checkIfInsideBook();
+    });
+});
+</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

@@ -1,86 +1,95 @@
-<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>
+<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}`,
+        { responseType: 'json' },
+    );
+
+    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>
+                    <section :class="$style.bookActions">
+                        <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}`"
+                        />
+                    </section>
+                </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;
+    }
+}
+
+.bookActions {
+    border-bottom: 1px solid var(--border);
+    padding-bottom: calc(var(--gap) / 2);
+    margin-bottom: calc(var(--gap) / 2);
+}
+</style>

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

@@ -1,24 +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>
+<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>