erudit 3.0.0-dev.2 → 3.0.0-dev.21

package/app/components/bitran/BitranContent.vue

@@ -1,63 +1,90 @@
-<script lang="ts" setup>
-import { Bitran, type BitranContent } from '@bitran-js/renderer-vue';
-
-import type { BitranContext } from '@shared/bitran/context';
-
-import RenderWrapper from './RenderWrapper.vue';
-
-const props = defineProps<{
-    content: BitranContent;
-    context: BitranContext;
-}>();
-
-const bitranTranspiler = await useBitranTranspiler();
-const bitranRenderers = await useBitranRenderers();
-
-const formatText = useFormatText();
-
-// onMounted(() => {
-//     watch(urlElement, () => {
-//         //console.log('Highlighting product:', urlElement.value);
-//     }, { immediate: true });
-// });
-</script>
-
-<template>
-    <Bitran
-        :class="$style.eruditBitranContainer"
-        :transpiler="bitranTranspiler"
-        :renderers="bitranRenderers"
-        :content
-        :editMode="false"
-        :formatText
-        :RenderWrapper
-    />
-</template>
-
-<style lang="scss" module>
-@use '@bitran-js/renderer-vue/scss/def' as bitranDef;
-
-.eruditBitranContainer {
-    padding: var(--_pMainY) var(--_pMainX);
-    padding-left: calc(var(--_pMainX) - #{bitranDef.$asideWidth});
-
-    // Setting up Bitran
-
-    --bitran_gap: var(--gap);
-    --bitran_gapSmall: var(--gapSmall);
-    --bitran_gapBig: var(--gapBig);
-    --bitran_gapBlocks: var(--gapBig);
-
-    --bitran_xPadding: var(--_pMainX);
-    --bitran_transitionSpeed: var(--transitionSpeed);
-    --bitran_transitionFunction: var(--transitionFunction);
-
-    --bitran_fontMain: 'Noto Sans', sans-serif;
-    --bitran_fontAlt: 'Noto Serif', serif;
-
-    --bitran_text: var(--text);
-    --bitran_textMuted: var(--textMuted);
-    --bitran_textDimmed: var(--textDimmed);
-    --bitran_textDisabled: var(--textDisabled);
-}
-</style>
+<script lang="ts" setup>
+import { Bitran, type BitranContent } from '@bitran-js/renderer-vue';
+import { setEruditBitranRuntime } from '@erudit-js/cog/schema';
+
+import eruditConfig from '#erudit/config';
+import type { RawBitranContent } from '@shared/bitran/content';
+import RenderWrapper from './RenderWrapper.vue';
+
+const props = defineProps<{
+    rawContent: RawBitranContent;
+}>();
+
+for (const route of props.rawContent.routes) {
+    prerenderRoutes([route]);
+}
+
+const bitranTranspiler = await useBitranTranspiler();
+const bitranRenderers = await useBitranRenderers();
+
+[bitranTranspiler.parser, bitranTranspiler.stringifier].forEach((item) => {
+    setEruditBitranRuntime(item, {
+        eruditConfig,
+        insideInclude: false,
+        context: props.rawContent.context,
+    });
+});
+
+const root = await bitranTranspiler.parser.parse(props.rawContent.biCode);
+const bitranContent: BitranContent = {
+    root,
+    renderDataStorage: props.rawContent.storage,
+};
+
+const formatText = useFormatText();
+
+const isDev = import.meta.dev;
+const isServer = import.meta.server;
+</script>
+
+<template>
+    <Bitran
+        :class="$style.eruditBitranContainer"
+        :transpiler="bitranTranspiler"
+        :renderers="bitranRenderers"
+        :content="bitranContent"
+        :editMode="false"
+        :formatText
+        :RenderWrapper
+        :isDev
+        :isServer
+        :language="eruditConfig.language"
+    />
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+:global(.bitran-component).eruditBitranContainer {
+    padding: var(--_pMainY) var(--_pMainX);
+    padding-left: calc(var(--_pMainX) - var(--_bitran_asideWidth));
+
+    // Setting up Bitran
+
+    --bitran_gap: var(--gap);
+    --bitran_gapSmall: var(--gapSmall);
+    --bitran_gapBig: var(--gapBig);
+    --bitran_gapBlocks: var(--gapBig);
+
+    --bitran_xPadding: var(--_pMainX);
+    --bitran_transitionSpeed: var(--transitionSpeed);
+    --bitran_transitionFunction: var(--transitionFunction);
+
+    --bitran_fontMain: 'Noto Sans', sans-serif;
+    --bitran_fontAlt: 'Noto Serif', serif;
+
+    --bitran_text: var(--text);
+    --bitran_textMuted: var(--textMuted);
+    --bitran_textDimmed: var(--textDimmed);
+    --bitran_textDisabled: var(--textDisabled);
+    --bitran_textDeep: var(--textDeep);
+
+    --bitran_colorBrand: var(--brand);
+
+    --bitran_colorBorder: var(--border);
+
+    @include bp.below('mobile') {
+        --bitran_gapBlocks: calc(22px);
+    }
+}
+</style>

package/app/components/bitran/RenderWrapper.vue

@@ -1,10 +1,10 @@
-<script lang="ts" setup>
-defineProps<{ mode: 'hybrid' | 'client' }>();
-</script>
-
-<template>
-    <slot v-if="mode !== 'client'"></slot>
-    <ClientOnly v-else>
-        <slot></slot>
-    </ClientOnly>
-</template>
+<script lang="ts" setup>
+defineProps<{ mode: 'hybrid' | 'client' }>();
+</script>
+
+<template>
+    <slot v-if="mode !== 'client'"></slot>
+    <ClientOnly v-else>
+        <slot></slot>
+    </ClientOnly>
+</template>

package/app/components/contributor/ContributorListItem.vue

@@ -1,35 +1,43 @@
-<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>
+<script lang="ts" setup>
+import { type ContentContributor } from '@shared/contributor';
+import { createContributorLink } from '@shared/link';
+
+defineProps<ContentContributor>();
+</script>
+
+<template>
+    <EruditLink
+        :prefetch="false"
+        :class="$style.contributor"
+        :to="createContributorLink(contributorId)"
+    >
+        <Avatar
+            icon="user"
+            :src="avatar ? `/contributors/${avatar}` : undefined"
+            :class="$style.avatar"
+            :color="stringColor(contributorId)"
+        />
+        <span>{{ displayName || contributorId }}</span>
+    </EruditLink>
+</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);
+    }
+
+    .avatar {
+        --avatarSize: 40px;
+    }
+}
+</style>

