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

package/app/components/aside/major/settings/ThemeSwitcher.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import type { MaybeMyIconName } from '#my-icons';
+
+const icon = ref<MaybeMyIconName>(loadingSvg);
+const themeName = ref<string>();
+
+let cycleThemeClick = () => {};
+
+const phrase = await usePhrases(
+    'theme',
+    'theme_light',
+    'theme_dark',
+    'theme_system',
+);
+
+onMounted(() => {
+    const { themePref, cycleTheme } = useTheme();
+
+    watch(
+        themePref,
+        (newThemePref) => {
+            switch (newThemePref) {
+                case 'system':
+                    icon.value = 'sun-moon';
+                    themeName.value = phrase.theme_system;
+                    break;
+                case 'light':
+                    icon.value = 'sun';
+                    themeName.value = phrase.theme_light;
+                    break;
+                case 'dark':
+                    icon.value = 'moon';
+                    themeName.value = phrase.theme_dark;
+                    break;
+            }
+        },
+        { immediate: true },
+    );
+
+    cycleThemeClick = () => {
+        cycleTheme();
+    };
+});
+</script>
+
+<template>
+    <AsideListItem
+        :icon
+        :main="phrase.theme"
+        :secondary="themeName"
+        @click="cycleThemeClick"
+    />
+</template>

package/app/components/aside/major/settings/repository/Repository.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import type { EruditRepositoryType } from '@erudit-js/core/eruditConfig/repository';
+
+const repository = ERUDIT.config.project.repository;
+const phrase = await usePhrases('content');
+
+type SecondaryComponents = Record<EruditRepositoryType, any>;
+
+const secondaryComponents = {
+    custom: undefined,
+    github: defineAsyncComponent(() => import('./SecondaryGitHub.vue')),
+} as const satisfies SecondaryComponents;
+
+const SecondaryComponent = repository
+    ? secondaryComponents[repository.type]
+    : undefined;
+</script>
+
+<template>
+    <AsideListItem
+        v-if="repository"
+        icon="draw"
+        target="_blank"
+        :to="repository._link"
+        :main="phrase.content"
+    >
+        <template v-slot:secondary>
+            <div class="text-text-dimmed ps-[8px] text-xs font-[500]">
+                <SecondaryComponent v-if="SecondaryComponent" />
+            </div>
+        </template>
+    </AsideListItem>
+</template>

