erudit 3.0.0-dev.21 → 3.0.0-dev.23

package/app/components/main/MainSourcesUsage.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import type { ContentSourceUsageSet } from '@shared/content/reference';
+import ReferenceSource from '@app/components/main/content/reference/ReferenceSource.vue';
+
+const props = defineProps<{
+    usageSet?: ContentSourceUsageSet;
+}>();
+
+const count = computed(() => {
+    if (!props.usageSet) {
+        return 0;
+    }
+
+    return Object.keys(props.usageSet).length;
+});
+
+const phrase = await usePhrases('references', 'references_description');
+</script>
+
+<template>
+    <MainSection v-if="usageSet && count">
+        <MainSectionTitle
+            icon="link-external"
+            :title="phrase.references"
+            :count
+        />
+
+        <p :class="$style.description">{{ phrase.references_description }}</p>
+
+        <ul :class="$style.sources">
+            <li v-for="usageItem of usageSet">
+                <ReferenceSource :source="usageItem.source">
+                    <template #after>
+                        <MainSourceUsages :usages="usageItem.usages" />
+                    </template>
+                </ReferenceSource>
+            </li>
+        </ul>
+    </MainSection>
+</template>
+
+<style lang="scss" module>
+.description {
+    padding: var(--_pMainY) var(--_pMainX);
+}
+
+.sources {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    list-style: none;
+    padding: var(--_pMainY) var(--_pMainX);
+    margin: 0;
+
+    > li:not(:last-of-type) {
+        border-bottom: 1px solid var(--border);
+        padding-bottom: var(--gap);
+    }
+}
+</style>

package/app/components/main/MainToc.vue

