erudit 3.0.0-dev.17 → 3.0.0-dev.19

package/app/components/bitran/BitranContent.vue

@@ -1,91 +1,90 @@
-<script lang="ts" setup>
-import { Bitran, type BitranContent } from '@bitran-js/renderer-vue';
-import {
-    setEruditBitranRuntime,
-    type BitranContext,
-} from '@erudit-js/cog/schema';
-
-import eruditConfig from '#erudit/config';
-
-import RenderWrapper from './RenderWrapper.vue';
-
-const props = defineProps<{
-    content: BitranContent;
-    context: BitranContext;
-}>();
-
-/* Remove transpiler from Bitran Vue Component at all? It takes RootNode already... */
-const bitranTranspiler = await useBitranTranspiler();
-const bitranRenderers = await useBitranRenderers();
-
-[(bitranTranspiler.parser, bitranTranspiler.stringifier)].forEach((item) => {
-    setEruditBitranRuntime(item, {
-        eruditConfig,
-        insideInclude: false,
-        context: props.context,
-    });
-});
-
-const formatText = useFormatText();
-
-// onMounted(() => {
-//     watch(urlElement, () => {
-//         //console.log('Highlighting product:', urlElement.value);
-//     }, { immediate: true });
-// });
-
-const isDev = import.meta.dev;
-const isServer = import.meta.server;
-</script>
-
-<template>
-    <Bitran
-        :class="$style.eruditBitranContainer"
-        :transpiler="bitranTranspiler"
-        :renderers="bitranRenderers"
-        :content
-        :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>
+<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/ContributorAvatar.vue

@@ -1,45 +1,45 @@
-<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"
-        :style="{
-            ...(!hasAvatar
-                ? {
-                      backgroundImage: `url(${eruditAsset('user.svg')})`,
-                      backgroundColor: stringColor(props.contributorId),
-                      backgroundBlendMode: 'hard-light',
-                  }
-                : {}),
-        }"
-    >
-        <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);
-
-    > img {
-        display: block;
-    }
-}
-</style>
+<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"
+        :style="{
+            ...(!hasAvatar
+                ? {
+                      backgroundImage: `url(${eruditAsset('user.svg')})`,
+                      backgroundColor: stringColor(props.contributorId),
+                      backgroundBlendMode: 'hard-light',
+                  }
+                : {}),
+        }"
+    >
+        <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: var(--_avatarSize);
+    height: var(--_avatarSize);
+    border-radius: 50%;
+    overflow: hidden;
+    background: var(--border);
+
+    > img {
+        display: block;
+    }
+}
+</style>

package/app/components/contributor/ContributorListItem.vue

@@ -1,35 +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>
+<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/MainBitranContent.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import {
+    stringifyBitranLocation,
+    type BitranLocation,
+} from '@erudit-js/cog/schema';
+import type { RawBitranContent } from '@erudit/shared/bitran/content';
+
+const props = defineProps<{ location: BitranLocation }>();
+
+const nuxtApp = useNuxtApp();
+const stringLocation = stringifyBitranLocation(props.location);
+
+const payloadKey = `main-bitran-content`;
+const payloadValue: RawBitranContent =
+    (nuxtApp.static.data[payloadKey] ||=
+    nuxtApp.payload.data[payloadKey] ||=
+        {});
+
+const payloadStringLocation = (() => {
+    if (!payloadValue?.context?.location) {
+        return undefined;
+    }
+
+    return stringifyBitranLocation(payloadValue.context.location);
+})();
+
+if (stringLocation !== payloadStringLocation) {
+    const rawBitranContent = await $fetch<RawBitranContent>(
+        `/api/bitran/content/${stringLocation}`,
+        {
+            responseType: 'json',
+        },
+    );
+
+    Object.assign(payloadValue, rawBitranContent);
+}
+</script>
+
+<template>
+    <BitranContent :rawContent="payloadValue" />
+</template>

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

@@ -1,74 +1,67 @@
-<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)
-                .filter((item) => !item.hidden)"
-        >
-            <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);
-
-        &:hover {
-            color: var(--textMuted);
-        }
-    }
-
-    .sep {
-        flex-shrink: 0;
-        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">
+            <NuxtLink
+                :to="item.link"
+                :prefetch="false"
+                :class="$style.breadcrumbItem"
+            >
+                <MyIcon :name="item.icon" wrapper="span" />
+                {{ item.title }}
+            </NuxtLink>
+            <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>