package/app/components/aside/major/settings/repository/SecondaryGitHub.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+const githubIcon =
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16,.39C7.16.39,0,7.55,0,16.39c0,7.07,4.59,13.07,10.94,15.2.8.13,1.06-.37,1.06-.8v-2.7c-4.43.96-5.38-2.14-5.38-2.14-.74-1.86-1.78-2.35-1.78-2.35-1.46-.99.11-.96.11-.96,1.6.11,2.45,1.65,2.45,1.65,1.39,2.43,3.74,1.71,4.66,1.33.14-1.04.56-1.74,1.01-2.14-3.55-.4-7.28-1.78-7.28-7.87,0-1.78.61-3.2,1.65-4.34-.16-.4-.72-2.06.16-4.22,0,0,1.34-.43,4.4,1.63,1.26-.35,2.64-.53,4-.53s2.74.18,4,.53c3.06-2.06,4.4-1.63,4.4-1.63.88,2.16.32,3.82.16,4.22,1.04,1.14,1.65,2.56,1.65,4.34,0,6.11-3.74,7.46-7.31,7.86.58.5,1.1,1.47,1.1,2.96v4.38c0,.43.26.94,1.07.8,6.35-2.14,10.93-8.13,10.93-15.2C32,7.55,24.84.39,16,.39"/></svg>';
+const starIcon =
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10.12,25.46l5.87-3.54,5.87,3.59-1.54-6.71,5.18-4.48-6.81-.61-2.7-6.34-2.7,6.29-6.81.61,5.18,4.52-1.54,6.67ZM16,26.3l-7.74,4.66c-.34.22-.7.31-1.07.28s-.7-.16-.98-.37c-.28-.22-.5-.49-.65-.81-.16-.33-.19-.69-.09-1.1l2.05-8.81L.66,14.23c-.31-.28-.5-.6-.58-.96-.08-.36-.05-.71.07-1.05s.31-.62.56-.84c.25-.22.59-.36,1.03-.42l9.04-.79L14.27,1.87c.16-.37.4-.65.72-.84.33-.19.66-.28,1-.28s.67.09,1,.28c.33.19.57.47.72.84l3.5,8.3,9.04.79c.44.06.78.2,1.03.42.25.22.44.5.56.84.12.34.15.69.07,1.05s-.27.68-.58.95l-6.85,5.92,2.05,8.81c.09.4.06.77-.09,1.1-.16.33-.37.6-.65.81s-.61.34-.98.37c-.37.03-.73-.06-1.07-.28l-7.74-4.66Z"/></svg>';
+
+const pending = ref(true);
+const stars = ref<number | null>(null);
+
+const starsFormatted = computed(() => {
+    if (stars.value === null) return '';
+    const value = stars.value;
+    if (value >= 1000) {
+        const formatted =
+            value >= 10000
+                ? Math.floor(value / 1000).toString()
+                : (value / 1000).toFixed(1).replace(/\.0$/, '');
+        return formatted + 'K';
+    }
+    return value.toString();
+});
+
+onMounted(async () => {
+    try {
+        const useFakeApi = ERUDIT.config.project.debug.fakeApi.repository;
+
+        if (useFakeApi) {
+            stars.value = 1337;
+            return;
+        }
+
+        const repository = ERUDIT.config.project?.repository;
+
+        if (!repository || repository.type !== 'github') {
+            return;
+        }
+
+        const parts = repository.name.split('/');
+        if (parts.length !== 2) return;
+
+        const [owner, repo] = parts;
+        const url = `https://api.github.com/repos/${owner}/${repo}`;
+
+        const ghData = await $fetch<any>(url, {
+            responseType: 'json',
+        });
+
+        if (typeof ghData.stargazers_count === 'number') {
+            stars.value = ghData.stargazers_count;
+        }
+    } finally {
+        pending.value = false;
+    }
+});
+</script>
+
+<template>
+    <div class="gap-small flex items-center">
+        <MyRuntimeIcon :svg="githubIcon" class="size-[16px]" />
+        <span>GitHub</span>
+        <TransitionFade>
+            <span
+                v-if="!pending && stars !== null"
+                class="gap-small flex items-center"
+            >
+                <MyRuntimeIcon :svg="starIcon" class="size-[16px]" />
+                <span>{{ starsFormatted }}</span>
+            </span>
+        </TransitionFade>
+    </div>
+</template>

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

@@ -1,15 +1,5 @@
 <template>
-    <div :class="$style.asideMinorPane">
+    <div class="absolute top-0 left-0 h-full w-full">
         <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/AsideMinorPlainHeader.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+defineProps<{ icon: MyIconName; title: string; count?: number }>();
