erudit 2.0.0-dev.7

package/app/components/aside/major/panes/nav/fnav/FNav.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import type {
+    FrontNav,
+    FrontNavContainer,
+    FrontNavItem,
+} from '@shared/frontNav';
+import { navStateKey, type NavState } from '@app/scripts/aside/major/nav';
+
+import FNavItem from './FNavItem.vue';
+
+const props = defineProps<{ nav: FrontNav; contentId?: string }>();
+const hashNav = shallowRef<Record<string, FrontNavItem>>();
+const navState = shallowRef<NavState>();
+
+function setupHashNav() {
+    hashNav.value = {};
+
+    if (!props.nav) return;
+
+    function addNavItem(navItem: FrontNavItem) {
+        hashNav.value![navItem.fullId] = navItem;
+        for (const child of (navItem as FrontNavContainer).children || [])
+            addNavItem(child);
+    }
+
+    for (const topNavItem of props.nav) addNavItem(topNavItem);
+}
+
+function setupNavState() {
+    // We create a ref for every nav item to check wheter it is active or not.
+    // Yes, it uses a lot of memory, but it is still better than messing with recursive tree recreations.
+
+    navState.value = {};
+
+    for (const navItem of Object.values(hashNav.value!))
+        navState.value[navItem.id] = shallowRef(null);
+}
+
+function updateNavState() {
+    // We watch current content route and update navigation state for each item.
+    // United watcher here instead of watcher on each navigation item instance.
+
+    if (!hashNav.value || !navState.value) return;
+
+    let currentFullId: string | undefined;
+
+    for (const navItem of Object.values(hashNav.value)) {
+        navState.value[navItem.id]!.value = null;
+        if (props.contentId?.startsWith(navItem.id))
+            currentFullId = navItem.fullId;
+    }
+
+    if (!currentFullId) return;
+
+    const idParts = currentFullId.split('/');
+    while (idParts.length) {
+        const _fullId = idParts.join('/');
+        const navItem = hashNav.value[_fullId];
+
+        if (navItem)
+            navState.value[navItem.id]!.value =
+                _fullId === currentFullId ? 'active' : 'activePart';
+
+        idParts.pop();
+    }
+}
+
+setupHashNav();
+setupNavState();
+updateNavState();
+
+watch(
+    () => props.nav,
+    () => {
+        setupHashNav();
+        setupNavState();
+        updateNavState();
+    },
+);
+
+watch(() => props.contentId, updateNavState);
+
+// @ts-ignore
+provide(navStateKey, navState);
+
+const phrase = await usePhrases('empty_nav');
+</script>
+
+<template>
+    <TreeContainer v-if="nav && nav.length > 0">
+        <slot name="before"></slot>
+        <FNavItem v-for="navItem of nav" :navItem />
+    </TreeContainer>
+    <div v-else :class="$style.emptyNav">
+        {{ phrase.empty_nav }}
+    </div>
+</template>
+
+<style lang="scss" module>
+.emptyNav {
+    padding: var(--gap);
+    color: var(--textMuted);
+    text-align: center;
+}
+</style>

package/app/components/aside/major/panes/nav/fnav/FNavBook.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { FrontNavBook } from '@shared/frontNav';
+import {
+    insideNavBook,
+    navBookId,
+    navStateKey,
+} from '@app/scripts/aside/major/nav';
+
+import FNavFlags from './FNavFlags.vue';
+
+const props = defineProps<{ navItem: FrontNavBook }>();
+const navState = inject(navStateKey);
+const active = computed(() => !!navState!.value[props.navItem.id]!.value);
+
+function bookClick() {
+    navBookId.value = props.navItem.id;
+    insideNavBook.value = true;
+}
+</script>
+
+<template>
+    <TreeItem
+        icon="outline/book"
+        :label="navItem.label"
+        :level="navItem.level"
+        :link="active ? undefined : `/book/${navItem.id}`"
+        @click="bookClick"
+        :active
+    >
+        <FNavFlags v-if="navItem.flags" :flags="navItem.flags" />
+    </TreeItem>
+</template>

