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

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

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

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-<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/AsideMinorTopLink.vue

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

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

@@ -1,145 +0,0 @@
-<script lang="ts" setup>
-import eruditConfig from '#erudit/config';
-
-import AsideOverlayPane from '../utils/AsideOverlayPane.vue';
-
-const props = defineProps<{ fullContentId: string }>();
-const phrase = await usePhrases(
-    'make_contribution',
-    'material_improvement',
-    'edit_page',
-    'how_to_improve',
-    'report_problem',
-);
-const paneVisible = defineModel<boolean>('pane');
-
-const issueLink = computed(() => {
-    const ghRepositorty = eruditConfig.repository;
-    return ghRepositorty
-        ? `https://github.com/${ghRepositorty.name}/issues/`
-        : null;
-});
-
-const editPageLink = computed(() => {
-    const ghRepository = eruditConfig.repository;
-    return ghRepository
-        ? `https://github.com/${ghRepository.name}/tree/${ghRepository.branch}/content/${props.fullContentId}`
-        : null;
-});
-</script>
-
-<template>
-    <button :class="$style.contribute" @click="paneVisible = true">
-        <div :class="$style.icon"><MyIcon name="draw" /></div>
-        <div :class="$style.label">{{ phrase.make_contribution }}</div>
-    </button>
-    <TransitionFade>
-        <AsideOverlayPane v-if="paneVisible" stick="bottom">
-            <div :class="$style.paneBottomActions">
-                <AsideListItem
-                    icon="circle-help"
-                    :main="phrase.how_to_improve"
-                />
-                <AsideListItem
-                    v-if="issueLink"
-                    icon="bug"
-                    :main="phrase.report_problem"
-                    :link="issueLink"
-                    target="_blank"
-                />
-                <AsideListItem
-                    v-if="editPageLink"
-                    icon="draw"
-                    :main="phrase.edit_page"
-                    :link="editPageLink"
-                    target="_blank"
-                />
-            </div>
-            <div :class="$style.paneFooter">
-                <span>{{ phrase.material_improvement }}</span>
-                <span style="flex: 1"></span>
-                <MyIcon
-                    name="cross"
-                    :class="$style.close"
-                    @click="paneVisible = false"
-                />
-            </div>
-        </AsideOverlayPane>
-    </TransitionFade>
-</template>
-
-<style lang="scss" module>
-.contribute {
-    display: flex;
-    gap: var(--gap);
-    align-items: center;
-    border: none;
-    border-top: 1px solid var(--border);
-    padding: var(--gap);
-    background: transparent;
-    cursor: pointer;
-    @include transition(background);
-
-    &:hover {
-        background: var(--bgAccent);
-        .icon {
-            border-color: var(--textDimmed);
-        }
-        .label {
-            color: var(--text);
-        }
-    }
-
-    .icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 40px;
-        height: 40px;
-        border: 3px dashed var(--border);
-        border-radius: 50%;
-        color: var(--textMuted);
-        @include transition(border-color);
-    }
-
-    .label {
-        color: var(--textMuted);
-        @include transition(color);
-    }
-}
-
-.paneBottomActions {
-    overflow: auto;
-    @include scroll;
-
-    > * {
-        border-bottom: none !important;
-        border-top: 1px solid var(--border);
-        min-height: 70px;
-    }
-}
-
-.paneFooter {
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    border-top: 1px solid var(--border);
-    height: 70px;
-    padding-left: var(--gap);
-    font-size: 1.1em;
-    font-weight: 600;
-
-    .close {
-        cursor: pointer;
-        padding: var(--gap);
-        font-size: 20px;
-        color: var(--textMuted);
-
-        @include transition(color);
-
-        &:hover {
-            color: var(--text);
-        }
-    }
-}
-</style>

package/app/components/aside/minor/content/AsideMinorContent.vue