+</script>
+
+<template>
+    <section
+        class="gap-normal p-normal border-border bg-bg-aside flex items-center
+            justify-center border-b"
+    >
+        <MyIcon :name="icon" class="text-text-muted text-[1.3em]" />
+        <span class="font-semibold">{{ formatText(title) }}</span>
+        <span
+            v-if="count"
+            class="text-invert rounded-full bg-neutral-600 px-[8px] py-[2.5px]
+                text-xs font-semibold dark:bg-neutral-300"
+            >{{ count }}</span
+        >
+    </section>
+</template>

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

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import Contribution from './Contribution.vue';
+import ButtonPaneImprove from './ButtonPaneImprove.vue';
+
+const { asideMinorState } = useAsideMinor();
+
+const contentType = computed(() => {
+    return (asideMinorState.value as AsideMinorContentContributions)
+        .contentType;
+});
+
+const topicPart = computed(() => {
+    return (asideMinorState.value as AsideMinorContentContributions).topicPart;
+});
+
+const contributions = computed(() => {
+    const state = asideMinorState.value as AsideMinorContentContributions;
+    return state.contributions
+        ?.slice()
+        .sort((a, b) => a.contributorId.localeCompare(b.contributorId));
+});
+
+const contentRelativePath = computed(() => {
+    return (asideMinorState.value as AsideMinorContentContributions)
+        .contentRelativePath;
+});
+
+const phrase = await usePhrases('contribution', 'no_contribution');
+</script>
+
+<template>
+    <AsideMinorPane>
+        <div class="flex h-full w-full flex-col">
+            <AsideMinorPlainHeader
+                icon="users"
+                :title="phrase.contribution"
+                :count="contributions?.length"
+            />
+            <ScrollHolder class="flex-1">
+                <div v-if="contributions" class="*:border-border *:border-b">
+                    <Contribution
+                        v-for="contribution of contributions"
+                        :contribution
+                    />
+                </div>
+                <AsidePlainMessage v-else :text="phrase.no_contribution" />
+            </ScrollHolder>
+            <ButtonPaneImprove :contentRelativePath :contentType :topicPart />
+        </div>
+    </AsideMinorPane>
+</template>

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

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import ButtonPaneContributions from './ButtonPaneContributions.vue';
+import ButtonPaneImprove from './ButtonPaneImprove.vue';
+import Toc from './Toc.vue';
+
+const { asideMinorState } = useAsideMinor();
+
+const contributions = computed(() => {
+    const state = asideMinorState.value as AsideMinorContentContributions;
+    return state.contributions?.sort((a, b) =>
+        a.contributorId.localeCompare(b.contributorId),
+    );
+});
+
+const toc = computed(() => {
+    return (asideMinorState.value as AsideMinorContentPage).toc;
+});
+
+const contentRelativePath = computed(() => {
+    return (asideMinorState.value as AsideMinorContentPage).contentRelativePath;
+});
+
+const phrase = await usePhrases('page');
+</script>
+
+<template>
+    <AsideMinorPane>
+        <div class="flex h-full w-full flex-col">
+            <AsideMinorPlainHeader :icon="ICONS.page" :title="phrase.page" />
+            <ScrollHolder class="flex-1">
+                <Toc :toc :key="contentRelativePath" />
+            </ScrollHolder>
+            <ButtonPaneContributions :contributions />
+            <ButtonPaneImprove :contentRelativePath contentType="page" />
+        </div>
+    </AsideMinorPane>
+</template>

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

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { topicParts } from '@erudit-js/core/content/topic';
+import ButtonPaneContributions from './ButtonPaneContributions.vue';
+import ButtonPaneImprove from './ButtonPaneImprove.vue';
+import Toc from './Toc.vue';
+import TopicPartButton from './TopicPartButton.vue';
+
+const { asideMinorState } = useAsideMinor();
+
+const topicPart = computed(() => {
+    return (asideMinorState.value as AsideMinorContentTopic).topicPart;
+});
+
+const availableTopicParts = computed(() => {
+    const state = asideMinorState.value as AsideMinorContentTopic;
+    return state.parts;
+});
+
+const shortContentId = computed(() => {
+    return (asideMinorState.value as AsideMinorContentTopic).shortContentId;
+});
+
+const contributions = computed(() => {
+    const state = asideMinorState.value as AsideMinorContentContributions;
+    return state.contributions
+        ?.slice()
+        .sort((a, b) => a.contributorId.localeCompare(b.contributorId));
+});
+
+const toc = computed(() => {
+    return (asideMinorState.value as AsideMinorContentTopic).toc;
+});
+
+const contentRelativePath = computed(() => {
+    return (asideMinorState.value as AsideMinorContentTopic)
+        .contentRelativePath;
+});
+</script>
+
+<template>
+    <AsideMinorPane>
+        <div class="flex h-full w-full flex-col">
+            <div class="border-border gap-normal flex justify-center border-b">
+                <TopicPartButton
+                    v-for="part of topicParts"
+                    :part
+                    :active="part === topicPart"
+                    :link="
+                        availableTopicParts.includes(part)
+                            ? PAGES.topic(part, shortContentId)
+                            : undefined
+                    "
+                />
+            </div>
+            <ScrollHolder class="flex-1">
+                <Toc :toc :key="contentRelativePath + '/' + topicPart" />
+            </ScrollHolder>
+            <ButtonPaneContributions :contributions />
+            <ButtonPaneImprove
+                :contentRelativePath
+                contentType="topic"
+                :topicPart
+            />
+        </div>
+    </AsideMinorPane>
+</template>

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