package/app/components/aside/major/panes/nav/fnav/FNavFlags.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import type { ContentFlag } from 'erudit-cog/schema';
+import { flagsData } from '@app/scripts/flag';
+
+defineProps<{ flags: Record<ContentFlag, boolean> }>();
+
+const phrases = Object.values(flagsData).map((data) => data.title);
+const phrase = await usePhrases(...phrases);
+</script>
+
+<template>
+    <div :class="$style.flags">
+        <MyIcon
+            v-for="(value, flag) in flags"
+            :name="flagsData[flag].icon"
+            :title="phrase[flagsData[flag].title]"
+            :class="$style.flag"
+        />
+    </div>
+</template>
+
+<style lang="scss" module>
+.flags {
+    display: flex;
+    align-items: center;
+    gap: var(--gapSmall);
+}
+
+.flag {
+    cursor: help;
+    font-size: 16px;
+    color: var(--textDimmed);
+    opacity: 0.65;
+    @include transition(opacity);
+
+    &:hover {
+        opacity: 1;
+    }
+}
+</style>

package/app/components/aside/major/panes/nav/fnav/FNavFolder.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import type { FrontNavFolder } from '@shared/frontNav';
+import { navStateKey } from '@app/scripts/aside/major/nav';
+
+import FNavItem from './FNavItem.vue';
+import FNavFlags from './FNavFlags.vue';
+
+const props = defineProps<{ navItem: FrontNavFolder }>();
+const navState = inject(navStateKey);
+
+const active = ref(false);
+const accent = ref(false);
+
+function onStateUpdate() {
+    const newState = navState!.value[props.navItem.id]!.value;
+    active.value = newState === 'active';
+    accent.value = newState === 'activePart';
+}
+
+onStateUpdate();
+watch(navState!.value[props.navItem.id]!, onStateUpdate);
+
+const visible = computed(() => active.value || accent.value);
+</script>
+
+<template>
+    <div>
+        <TreeItem
+            :icon="`folder${visible ? '-open' : ''}`"
+            :link="`/group/${navItem.id}`"
+            :label="navItem.label"
+            :active
+            :accent
+            :level="navItem.level"
+        >
+            <FNavFlags v-if="navItem.flags" :flags="navItem.flags" />
+        </TreeItem>
+
+        <div :class="[$style.groupBody, visible && $style.visible]">
+            <FNavItem
+                v-for="childItem of navItem.children"
+                :navItem="childItem"
+            />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" module>
+@use '$/partials/fnav';
+
+.groupBody {
+    overflow: hidden;
+    height: 0;
+    @include transition(height);
+
+    &.visible {
+        height: auto;
+    }
+}
+</style>

package/app/components/aside/major/panes/nav/fnav/FNavItem.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import type { FrontNavItem, FrontNavType } from '@shared/frontNav';
+
+import FNavBook from './FNavBook.vue';
+import FNavSeparator from './FNavSeparator.vue';
+import FNavFolder from './FNavFolder.vue';
+import FNavTopic from './FNavTopic.vue';
+
+defineProps<{ navItem: FrontNavItem }>();
+
+const navComponent: Record<FrontNavType, Component> = {
+    book: FNavBook,
+    separator: FNavSeparator,
+    folder: FNavFolder,
+    topic: FNavTopic,
+};
+</script>
+
+<template>
+    <component
+        :is="navComponent[navItem.type]"
+        :navItem
+        :class="[
+            $style.frontNavItem,
+            $style[
+                `frontNav${navItem.type[0]!.toUpperCase() + navItem.type.substring(1)}`
+            ],
+        ]"
+    />
+</template>
+
+<style lang="scss" module>
+@use '$/partials/fnav';
+</style>

package/app/components/aside/major/panes/nav/fnav/FNavSeparator.vue

