erudit 2.0.0-dev.7

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

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import type { TocItem } from '@erudit/shared/bitran/toc';
+
+const { tocItem } = defineProps<{ tocItem: TocItem; active: boolean }>();
+
+const productName = tocItem.productName;
+const productIcon = await useBitranProductIcon(productName);
+const productPhrase = await useBitranProductLanguage(productName);
+
+function tocItemClick(event: Event) {
+    navigateTo({
+        query: {
+            element: tocItem.id,
+        },
+    });
+    event.preventDefault();
+    event.stopPropagation();
+    return false;
+}
+</script>
+
+<template>
+    <TreeItem
+        :label="tocItem.title || productPhrase('_name')"
+        :level="tocItem.level"
+        :link="`?element=${tocItem.id}` /* Apply page hash! */"
+        :svg="productIcon"
+        :active
+        @click="tocItemClick"
+    />
+</template>

package/app/components/aside/utils/AsideOverlayPane.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+const props = defineProps<{ stick?: 'top' | 'bottom' }>();
+const style = useCssModule();
+
+const classes = computed(() => {
+    const _classes: string[] = [style.asideOverlayPane];
+
+    if (props.stick === 'bottom') _classes.push(style.stickBottom);
+
+    return _classes;
+});
+</script>
+
+<template>
+    <section :class="classes">
+        <slot></slot>
+    </section>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.asideOverlayPane {
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--bgAside);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+
+    &.stickBottom {
+        justify-content: end;
+    }
+}
+</style>

package/app/components/bitran/BitranContent.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import 'bitran/style.css';
+import type { BitranContent } from 'bitran';
+import { Bitran } from 'bitran/render';
+
+import type { BitranContext } from '@shared/bitran/context';
+
+const props = defineProps<{
+    content: BitranContent;
+    context: BitranContext;
+}>();
+
+const { bitranCore, bitranRender } = await useBitran(props.context);
+
+// onMounted(() => {
+//     watch(urlElement, () => {
+//         //console.log('Highlighting product:', urlElement.value);
+//     }, { immediate: true });
+// });
+</script>
+
+<template>
+    <Bitran
+        :bitranCore
+        :bitranRender
+        :content
+        :editMode="false"
+        :class="$style.eruditBitranContainer"
+    />
+</template>
+
+<style lang="scss" module>
+.eruditBitranContainer {
+    padding-top: var(--_pMainY);
+    padding-bottom: var(--_pMainY);
+
+    // Setting up Bitran
+
+    --bitran_gap: var(--gap);
+    --bitran_gapSmall: var(--gapSmall);
+    --bitran_gapBig: var(--gapBig);
+
+    --bitran_xPadding: var(--_pMainX);
+    --bitran_blocksGap: calc(2 * var(--_pMainY));
+    --bitran_transitionSpeed: var(--transitionSpeed);
+    --bitran_transitionFunction: var(--transitionFunction);
+    --bitran_fontSans: 'Noto Sans', sans-serif;
+    --bitran_fontSerif: 'Noto Serif', serif;
+
+    --bitran_text: var(--text);
+    --bitran_textMuted: var(--textMuted);
+    --bitran_textDimmed: var(--textDimmed);
+    --bitran_textDisabled: var(--textDisabled);
+}
+</style>
+
+<style lang="scss">
+@use '$/def/bp';
+@use 'bitran/public/scss/external' as bitranExternal;
+
+@include bp.below('mobile') {
+    @include bitranExternal.narrowMode;
+}
+</style>

package/app/components/bitran/RenderWrapper.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { RenderMode } from 'bitran/render';
+
+defineProps<{ renderMode: RenderMode }>();
+</script>
+
+<template>
+    <slot v-if="renderMode > RenderMode.Client"></slot>
+    <ClientOnly v-else>
+        <slot></slot>
+    </ClientOnly>
+</template>

package/app/components/contributor/ContributorAvatar.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+const props = defineProps<{ contributorId: string; avatar?: string }>();
+const baseUrlPath = useBaseUrlPath();
+
+const hasAvatar = computed(() => !!props.avatar);
+</script>
+
+<template>
+    <div
+        :class="[$style.contributorAvatar, !hasAvatar && $style.noAvatar]"
+        :style="{ '--_avatarBlendColor': stringColor(props.contributorId) }"
+    >
+        <img
+            v-if="hasAvatar"
+            :src="baseUrlPath(contributorAsset(avatar!))"
+            loading="lazy"
+        />
+    </div>
+</template>
+
+<style lang="scss" module>
+.contributorAvatar {
+    $avatarSize: 40px;
+    --_avatarBlendColor: var(--brand);
+
+    position: relative;
+    width: #{$avatarSize};
+    height: #{$avatarSize};
+    border-radius: 50%;
+    overflow: hidden;
+    background: var(--border);
+
+    &.noAvatar {
+        background-image: url('/_erudit-asset/user.svg');
+        background-color: var(--_avatarBlendColor);
+        background-blend-mode: hard-light;
+    }
+
+    > img {
+        display: block;
+    }
+}
+</style>