@@ -1,92 +0,0 @@
-<script lang="ts" setup>
-import type { AsideMinorContent } from '@shared/aside/minor';
-import { injectAsideData } from '@app/scripts/aside/minor/state';
-
-const contentData = injectAsideData<AsideMinorContent>();
-const phrase = await usePhrases('contributors', 'no_contributors');
-const contributePaneVisible = ref(false);
-
-watch(contentData, () => (contributePaneVisible.value = false));
-</script>
-
-<template>
-    <AsideMinorPane :class="$style.asideMinorContent">
-        <section :class="$style.contentNav">
-            <AsideMinorTopLink
-                :title="contentData.nav?.previous?.title"
-                :link="contentData.nav?.previous?.link"
-                :icon="'arrow-left'"
-            />
-
-            <div :class="$style.title">
-                {{ phrase.contributors }}:
-                <span>{{ contentData.contributors?.length || 0 }}</span>
-            </div>
-
-            <AsideMinorTopLink
-                :title="contentData.nav?.next?.title"
-                :link="contentData.nav?.next?.link"
-                :icon="'arrow-left'"
-                class="icon-flip-h"
-            />
-        </section>
-        <section v-if="contentData.contributors" :class="$style.contributors">
-            <ContributorListItem
-                v-for="contributor of contentData.contributors"
-                v-bind="contributor"
-            />
-        </section>
-        <section v-else :class="$style.noContributors">
-            {{ phrase.no_contributors }}
-        </section>
-        <AsideMinorContribute
-            :fullContentId="contentData.fullContentId"
-            v-model:pane="contributePaneVisible"
-        />
-    </AsideMinorPane>
-</template>
-
-<style lang="scss" module>
-.asideMinorContent {
-    display: flex;
-    flex-direction: column;
-
-    .contentNav {
-        border-bottom: 1px solid var(--border);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 10px;
-
-        .title {
-            text-align: center;
-            color: var(--text);
-            font-size: 1.1em;
-            font-weight: 600;
-            width: 158px;
-
-            span {
-                padding-left: var(--gap);
-                color: var(--textMuted);
-            }
-        }
-    }
-
-    .contributors {
-        flex: 1;
-        overflow: auto;
-        @include scroll;
-
-        > * {
-            border-bottom: 1px solid var(--border);
-        }
-    }
-
-    .noContributors {
-        flex: 1;
-        text-align: center;
-        padding: var(--gap);
-        color: var(--textMuted);
-    }
-}
-</style>

package/app/components/aside/minor/topic/AsideMinorTopic.vue

@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-import type { AsideMinorTopic } from '@shared/aside/minor';
-import { injectAsideData } from '@app/scripts/aside/minor/state';
-
-import TopicNav from './TopicNav.vue';
-import TopicToc from './TopicToc.vue';
-import TopicContributors from './TopicContributors.vue';
-
-const topicData = injectAsideData<AsideMinorTopic>();
-const contributePaneVisible = ref(false);
-
-watch(topicData, () => (contributePaneVisible.value = false));
-</script>
-
-<template>
-    <AsideMinorPane :class="$style.asideMinorTopic">
-        <TopicNav />
-        <TopicToc />
-        <TopicContributors v-if="topicData.contributors" />
-        <AsideMinorContribute
-            :fullContentId="topicData.fullContentId"
-            v-model:pane="contributePaneVisible"
-        />
-    </AsideMinorPane>
-</template>
-
-<style lang="scss" module>
-.asideMinorTopic {
-    display: flex;
-    flex-direction: column;
-}
-</style>

package/app/components/aside/minor/topic/TopicContributors.vue