package/app/components/main/MainActionButton.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { MyIconName } from '#my-icons';
+
+defineProps<{
+    icon: MyIconName;
+    label: string;
+    link: string;
+}>();
+</script>
+
+<template>
+    <section :class="$style.actionButtonSection">
+        <EruditLink
+            :prefetch="false"
+            :to="link"
+            target="_blank"
+            :class="$style.actionButton"
+        >
+            <MyIcon :name="icon" :class="$style.actionButtonIcon" />
+            <span :class="$style.actionButtonLabel">{{ label }}</span>
+        </EruditLink>
+    </section>
+</template>
+
+<style lang="scss" module>
+.actionButtonSection {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: var(--_pMainY) var(--_pMainX);
+}
+
+.actionButton {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: white;
+    text-decoration: none;
+    font-weight: 600;
+    background: var(--brand);
+    border-radius: 5px;
+    padding: 12px 20px;
+    box-shadow: 0 0 14px 1px color-mix(in srgb, var(--brand), transparent 60%);
+
+    @include transition(background);
+
+    &:hover {
+        background: color-mix(in srgb, var(--brand), transparent 25%);
+    }
+}
+</style>

package/app/components/main/MainBitranContent.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import {
+    locationsEqual,
+    stringifyBitranLocation,
+    type BitranLocation,
+} from '@erudit-js/cog/schema';
+
+import type { RawBitranContent } from '@shared/bitran/content';
+
+type MainBitranPayload = RawBitranContent & {
+    mainLocation: BitranLocation;
+};
+
+const props = defineProps<{ location: BitranLocation }>();
+
+const nuxtApp = useNuxtApp();
+const stringLocation = stringifyBitranLocation(props.location);
+
+const payloadKey = `main-bitran-content`;
+const payloadValue: MainBitranPayload =
+    (nuxtApp.static.data[payloadKey] ||=
+    nuxtApp.payload.data[payloadKey] ||=
+        {});
+
+if (
+    !payloadValue.mainLocation ||
+    !locationsEqual(payloadValue.mainLocation, props.location)
+) {
+    const rawBitranContent = await $fetch<RawBitranContent>(
+        `/api/bitran/content/${stringLocation}`,
+        {
+            responseType: 'json',
+        },
+    );
+
+    Object.assign(payloadValue, rawBitranContent, {
+        mainLocation: props.location,
+    });
+}
+</script>
+
+<template>
+    <MainSection v-if="payloadValue.biCode" :class="$style.mainBitranContent">
+        <template v-if="$slots.header" v-slot:header>
+            <slot name="header"></slot>
+        </template>
+        <BitranContent :rawContent="payloadValue" />
+    </MainSection>
+</template>
+
+<style lang="scss" module>
+.mainBitranContent {
+    padding-top: var(--_pMainY);
+}
+</style>