@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import { navStateKey } from '@app/scripts/aside/major/nav';
+import type { FrontNavSeparator } from '@shared/frontNav';
+
+import FNavItem from './FNavItem.vue';
+import FNavFlags from './FNavFlags.vue';
+
+const props = defineProps<{ navItem: FrontNavSeparator }>();
+const navState = inject(navStateKey);
+
+const active = ref(false);
+const accent = ref(false);
+
+function onStateUpdate() {
+    const newState = navState!.value[props.navItem.id]!.value;
+    active.value = newState === 'active';
+    accent.value = newState === 'activePart';
+}
+
+onStateUpdate();
+watch(navState!.value[props.navItem.id]!, onStateUpdate);
+</script>
+
+<template>
+    <div>
+        <NuxtLink
+            :to="`/group/${navItem.id}`"
+            :class="[
+                $style.header,
+                active && $style.active,
+                accent && $style.accent,
+            ]"
+            :prefetch="false"
+        >
+            <div :class="$style.label">{{ navItem.label }}</div>
+            <FNavFlags
+                :class="$style.flags"
+                v-if="navItem.flags"
+                :flags="navItem.flags"
+            />
+        </NuxtLink>
+        <FNavItem v-for="childItem of navItem.children" :navItem="childItem" />
+    </div>
+</template>
+
+<style lang="scss" module>
+.header {
+    display: flex;
+    gap: var(--gap);
+    padding: calc(var(--gap) / 2) var(--gap);
+    text-decoration: none;
+    @include transition(background);
+
+    .label {
+        flex: 1;
+        font-weight: 600;
+        font-size: 0.95em;
+        color: var(--textDimmed);
+        @include transition(color);
+    }
+
+    .flags {
+        flex-shrink: 0;
+    }
+
+    &:hover {
+        background: var(--bgAccent);
+    }
+    &:hover:not(.active) .label {
+        color: var(--text);
+    }
+
+    &.active .label {
+        color: var(--brand);
+    }
+    &.accent .label {
+        color: var(--textMuted);
+    }
+}
+</style>

package/app/components/aside/major/panes/nav/fnav/FNavTopic.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { navStateKey } from '@app/scripts/aside/major/nav';
+import type { FrontNavTopic } from '@shared/frontNav';
+
+import FNavFlags from './FNavFlags.vue';
+
+const props = defineProps<{ navItem: FrontNavTopic }>();
+const navState = inject(navStateKey);
+const active = computed(
+    () => navState!.value[props.navItem.id]!.value === 'active',
+);
+</script>
+
+<template>
+    <TreeItem
+        icon="outline/file-lines"
+        :active
+        :label="navItem.label"
+        :level="navItem.level"
+        :link="`/${navItem.part}/${navItem.id}`"
+    >
+        <FNavFlags v-if="navItem.flags" :flags="navItem.flags" />
+    </TreeItem>
+</template>

package/app/components/aside/major/panes/other/ItemContent.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import eruditConfig from '#erudit/config';
+
+const phrase = await usePhrases('_language_code', 'content');
+
+const secondary = ref<string>();
+
+const githubResponse = await useExternalApiRepository();
+const strDate = githubResponse.commit?.commit?.author?.date;
+
+if (strDate) {
+    secondary.value = new Date(strDate).toLocaleString(phrase._language_code, {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+    });
+} else console.warn(`Bad content last commit date repsonse: ${strDate}`);
+</script>
+
+<template>
+    <AsideListItem
+        v-if="secondary"
+        :link="`https://github.com/${eruditConfig.repository?.name}`"
+        target="_blank"
+        icon="draw"
+        :main="phrase.content + ':'"
+        :secondary
+    />
+</template>

package/app/components/aside/major/panes/other/ItemGenerator.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { version } from '@erudit/package.json';
+
+const phrase = await usePhrases('generator');
+</script>
+
+<template>
+    <AsideListItem
+        link="https://github.com/Gwynerva/erudit"
+        target="_blank"
+        icon="chip"
+        :main="phrase.generator + ':'"
+        :secondary="`Erudit ${version}`"
+    />
+</template>