@@ -1,177 +0,0 @@
-<script lang="ts" setup>
-import { injectAsideData } from '@app/scripts/aside/minor/state';
-import { type AsideMinorTopic } from '@shared/aside/minor';
-
-import AsideOverlayPane from '../../utils/AsideOverlayPane.vue';
-import type { ContentContributor } from '@shared/contributor';
-
-const phrase = await usePhrases('contributors');
-const topicData = injectAsideData<AsideMinorTopic>();
-const listPaneVisible = ref(false);
-
-const showcaseMax = 4;
-const showcase = shallowRef<ContentContributor[]>();
-
-const counter = computed(() => {
-    const toShow = Math.min(showcaseMax, topicData.value.contributors!.length);
-
-    return {
-        showcase: toShow,
-        rest: topicData.value.contributors!.length - toShow,
-    };
-});
-
-let previousFullId: string;
-
-onMounted(() => {
-    watch(
-        topicData,
-        () => {
-            if (previousFullId === topicData.value.fullContentId) return;
-
-            previousFullId = topicData.value.fullContentId;
-            showcase.value = [...topicData.value.contributors!]
-                .sort(() => 0.5 - Math.random())
-                .slice(0, counter.value.showcase);
-            listPaneVisible.value = false;
-        },
-        { immediate: true },
-    );
-});
-</script>
-
-<template>
-    <section :class="$style.topicContributors" @click="listPaneVisible = true">
-        <div :class="$style.showcase">
-            <template v-if="showcase">
-                <ContributorAvatar
-                    v-for="contributor of showcase"
-                    :contributorId="contributor.contributorId"
-                    :avatar="contributor.avatar"
-                    :class="$style.avatar"
-                />
-            </template>
-            <template v-else>
-                <div
-                    v-if="!showcase"
-                    v-for="i in counter.showcase"
-                    :class="$style.avatarReplacer"
-                ></div>
-            </template>
-        </div>
-        <div v-if="counter.rest" :class="$style.restCounter">
-            + {{ counter.rest }}
-        </div>
-    </section>
-    <TransitionFade>
-        <AsideOverlayPane v-if="listPaneVisible" stick="bottom">
-            <div :class="$style.paneList">
-                <ContributorListItem
-                    v-for="contributor of topicData.contributors"
-                    v-bind="contributor"
-                />
-            </div>
-            <div :class="$style.paneFooter">
-                <span>{{ phrase.contributors }}:</span>
-                <span :class="$style.counter">{{
-                    topicData.contributors!.length
-                }}</span>
-                <span style="flex: 1"></span>
-                <MyIcon
-                    name="cross"
-                    :class="$style.close"
-                    @click="listPaneVisible = false"
-                />
-            </div>
-        </AsideOverlayPane>
-    </TransitionFade>
-</template>
-
-<style lang="scss" module>
-.topicContributors {
-    border-top: 1px solid var(--border);
-    padding: var(--gap);
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    cursor: pointer;
-    background: transparent;
-
-    @include transition(background);
-
-    &:hover {
-        background: var(--bgAccent);
-    }
-}
-
-.showcase {
-    $showcaseAvatarSize: 40px;
-
-    display: flex;
-    gap: var(--gap);
-
-    .avatar,
-    .avatarReplacer {
-        width: #{$showcaseAvatarSize};
-        height: #{$showcaseAvatarSize};
-    }
-
-    .avatarReplacer {
-        border-radius: 50%;
-        background: var(--textDimmed);
-        animation: avatarReplacer 500ms infinite ease-in-out alternate;
-    }
-}
-
-.restCounter {
-    color: var(--textMuted);
-    font-size: 1.1em;
-    font-weight: 600;
-}
-
-@keyframes avatarReplacer {
-    from {
-        opacity: 0.625;
-    }
-    to {
-        opacity: 0.4;
-    }
-}
-
-.paneList {
-    overflow: auto;
-    @include scroll;
-
-    > * {
-        border-top: 1px solid var(--border);
-    }
-}
-
-.paneFooter {
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    border-top: 1px solid var(--border);
-    height: 70px;
-    padding-left: var(--gap);
-    font-size: 1.1em;
-    font-weight: 600;
-
-    .counter {
-        color: var(--textMuted);
-    }
-
-    .close {
-        cursor: pointer;
-        padding: var(--gap);
-        font-size: 20px;
-        color: var(--textMuted);
-
-        @include transition(color);
-
-        &:hover {
-            color: var(--text);
-        }
-    }
-}
-</style>