package/app/components/contributor/ContributorListItem.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { type ContentContributor } from '@shared/contributor';
+import { createContributorLink } from '@shared/link';
+
+defineProps<ContentContributor>();
+
+const Link = defineNuxtLink({ prefetch: false });
+</script>
+
+<template>
+    <Link
+        :class="$style.contributor"
+        :to="createContributorLink(contributorId)"
+    >
+        <ContributorAvatar :contributorId :avatar />
+        <span>{{ displayName || contributorId }}</span>
+    </Link>
+</template>
+
+<style lang="scss" module>
+.contributor {
+    display: flex;
+    align-items: center;
+    gap: var(--gap);
+    padding: var(--gap);
+    color: var(--text);
+    text-decoration: none;
+
+    @include transition(background);
+
+    &:hover {
+        background: var(--bgAccent);
+    }
+}
+</style>

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

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import type { TopicPart } from 'erudit-cog/schema';
+
+import eruditConfig from '#erudit/config';
+
+import { type ContentTopicData } from '@erudit/shared/content/data/type/topic';
+import { topicLocation } from '@app/scripts/aside/minor/topic';
+
+import ContentDecoration from '../utils/ContentDecoration.vue';
+import ContentTitle from '../utils/ContentTitle.vue';
+import ContentDescription from '../utils/ContentDescription.vue';
+import TopicPartSwitch from './TopicPartSwitch.vue';
+import Breadcrumb from '../utils/Breadcrumb.vue';
+import ContentPopovers from '../utils/ContentPopovers.vue';
+import ContentReferences from '../utils/ContentReferences.vue';
+import ContentSection from '../utils/ContentSection.vue';
+import { TOPIC_PART_ICON } from '@erudit/shared/icons';
+import { NO_ALIASES } from '@erudit/shared/bitran/alias';
+
+const location = useBitranLocation();
+const topicPart = computed(() => location.value?.type as TopicPart);
+
+const topicData = await useContentData<ContentTopicData>();
+await useContentPage(topicData);
+
+const phrase = await usePhrases('article', 'summary', 'practice');
+
+const content = await useBitranContent(location);
+
+onMounted(() => {
+    watchEffect(() => {
+        // Telling live toc that content is mounted
+        topicLocation.value = location.value;
+    });
+});
+</script>
+
+<template>
+    <ContentDecoration
+        v-if="topicData.generic.decoration"
+        :decoration="topicData.generic.decoration"
+    />
+
+    <Breadcrumb
+        v-if="topicData.generic.context?.length > 1"
+        :context="topicData.generic.context"
+    />
+
+    <ContentTitle
+        :title="
+            topicData.generic?.title ||
+            topicData.generic.contentId.split('/').pop()!
+        "
+        :icon="TOPIC_PART_ICON[location!.type as TopicPart]"
+        :hint="phrase[location!.type as TopicPart]"
+    />
+
+    <ContentDescription
+        v-if="topicData.generic?.description"
+        :description="topicData.generic?.description"
+    />
+
+    <ContentPopovers :generic="topicData.generic" />
+
+    <TopicPartSwitch
+        :partLinks="topicData.topicPartLinks"
+        :active="topicPart"
+    />
+
+    <div style="clear: both"></div>
+
+    <BitranContent :content :context="{ location, aliases: NO_ALIASES() }" />
+
+    <ContentSection v-if="topicData.generic.references">
+        <ContentReferences :references="topicData.generic.references" />
+    </ContentSection>
+
+    <AdsBottomBanner v-if="eruditConfig.ads?.bottomBlockId" />
+</template>

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