@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import type { ContentContribution } from '@erudit-js/core/content/contributions';
+
+import Contribution from './Contribution.vue';
+
+const { contributions } = defineProps<{
+    contributions?: ContentContribution[];
+}>();
+
+const buttonContributors = computed(() => {
+    if (!contributions) {
+        return [];
+    }
+
+    return [...contributions]
+        .sort(() => Math.random() - 0.5)
+        .slice(0, Math.min(4, contributions.length));
+});
+
+const moreContributionsNumber = computed(() => {
+    if (!contributions) {
+        return 0;
+    }
+
+    return contributions.length - buttonContributors.value.length;
+});
+
+const contributionsOpened = ref(false);
+const phrase = await usePhrases('contribution');
+</script>
+
+<template>
+    <template v-if="contributions">
+        <TransitionFade>
+            <div
+                v-if="contributionsOpened"
+                class="absolute top-0 left-0 z-10 h-full w-full"
+            >
+                <div
+                    class="bg-bg-aside flex h-full w-full flex-col justify-end"
+                >
+                    <div
+                        class="nice-scrollbars *:border-border overflow-auto
+                            *:border-t"
+                    >
+                        <Contribution
+                            v-for="contribution of contributions.sort((a, b) =>
+                                a.contributorId.localeCompare(b.contributorId),
+                            )"
+                            :contribution
+                        />
+                    </div>
+                    <div
+                        class="border-border flex items-center border-t py-1
+                            pr-0"
+                    >
+                        <div
+                            class="pl-normal gap-small flex flex-1 items-center
+                                text-sm font-semibold"
+                        >
+                            <span>{{ formatText(phrase.contribution) }}</span>
+                            <span
+                                class="text-invert rounded-full bg-neutral-600
+                                    px-[8px] py-[2.5px] text-xs font-semibold
+                                    dark:bg-neutral-300"
+                                >{{ contributions.length }}</span
+                            >
+                        </div>
+                        <button
+                            @click="contributionsOpened = false"
+                            class="text-text-muted hocus:text-text p-normal
+                                cursor-pointer transition-[color]"
+                        >
+                            <MyIcon
+                                name="plus"
+                                class="rotate-45 text-[24px] leading-none"
+                            />
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </TransitionFade>
+        <AsideListItem
+            @click="contributionsOpened = true"
+            class="group border-t border-b-0 py-1"
+        >
+            <template #main>
+                <SmartMedia
+                    v-for="buttonContributor of buttonContributors"
+                    :url="
+                        buttonContributor.avatarUrl
+                            ? withBaseUrl(buttonContributor.avatarUrl)
+                            : 'user'
+                    "
+                    :style="{
+                        '--mediaColor': stringColor(
+                            buttonContributor.contributorId,
+                        ),
+                    }"
+                    class="size-[38px] rounded-full"
+                />
+                <div
+                    v-if="moreContributionsNumber"
+                    class="border-border group-hocus:border-text-dimmed grid
+                        size-[38px] place-items-center rounded-full border-3
+                        border-dashed text-xs font-semibold
+                        transition-[border,color]"
+                >
+                    +{{ moreContributionsNumber }}
+                </div>
+            </template>
+        </AsideListItem>
+    </template>
+</template>

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