package/app/components/aside/major/panes/other/ItemTheme.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+
+const phrase = await usePhrases(
+    'theme',
+    'theme_system',
+    'theme_light',
+    'theme_dark',
+);
+
+const themeOptions: Record<string, [MyIconName, string]> = {
+    auto: ['sun-moon', phrase.theme_system],
+    light: ['sun', phrase.theme_light],
+    dark: ['moon', phrase.theme_dark],
+};
+
+const themeItem = ref(themeOptions.auto);
+
+let _cycle = () => {};
+
+onMounted(() => {
+    const { cycle, theme } = useTheme();
+
+    _cycle = cycle;
+
+    watch(
+        theme,
+        () => {
+            themeItem.value = (() => {
+                switch (theme.value) {
+                    case 'auto':
+                        return themeOptions.auto;
+                    case 'light':
+                        return themeOptions.light;
+                    case 'dark':
+                        return themeOptions.dark;
+                }
+            })();
+        },
+        { immediate: true },
+    );
+});
+</script>
+
+<template>
+    <ClientOnly>
+        <AsideListItem
+            @click="_cycle"
+            :icon="themeItem![0]"
+            :main="phrase.theme + ':'"
+            :secondary="themeItem![1]"
+        />
+    </ClientOnly>
+</template>

package/app/components/aside/major/panes/other/Other.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import eruditConfig from '#erudit/config';
+
+import PaneContentScroll from '../../PaneContentScroll.vue';
+import ItemTheme from './ItemTheme.vue';
+import ItemContent from './ItemContent.vue';
+import ItemGenerator from './ItemGenerator.vue';
+</script>
+
+<template>
+    <PaneContentScroll>
+        <ItemTheme />
+        <ItemContent v-if="eruditConfig.repository" />
+        <ItemGenerator />
+    </PaneContentScroll>
+</template>

package/app/components/aside/minor/AsideMinorContributor.vue

@@ -0,0 +1,5 @@
+<template>
+    <AsideMinorPane>
+        <div>Contributor</div>
+    </AsideMinorPane>
+</template>

package/app/components/aside/minor/AsideMinorNews.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+// import { injectNewsData } from '@app/scripts/aside/minor/state';
+
+// const newsData = injectNewsData();
+</script>
+
+<template>
+    <AsideMinorPane>
+        <div></div>
+    </AsideMinorPane>
+</template>

package/app/components/aside/minor/AsideMinorPane.vue

@@ -0,0 +1,16 @@
+<template>
+    <div :class="$style.asideMinorPane">
+        <slot></slot>
+    </div>
+</template>
+
+<style lang="scss" module>
+.asideMinorPane
+{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+</style>

package/app/components/aside/minor/AsideMinorTopLink.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+
+defineProps<{ link?: string; icon: MyIconName; active?: boolean }>();
+
+const Link = defineNuxtLink({ prefetch: false });
+</script>
+
+<template>
+    <Link
+        :to="link"
+        :class="[
+            $style.asideMinorTopLink,
+            !link && $style.noLink,
+            active && $style.active,
+        ]"
+    >
+        <MyIcon :name="icon" />
+    </Link>
+</template>
+
+<style lang="scss" module>
+.asideMinorTopLink {
+    position: relative;
+    font-size: 22px;
+    padding: 20px 12px;
+    color: var(--textDimmed);
+    cursor: pointer;
+    color: var(--textMuted);
+
+    @include transition(color, opacity);
+
+    &:hover {
+        color: var(--text);
+        &::after {
+            background: var(--border);
+        }
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: -1px;
+        width: 100%;
+        height: 3px;
+        background: transparent;
+        @include transition(background);
+    }
+
+    &.active {
+        color: var(--text);
+        &::after {
+            background: var(--textMuted);
+        }
+    }
+
+    &.noLink {
+        opacity: 0.8;
+        cursor: default;
+        color: var(--textDisabled);
+        &::after {
+            background: transparent;
+        }
+    }
+}
+</style>