package/app/components/main/{utils/Breadcrumb.vue → MainBreadcrumb.vue}

@@ -1,75 +1,63 @@
-<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>
+<script lang="ts" setup>
+import type { BreadcrumbItem } from '@erudit/shared/breadcrumb';
+
+defineProps<{ items: BreadcrumbItem[] }>();
+</script>
+
+<template>
+    <section v-if="items.length" :class="$style.breadcrumb">
+        <template v-for="item in items">
+            <EruditLink :to="item.link" x :class="$style.breadcrumbItem">
+                <MyIcon :name="item.icon" wrapper="span" />
+                {{ item.title }}
+            </EruditLink>
+            <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);
+
+        &:hover {
+            color: var(--textMuted);
+        }
+    }
+
+    .sep {
+        flex-shrink: 0;
+        position: relative;
+        top: 0.5px;
+    }
+}
+</style>

package/app/components/main/MainDescription.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+defineProps<{ description: string; html?: boolean }>();
+const pretty = useFormatText();
+</script>
+
+<template>
+    <section
+        v-if="html"
+        :class="$style.contentDescription"
+        v-html="description"
+    ></section>
+    <section v-else :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/MainSection.vue

@@ -0,0 +1,58 @@
+<template>
+    <section :class="$style.mainSection">
+        <div :class="$style.hr">
+            <div :class="$style.shade"></div>
+            <div v-if="$slots.header" :class="$style.header">
+                <slot name="header"></slot>
+            </div>
+        </div>
+        <div :class="$style.content">
+            <slot></slot>
+        </div>
+    </section>
+</template>
+
+<style lang="scss" module>
+.mainSection {
+    .hr {
+        position: relative;
+        border-bottom: 2px solid var(--border);
+        margin: var(--_pMainY) 0;
+
+        .shade {
+            position: absolute;
+            z-index: 0;
+            bottom: 0;
+            left: 0;
+            height: 50px;
+            width: 100%;
+            background: linear-gradient(to bottom, transparent, var(--bgAside));
+        }
+
+        .header {
+            position: relative;
+            z-index: 1;
+        }
+    }
+
+    &:nth-child(even of .mainSection) {
+        .hr {
+            transform: scaleY(-1);
+
+            .header {
+                transform: scaleY(-1);
+            }
+        }
+    }
+
+    .content {
+        position: relative;
+        z-index: 1;
+    }
+}
+
+:not(.mainSection):has(+ .mainSection) {
+    position: relative;
+    z-index: 1;
+}
+</style>

package/app/components/main/MainTitle.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { isMyIcon } from '#my-icons';
+
+defineProps<{ icon: string; title: string; hint?: string }>();
+</script>
+
+<template>
+    <section :class="$style.contentTitle">
+        <MyIcon
+            v-if="isMyIcon(icon)"
+            :name="icon as any"
+            :title="hint"
+            :class="{ [$style.hasHint]: !!hint }"
+        />
+        <MyRuntimeIcon
+            v-else
+            name="content-title-icon"
+            :svg="icon"
+            :title="hint"
+            :class="{ [$style.hasHint]: !!hint }"
+        />
+        <h1>{{ title }}</h1>
+    </section>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.contentTitle {
+    display: flex;
+    align-items: center;
+    gap: var(--gap);
+    padding: 0 var(--_pMainX);
+
+    @include bp.below('mobile') {
+        padding: var(--_pMainY) var(--_pMainX);
+    }
+
+    [my-icon] {
+        flex-shrink: 0;
+        font-size: 1.65em;
+        color: var(--textMuted);
+        position: relative;
+        top: 1px;
+    }
+
+    .hasHint {
+        cursor: help;
+    }
+
+    h1 {
+        font-size: 1.925em;
+    }
+
+    @include bp.below('mobile') {
+        padding-top: var(--gap);
+        flex-direction: column;
+
+        [my-icon] {
+            padding: 16px;
+            background: color-mix(
+                in srgb,
+                var(--textDisabled),
+                transparent 50%
+            );
+            color: var(--text);
+            border-radius: 50%;
+        }
+
+        h1 {
+            text-align: center;
+            font-size: 1.8em;
+        }
+    }
+}
+</style>