@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { TopicPart } from '@erudit-js/core/content/topic';
+import type { ContentType } from '@erudit-js/core/content/type';
+
+const { contentType, contentRelativePath, topicPart } = defineProps<{
+    contentRelativePath: string;
+    contentType: ContentType;
+    topicPart?: TopicPart;
+}>();
+
+const optionsOpened = ref(false);
+
+const howToImproveLink = ERUDIT.config.project.contributors?.howToImproveLink;
+const reportIssueLink = ERUDIT.config.project.contributors?.reportIssueLink;
+
+const editLink = computed(() => {
+    const prefix = ERUDIT.config.project.contributors?.editLinkPrefix;
+
+    if (prefix) {
+        const postfix = (() => {
+            switch (contentType) {
+                case 'book':
+                    return '/book.ts';
+                case 'page':
+                    return '/page.tsx';
+                case 'group':
+                    return '/group.ts';
+                case 'topic':
+                    return `/${topicPart!}.tsx`;
+            }
+        })();
+
+        return `${prefix}${contentRelativePath}${postfix}`;
+    }
+});
+
+const contributorsEnabled = ERUDIT.config.project.contributors?.enabled;
+const canImprove =
+    contributorsEnabled && (howToImproveLink || reportIssueLink || editLink);
+
+const phrase = await usePhrases(
+    'make_contribution',
+    'improve_material',
+    'how_to_improve',
+    'report_issue',
+    'edit_page',
+);
+</script>
+
+<template>
+    <template v-if="canImprove">
+        <TransitionFade>
+            <div
+                v-if="optionsOpened"
+                class="absolute top-0 left-0 z-10 h-full w-full"
+            >
+                <div
+                    class="bg-bg-aside flex h-full w-full flex-col justify-end"
+                >
+                    <div
+                        class="nice-scrollbars overflow-auto *:border-t
+                            *:border-b-0"
+                    >
+                        <AsideListItem
+                            v-if="howToImproveLink"
+                            icon="question-circle"
+                            :main="phrase.how_to_improve"
+                            :to="howToImproveLink"
+                        />
+                        <AsideListItem
+                            v-if="reportIssueLink"
+                            icon="bug"
+                            :main="phrase.report_issue"
+                            :to="reportIssueLink"
+                        />
+                        <AsideListItem
+                            v-if="editLink"
+                            icon="draw"
+                            :main="phrase.edit_page"
+                            :to="editLink"
+                        />
+                    </div>
+                    <div
+                        class="border-border flex items-center border-t py-1
+                            pr-0"
+                    >
+                        <div class="pl-normal flex-1 text-sm font-semibold">
+                            {{ formatText(phrase.improve_material) }}
+                        </div>
+                        <button
+                            @click="optionsOpened = false"
+                            class="text-text-muted hocus:text-text p-normal
+                                cursor-pointer transition-[color]"
+                        >
+                            <MyIcon
+                                name="plus"
+                                class="rotate-45 text-[24px] leading-none"
+                            />
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </TransitionFade>
+        <AsideListItem
+            :main="formatText(phrase.make_contribution)"
+            @click="optionsOpened = true"
+            class="group border-t border-b-0 py-1"
+        >
+            <template #icon>
+                <div
+                    class="border-border group-hocus:border-text-dimmed grid
+                        size-[40px] place-items-center rounded-full border-3
+                        border-dashed transition-[border]"
+                >
+                    <MyIcon name="draw" class="text-text-muted size-[56%]" />
+                </div>
+            </template>
+        </AsideListItem>
+    </template>
+</template>

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

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import type { ContentContribution } from '@erudit-js/core/content/contributions';
+
+defineProps<{ contribution: ContentContribution }>();
+</script>
+
+<template>
+    <EruditLink
+        :to="PAGES.contributor(contribution.contributorId)"
+        class="p-normal hocus:bg-bg-accent block bg-transparent
+            transition-[background]"
+    >
+        <div class="gap-normal flex items-center">
+            <SmartMedia
+                class="micro:size-[40px] size-[30px] shrink-0 rounded-full"
+                :style="{
+                    '--mediaColor': stringColor(contribution.contributorId),
+                }"
+                :url="
+                    contribution.avatarUrl
+                        ? withBaseUrl(contribution.avatarUrl)
+                        : 'user'
+                "
+            />
+            <span class="text-[0.9em]">{{
+                contribution.name || contribution.contributorId
+            }}</span>
+        </div>
+        <div
+            v-if="contribution.description"
+            class="pt-small text-text-muted text-sm"
+        >
+            {{ formatText(contribution.description) }}
+        </div>
+    </EruditLink>
+</template>