@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import { topicParts, type TopicPart } from 'erudit-cog/schema';
+
+import type { TopicPartLinks } from '@erudit/shared/content/data/type/topic';
+import { TOPIC_PART_ICON } from '@erudit/shared/icons';
+
+defineProps<{ partLinks: TopicPartLinks; active: TopicPart }>();
+
+const phrase = await usePhrases('article', 'summary', 'practice');
+const Link = defineNuxtLink({ prefetch: false });
+</script>
+
+<template>
+    <section :class="$style.topicPartSwitch">
+        <Link
+            v-for="topicPart of topicParts"
+            :to="partLinks[topicPart]"
+            :class="[
+                $style.partButton,
+                active === topicPart && $style.active,
+                !partLinks[topicPart] && $style.noLink,
+            ]"
+        >
+            <MyIcon :name="TOPIC_PART_ICON[topicPart]" />
+            <div :class="$style.label">{{ phrase[topicPart] }}</div>
+        </Link>
+    </section>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.topicPartSwitch {
+    --height: 50px;
+
+    display: flex;
+    align-items: end;
+    justify-content: center;
+    gap: var(--gapBig);
+    margin: var(--_pMainY) 0;
+    margin-top: var(--gapBig);
+
+    width: 100%;
+    height: var(--height);
+    background: linear-gradient(to bottom, transparent, var(--bgAside));
+    border-bottom: 2px solid var(--border);
+}
+
+.partButton {
+    position: relative;
+    top: 2px;
+
+    display: flex;
+    align-items: center;
+    gap: calc(var(--gap) / 1.3);
+    padding: 0 var(--gap);
+
+    height: var(--height);
+    background: var(--bgMain);
+    border: 2px solid var(--border);
+    border-bottom-color: transparent;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+
+    line-height: 0;
+    text-decoration: none;
+    font-weight: 550;
+    color: var(--textMuted);
+
+    @include transition(color, background, border-color);
+
+    [my-icon] {
+        font-size: 1.1em;
+    }
+
+    &:not(.active) {
+        background: var(--bgAside);
+        border-bottom-color: color-mix(
+            in srgb,
+            var(--border),
+            var(--bgMain) 50%
+        );
+
+        &.noLink {
+            color: color-mix(in srgb, var(--textDisabled), transparent 35%);
+            border-bottom-color: var(--border);
+            cursor: not-allowed;
+        }
+
+        &:not(.noLink):hover {
+            color: var(--text);
+            background: var(--bgMain);
+            border-bottom-color: transparent;
+        }
+    }
+
+    &.active {
+        color: var(--brand);
+    }
+}
+
+@include bp.below('mobile') {
+    .topicPartSwitch {
+        --height: 45px;
+        gap: var(--gap);
+    }
+
+    .partButton {
+        gap: var(--gapSmall);
+
+        &:not(.active) {
+            .label {
+                display: none;
+            }
+        }
+    }
+}
+</style>

package/app/components/main/utils/Breadcrumb.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+import type { Context } from '@erudit/shared/content/context';
+
+defineProps<{ context: Context }>();
+
+const Link = defineNuxtLink({ prefetch: false });
+
+function getIcon(contextIcon: string) {
+    return contextIcon as MyIconName;
+}
+</script>
+
+<template>
+    <section :class="$style.breadcrumb">
+        <template v-for="contextItem of context.slice(0, -1)">
+            <Link :to="contextItem.href" :class="$style.breadcrumbItem">
+                <MyIcon :name="getIcon(contextItem.icon)" wrapper="span" />
+                {{ contextItem.title }}
+            </Link>
+            <MyIcon :class="$style.sep" name="angle-right" />
+        </template>
+    </section>
+</template>
+
+<style lang="scss" module>
+.breadcrumb {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--gapSmall);
+    padding: var(--_pMainY) var(--_pMainX);
+    color: var(--textDimmed);
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 30px;
+        height: 100%;
+        background: linear-gradient(to right, transparent, var(--bgMain));
+    }
+
+    .breadcrumbItem {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        gap: var(--gapSmall);
+
+        line-height: 0;
+        font-weight: 450;
+        color: var(--textDimmed);
+        text-decoration: none;
+
+        @include transition(color);
+
+        // [my-icon]
+        // {
+        //     position: relative;
+        //     top: .6px;
+        // }
+
+        &:hover {
+            color: var(--textMuted);
+        }
+    }
+
+    .sep {
+        position: relative;
+        top: 0.5px;
+    }
+}
+</style>

package/app/components/main/utils/ContentDecoration.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+defineProps<{ decoration: string }>();
+const baseUrlPath = useBaseUrlPath();
+</script>
+
+<template>
+    <div :class="$style.contentDecoration">
+        <img :src="baseUrlPath(contentAsset(decoration))" />
+    </div>
+</template>
+
+<style lang="scss" module>
+.contentDecoration {
+    float: right;
+    padding: var(--gap) var(--_pMainX) var(--gapBig) var(--gap);
+
+    @media (max-width: 800px) {
+        display: none;
+    }
+
+    img {
+        display: block;
+        aspect-ratio: 1;
+        width: 100%;
+        max-width: 125px;
+        max-height: 125px;
+    }
+}
+</style>

package/app/components/main/utils/ContentDescription.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+defineProps<{ description: string; }>();
+const pretty = await useFormatText();
+</script>
+
+<template>
+    <section :class="$style.contentDescription">
+        {{ pretty(description) }}
+    </section>
+</template>
+
+<style lang="scss" module>
+.contentDescription
+{
+    padding: var(--_pMainY) var(--_pMainX);
+    font-weight: 500;
+    font-size: 1.1em;
+    color: var(--text);
+}
+</style>

package/app/components/main/utils/ContentFlag.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { computePosition, shift, autoUpdate, arrow } from '@floating-ui/dom';
+
+defineProps<{ icon: string; title: string; }>();
+</script>
+
+<template>
+    <div :class="$style.flag">Content flag</div>
+</template>
+
+<style lang="scss" module>
+.flag
+{
+    color: red;
+}
+</style>