@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { CONTENT_TYPE_ICON } from '@shared/icons';
+import type { ContentToc, ContentTocItem } from '@shared/content/toc';
+import QuickLinks from '../QuickLinks.vue';
+
+defineProps<{ toc: ContentToc }>();
+
+const pretty = useFormatText();
+const phrase = await usePhrases('toc', 'topics');
+
+function hasBottom(tocItem: ContentTocItem): boolean {
+    if (tocItem.type === 'topic') {
+        return tocItem.quickLinks.length > 0;
+    }
+
+    if (tocItem.type === 'book' || tocItem.type === 'group') {
+        return true;
+    }
+
+    return false;
+}
+</script>
+
+<template>
+    <MainSection>
+        <MainSectionTitle
+            icon="list-squared"
+            :title="phrase.toc"
+            :count="toc.length"
+        />
+        <ol :class="$style.tocItems">
+            <li v-for="tocItem of toc" :class="$style.tocItem">
+                <EruditLink :to="tocItem.link" :class="$style.tocItemHeading">
+                    <MyIcon
+                        :name="CONTENT_TYPE_ICON[tocItem.type]"
+                        :class="$style.tocItemIcon"
+                    />
+                    <h3>
+                        {{ pretty(tocItem.title) }}
+                    </h3>
+                    <MyIcon name="arrow-left" :class="$style.gotoArrow" />
+                </EruditLink>
+                <div
+                    v-if="tocItem.description"
+                    :class="$style.tocItemDescription"
+                >
+                    {{ pretty(tocItem.description) }}
+                </div>
+                <div v-if="hasBottom(tocItem)" :class="$style.tocItemBottom">
+                    <QuickLinks
+                        v-if="
+                            tocItem.type === 'topic' &&
+                            tocItem.quickLinks.length
+                        "
+                        :links="tocItem.quickLinks"
+                    />
+                    <Stats
+                        v-if="
+                            tocItem.type === 'book' || tocItem.type === 'group'
+                        "
+                        :stats="[
+                            {
+                                type: 'custom',
+                                icon: 'files',
+                                label: phrase.topics,
+                                count: tocItem.topicCount,
+                            },
+                            ...tocItem.stats,
+                        ]"
+                        :class="$style.tocItemStats"
+                    />
+                </div>
+            </li>
+        </ol>
+    </MainSection>
+</template>
+
+<style lang="scss" module>
+.tocItems {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gapBig);
+    list-style: none;
+    padding: var(--_pMainY) var(--_pMainX);
+    margin: 0;
+}
+
+.tocItem {
+    background: light-dark(#f7f7f7, #282828);
+    border-radius: 5px;
+    border: 1px solid var(--border);
+
+    .tocItemHeading {
+        display: flex;
+        align-items: center;
+        padding: var(--gap);
+        color: inherit;
+        text-decoration: none;
+
+        .tocItemIcon {
+            color: var(--textMuted);
+            margin-right: calc(var(--gap) - 2px);
+        }
+
+        .gotoArrow {
+            color: var(--textDimmed);
+            transform: scaleX(-1);
+            opacity: 0;
+            @include transition(color, opacity, transform);
+        }
+
+        &:hover {
+            .gotoArrow {
+                color: var(--text);
+                opacity: 1;
+                transform: scaleX(-1) translateX(-12px);
+            }
+        }
+    }
+
+    .tocItemDescription {
+        padding: 0 var(--gap);
+        padding-bottom: var(--gap);
+    }
+
+    .tocItemBottom {
+        padding: var(--gap);
+        padding-top: 0;
+
+        .tocItemStats {
+            gap: var(--gap);
+        }
+    }
+}
+</style>

package/app/components/main/content/ContentPopovers.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import type { ContentFlag } from '@erudit-js/cog/schema';
 
-import type { ContentGenericData } from '@shared/content/data/base';
+import type { ContentGeneric } from '@shared/content/data/base';
 
 import ContentPopover from './ContentPopover.vue';
 import type { PopoverData } from '@shared/popover';
 import { type MyIconName } from '#my-icons';
 
 const props = defineProps<{
-    generic: ContentGenericData /* TODO: customPopovers[] */;
+    generic: ContentGeneric /* TODO: customPopovers[] */;
 }>();
 
 const phrase = await usePhrases(
@@ -79,11 +79,18 @@ const hasPopovers = computed(() => {
 </template>
 
 <style lang="scss" module>
+@use '$/def/bp';
+
 .popovers {
     display: flex;
     flex-wrap: wrap;
     gap: var(--gap);
     padding: var(--_pMainY) var(--_pMainX);
+
+    @include bp.below('mobile') {
+        gap: var(--gapSmall);
+        justify-content: center;
+    }
 }
 
 .dependenciesList {

package/app/components/main/content/ContentReferences.vue

@@ -16,11 +16,7 @@ const phrase = await usePhrases('references', 'references_description');
 </script>
 
 <template>
-    <h2 :class="$style.heading">
-        <MyIcon name="link-external" :class="$style.icon" />
-        <span :class="$style.title">{{ phrase.references }}</span>
-        <span :class="$style.count">{{ count }}</span>
-    </h2>
+    <MainSectionTitle icon="link-external" :title="phrase.references" :count />
 
     <p :class="$style.description">{{ phrase.references_description }}</p>
 
@@ -30,28 +26,6 @@ const phrase = await usePhrases('references', 'references_description');
 </template>
 
 <style lang="scss" module>
-.heading {
-    display: flex;
-    align-items: center;
-    gap: var(--gap);
-    padding: var(--_pMainY) var(--_pMainX);
-
-    .icon {
-        font-size: 0.9em;
-        color: var(--textMuted);
-    }
-
-    .count {
-        position: relative;
-        top: 1px;
-        font-weight: 550;
-        font-size: 0.6em;
-        background: color-mix(in srgb, var(--textDimmed), transparent 65%);
-        border-radius: 20px;
-        padding: 2px 10px;
-    }
-}
-
 .description {
     padding: var(--_pMainY) var(--_pMainX);
 }

package/app/components/main/content/reference/ReferenceGroup.vue

@@ -9,10 +9,16 @@ defineProps<{ group: ContentReferenceGroup }>();
 
 <template>
     <div :class="$style.group">
-        <ReferenceSource :source="group.source" />
-        <div :class="$style.references">
-            <ReferenceItem v-for="reference of group.references" :reference />
-        </div>
+        <ReferenceSource :source="group.source">
+            <template #after>
+                <div :class="$style.references">
+                    <ReferenceItem
+                        v-for="reference of group.references"
+                        :reference
+                    />
+                </div>
+            </template>
+        </ReferenceSource>
     </div>
 </template>
 
@@ -29,10 +35,5 @@ defineProps<{ group: ContentReferenceGroup }>();
     display: flex;
     flex-direction: column;
     gap: var(--gap);
-    margin-left: 34px;
-
-    @include bp.below(mobile) {
-        margin-left: 0;
-    }
 }
 </style>

package/app/components/main/content/reference/ReferenceSource.vue

@@ -49,6 +49,7 @@ const phrase = await usePhrases('reference_source_featured');
             <div v-if="source.comment" :class="$style.comment">
                 {{ pretty(source.comment) }}
             </div>
+            <slot name="after"></slot>
         </div>
     </div>
 </template>

package/app/components/main/topic/MainTopic.vue

@@ -43,6 +43,11 @@ const phrase = await usePhrases('article', 'summary', 'practice');
         :description="topicData.generic?.description"
     />
 
+    <MainTopicQuickLinks
+        v-if="topicData.quickLinks.length"
+        :links="topicData.quickLinks"
+    />
+
     <ContentPopovers :generic="topicData.generic" />
 
     <MainCameo />
@@ -66,11 +71,3 @@ const phrase = await usePhrases('article', 'summary', 'practice');
         <AdsBannerBottom />
     </MainSection>
 </template>
-
-<style lang="scss" module>
-.foo {
-    position: relative;
-    width: 100%;
-    height: 300px;
-}
-</style>

package/app/components/main/topic/MainTopicQuickLinks.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { QuickLinks } from '@erudit/shared/quickLink';
+
+defineProps<{ links: QuickLinks }>();
+</script>
+
+<template>
+    <QuickLinks :links :class="$style.topicQuickLinks" />
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.topicQuickLinks {
+    padding: var(--_pMainY) var(--_pMainX);
+    --_erudit_quickLink_bg: var(--bgAside);
+
+    @include bp.below('mobile') {
+        > ul {
+            justify-content: center;
+        }
+    }
+}
+</style>

package/app/components/stats/Stats.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { Stats } from '@shared/stat';
+
+defineProps<{ stats: Stats }>();
+</script>
+
+<template>
+    <section :class="$style.stats">
+        <template v-for="stat of stats">
+            <StatsItem v-if="stat.type === 'custom'" v-bind:stat />
+            <StatsItemElement v-else v-bind:stat />
+        </template>
+    </section>
+</template>
+
+<style lang="scss" module>
+.stats {
+    display: flex;
+    flex-wrap: wrap;
+}
+</style>

package/app/components/stats/StatsGroupLike.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { Stats } from '@shared/stat';
+
+defineProps<{ stats: Stats }>();
+</script>
+
+<template>
+    <Stats :stats :class="$style.bookGroupStats" />
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.bookGroupStats {
+    gap: var(--gapBig);
+    padding: var(--_pMainY) var(--_pMainX);
+    font-size: 1.2em;
+
+    @include bp.below('mobile') {
+        justify-content: center;
+        gap: var(--gap);
+    }
+}
+</style>

package/app/components/stats/StatsItem.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { isMyIcon, type MyIconName } from '#my-icons';
+import type { CustomStat } from '@shared/stat';
+
+defineProps<{ stat: CustomStat }>();
+</script>
+
+<template>
+    <div :class="$style.statsItem" :title="stat.label">
+        <MyIcon v-if="isMyIcon(stat.icon)" :name="stat.icon as MyIconName" />
+        <MyRuntimeIcon v-else name="stats-item-icon" :svg="stat.icon" />
+        <span :class="$style.statsItemCount">{{ stat.count }}</span>
+    </div>
+</template>
+
+<style lang="scss" module>
+.statsItem {
+    display: flex;
+    gap: var(--gapSmall);
+    align-items: center;
+    color: var(--textMuted);
+    cursor: help;
+
+    .statsItemCount {
+        font-weight: 600;
+    }
+
+    [my-icon] {
+        font-size: 0.9em;
+        color: var(--textDimmed);
+    }
+}
+</style>

package/app/components/stats/StatsItemElement.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { ElementStat } from '@shared/stat';
+
+const props = defineProps<{ stat: ElementStat }>();
+
+const icon = await useBitranElementIcon(props.stat.elementName);
+const language = await useBitranElementLanguage(props.stat.elementName);
+const label = language('_element_title');
+</script>
+
+<template>
+    <StatsItem :stat="{ type: 'custom', icon, label, count: stat.count }" />
+</template>

package/app/composables/bitranLocation.ts

@@ -1,7 +1,6 @@
 import { locationFromPath, type BitranLocation } from '@erudit-js/cog/schema';
 
-export function useBitranLocation(): ComputedRef<BitranLocation | undefined> {
+export function useBitranLocation(): ComputedRef<BitranLocation> {
     const route = useRoute();
-
-    return computed(() => locationFromPath(route.path));
+    return computed(() => locationFromPath(route.path)!);
 }

package/app/composables/contentPage.ts

@@ -1,5 +1,6 @@
 import eruditConfig from '#erudit/config';
 
+import { normalizeText } from '@erudit/utils/normalize';
 import { createOgImageTags, defaultOgImage } from '@app/scripts/og';
 import type { ContentData } from '@shared/content/data';
 
@@ -100,18 +101,18 @@ export function useContentPage(contentData: Ref<ContentData>) {
                 contentData.value.generic?.description;
 
             if (customDescription) {
-                seo.description.value = customDescription
-                    .trim()
-                    .replace(/\n/g, ' ');
+                seo.description.value = normalizeText(customDescription);
                 return;
             }
 
             if (contentRoute.value!.type === 'topic') {
                 const phraseFunc =
                     phrase[`seo_${contentRoute.value!.topicPart}_description`];
-                seo.description.value = phraseFunc(
-                    contentData.value.generic?.seo?.title ||
-                        contentData.value.generic.title!,
+                seo.description.value = normalizeText(
+                    phraseFunc(
+                        contentData.value.generic?.seo?.title ||
+                            contentData.value.generic.title!,
+                    ),
                 );
                 return;
             }

package/app/composables/theme.ts

@@ -3,12 +3,32 @@ const themes = ['auto', 'light', 'dark'] as const;
 export type Theme = (typeof themes)[number];
 export type BinaryTheme = 'light' | 'dark';
 
+const _theme = ref<Theme>();
+
 export function useTheme() {
-    const theme = useState<Theme>('theme', () => {
-        return localStorage.getItem('theme') ?? ('auto' as any);
-    });
+    if (import.meta.server) {
+        throw new Error(`Calling 'useTheme' on server side is prohibited!`);
+    }
+
+    function setTheme(newTheme: Theme) {
+        localStorage.setItem('theme', newTheme);
+        _theme.value = newTheme;
+    }
+
+    const localStorageTheme = localStorage.getItem('theme');
+
+    if (themes.includes(localStorageTheme as any)) {
+        setTheme(localStorageTheme as Theme);
+    } else {
+        console.warn(
+            `Failed to get correct theme value from Local Storage!\nRetrieved "${localStorageTheme}"!`,
+        );
+        setTheme('auto');
+    }
+
+    const theme = computed<Theme>(() => _theme.value!);
 
-    const binaryTheme = computed(() => {
+    const binaryTheme = computed<BinaryTheme>(() => {
         return theme.value === 'auto'
             ? window.matchMedia('(prefers-color-scheme: dark)').matches
                 ? 'dark'
@@ -17,8 +37,9 @@ export function useTheme() {
     });
 
     const cycle = () => {
-        theme.value =
+        const newTheme =
             themes[(themes.indexOf(theme.value) + 1) % themes.length]!;
+        setTheme(newTheme);
     };
 
     return {

package/app/pages/book/[...bookId].vue

@@ -1,10 +1,5 @@
 <script lang="ts" setup>
-import type { ContentBookData } from '@erudit/shared/content/data/type/book';
-import type { MyIconName } from '#my-icons';
-
-import ContentBreadcrumb from '@app/components/main/content/ContentBreadcrumb.vue';
-import ContentDecoration from '@app/components/main/content/ContentDecoration.vue';
-import ContentPopovers from '@app/components/main/content/ContentPopovers.vue';
+import type { ContentBookData } from '@shared/content/data/type/book';
 
 const bookData = await useContentData<ContentBookData>();
 await useContentPage(bookData);
@@ -13,30 +8,10 @@ const phrase = await usePhrases('book');
 </script>
 
 <template>
-    <ContentDecoration
-        v-if="bookData.generic.decoration"
-        :decoration="bookData.generic.decoration"
+    <GroupLikePage
+        icon="outline/book"
+        :contentLabel="phrase.book"
+        :generic="bookData.generic"
+        :groupLike="bookData.groupLike"
     />
-
-    <ContentBreadcrumb :context="bookData.generic.context" />
-
-    <MainTitle
-        :title="
-            bookData.generic?.title ||
-            bookData.generic.contentId.split('/').pop()!
-        "
-        :icon="<MyIconName>'outline/book'"
-        :hint="phrase.book"
-    />
-
-    <MainDescription
-        v-if="bookData.generic?.description"
-        :description="bookData.generic?.description"
-    />
-
-    <ContentPopovers :generic="bookData.generic" />
-
-    <!-- Counters, fancy "GO LEARN" button and etc. -->
-
-    <div style="clear: both"></div>
 </template>

package/app/pages/group/[...groupId].vue

@@ -1,15 +1,5 @@
 <script lang="ts" setup>
-import { type BitranLocation } from '@erudit-js/cog/schema';
-import eruditConfig from '#erudit/config';
-
 import { type ContentGroupData } from '@shared/content/data/type/group';
-import { locationIcon } from '@erudit/shared/icons';
-
-import ContentBreadcrumb from '@app/components/main/content/ContentBreadcrumb.vue';
-import ContentDecoration from '@app/components/main/content/ContentDecoration.vue';
-import ContentPopovers from '@app/components/main/content/ContentPopovers.vue';
-
-const location = useBitranLocation() as Ref<BitranLocation>;
 
 const groupData = await useContentData<ContentGroupData>();
 await useContentPage(groupData);
@@ -18,36 +8,10 @@ const phrase = await usePhrases('group');
 </script>
 
 <template>
-    <ContentDecoration
-        v-if="groupData.generic.decoration"
-        :decoration="groupData.generic.decoration"
+    <GroupLikePage
+        icon="folder-open"
+        :contentLabel="phrase.group"
+        :generic="groupData.generic"
+        :groupLike="groupData.groupLike"
     />
-
-    <ContentBreadcrumb :context="groupData.generic.context" />
-
-    <MainTitle
-        :title="
-            groupData.generic?.title ||
-            groupData.generic.contentId.split('/').pop()!
-        "
-        :icon="locationIcon(location!)"
-        :hint="phrase.group"
-    />
-
-    <MainDescription
-        v-if="groupData.generic?.description"
-        :description="groupData.generic?.description"
-    />
-
-    <ContentPopovers :generic="groupData.generic" />
-
-    <MainCameo />
-
-    <div style="clear: both"></div>
-
-    <MainBitranContent :location />
-
-    <MainSection v-if="adsAllowed() && eruditConfig.ads?.bottom">
-        <AdsBannerBottom />
-    </MainSection>
 </template>